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.

109 Comentarios

  1. Pingback: how to buy propecia finasteride online

  2. Pingback: how to buy cheap propecia

  3. Pingback: stromectol walmart

  4. Pingback: ivermectin for human

  5. Pingback: ivermectin 9mg

  6. Pingback: ivermectine mylan

  7. Pingback: order stromectol online

  8. Pingback: kamagra vs cialis

  9. Pingback: ivermectin 1%cream

  10. Pingback: ivermectin iv

  11. Pingback: ivermectin 3mg pill

  12. Pingback: ivermectin 2ml

  13. Pingback: stromectol kaufen

  14. Pingback: ivermectin australia over the counter

  15. Pingback: ivermectin 3

  16. Pingback: luckyland casino

  17. Pingback: india covid ivermectin

  18. Pingback: buy ivermectin for humans australia

  19. Pingback: stromectol pill for humans

  20. Pingback: ivermectin cream 5

  21. Pingback: ivermectin 5 mg

  22. Pingback: lasix 40mg to buy

  23. Pingback: furosemide 20 mg where to buy

  24. Pingback: use of ivermectin

  25. Pingback: stromectol generic name

  26. Pingback: cost of ivermectin cream

  27. Pingback: stromectol ingredients

  28. Pingback: stromectol ivermectin 3 mg

  29. Pingback: ivermectine kory

  30. Pingback: cost of ivermectin

  31. Pingback: cialis coupon

  32. Pingback: generic prescription viagra

  33. Pingback: cheap cialis india

  34. Pingback: online casino bonus

  35. Pingback: ivermectin for rosacea

  36. Pingback: ivermectin generic cream

  37. Pingback: cialis generic

  38. Pingback: ivermectin in canada

  39. Pingback: online gambling for real money

  40. Pingback: generic cialis

  41. Pingback: sildenafil actavis

  42. Pingback: side effects for prednisone

  43. Pingback: ivermectin for scabies

  44. Pingback: generic cialis usa

  45. Pingback: calis

  46. Pingback: what is tadalafil

  47. Pingback: molupiravir

  48. Pingback: soft cialis generic

  49. Pingback: cost for generic cialis

  50. Pingback: buy prednisone 20mg tablets

  51. Pingback: buy prednisone 1 mg

  52. Pingback: goodrx cialis

  53. Pingback: cialis drug

  54. Pingback: generic cialis

  55. Pingback: buy sildenafil pills from canada

  56. Pingback: price of sildenafil tablets

  57. Pingback: stromectol 3 mg

  58. Pingback: cialis genérico

  59. Pingback: buy generic cialis

  60. Pingback: sildenafil pills prescription

  61. Pingback: cialis buy cialis online

  62. Pingback: is there a generic cialis

  63. Pingback: cialis canada

  64. Pingback: stromectol ivermectin 3 mg

  65. Pingback: viagra pills online purchase

  66. Pingback: no prescription cialis

  67. Pingback: buy viagra uk tesco

  68. Pingback: buy ivermectin for humans uk

  69. Pingback: stromectol 3 mg

  70. Pingback: Online

  71. Pingback: cialis dosis

  72. Pingback: cialis dosis

  73. Pingback: provigil online pharmacy

  74. Pingback: tadalafil price walmart

  75. Pingback: tadal

  76. Pingback: prednisone 5mg brand

  77. Pingback: cialis2022gens

  78. Pingback: ivermectin cost

  79. Pingback: ignition poker issues

  80. Pingback: where can i buy ivermectin

  81. Pingback: ivermectin treatment for covid

  82. Pingback: ivermectin india

  83. Pingback: ivermectin tablets

  84. Pingback: ivermectin where to buy

  85. Pingback: buy ivermectin online

  86. Pingback: stromectol

  87. Pingback: ivermectin cream

  88. Pingback: ivermectin 250ml

  89. Pingback: ivermectin 4 mg

  90. Pingback: stromectol xr

  91. Pingback: stromectol online

  92. Pingback: ivermectin buy

  93. Pingback: stromectol tablete cena

  94. Pingback: frontline doctors ivermectin

  95. Pingback: dr. syed haider

  96. Pingback: imask protocol flccc

  97. Pingback: buy ventolin inhaler lloyds

  98. Pingback: buy stromectol online uk

  99. Pingback: ivermectin 15 mg

  100. Pingback: viagra online shop

  101. Pingback: viagra uk

  102. Pingback: generic cialis online

  103. Pingback: ivermectin syrup

  104. Pingback: ivermectin usa

  105. Pingback: online sex dating games

  106. Pingback: gay hiv dating albuquerque nm

  107. Pingback: keto meal plan free

  108. Atmotly
  109. 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.