8 errores típicos de user experience en diseño web

En el proceso de desarrollo de un proyecto hay que trabajar con cuidado cada parte involucrada en él. Desde el diseño original del producto software hay que combinar los requisitos funcionales con el diseño de mockups, para que luego los creativos diseñen la web con unos componentes totalmente orientados a una buena user experience. He visto diseños geniales muy trabajados y muy finos que son difícilmente llevados a la web o al móvil, por lo que los diseñadores deberían de pintar siempre trabajando en los componentes que tienen una web o una app.

La experiencia de usuario se define como “el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo”.

Es un punto clave en el desarrollo de un producto y siempre se busca aspectos relativos a causar emociones, sentimientos, transmisión de marca y confiabilidad en el producto, por lo que el aspecto visual de trabajarse con mucho mimo para ofrecer una experiencia de calidad. Los errores en los diseños que no han pasado una buena auditoria de ux producen perdida de efectividad y perdida de potenciales clientes. Por eso vamos a ver un listado con los puntos principales a tener en cuenta a la hora de abordar un diseño

1. Diseño Desequilibrado

Los usuarios caen en tu página web buscando información, pero si esa información no está bien estructurada y organizada, aumentará el porcentaje de rebote. Para evitarlo se debe estructurar la página de tal manera que un usuario pueda identificar rápidamente las partes importantes que componen la web.

Por ello, se recomienda el empleo de un sistema de grid (por ejemplo el Bootstrap System Grid) el cual pinta guias verticales y horizontales que ayudan a colocar los elementos y equilibrar la página. No soy ningún experto en temas de diseño, pero dos reglas básicas que se deben de cumplir son la regla de los 2/3 y mantener los elementos en proporción aurea.

(a+b) : a = a:b.

2. Navegación complicada

Si al entrar en tu web el usuario es incapaz de encontrar las distintas secciones por la que puede navegar decidirá abandonar, por lo que debemos de tratar con cuidado los menús. Al hacer click en un elemento del menu, el usuario espera que se le lleve a la sección relativa, por lo que en general se intenta evitar los menus despegables lo máximo posible.

En general algunos trucos para el diseño de menús es que los usuaris esperan que la navegación horizontal esté disponible en la parte superior de la página, y que la navegación vertical esté situado a la izquierda.

También mostrar demasiados elementos en estos menús puede resultar algo agobiante para el usuario, lo mejor es organizarlo en distintas categorías. Este tipo de problemas ocurre en general en e-commerce que ofrecen gran cantidad tipo de productos. Para mi personalmente un buen ejemplo de navegación puede ser sarenza.es

3. Falta de consistencia

Un diseño tiene que ser consiente en su esquema de colores y componentes. Cuando una página dentro de la web difiere del diseño, confunde totalmente a los usuarios. Por ello se toman las siguientes recomendaciones

  • Usar el mismo esquema de color en las páginas
  • Asegurar que el espaciado vertical y horizontal entre los elementos es idéntico en todos las páginas
  • El tamaño de los headings es consistente en toda la web
  • No cambies la posición de la navegación en distintas secciones
  • Sigue el mismo formato de enlaces
  • El juego de iconos siguen el mismo estilo (Fontawesome, Ionicons)

Se recomienda el diseño de una guía de estilos que sea accesible por todo los miembros del equipo que muestre las fuentes utilizadas, las gamas de colores y el estilo de componentes genéricos. Estas guías de estilos representan y generan una buena imágen de marca representando los colores de la marca, centrandose en el objetivo de la web y generando un diseño buen balanceado y consistente.

Ejemplo de guía de estilos: https://brand.frontify.com/d/qAiubNBytHKf/style-guide

5. Resoluciones no trabajadas

Vivimos un momento en el diseño web en el que adaptarse a todos los dispositivos es esencial por lo que hay que asegurarnos que todas las resoluciones se ven correctamente. Los usuarios con resoluciones mas pequeña quizás vean menos contenido en la carga teniendo que utilizar la barra de scroll.

Por ello se recomienda poner las secciones mas importante de la página en la parte superior, para que el usuario no tenga que realizar scroll. También se recomienda dividir el texto en columnas para que sea sencillo de usar. Deberías comprobar que resoluciones como 800×600, 1024×768 o 1280×1024 se ven correctamente.

Para ello no dejes de utilizar el inspector del navegador para adaptar la web a distintos pixeles y dispositivos concretos. Las medidas del iPhone y del iPad se suelen trabajar para que se vea el diseño bien pulido y orientado al user experience.

6. Falta de Espacio Libre

Por favor, dale aire a los componentes de tu web. Tu web puede ser muy rica en contenido pero el contenido está todo apelotonado sin dejar suficiente espacio entre bloques de texto e imágenes. Este tipo de errores se comete en los periódicos digitales donde se bombardea al usuario con gran volumen de contenido.

El objetivo de un buen diseño es el de mejorar la legibilidad de la lectura y sobre todo generar un sentimiento de elegancia y libertad.

7. Formularios Complicados

Keep it Easy! Un formulario de registro debería de tener pocos campos para incrementar la tasa de conversión. Un formulario con numerosos campos y tedioso puede provocar que el usuario termine con la frustración y cerrar la ventana.

Por lo tanto, mantén tus formularios lo mas simple posible, ya que no siempre podemos prescindir de todos los campos, y recuerda que siempre puedes ir solicitando datos adicionales del usuario. ¿Cuantos datos tiene Facebook acerca de ti? Mira su formulario de resgistro:

8. Datos de contacto pocos visibles

Especialmente en e-commerce es critico tener la información de contacto disponible en cada página. Este punto ya depende más del tipo de negocio, pero es importante tener varias fuentes de contacto y tener una buena atención al cliente. Mantén siempre visible esta información de contacto, pestañas de chat, formularios de click2call.

Además se recomienda incluir siempre que sea posible un formulario de búsqueda que permita buscar productos o elementos concretos dentro de la web.

Conclusión

Para concluir, hemos hecho un repaso por los errores principales de user experience, pero se cometen mucho más a la hora de diseñar un producto y hay que asumirlos, nunca se acierta a la primera.. Lo más importante es que tu web esté orientada y centrada a las necesidades de los usuarios y a veces se requiere pensar más en la usabilidad cara al cliente que en soluciones visuales demasiados llamativas.

Ante todo utilizar la coherencia, utilizándola en todo momento, y midiendo los cambios de los diseños o usando Tests A/B y otras técnicas que proporcionen la información y el conocimiento necesario para generar productos de alta calidad. Al final los datos son los que hablan acerca de la realidad y el objetivo siempre es llegar a un público elevado y de calidad.

Artículo publicado en: https://adrianalonso.es/desarrollo-web/user-experience/8-errores-tipicos-en-diseno-web/