Iván Ibañez

Guía Diseño UX: Los 61 mejores consejos de usabilidad web

consejos de diseño ux portada (1)

Introducción.

Bienvenid@ a esta guía de diseño UX en la que quiero compartir contigo los 61 mejores consejos de usabilidad web. Ya sea porque quieres mejorar el diseño UX de tu web, o aprender nuevas técnicas sobre el diseño de experiencia de usuario, te pueden interesar estos 61 consejos que las grandes webs a nivel mundial ya ponen en práctica tras comprobar la eficacia de sus resultados. ¡Empecemos!

Qué es el diseño UX o Diseño de experiencia de usuario.

Antes de empezar con estos 61 consejos de diseño UX, voy a explicarte brevemente en qué consise esta modalidad de diseño.

El diseño UX.

Busca que el usuario tenga una buena experiencia en el uso del entorno o sistema (app, web, interface). El punto clave del buen diseño UX es producir la falta de necesidad de pensar, es decir, ofrecer un entorno lo más intuitivo posible. Hacer que el usuario no se pare a pensar en cómo usar el entorno es una gran ventaja para ambas partes, ya que por la facilidad de uso conseguimos que se centre en llevar a cabo su tarea.

Experiencia de usuario.

Como ejemplo claro, piensa en las impresoras, en muchas de ellas (sobre todo las grandes impresoras de oficina) cuesta bastante hacer una simple copia a dos caras. Hay demasiados botones, demasiadas opciones que no nos resultan familiares, por lo tanto, no son intuitivas y por ello dificultan su uso.

A día de hoy, con tal cantidad de contenido digital, nuevas apps y la integración de todo con entornos virtuales, el Diseño UX (User Experience Design) es cada vez más demandado.

Usabilidad Web.

El diseño UX en webs se traduce como Usabilidad web. ¿Alguna vez has tenido que navegar por webs que dependan del gobierno? Por ejemplo, en España, si has navegado por la web de la Agencia Tributaria, te habrás dado cuenta de lo complicado que es encotrar el apartado que necesitas, de la cantidad de información mal organizada que hay por todas partes, de los muchos clicks que debes hacer hasta llegar donde quieres (si lo consigues)… en definitiva, no es una web usable.

 

¡Ahora sí, empecemos!

–Los 61 mejores consejos de diseño UX–

Maquetación correcta para un buen diseño UX

Dsieño UX, consejos sobre diseño UX,

 

1 – Evita el scroll inmediato

Es muy común que nada más entrar a una web hagamos scroll, porque es muy poco común que una web nos llame la atención nada más aterrizar en ella. Pero cuando lo consiguen, cuando nada más ver la web nos resulta interesante lo que vemos, navegamos más despacio por la web y lo observamos todo mucho más. Así que piensa muy bien en la parte inicial de tu web.

2 – Reduce el menú.

Uno de los errores más comunes en una web con un mal diseño UX, es el poner demasiados enlaces en el menú. Esto hace que al usuario le cueste más decantarse por una opción. Así que es mucho más efectivo simplificar y ramificar despejando la ruta de contenido poco relevante.

3 – Simplifica los formularios

Una de las cosas más molestas son los formularios con demasiados campos. Pide solo los datos verdaderamente relevantes, y por favor, elimina los típicos test para saber si quienes te escriben son humanos.

4 – Vídeo a lo grande.

Si vas a incluir vídeos asegúrate de que cuando el usuario le dé a play, el vídeo tiene un tamaño suficiente, sobre todo en móviles.

5 – Todo en una pantalla.

Asegúrate de que los bloques de contenido se vean completos en una sola pantalla, sin la necesidad de hacer scroll. Evita de igual manera que el teclado en la versión móvil tape parte del formulario o zona de interacción.

6 – 100% móvil.

No te conformes con que el contenido de tu web se vea completo en la versión móvil, eso ya no vale como “responsive”. Adapta el contenido muy a conciencia, haz una versión nueva solo para móviles.

7 – Despeja el camino.

En el momento de realizar un pedido ya no es necesario seguir viendo publicidad ni elementos poco relevantes para el comprador. Despeja la pantalla y deja solo lo realmente importante para hacer el pedido.

8 – Usa el Hover.

Facilita la visualización del producto sin tener que acceder al producto. Si en la primera imagen del producto incluyes otra imagen con otra perspectiva al hacer hover, estás facilitando mucho la navegación a tus usuarios y estás mostrando más de primeras.

9 – Atención al diseño UI.

El diseño UX no es nada si no hay un buen diseño visual, el diseño UI. El mensaje está en los textos, pero nadie va a leer tus textos si el aspecto general de la web o el entorno no invitan a ello, vamos que una web fea tiene menos posibilidades de ser leída.

10 – Adiós a la Sidebar.

Tuvo su momento, pero la sidebar ya no es un elemento novedoso. Así que si tienes información en tu web, no la escondas en una sidebar.

11 – Un poco de aire.

Esta parte se trabaja en conjunto entre el diseño UX y el diseño UI, y no es otra que los márgenes. No se trata de rellenar los espacios vacíos, eso se hacía a principios de los noventa. Dejar “aire” entre elementos genera menos sensación de agobio y despeja el entorno para una mejor lectura.

12 – Llamada de atención.

¿Conoces las llamadas a la acción, los famosos Call to action? Pues céntrate también en la parte visual del CTA, porque si quieres acción, tienes que llamar la atención.

13 – Usa conceptos del mundo real.

Se conoce como esqueumorfismo cuando el icono o el entorno nos recuerda al mismo objeto real que está representando, como por ejemplo el botón de selección. Esto es mucho más intuitivo y, por lo tanto, efectivo.

14 – Menos, es más.

Este concepto ya lo conoces, pero tenlo muy presente, porque a más limpio sea el diseño, mejor vas a guiar al usuario en los pasos que ha de seguir hasta llegar a sus objetivos (que también son los tuyos) Así que no recargues el diseño haciendo que no se sepa por dónde empezar a leer. Tu web tiene que ser un bonito camino que lleva a un sitio deseado.

15 – Diseño modular.

Trabaja el diseño por bloques o franjas, de esta manera, si alguna vez tienes que modificar una sola parte de la web o el entorno, el nuevo rediseño afectará lo menos posible al resto de elementos.

16 – Longitud justa.

No hagas webs eternas en las que hay que hacer demasiado scroll para verla por completo, se hace más pesado. Es mucho más efectivo repartir el contenido y ser más concreto cuando el usuario realmente lo pide.

17 – El tamaño importa.

En teléfonos móviles es muy importante que todos los elementos clicables sean accesibles sin problemas. Así que aumenta su tamaño y cuidado con colocar elementos demasiado juntos.

18 – Solo un toque.

Evita los elementos que se activan con dos toques, cada vez es menos común y, por lo tanto, inconscientemente ya solo pulsamos una vez.

19 – Acordeones usables.

Si no hay más remedio que añadir un buen párrafo, usa acordeones, sobre todo en teléfonos móviles. Pero recuerda que este tipo de contenido se ha de poder manejar a gusto del usuario.

20 – De lado a lado.

Distribuye el peso a la hora de maquetar para que cada bloque o franja de la web sea estética, armoniosa y no tenga zonas donde no sea necesario mirar.

21 – Tapping accidental.

Cuidado con el diseño en móviles, normalmente usamos los laterales de la pantalla para hacer scroll con el pulgar, así que no coloques elemento clicables en esa zona para evitar que alguien los active sin querer hacerlo.

22 – Asómalos un poco.

Si usas carruseles haz que la imagen de la izquierda y la de la derecha sobresalgan un poco para indicar que están ahí, que hay más contenido.

23 – El menú al alcance.

Ten en cuenta que el menú ha de estar al alcance en todo momento, nada de tener que volver al principio de la web para seguir navegando en ella.

24 – Menú hamburguesa.

El menú hamburguesa es para móviles, es así. Si lo usas en la versión de escritorio estás dificultando la navegación y ocultando información.

 

Texto, imágenes y botones: cómo usarlos correctamente en el diseño UX.

Dsieño UX, consejos sobre diseño UX, tips diseño ux

 

25 – Facilita la lectura.

Demasiado texto resulta pesado. Los usuarios no buscan grandes textos, buscan la respuesta directa a sus dudas, la frase precisa que les haga ver si están o no en el sitio correcto.

26 – Cuidado con las tipografías.

Usa tipografías simples. Evita las del tipo display y las que tienen demasiada ornamentación. Vigila también la separación entre letras (el traking) y la separación entre líneas. Además, las tipografías sencillas y redondas, no solo se leen mejor, no pasan de moda.

27 – Usa el movimiento con control.

Demasiado movimiento puede resultar abrumador y termina por distraernos. Si todo se mueve, no hay elementos más relevantes que otros. Así que usa el movimiento solo en los elementos que más te interesan.

28 – Elige un lenguaje.

Este consejo realmente es trabajo de Copywriting, pero como es tan relevante y también existe un lenguaje visual, lo añado, sin más. Se directo y claro en tus textos, pero, sobre todo, se cercano. Usa un lenguaje que guste a tus usuarios, vender sin hablar ya es bastante frío.

29 – Calidad y resolución.

Cuida mucho las imágenes, sobre todo si son de productos tangibles. Al comprar por internet no podemos tocar, así que necesitamos ver cada detalle.

30 – Cuéntalo en vídeo.

Si hay algo que merece ser contado en más de 3 párrafos, cuéntalo en vídeo. La gente ya no lee instrucciones, busca vídeos, por algo será…

31 – Ayuda sin dobles intenciones.

Un espacio limpio es mucho más apreciado que uno que no lo es. Si escribes artículos para ayudar, para aconsejar, no los uses como punto de publicidad. Usa estrategias de “venta” en el propio texto, pero deja que el usuario lea tranquilo.

32 – Evita el “haz click aquí”

Cuando hay que indicar una acción con un “haz click aquí”, significa que el mensaje, la llamada a la acción, no está clara.

33 – Si es clicable, que se note.

Muchas webs cuentan con elementos clicables, que nos llevan a otras partes de la web, pero no siempre se sabe que eso es así, así que si tienes que poner un enlace, hazlo en un botón y no en una simple foto sin pistas de que lleva a un enlace.

34 – Migas de pan.

Pueden resultar muy útiles en webs con mucho contenido para facilitar al usuario el saber en qué parte de la web se encuentra y poder acceder al paso anterior que necesite de un solo click.

35 – Si no es clicable, que no lo parezca.

Ocurre mucho, por ejemplo, en los menús, que no diferenciamos entre partes clicables y partes que no lo son. Déjalo bien claro, el diseño UX no debe dejar nada suelto.

36 – ¿a dónde nos lleva?

Un usuario nunca debería tener que acceder a un enlace o botón para saber a dónde le lleva. Hay que dejar muy claro dónde vamos.

37 – No a la cursiva.

El texto en cursiva resulta más difícil de leer, sobre todo para lectores disléxicos.

38 – Los emojis para WhatsApp.

Sé que pueden resultar divertidos y dar un aspecto desenfadado si así lo queremos, pero evita que los emojis interrumpan la lectura.

39 – Información típica.

Echa un vistazo a los footers que tienen la mayoría de las webs, en ellos se encuentran los textos legales, información de contacto y enlaces a terceros. No coloques en ellos información relevante, porque ya tienen una función muy definida.

 

El contenido, lo verdaderamente importante en el diseño de experiencia de usuario.

Maquetación correcta para un buen diseño UX, tips diseño ux

 

40 – Evita las nuevas pestañas.

Si durante la navegación la web nos lleva a nuevas pestañas, quizá no sea tan grave en versiones de escritorio, pero en móviles puede arruinar la buena experiencia del usuario.

41 – Ofrece salidas.

En todas las páginas, ofrece la posibilidad de volver. No hay nada peor que llegar al apartado de una web y tener que volver paso a paso hacia atrás para volver al punto de partida. Incluso después de una acción, como en una página de gracias o en la página 404, ofrece la opción de volver al menos a la home.

42 – Destaca las opiniones.

Está comprobado que la opinión de otros nos importa, y mucho. Destaca las opiniones de tus usuarios, y asegúrate de que se leen bien, que son cortas y precisas, y si puedes poner la foto de cada usuario, mucho mejor.

43- Menos pasos.

En el diseño UX hay que centrarse en facilitar, y si hay que hacer más de 3 pasos para realizar una compra, una contratación o un registro, no estamos facilitando nada.

44 – Adelanta lo importante.

En el consejo número 27 te hablé del movimiento para llamar la atención, pues algo que también funciona muy bien es el uso de sombras. Con las sombras generas la sensación de que el elemento es más cercano y, por lo tanto, destaca sobre el resto.

45 – Redes sociales sí, pero relájate.

Sí a las redes sociales, pero sin agobiar al usuario. No hace falta recordar constantemente que tienes Facebook o Instagram. Si el usuario realmente nos quiere encontrar en redes sociales, ya se encargará de buscarnos.

46 – Caja de búsqueda.

Si tu web o app tiene mucho contenido, facilita la navegación añadiendo una opción de búsqueda que realmente funcione, es un conpecto básico en la usabilidad web.

47 – Hacia dónde vamos.

Indica siempre si hay más contenido y hacia dónde hay que desplazarse para encontrarlo. Muchas veces colocamos carruseles con bloques de contenido sin indicar que hay más contenido que no vemos.

48 – Apartados de ayuda que no ayudan.

Es poco probable que alguien necesite ayuda en una web y que recurra al apartado de ayuda de dicha web. Y es que normalmente estos apartados contienen demasiada información y poco ordenada, con lo que es una pérdida de tiempo que pocos quieren asumir. Opta por los chats y apartados claros de preguntas frecuentes.

49 – ¿Y el final?

Evita las páginas sin un final claro. Usa el footer en todas las páginas, ya estamos muy familiarizados con él y sabremos que no te has quedado a medias con la web, si no que ya no hay más contenido.

 

La clave de la usabilidad web: La lógica.

tips Dsieño UX, consejos diseño ux

 

50 – Adelántate al error.

Otro factor a evitar es hacer que el usuario tenga que repetir una acción por un error. Si hay un campo obligatorio en el formulario, indícalo de forma muy visible. ¿El usuario tiene que crear una contraseña?, indica si tiene que llevar algún carácter especial. Y si hay un producto fuera de stock, avisa en el primer paso de compra.

51- Velocidad de carga.

En realidad, no debería hacer falta decirlo, pero no todo el mundo lo ha pillado. Webs rápidas, no solo por mejorar el SEO, por el usuario, a más fluidez, mejor experiencia de usuario.

52 – Los hábitos cambian.

El diseño de experiencia de usuario es un diseño dinámico, en constante cambio. Diseña, testea, después ajusta, vuelve a testar en un entorno real, y prepárate para cambiar y rediseñar, porque siempre hay que adaptarse a los nuevos hábitos de los usuarios.

53 – Con una sola mano.

Un punto muy importante en el diseño de una web usable, es facilitar el manejo en el móvil. Y es que la mayoría de webs no están pensadas para usarlas con una mano. Así que céntrate en el radio de acción del pulgar, con ese dedo, se debería poder navegar por toda la web.

54 – Si ya funciona, no lo cambies.

Hay elementos a los que ya nos hemos acostumbrado, el botón de registro a la derecha, el icono del sobre es el de contacto… No cambies elementos porque eso implica un nuevo aprendizaje.

55– Control por parte del usuario.

Deja que usuario tome el control del entorno. Como por ejemplo poder customizar la interfaz de una app, o detener un slider o carrusel al poner el mouse encima, así potenciarás muchísimo la experiencia de usuario.

56 – Cuenta qué está pasado.

Apuesta por la visibilidad del estado del sistema, que se permita saber al usuario qué está pasando, como hacen por ejemplo con el traking de Dominos pizza.

57 – Adapta el diseño al público objetivo.

Es algo básico, adapta el diseño. No es lo mismo diseñar para un público de entre 45 y 60 años, que para uno de entre 15 y 35, ya que estos últimos se saltaron el proceso de adaptación a los diferentes aspectos visuales con los que interactuamos.

58 – Usa Wireframes.

No es una pérdida de tiempo hacer bocetos de nuestro diseño UX, todo lo contrario, nos ayuda a planear mejor nuestro diseño en base a los objetivos de la web, y teniendo ya el diseño definido, es mucho más rápido desarrollarlo. Existen herramientas como Adobe XD, Sketch, incluso varias herramientas gratuitas y online como wireframe.cc.

59 – inspírate.

Navega por las webs de las grandes marcas, investiga nuevas apps, busca diseños UX en Pinterest o Behance. Invierte algo de tiempo en inspirarte y coger ideas para ser más efectivo en tus diseños.

60 – Entorno de pruebas.

Antes de dar por terminado un diseño, invita a que personas ajenas al proyecto lo prueben y pídeles su opinión sobre la usabilidad de tu diseño. Nunca debemos diseñar para nosotros mismos, si no para el público mayoritario.

61 – el orden de los factores si altera el producto.

En la usabilidad web también debe haber un orden. No trates de vender antes de presentarte. Primero preséntate, cuenta quién está detrás del servicio o producto que intentas vender, después destaca tus puntos fuertes, que te hace diferente a la competencia. Después ofrece varios planes de precio y termina contando cómo en pocos pasos se puede adquirir el producto, conseguir los objetivos o contratar el servicio.

 

¡Gracias por leer este post! Espero que estos 61 tios de Diseño UX te sean de utilidad. ¡Un saludo!

 

 

Vídeo: 61 consejos de diseño UX

Volver:Al blog | A la home |

4 thoughts on “Guía Diseño UX: Los 61 mejores consejos de usabilidad web

  1. Me encanto tú artículo y vídeo Iván. Es fundamental cumplir con todos y cada uno de los consejos que mencionas para garantizar la mejor experiencia Web al usuario!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *