Diseño y usabilidad con Sergio de la Casa

Un producto bien diseñado tiene que ser usable. Buscamos usuarios felices, porque si están contentos en nuestra casa, nos aportarán beneficio. La experiencia de usuario es un medio, no un objetivo en sí mismo. De Usabilidad y Diseño nos habló Sergio de la Casa, CEO & UX lead en UNEXPENDABLES y uno de los mentores de los alumnos de Deusto ISCAcademy.

A Sergio de la Casa lo conocimos el primer día de clase. Ya entonces nos dejó claro que la mayoría de los proyectos fracasan porque ignoran al usuario. Así que primera lección: dejemos de mirarnos el ombligo.

Pero veamos cómo no caer en ese error al diseñar nuestro proyecto en internet.

A priori parece sencillo. Sólo tenemos que responder a 3 PREGUNTAS. Allá van:

PREGUNTA Nº1: ¿QUÉ O POR QUÉ?

• ¿Por qué existe este diseño?
• ¿Cuál es el objetivo? ¿Qué problema hay que resolver?
• ¿Por qué existe esta web?
• ¿Por qué hay que soportar este dispositivo?

“El mandamiento de la usabilidad: una página, un objetivo”

(Sergio de la Casa)

Diseñar para todo el mundo es diseñar para nadie.

Debemos preguntarnos qué buscamos:

Si el objetivo principal es vender… …vamos a vender

Si el objetivo principal es regalar… … pues todos los esfuerzos a decir que es Gratis y Bueno

ERROR HABITUAL: DISPARAR A TODO

- Hay quien tiene una página web y no debería tenerla. Ni siquiera se plantea si funciona o no. Simplemente está ahí.

- ¿Diseño Responsive SÍ ó NO? Sólo si nos va a hacer ganar dinero. No tiene sentido hacer un diseño adaptable para controladores aéreos que sólo van a utilizarlo en un entorno controlado.

- Huid del ME GUSTA/NO ME GUSTA. Un diseño tiene que hacer lo que promete. Diseñar no es pintar.

PREGUNTA Nº2: ¿PARA QUÍEN?

• ¿Quién va a utilizarlo?
• Este problema que queremos resolver, ¿quíen lo tiene?
• ¿Nos hace falta una web o no?
• ¿En qué contexto?

“El 50% del éxito de tu proyecto está en definir para quíen lo has creado. Si intentamos resolver un problema para la persona inadecuada, fallaremos”

(Sergio de la Casa)

CREACIÓN DE PERSONAS Y ESCENARIO

- Debemos definir el ARQUETIPO DE NUESTRO USUARIO: fotografía, nombre (sí,sí, ponle un nombre y un apellido porque acabarás “hablándole y preguntándole” cuando tengas dudas) aficiones, personalidad, costumbres, nivel económico, nivel de alfabetización digital… Para modelar a nuestra persona es imprescindible hablar con el cliente. Así sabremos cómo son los usuarios que demandan sus servicios.

- Pero además, debemos tener en cuenta el ESCENARIO en el que se mueve, ponernos en su lugar. Por ejemplo, el consumo que haces de tu revista de deportes favorita no es la misma en el sofá de casa que a escondidas en el trabajo (en cada caso se dan unas condiciones y probablemente se utilicen dispositivos diferentes)

 PREGUNTA Nº3: ¿CÓMO?

• ¿Cómo lo vamos a medir?
• ¿Tú cómo vas a comer de esto?

LA FAMOSA LISTA DE HEURÍSTICOS DE USABILIDAD

Jakob Nielsen, uno de los gurús de la usabilidad, cree que la mayoría de los errores de diseño se agrupan en 10 categorías.

Si incumples estas reglas, el sistema no funcionará:

1.- El sistema siempre debe mantener informado al usuario acerca de lo que está pasando. Muéstrales cómo estás y diles porqué.

EJEMPLO: Al subir un archivo, muestra una barra de progreso. Así el usuario recibe feedback: sabe cúanto queda, si la tarea se ha realizado…

2. Correspondencia entre el sistema y el mundo real. Háblale en su idioma con metáforas que entienda.

EJEMPLO: Los usuarios saben usar una estantería en la vida real. ¿Por qué no organizas tu sistema con la imagen de una estantería en la que cada categoría es un libro?

3. Control y libertad del usuario. Si se equivoca en un cruce, ofrécele rutas alternativas.

EJEMPLO: las opciones DESHACER Y REHACER. Algo tan simple guía al usuario por el camino correcto.

4. Usa estándares.

EJEMPLO: Antena 3… en el tres! Es algo consistente. Un estandar que cualquiera entiende.

5. Prevención de errores. Siempre que diseñes una escalera, ponle una barandilla. El diseño debe prevenir los errores de los usuarios antes de que los cometan.

EJEMPLO: Si hay dos opciones, ¿por qué no le pones fácil la primaria, la que casi todos usan?

Si existen dos botones: SUBMIT y CANCEL. ¿A que no quieres que cancele? Pues pon el botón SUBMIT más grande, en otro color… 

6. El diseño se basa en reconocer más que en recordar.

EJEMPLO: ¿Sabrías decirme cómo se ve una fuente Arial Black? Tal vez no lo recuerdes, pero sabrías reconocerlo si te muestro una vista previa. Te ayudo a reconocerlo:

7. Facilita la interacción con los usuarios. La interacción con una web debe ser como una NARRACIÓN.

EJEMPLO: ¿Nuestro usuario preferirá usar CUBIERTOS O PALILLOS? Lo que está claro es que no elegirá los dos!

Es muy importante tener cuidado con ofrecer demasiados escenarios improbables. Si sólo un 1% elige los palillos, tal vez te convenga prescindir de ellos.

8. Información y diseño minimalista. Evita toda información o elemento gráfico irrelevante.

EJEMPLO: El usuario no lee. Evítale toda distracción. Pero OJO! A veces puede pensar que algo muy simple es escaso o de baja calidad. Y ese tampoco sería un buen diseño.

9.  Los mensajes de error ayudan a solucionar el problema. Si no podemos poner una barandilla (punto 5), y sabemos que se va a caer, al menos ayudémosle a levantarse.

EJEMPLO: Sabes que tu usuario va a acabar escribiendo ESTIVEN SIGAL. Es inútil luchar contra ello. Anticípate y muéstrale el contenido como si lo hubiera escrito correctamente. Otro ejemplo: a la hora de rellenar un formulario, ¿no te parece útil que el sistema te vaya diciendo si lo estás completando bien o estás fallando en alguna de las casillas?

10. Cuando todo falle, sólo entonces, el usuario reconocerá que necesita AYUDA.

EJEMPLO: Adapta la documentación de ayuda a sus necesidades.

Los VÍDEOS INCRUSTADOS, por ejemplo, son muy útiles.

LA PRUEBA DEL ALGODÓN DE LA USABILIDAD

“El algodón no engaña”. ¿Cómo averiguar si nuestra web es usable?

1.- APLICAR LOS HEURÍSTICOS

2.- FIVE SENCONDS TEST

Enseña tu trabajo durante 5 segundos y después haz preguntas:

¿Para qué sirve? ¿Cuánto cuesta? ¿Qué vende?

3.- PAPER TESTING

Tan fácil como: pintar en un papel y que la gente haga clic con los dedos

• Es muy barato

• Se pueden probar tamaños, copys, comportamientos…

• No se pueden probar tiempos de respuesta

4.- CARD SORTING

Se trata de escribir en tarjetas de papel las categorías del menú y pedir a los usuarios que las agrupen.

De esta forma sabremos cómo deben agruparse los contenidos de nuestro sitio web y desecharemos muchas ideas preconcebidas.

“Desconfiad de quien os haga un diseño y no os pregunte qué queréis conseguir” 

(Sergio de la Casa)

“Lo importante es molar”

“El usuario es lo que más importa del mundo”

“Yo diseño lo que tú me digas”

Son comportamientos poco honestos en experiencia de usuario y debéis saber protegeros.

Buscad profesionales que sean capaces de defender una decisión de diseño, que diseñen plataformas fabricables y estad dispuestos a que os cuestionen.