Siempre me han gustado los videojuegos, es más, muchos diseñadores nos inspiramos en ellos a la hora de obtener nuevas ideas. Se puede decir que muchas de las interfaces de usuario que encontramos hoy en día son fruto de una generación que ha crecido junto a juegos como Sonic, Mario, Street Fighter…

Hoy reflexionaba acerca de cuál es el potencial de una buena experiencia de usuario y caía en la cuenta que podemos asemejarla a cuando Mario, el célebre personaje de Nintendo, consigue una estrella. En ese preciso momento, se convierte en un ser superior y desaparecen los obstáculos de su camino. El objetivo de una interface impecable es que el usuario (al igual que Mario) logre su objetivo con mayor facilidad.

Se podría decir que mejorar la experiencia de usuario es similar a cuando Mario consigue una estrella. Todo fluye fácilmente y nada se antepone a su camino. Logra sus objetivos con mayor facilidad.

A continuación resumo los aspectos a tener en cuenta para que cualquier interface cuente con una buena experiencia de usuario:

 

1. Diseño de la estructura

Tanto si estamos diseñando una página web como una App es importante diferenciar lo que es el diseño de la estructura por un lado y el look and feel por otro. La disposición de los elementos influye de manera muy significativa en la capacidad que tiene el usuario de localizar aquello que está buscando. Se escogen unas estructuras u otras en función de los objetivos que tiene una página web. No es lo mismo diseñar una landing page que un e-commerce. Ambas tienen objetivos totalmente distintos y por lo tanto deberán contar con estructuras diferentes.

Es cierto que existen unas normas estandarizadas que podríamos decir que son comunes al 99% de las páginas web. El logo de una página web lo vamos a encontrar en la parte superior izquierda y si clicamos nos llevará a la sección principal de la misma. El registro lo encontraremos casi siempre en la parte superior derecha y si estamos buscando información de contacto del sitio seguramente lo podamos localizar en el pie de la página (Es probable que también cuente con una sección dentro del menú)

Son normas que el usuario conoce y espera encontrar cada cosa en su sitio cada vez que entra por primera vez.

 

2. Navegabilidad

Esta es la capacidad que tiene el usuario para moverse a lo largo de las secciones de una web o aplicación. Al igual que la estructura, el usuario espera un tipo de comportamiento. Por ejemplo los usuarios de iOS, cuando nos descargamos una nueva aplicación esperamos un tipo de navegación basado en pestañas inferiores. Mientras que los usuarios de Android, es más probable que se encuentren este menú en la zona superior. Los e-commerce por regla general dispondrán de un menú superior con todas las secciones de tienda.

3. Diseño visual

La importancia del diseño visual es crucial en cualquier página web o aplicación. No solo alegra la vista, también genera confianza en el usuario. Lograr un equilibrio armónico de las tipografías, los colores, las imágenes y las formas es uno de los puntos clave de una buena experiencia de usuario. Muchas veces, se tiende a hablar de diseño únicamente cuando llegamos a esta parte, pero realmente el diseño es algo mucho más amplio. El diseño visual es quizás la parte más artística pero realmente tiene más de ciencia que de arte. No todo vale, y los buenos diseñadores visuales se distinguen de los mediocres por el buen manejo de la teoría del diseño gráfico.

Muchas veces, se tiende a hablar de diseño únicamente cuando llegamos a esta parte, pero realmente el diseño es algo mucho más amplio.

Por otro lado, un buen look & feel de una aplicación no implica un buen diseño de producto. En dribbble podemos encontrar miles de ejemplos de UIs perfectamente diseñadas, muy potentes visualmente, pero desde un punto de vista crítico, una interface solo es buena cuando cumple su objetivo.

A continuación podéis ver un diseño visual que he realizado de ejemplo:

4. Contenido escrito

El contenido es el rey, tanto escrito como visual. No podemos obviar lo que comunicamos y cómo lo comunicamos. Saber escribir textos para una web es clave si queremos retener la atención de los usuarios. Debemos incluir textos explicativos siempre que sean necesarios. En el diseño web y de aplicaciones todo lo que no suma resta. Si se añaden más textos de la cuenta podemos arriesgarnos a ensuciar el diseño e invitar a la no lectura.

Yo siempre digo que el contenido debe preceder al diseño. Debemos hacernos una idea general de lo que se quiere comunicar antes de diseñar. Muchos malos diseños surgen fruto de la elección de la estructura de diseño inadecuada a la que, posteriormente, se pretende forzar unos textos.

El contenido debe preceder al diseño

En las agencias publicitarias las duplas creativas (Diseñador y Copy) se encargan de realizar esta labor. El vínculo entre estas dos figuras siempre genera mejores resultados.

 

5. Legibilidad

El manejo del espacio en blanco y la tipografía son claves a la hora de comunicar la información. Además de esto, los tamaños de letra, la proporción del espacio entre textos, el uso de los formatos deben usarse de manera inteligente para captar la atención en lo que realmente importa. Hay que destacar que los usuario de productos digitales tienden a no leer. Escanean la información en busca de los que quieren, y por regla general interactúan casi ciegamente esperando ver qué ocurre. En la era digital siempre hay vuelta atrás. Por lo tanto, el usuario común prueba a pulsar antes de leer y sabe que siempre antes de cometer un error fatal aparecerá un mensaje que lo avise. Los textos relevantes deben estar destacados y aquellos que requieren de una lectura intensa deben estar bien formateados para facilitar la misma.

Hay que destacar que los usuario de productos digitales tienden a no leer. Escanean la información en busca de lo que quieren, y por regla general interactúan casi ciegamente esperando ver que ocurre.

Es importante contrastar los tamaños de letra y seguir las recomendaciones de cada sistema en cuanto a tamaños mínimos de letra. Hay una serie de trucos que iré comentando a lo largo de este blog para mejorar la legibilidad en una interface.

 

6. Encontrabilidad

O lo que en ingles se denomina “discoverability” es la capacidad que tiene una función o una sección de ser fácilmente localizable. ¿Cuántas veces hemos descubierto nuevas funciones de una aplicación que siempre han estado ahí pero que no lo sabíamos? Pues si os ha pasado esto, dicha función tenía una mala encontrabilidad. Cuando estas funciones o secciones son objetivos clave para el usuario estamos ante un completo fracaso. Por otro lado me he topado con secciones como las de soporte técnico o atención al cliente que estaban más escondidas de lo normal. Me ha dado qué pensar. Quizás hayan querido hacerlo deliveradamente…

 

7. Velocidad de carga

Es un detalle técnico que depende tanto del diseño como del desarrollo. Sobrecargar una página con interacciones e imágenes de alta calidad reducirá significativamente la velocidad de carga y esto perjudicará la experiencia de usuario.

En el mundo digital los milisegundos valen oro, y los usuarios no esperan, se marchan. Como digo, pueden ser fracciones de segundo pero en una interface es importante que la aplicación fluya rápidamente. Si la espera es inevitable, debemos comunicar que se van a producir unos segundos de demora como consecuencia de una operación (Podemos utilizar spinners o barras de carga). Y digo esto porque no comunicarlo eficientemente hará que el usuario se largue a la primera de cambio.

En el mundo digital los milisegundos valen oro, y los usuarios no esperan, se marchan porque creen que algo está fallando si no les avisamos adecuadamente de los procesos de carga.

 

8. Usabilidad en función del medio

Llegados a esta parte podemos decir que la usabilidad es una característica que forma parte del conjunto de las anteriores. Pero me gustaría destacar en este punto que es importante conocer bien la interface y el medio en el que se va a utilizar (web de escritorio, móvil, tablet, TV…) para decidir cómo escoger los inputs adecuados. Cada sistema tiene una forma de interactuar a la que el usuario está habituado. Cambiar dichos hábitos puede resultar desconcertante, por lo tanto diseñar para unas interfaces u otras puede resultar totalmente distinto.

La sensibilidad, la presión, las acciones multigestuales o la accesibilidad son temas a tener en cuenta sobretodo con el surgimiento de nuevas tecnologías de interacción.

En resumen, podríamos decir que lograr una buena experiencia de usuario consiste en minimizar la fricción existente entre el usuario y la aplicación, logrando que éste alcance su objetivo inicial.

El buen UX (User Experience) minimiza la fricción existente entre el usuario y la aplicación, logrando sus objetivos rápidamente y optimizando los resultados de conversión.

Este post va a ser un preludio de lo que seguiré comentando en futuras publicaciones. Entraré más extensamente en temas de los que he hablado y daré ejemplos prácticos.