Diseño UX y los 5 principios de oro de la usabilidad web

Imagínate caminando por un supermercado que no tuviese letreros indicativos para encontrar cada tipo de producto o que los pasillos no fuesen lineales sino se entrecruzasen unos con otros. Ante una situación así, pasarían dos cosas:

a) huiríamos en busca de otro establecimiento menos caótico

b) si tuviésemos una paciencia infinita y decidiésemos qudarnos, hacer la compra nos llevaría horas.

Pues bien, este símil ejemplifica a grosso modo la utilidad de diseñar una buena experiencia de usuario dentro de una web.

«El UX lo engloba todo, desde cómo encontrar un producto fácilmente en una tienda hasta el manual de instrucciones para montar tú solo la mesa nueva que te has comprado». –Roberto Blake, designer

¿Qué es la usabilidad web y en qué se diferencia de otros conceptos?

Aunque la usabilidad está íntimamente relacionada con la experiencia de usuario (UX) y la accesibilidad web es necesario saber que no son lo mismo. La usabilidad web, según la norma internacional ISO  9241-11, se refiere al grado en que una web y/o producto permite a usuarios específicos conseguir con efectividad, eficacia y satisfacción la meta deseada (que puede ser desde informarse hasta comprar online).

Diferencias entre user interface (UI), user experience (UX) e interacción | vía Kambrica

Por su parte la definición de UX tiene más que ver con la propia experiencia que el usuario experimentar al interactuar con una interfaz.  Como bien señalan en Kambrica, el usuario es fundamental en todo ese proceso. Por ello necesitamos estudiar detenidamente cuáles serán sus motivaciones y necesidades al entrar en nuestra página web. ¿Que objetivo busca? ¿Qué tipo de frases le van a ser más comprensibles? ¿Cómo va a acceder hasta nuestra página?

La experiencia de usuario no se limita al momento en que llega a la web que creamos, sino al antes y al después. Un posicionamiento SEO correcto es la primera ventana para satisfacer la búsqueda del usuario.

Las 5 reglas a tener en cuenta (acompañadas de ejemplos UX)

1. Haz que sea ‘digerible’

   

   El diseño tiene que ser fácil de digerir a la vista y evitar que el usuario tenga que gastar cientos de neuronas en entender qué es lo que está mirando. A la hora de tomar decisiones y ejecutar acciones, necesitamos elementos que nos orienten. Organiza la información con cierta jerarquía utilizando el tamaño, el color y los iconos para destacar aquello que sea prioritario y guiar al usuario para encontrar aquello que busca más fácilmente.

   En ciertos casos, puede ser útil incluir un mapa de sitio en el footer que aclare cuales son los apartados de la web y navegar así de forma más ágil y sin indigestarse dando saltos de página en página.

    

2. Claridad ante todo

   

   El buen diseño es honesto. Es decir, es descifrable para quien lo visualiza. Explícale a tus visitantes web las cosas como ellos quieren que se las expliques. No utilices terminología compleja, habla su lenguaje y en los apartados más sensibles como los de precios y tarifas ve al grano.

   Los usuario no van a hacer click en un botón de ‘compra ahora’ si no les comunicas cuanto van a pagar y qué van a recibir por ello. Evita los ‘free-trials’ o demos engañosos que van a llevar al usuario a pasar por una pasarela de pago, ¿no era gratis, pensarán?

   Evita, por otro lado, títulos de página demasiado genéricos como ‘productos’ y hazles saber de antemano tu oferta: coches, menús, colecciones, etc..

3. Diseñar confianza

Ofrecer información relevante de una manera visual a lo largo de la navegación en una tienda online es una buena idea. 

Antes de pedir a un usuario completar una acción, debemos ganárnoslo. En una web, la forma de hacerlo es ofreciendo explicaciones concretas paso a paso, encaminándolo hacia una conversión ágil y sencilla dentro de nuestra web.

Pensemos en cómo lo ha hecho Uber, que ha revolucionado por completo toda una industria a través de una app user-friendly que guarda la información de facturación del usuario (datos que el usuario no se sentiría cómodo de compartir con un extraño) y facilita el pago y las transacción de la forma más amigable posible. Pero para llegar a este punto, el usuario ya ha navegado por las opiniones de la web y la oferta de rutas asociadas a la plataforma antes.

     4. Una apariencia familiar

Un diseño minimalista, utilizando imágenes de productos y símbolos fácilmente reconocibles como el + mejora la toma de decisiones del usuario. 

Es normal que como diseñador te guste innovar al presentar elementos y combinar patrones dentro de una web. Aún así, la usabilidad web exige cierta coherencia en la forma para que así el usuario reconozca aquello que está viendo.

Las guías estéticas de las plataformas y la aparición de manuales como el de Google dan pistas de cómo enfrentarse al diseño de estilo e iconos para conseguir una imagen lo más nativa posible, que no confunda al usuario durante la interacción.

5. Piensa como pensaría el usuario, siempre

La tienda online de Jack&Jones está pensada para facilitar la personalización de la compra de cada usuario.

Con la explosión world wide web, el consumidor debe ser entendido más como un usuario. Por ello, el testing de usabilidad web es cada vez más crucial. Más allá de la simplicidad, familiaridad en el diseño, tenemos que contar con su opinión en todo momento.

De hecho, sino lo hacemos es muy probable que más del 60% de los usuarios se den por vencidos si creen que nuestra web no está hecha para ellos. Una de la mejor manera de evitarlo es recurrir a exámenes de usabilidad que midan la efectividad y satisfacción de tu web. En este artículo de Jimdo se dan las pautas para ejecutar estas valoraciones.

Si en tu empresa queréis aprender más sobre este tema, consulta nuestro workshop de UX & Service Design in company.

Trini Campos

UX/UI Product Designer | Highly experienced in SaaS, startups & B2B Platforms.