8 errores típicos de UX en diseño web

En el proceso de creación de un producto software hay que trabajar con cuidado cada una de las partes involucradas. Desde el diseño original de un producto software, hay que combinar los requisitos funcionales con el diseño de mockups. Una vez definidos estos prototipos los creativos deben diseñar el UI de la web encima de estos, los cuales estarán totalmente orientados a la experiencia de usuario.

He visto diseños geniales pero demasiado ambiciosos, lo que les vuelve difíciles de llevar a la web o al móvil. Es por ello que los diseñadores deberían de pintar siempre trabajando con estos prototipos.

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 pérdida de efectividad y de potenciales clientes. Por esta razón, vamos a ver un listado de puntos a tener en cuenta a la hora de abordar el diseño de un producto software.

1. Diseño Desequilibrado

Por ello, se recomienda el empleo de un sistema de grid (por ejemplo el Bootstrap System Grid) el cual pinta guías 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.

2. Navegación complicada

En general, algunos trucos para el diseño de menús es que los usuarios 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 organizarlos en distintas categorías. Este tipo de problemas ocurre en general en plataformas e-commerce que ofrecen gran cantidad de tipología de productos. Personalmente un buen ejemplo de navegación puede ser sarenza.es

3. Falta de consistencia

  • 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 cambiar la posición de la navegación en distintas secciones
  • Seguir 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 (UI Kit) que sea accesible por todo los miembros del equipo. Esto ayudará dar visibilidad a las fuentes utilizadas, las gamas de colores y el estilo de componentes genéricos. Estas guías de estilos representan y generan una buena imagen de marca representando los colores de la marca, centrándose 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

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 demasiado scroll para acceder al contenido principal. También se recomienda dividir el texto en columnas para que sea sencillo de leer. Deberías comprobar que resoluciones estándar como 800×600, 1024×768 o 1280×1024 se vean 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 UX.

6. Falta de Espacio Libre

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

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

8. Datos de contacto pocos visibles

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

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/user-experience/8-errores-tipicos-de-ux-en-diseno-web

Full Stack Web Developer — adrianalonso.es

Full Stack Web Developer — adrianalonso.es