Claves de diseño web

LuzHernandez 14 marzo, 2016 110 Comentarios

Una web es eficiente en la medida que consigue los objetivos para los que fue creada, por lo que no hay normas generales de diseño web. No obstante, la experiencia demuestra que prácticas son más exitosas y que son recomendables como claves de diseño web.

Dado que el punto de partida como claves de diseño web, es siempre qué queremos conseguir, las recomendaciones que a continuación indico son para webs que tienen un objetivo de performance y donde por tanto se persigue una acción de conversión.

En términos de USABILIDAD hay cinco dimensiones dentro de las claves de diseño web: comprensión global, clasificación de la información, call to action, mecanismos de ayuda y aspectos estéticos. Veamos cada una de las claves de diseño web.

COMPRENSIÓN GLOBAL

Cada página debe tener poca información y tener foco asegurando que la información que incluimos:

• Cumple un objetivo de compañía.
• Explicita el beneficio que le reporta al cliente.
• Incluye información que da credibilidad a dicho beneficio.
• Invita a una ruta de navegación.
• Busca un único punto de atención enfocando al usuario en lo que es relevante.

Les invito a visitar la web de Claranet que pivota claramente sobre drivers de contratación, detalla los beneficios para el cliente y los avala con pruebas, todo ello con llamadas a la acción claras y visibles. Otro buen ejemplo que cumple las claves de diseño web es Imagine, la nueva banca online de la Caixa donde el claim es la ventaja competitiva: ‘’El primer banco en el que todo empieza y acaba en tu móvil’’.

La Home Page es clave porque ahí atrapamos al cliente. El primer pantallazo cuando entramos a una Home Page debería incluir, sin generalizar porque como he dicho al principio no hay reglas, una frase relevante para el cliente (por ejemplo, el beneficio que nuestro producto le reporta), un Reason to Believe o prueba que hace creíble la promesa y una llamada a la acción clara. ING Direct es un buen ejemplo de una Home Page de una web de performance.

Si bien el scroll es necesario, cada vez son más cortos, siendo recomendable organizar la información. Les invito a visitar la web de Tesco.

CLASIFICACIÓN INFORMACIÓN

Menú

El Menú es algo más que un simple organizador de la información y debe cumplir las claves de diseño web. Está  en un lugar destacado por lo que debemos aprovechar para que nos ayude a cumplir determinados objetivos.

Primero facilitar la ruta de navegación. Hay que evitar demasiados niveles con sub-apartados. La ruta debe ser directa y corta. Si no, hay mayores probabilidades que el cliente abandone.

Segundo, en una web, cualquier palabra que escribamos, mejor si da valor al cliente y contenido a nuestro mensaje. Tener un texto que dice ‘’Who we are’’ or ‘’What we do’’ en un espacio con tanta visibilidad como un menú, es desperdiciar un espacio valiosísimo. Por ello, también debe servir para mostrar a la gente lo que hacemos. La nomenclatura ‘’Qué hacemos’’ dice poco; es mejor, si por ejemplo somos un constructor que busca solares, construye y diseña viviendas, utilizar las descripciones del menú para hacer referencia a nuestra actividad y tener 3 apartados con la siguiente nomenclatura: ‘’Búsqueda terrenos’’, ‘’Construcción’’, ‘’Arquitectura y Diseño’’. Ayudará a asociarnos con eso. Esto es clave sobre todo en negocios o marcas nuevas ya que permite visualizar de una manera rápida la actividad y así evitamos tasa de rebote.

Además, debe ser reflejo de lo que el usuario busca utilizando las mismas palabras que utiliza para navegar. Por ejemplo, si soy una constructora y una de las palabras con mayor nº  de búsquedas es ‘’planos’’  quizás en mi menú debo tener un apartado específico de planos.

También puede servir para transmitir nuestra ventaja competitiva o en lo que destacamos. Por ejemplo, en la Home Page de El Corte Inglés, en la barra de menú sólo hay un apartado ‘’Click & Collect Gratis’’, porque eso es lo que les diferencia gracias a las múltiples tiendas que tienen que le sirven como centros de recogida. Otro ejemplo muy bueno es el Hotel Mandarín donde un apartado del menú es ”Nuestros seguidores más famosos”

Columnas

Hay webs con cristalera a la derecha en formato de columna. Bajo mi perspectiva, utilizar este recurso es válido sólo para reforzar el mensaje de la izquierda, no para añadir un nuevo mensaje. El contenido debe ser complementario y visualizado al mismo tiempo que se invita al usuario a tomar algún tipo de acción. Este tipo de recursos es utilizado de manera eficaz, por marcas con transacciones elevadas o que exigen una alta confianza en el proveedor del servicio y el contenido de la cristalera ayuda a que el usuario tome la decisión y ejecute la acción a la que se invita al usuario en la parte izquierda de la web. Buen ejemplo es la web de AXA. Ejemplos de información a incluir son opinión de usuarios, nº de teléfono, invitación a descargarse una demo, sellos de confianza….También son válidas para incluir promociones.

Página de gracias

La página final de ‘’Gracias’’ es la que más desea el usuario por miedo a que en el proceso, se haya producido algún tipo de error. Su nivel de atención a dicha página es muy alto aunque dura poco por lo que es otra de las claves de diseño web. Por ello, hay que aprovechar para dar pocos mensajes pero relevantes. Por ejemplo, si tu objetivo es fidelizar al cliente, invítalo a que se una a tu club o se suscriba a tu newsletter.

Faldón inferior

No debe ser el espacio de ‘’otros’’ sino seguir una lógica. Hay varios modelos:

• Un índice de la web como es el caso del BBVA
• Un repositorio de contenidos que trabajan la credibilidad y la confianza en nuestra marca como medios de pago o asociaciones a las que pertenecemos. Sirva Interflora como ejemplo.
• Contenidos legales o ‘’políticamente recomendables’’: términos de uso, política de privacidad, protección de la marca… como hace Red Bull.

Hay dos errores que se dan con mayor frecuencia de la deseada y que debemos evitar: que sea un espacio donde poner lo que no sabemos dónde ubicar o incluir la siguiente información que debería ir en un lugar predominante si se dan las circunstancias que a continuación detallo:

• Las RRSS si la prescripción es clave en nuestro negocio.
• Los sellos de confianza, tipo medios de pago que admitimos, asociaciones a las que pertenecemos…., si somos una compañía nueva donde la confianza es clave.

CALL TO ACTION

Hay varias reglas dentro de las claves de diseño web, que ayudan a que el usuario genere un clic y active la acción:

• Mensajes y colores que destaquen sobre el resto.
• Acompañar la llamada a la acción del beneficio y el RTB. Sirva como ejemplo la web Imagine bank de la Caixa donde antes de la llamada a la acción indican el beneficio: Sin comisiones –> Hazte cliente. Saca dinero gratis –> Buscador de cajeros. La web de Claranet también es un buen ejemplo.

Es recomendable que haya sólo una llamada a la acción por página alineada con nuestro objetivo principal. No siempre es fácil porque exige foco pero es mucho más eficaz.

Puede haber varios call to action si se dan las siguientes circunstancias:

• Alternativas complementarias que no compiten entre ellas y afines a necesidades diferentes. Es el ejemplo de Zara Home o compañías con un portfolio amplio como textil y supermercados online.
• Representan diferentes opciones que el cliente tiene que elegir sin puntos de fuga posibles. Es el ejemplo de Imagine Bank.

En ambos casos el diseño de los call to action es simétrico y todos tienen el mismo nivel de importancia.

• Un call to action principal y otro complementario (tipo ‘’más información’’) para reforzar la decisión de clicar sobre el call to action principal. En este caso, la tipografía del call to action secundario es diferente a la del principal.
• Un 2º o 3º si es un lead.

MECANISMOS DE AYUDA

Los mecanismos de ayuda son clave para la conversión y los veremos más adelante en los apartados ‘’Facilitadores’’ y ‘’Clarificadores” dentro del epígrafe ‘’Contenidos’’.

ASPECTOS ESTÉTICOS

El rol de la estética es múltiple:

• Ayudar a la comprensión del mensaje.
• Ser coherente con la imagen de marca.
• Impulsar el objetivo de la web.
• Fomentar la atracción visual.

Todos son importantes y el diseño elegido debe impactar positivamente en los 4. Les voy a dar varios trucos que ayudarán a ello:

• Orden y estructura. La web debe lucir ordenada.
• Cuidado con los carruseles. A veces son la solución cuando nos cuesta elegir 1 opción, lo que es un error. Seamos valientes.
• Color: trabajar el contraste.
• Imágenes: en general, mejor grandes que pequeñas. Siempre deben añadir valor; si no, pueden distraer.
• Iconos: no abusar de ellos. Suelen ser fríos, algunos no se entienden y como rompen la estética, a veces atraen demasiado la atracción dificultando más que aportando.

 

Vayamos ahora al epígrafe referente a CONTENIDOS y sus claves de diseño web.

Más allá del objetivo que perseguimos o nuestra tipología de negocio que ya nos marca determinadas reglas, toda web debería incluir 6 tipos de contenidos para cumplir las claves de diseño web: beneficio y reason to believe (RTB), credibilidad y confianza, impulsores, facilitadores, clarificadores y posicionamiento SEO.

BENEFICIO Y REASON TO BELIEVE

Dar una razón al usuario para ejecutar la acción que le propongo (comprar, dejar sus datos….). Los call to action deben ir siempre acompañados de una mención explícita del beneficio le va a reportar dicha acción y la prueba que hace creíble dicho beneficio (RTB). Booking, por ejemplo, lo hace muy bien indicando: ‘’Más de 3.2 millones de personas en España tienen una cuenta en Booking.com’’ y a continuación muestran una ‘’Cronología’’ automática con la lista de clientes que en ese momento acaban de reservar con mención explícita del hotel donde lo han hecho. Claranet también es un buen ejemplo.

CREDIBILIDAD Y CONFIANZA

Son los quitamiedos, clave sobre todo en empresas de nueva creación o baja conocimiento o mercados donde la transacción exige compartir datos personales (ejemplo, sector financiero). Algunas alternativas a incorporar son:

• Opiniones usuarios, premios obtenidos, sellos de calidad oficiales, medios de pago conocidos. ING por ejemplo, muestra datos de cómo los valoran los clientes o Tesco los premios otorgados a sus vinos.
• Solicitud de password,
• Incluir que hacemos, quienes somos en el menú.
• No sorpresas de última hora por ejemplo, evitando que los gastos de envío ‘’aparezcan por sorpresa’’ o subir el precio al final de la tarificación.
• Facilitar el acceso a información relacionada con el servicio: información de contacto, forma de comprar, condiciones generales, devoluciones y transporte, etc.

IMPULSORES

Activan la acción del cliente como promociones, gastos de envío ya incluidos, reembolso permitido…. Interflora es un buen ejemplo.

FACILITADORES

Aquéllos que ayudan al usuario cuando lo necesitan. Clave para transacciones complicadas. Opciones: teléfono, clic to call… Es un recurso que las empresas de seguros y de viajes utilizan con frecuencia.

CLARIFICADORES

Tranquilizar al usuario que ‘’va por el buen camino’’, mostrando la etapa en la que está y respondiendo a sus actuaciones dándole feedback. Ejemplo: respuesta de error al rellenar un formulario, confirmación que su operación ha sido correcta o que sus datos han sido recibidos. Esto es importante en webs con formularios, registros o transacciones.

POSICIONAMIENTO SEO

Antes de diseñar la web y sus contenidos hay que definir la estrategia SEO y SEM que nos posicione en buscadores y en consecuencia las keywords clave para adaptar contenidos a dicha estrategia. Por ello, es altamente recomendable que la agencia que diseñe la web sea también experta en SEO.Conseguir un buen posicionamiento en buscadores es clave por lo que los contenidos deben adaptarse a la estrategia SEO y SEM.

 

Recuerden, una web está al servicio de un objetivo de negocio. La mejor manera de validar si se cumple es definiendo los kpi’s que marcan su cumplimiento y midiéndoles de manera continua y con test periódicos. No hay mejor manera de confirmar la validez de un diseño.