DISEÑO UX: Consejos y elementos claves para enamorar a tus usuarios

La necesidad de navegar diariamente por los menús de todo tipo de dispositivos ha ido creando un lenguaje universal que todos debemos saber hablar. Desde Apache te contamos los consejos de diseño que debes de tener en cuenta para mejorar la experiencia del usuario en tu web.

Con el paso de los años, interactuar con interfaces digitales se ha ido convirtiendo en parte de nuestra rutina diaria. Desde responder mensajes con nuestro móvil hasta tocar una pantalla gigante para hacer nuestro pedido en un restaurante de comida rápida, pasamos horas y horas navegando por interfaces cada vez más profundas y cargadas de posibilidades.

Sin darnos cuenta, todos nos hemos puesto de acuerdo en que tres barras paralelas significan “menú”, que una flecha en la esquina superior izquierda significa “volver” y que la silueta de un engranaje significa “ajustes”. La necesidad de navegar diariamente por los menús de todo tipo de dispositivos está creando poco a poco un lenguaje universal que todos tenemos que saber hablar, y de ahí surge el concepto de UX, siglas de User Experience, cuyo propósito es que el aprendizaje de ese lenguaje no se convierta en algo frustrante.

La labor de un diseñador de UX es facilitar la interacción del usuario con cualquier producto o servicio digital, saber de qué forma disponer todos sus elementos para que su uso sea lo más fácil y agradable posible. 

Conocer al usuario

Lo primero a tener en cuenta, es qué va a sentir el usuario mientras navega por nuestra interfaz, para esto tenemos que prestar atención a tres factores básicos: su propósito, su percepción visual y su percepción emocional.

  • Saber su propósito consiste en responder la pregunta; ¿Qué quiere obtener de nosotros?. No es lo mismo diseñar la web de un periódico, enfocada a usuarios que buscan información, que la de una tienda on-line, enfocada a usuarios que buscan comprar un producto y cubrir una necesidad. Un buen diseño UX hace que resulte agradable cumplir este propósito y crea un vínculo de fidelidad, si nos sentimos cómodos al cumplir nuestro propósito en una página web, recurriremos a ella cada vez que lo tengamos.
  • La percepción visual no solo determinará si nuestro diseño es visualmente atractivo, también jugará un papel determinante en cómo se relacionarán entre sí todos sus elementos según su aspecto o disposición. Detalles como que dos elementos sean del mismo color o que estén agrupados y alejados del resto pueden facilitar que nuestra percepción visual los relacione entre sí, tomar en cuenta este tipo de detalles es determinante para crear interfaces intuitivas.
  • La percepción emocional determina las sensaciones que experimenta un usuario con nuestro diseño, permitirle acceder a un servicio de forma rápida, para no perder en ningún momento su atención, y clara, para no hacerlo sentir confuso, aumenta las posibilidades de que cumpla su propósito a la hora de acceder al servicio que le ofrecemos.

A partir de estos tres elementos, podemos concluir que los requisitos de una buena interfaz están comprendidos en la siguiente pirámide:

  • Funcional: este requisito es la base de la pirámide, necesitamos darle al usuario las herramientas necesarias para cumplir su propósito.
  • Usable: tenemos que darle la posibilidad de usar esas herramientas.
  • Conveniente: la forma de usar dichas herramientas tiene que ser lo más cómoda e intuitiva posible.
  • Disfrutable: además de cómoda e intuitiva, conviene ir un paso más allá y hacer que la experiencia del usuario sea incluso placentera.
  • Significativo: tenemos que generar un impacto positivo en el usuario que se mantenga después de acceder a nuestros servicios.

No perder esto de vista nos ayuda a enfocar el trabajo de diseño en la dirección correcta,, pero también es importante que este trabajo esté estructurado de la mejor manera posible.

Fases del diseño UX

  1. Investigar: Antes de plantear nuestro diseño, tenemos que centrarnos en los dos pisos inferiores de la pirámide. Para que el producto final sea funcional y usable, es necesario establecer qué le vamos a ofrecer al usuario y qué pasos tendrá que dar a través de nuestra interfaz para hacerlo posible. También tenemos que familiarizarnos con nuestro producto, saber qué pautas estéticas sigue su marca y a qué tipo de usuarios va dirigida determinará cosas tan importantes como los colores de los elementos de nuestra interfaz.
  1. Esquematizar: En esta fase nos centraremos en el tercer piso de la pirámide. Conviene hacer esquemas y borradores para tener una referencia visual de qué elementos van a formar nuestro diseño y cómo los vamos a estructurar. Este paso facilitará que el trabajo posterior no se convierta en un ejercicio de prueba y error, ya que estableceremos una serie de guías que seguiremos en la siguiente fase del proceso.
  1. Prototipar: Si hemos pasado por las dos fases previas de la manera correcta, lo que nos toca a continuación es plasmar todo lo establecido anteriormente en un prototipo, para a continuación enfocarnos en los dos niveles superiores de la pirámide. Para que nuestro diseño sea disfrutable y significativo tenemos que conseguir una estética clara y atractiva. Por ejemplo, si en la primera fase del proceso hemos decidido que vamos a buscar una estética minimalista, y en la segunda hemos decidido incluir un menú superior, haremos un menú no tenga unos colores muy sobrecargados y cuyos elementos no destaquen más de lo necesario, reduciendo el tamaño de sus botones.

  1. Compartir: Prototipar nuestras interfaces no solo nos permite visualizar cómo será el resultado final, sino también compartir este resultado con cualquier persona. Los programas de prototipado web como “Adobe XD” o “Figma” nos permiten crear enlaces que cualquiera puede abrir para navegar por nuestro prototipo, ya sea un compañero de trabajo o un responsable que nos tiene que dar su visto bueno, siempre es buena idea pedir una opinión externa para saber si nuestro diseño funciona correctamente.

Versión móvil

Las interfaces que diseñemos no siempre se visualizarán en el mismo dispositivo. Hoy en día es impensable diseñar una página web sin tener en cuenta la enorme cantidad de usuarios que la visitarán desde su smartphone.

En Apache hemos tenido que adaptar varias landing pages tanto para navegador como para móvil. Saber cuándo mantener la disposición de los elementos en ambas versiones y cuándo cambiarla fue una de las claves a la hora de diseñar, un ejemplo es este formulario de una landing page de Hawkers:

Para la versión de navegador tomamos en cuenta el sentido de lectura del usuario, que va de derecha a izquierda. De este modo, conseguimos que primero lea la oferta y que a continuación lea el formulario para obtener más información.

Pero al adaptarlo a versión móvil, nos damos cuenta de que esto ya no es posible, el tamaño de la pantalla no permite disponer tantos elementos de derecha a izquierda. De nuevo, tomamos en cuenta el sentido de lectura del usuario, en este caso, de arriba a abajo. De esta manera, obtenemos el mismo resultado que en la versión de navegador, guiamos la atención del usuario primero a la oferta y luego al formulario, pero la disposición de los elementos cambia acorde al dispositivo desde el que se visualiza nuestro diseño.

La importancia de testear 

A la hora de evaluar los resultados del diseño de una web, una de las herramientas más útiles es el testeo. Esto no solo consiste en medir su tráfico con herramientas como Google Analytics, podemos ir un paso más allá y crear distintas versiones de nuestro diseño para investigar qué es lo que funciona mejor. 

Detalles como cambiar el color de un botón o el orden de los campos de un formulario, nos ofrecen información muy valiosa para conocer las preferencias de los usuarios que navegan por nuestra interfaz. 

En Apache pusimos esto en práctica con un formulario de VU security. La primera versión presenta un único campo que nos pide diferente información según lo vamos rellenando y pulsando “siguiente”.

La segunda versión permite visualizar de antemano todos los campos que hay que rellenar para completar el formulario.

La tasa de conversión de la segunda versión fue un 24% superior a la primera, es decir, que los usuarios estuvieron más dispuestos a rellenar el segundo formulario que el primero.

¿Qué conclusiones sacamos de esto? 

Podemos concluir que, si el usuario sabe de antemano cuántos pasos le quedan para completar un formulario, más gratificante le resulta rellenar cada uno de sus campos, porque le ofrecemos una referencia visual de cuánto se acerca a su objetivo a medida que avanza. 

Esta información se tomó como referencia en futuros diseños, como el del ejemplo anterior.

El mundo del diseño UX está en constante evolución, ya que está estrechamente ligado al avance tecnológico, pero el objetivo que de los diseñadores siempre será el mismo: guiar al usuario a través del lenguaje universal que compone las interfaces digitales, facilitando y amenizando su aprendizaje, por lo que muchos de estos consejos nos serán siempre útiles, pase lo que pase.

En Apache aplicamos todos estos conocimientos para ofrecer servicios de auditoría y diseño UX, ofreciendo a nuestros clientes la posibilidad de optimizar el rendimiento de todas sus interfaces digitales. Si quieres que los visitantes de tus web o apps tengan una mejor experiencia de usuario, ¡No dudes en contactarnos!

Contacto