Claves de diseño web

Claves de diseño web

Claves de diseño webUna 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 logo_blog_nominado_2015 (1)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.

Suscríbete a mi blog

Recibe en tu mail los nuevos contenidos.

110 Comentarios

  1. Pingback: Homepage

  2. Pingback: how to buy propecia finasteride online

  3. Pingback: how to buy cheap propecia

  4. Pingback: stromectol walmart

  5. Pingback: ivermectin for human

  6. Pingback: ivermectin 9mg

  7. Pingback: ivermectine mylan

  8. Pingback: order stromectol online

  9. Pingback: kamagra vs cialis

  10. Pingback: ivermectin 1%cream

  11. Pingback: ivermectin iv

  12. Pingback: ivermectin 3mg pill

  13. Pingback: ivermectin 2ml

  14. Pingback: stromectol kaufen

  15. Pingback: ivermectin australia over the counter

  16. Pingback: ivermectin 3

  17. Pingback: luckyland casino

  18. Pingback: india covid ivermectin

  19. Pingback: buy ivermectin for humans australia

  20. Pingback: stromectol pill for humans

  21. Pingback: ivermectin cream 5

  22. Pingback: ivermectin 5 mg

  23. Pingback: lasix 40mg to buy

  24. Pingback: furosemide 20 mg where to buy

  25. Pingback: use of ivermectin

  26. Pingback: stromectol generic name

  27. Pingback: cost of ivermectin cream

  28. Pingback: stromectol ingredients

  29. Pingback: stromectol ivermectin 3 mg

  30. Pingback: ivermectine kory

  31. Pingback: cost of ivermectin

  32. Pingback: cialis coupon

  33. Pingback: generic prescription viagra

  34. Pingback: cheap cialis india

  35. Pingback: online casino bonus

  36. Pingback: ivermectin for rosacea

  37. Pingback: ivermectin generic cream

  38. Pingback: cialis generic

  39. Pingback: ivermectin in canada

  40. Pingback: online gambling for real money

  41. Pingback: generic cialis

  42. Pingback: sildenafil actavis

  43. Pingback: side effects for prednisone

  44. Pingback: ivermectin for scabies

  45. Pingback: generic cialis usa

  46. Pingback: calis

  47. Pingback: what is tadalafil

  48. Pingback: molupiravir

  49. Pingback: soft cialis generic

  50. Pingback: cost for generic cialis

  51. Pingback: buy prednisone 20mg tablets

  52. Pingback: buy prednisone 1 mg

  53. Pingback: goodrx cialis

  54. Pingback: cialis drug

  55. Pingback: generic cialis

  56. Pingback: buy sildenafil pills from canada

  57. Pingback: price of sildenafil tablets

  58. Pingback: stromectol 3 mg

  59. Pingback: cialis genérico

  60. Pingback: buy generic cialis

  61. Pingback: sildenafil pills prescription

  62. Pingback: cialis buy cialis online

  63. Pingback: is there a generic cialis

  64. Pingback: cialis canada

  65. Pingback: stromectol ivermectin 3 mg

  66. Pingback: viagra pills online purchase

  67. Pingback: no prescription cialis

  68. Pingback: buy viagra uk tesco

  69. Pingback: buy ivermectin for humans uk

  70. Pingback: stromectol 3 mg

  71. Pingback: Online

  72. Pingback: cialis dosis

  73. Pingback: cialis dosis

  74. Pingback: provigil online pharmacy

  75. Pingback: tadalafil price walmart

  76. Pingback: tadal

  77. Pingback: prednisone 5mg brand

  78. Pingback: cialis2022gens

  79. Pingback: ivermectin cost

  80. Pingback: ignition poker issues

  81. Pingback: where can i buy ivermectin

  82. Pingback: ivermectin treatment for covid

  83. Pingback: ivermectin india

  84. Pingback: ivermectin tablets

  85. Pingback: ivermectin where to buy

  86. Pingback: buy ivermectin online

  87. Pingback: stromectol

  88. Pingback: ivermectin cream

  89. Pingback: ivermectin 250ml

  90. Pingback: ivermectin 4 mg

  91. Pingback: stromectol xr

  92. Pingback: stromectol online

  93. Pingback: ivermectin buy

  94. Pingback: stromectol tablete cena

  95. Pingback: frontline doctors ivermectin

  96. Pingback: dr. syed haider

  97. Pingback: imask protocol flccc

  98. Pingback: buy ventolin inhaler lloyds

  99. Pingback: buy stromectol online uk

  100. Pingback: ivermectin 15 mg

  101. Pingback: viagra online shop

  102. Pingback: viagra uk

  103. Pingback: generic cialis online

  104. Pingback: ivermectin syrup

  105. Pingback: ivermectin usa

  106. Pingback: online sex dating games

  107. Pingback: gay hiv dating albuquerque nm

  108. Pingback: keto meal plan free

  109. Atmotly
  110. http://bit.ly

    May I simply say what a relief to discover somebody that really knows what they’re discussing over
    the internet. You definitely realize how to bring an issue to light and make it important.
    More people should check this out and understand this side of the story.

    It’s surprising you’re not more popular since you certainly have the gift.
    asmr 0mniartist

    Responder

Dejar un comentario

Tu dirección de correo electrónico no será publicada.

Time limit is exhausted. Please reload CAPTCHA.