10 claves, un mandamiento y un par de mentiras para diseñar webs y apps

Hacemos cosas que funcionan @unexpendables

10 claves, un mandamiento y un par de mentiras para diseñar webs y apps

Hacemos cosas que funcionan - www.unexpendables.com

Hacemos cosas que funcionan @unexpendables 2

Índice

I.  Presentación

II.  Pero ¿Esto qué es?

III.  ¿Por qué 10 claves?

IV.  10 preguntas que debe responder todo proyecto

V.  1 Mandamiento


Presentación


Hola, soy Sergio de la Casa @sergiodelacasa,

CEO & UX lead

Unexpendables

Llevo diseñando productos y soluciones desde el siglo pasado para Panda, Gamesa, Sherpa y otra gente…


Sorprendentemente la fregona es un invento de los años 50


Era tan fácil como atar el trapo de fregar a un palo


Pensamos, diseñamos y fabricamos los palos que convierten los trapos en

flamantes fregonas


Pero…¿Esto qué es?


NO somos una ONG J

Los usuarios felices están bien, pero

sólo porque nos aportan beneficio


La experiencia de usuario es un un medio, no un objetivo en si mismo.

Un producto bien diseñado tiene que ser usable. Pero no por ser usable es un buen producto.


Razón número 1 : Ignorar a los clientes


Según Forrester, un producto debe ser:

Útil

Usable

Deseable


¿Por qué 10 Claves?


Jakob Nielsen

Gurú


En 1990 Nielsen hizo un estudio sobre los

249 problemas de usabilidad más comunes.

Observó que se podían agrupar en

10 categorías


…estableció entonces

10 principios heurísticos

Uno por cada categoría de error


Los heurísticos NO son patrones de diseño

Son más bien Reglas de Oro

Un catálogo de

buenas prácticas


Cumplirlos, no garantiza el éxito…

…pero no hacerlo garantiza

un fracaso casi seguro.

Recuerda: Los heurísticos nacen como respuesta a los problemas más comunes de los usuarios.


Y sobre todo, se apoyan en números

ü 249 problemas de usabilidad.

ü 10 heurísticos.

ü 318 subheurísticos.

Esto significa que…


…No son opinables J

¡Palabra de Jakob!


Pero… ¿Sólo 10?

Desde 1990 la usabilidad se ha hecho mayor y se

han identificado nuevas reglas que añadir a la lista.

No obstante, en la lista original siguen siendo 10.


10 preguntas que debe responder todo proyecto


Con ustedes, la famosa lista de heurísticos:

1.  Visibilidad del estado del sistema 2.  Correspondencia entre el sistema y el mundo real 3.  Control y libertad del usuario 4.  Consistencia y estándares 5.  Prevención de errores 6.  Reconocimiento más que memoria 7.  Flexibilidad y eficiencia de uso 8.  Información y diseño minimalista 9.  Reconocimiento y recuperación de errores 10. Ayuda y documentación


Pero vayamos por partes…


1.- Visibilidad del estado del sistema

El sistema siempre debe mantener informado al usuario acerca de lo que está pasando, e informarle de cualquier cambio en un tiempo razonable


Siempre informado del estado de su sistema…

Ejem, ¿Te ocurre algo sistema?...


¡MAL!

“¡Tú sabrás lo que has hecho!”


“Todavía no te has dado cuenta de que

¡Los platos no se lavan solos!”

¡Mucho mejor!


Y no olvidarse de informar de cualquier cambio…

…en un tiempo

razonable


Algunos ejemplos reales…

Al pulsar, el botón se sustituye por una barra de progreso hasta que finaliza el proceso

Se muestra un mensaje al finalizar una tarea

La fortaleza de la contraseña se muestra en tiempo real


2.- Correspondencia entre el sistema y el mundo real

El diseño está adaptado al mundo real de los usuarios, su lenguaje, conocimientos, etc


Es necesario manejar

conceptos y metáforas familiares al usuario

Una web…

¡Es como un toro!


Manejamos… Archivos

Los guardamos en… Carpetas

Tiramos cosas a la… Papelera

Todos los días:


En iTunes

La metáfora de una biblioteca encaja con el modelo mental de los usuarios.

Contiene música, películas, audiolibros…


Skeuomorfismo


3.- Control y libertad del usuario

Los usuarios a menudo eligen opciones por error. Hay que facilitarles una salida de emergencia.

Permitir deshacer y rehacer.


En la siguiente rotonda

continúe recto,

segunda salida


…a la izquierda

ha dicho, no?


…recalculando ruta…

por tercera vez


A esta opción de búsqueda es fácil acceder, introducir información, realizar una búsqueda y cancelarla

Está marcado claramente dónde está el usuario y hacia dónde puede ir


Y los famosos

Deshacer y Rehacer


4.- Consistencia y estándares

El diseño es consistente internamente y con los estándares externos


¡Mi pueblo!


¡Mi abuela!


De mi abuela he aprendido muchas cosas…

“Antena 3 en el tres”

Es así de simple


Gmail:

Adopta el mismo estándar que otros clientes de email existentes

Office 12:

Idéntico estilo en las toolbars e iguales opciones en los menús de todos los productos


5.- Prevención de errores

El diseño debe prevenir los errores de los usuarios antes de que los cometan


¡Falso!

+ =


+ =


(La gente intentará bajar corriendo)

Siempre que diseñes una escalera…

…ponle una barandilla


Algunos ejemplos reales…

Mostrar la acción primaria de forma más relevante (Ley de Fitts)

El auto-recomendar evita errores tipográficos

El foco se coloca automáticamente en el cajetín de búsqueda


6.- Reconocimiento más que memoria

El diseño se basa en reconocer más que en recordar para permitir al usuario interactuar de manera fácil y productiva.


Y tú

¿De quién eres?

Soy el nieto de Angelines


No te recuerda, ni te recordará nunca…

…pero es capaz de reconocerte

si le das la información adecuada


Vista previa de las fuentes en lugar de solo el nombre

Recomendaciones al escribir código en un entorno de desarrollo


7.- Flexibilidad y eficiencia de uso

Se facilita y optimiza la interacción con los usuarios cualesquiera que sean sus características


¿Qué prefieres?

O

Dos herramientas diferentes

para un mismo fin


El usuario elige

según el contexto y la necesidad

una opción u otra


una opción u otra


¡Cuidado con los escenarios improbables!

Nadie come con palillos y tenedor a la vez


¿Un ejemplo de esto?

O Ctrl+V


8.- Información y diseño minimalista

El diseño evita toda información o elemento gráfico irrelevante y sólo incluye la información necesaria


Lo que no es información

es ruido


Menos es Más


Lo que no suma

resta


Si lo que quieres decir es “Árbol”

¡Quítale los adornos!

Por favor J


Los cuatro principios del diseño visual para diferenciar información:

• Contraste

• Color

• Alineamiento

• Proximidad


¿Primera mentira?


Existe el concepto de

Complejidad Explícita


Simple no es escaso, ni de baja calidad.


Pequeños detalles pueden marcar la diferencia y la percepción de calidad.


9.- Reconocimiento y recuperación de errores

Los mensajes de error ayudan a solucionar el problema


¿Os acordáis de él?

¡Ay!


A veces no tenemos dinero para pagar barandillas…

Si no podemos evitar que se caiga…

…ayudémosle por lo menos

a levantarse


O puedes encontrarte de pronto con…


v

O puedes encontrarte de pronto con…

Estiven Sigal


Feedback inmediato con instrucciones precisas

No siempre que ocurre un error es una tragedia. Lo importante es recuperarse.


10.- Ayuda y documentación

La documentación de ayuda está adaptada a las necesidades de los usuarios


Y si todo lo demás falla…

…sólo entonces

reconocerá que necesita ayuda .


Hay muchas maneras de hacerlo

Ayuda contextual. Muestra un contenido u otro en función de dónde estemos.

Vídeos incrustados. Son muy útiles para mejorar los ratios de conversión.


Tooltips.

Para mostrar consejos sobre un elemento en concreto.

Y la ayuda de toda la vida. En ventana nueva con toda la información.


Y hasta aquí con las 10 claves


Un mandamiento


Eduard Khil


En 1976 Eduard Khil hizo un aporte impagable a la humanidad…

http://trololololololololololo.com/


•  Puesta en escena perfecta

•  Estética cuidada

•  Ejecución es técnicamente muy profesional

•  Pero…


¡No dice nada!


La interacción con una web debe ser como una narración.

Cuando el usuario se vaya, tiene que ser capaz de

contar lo que le hemos querido transmitir.


¿Qué vamos a contar?

¿TROLOLO?


Un mandamiento nuevo nos dio el Señor:

Una página,

Un Objetivo


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


Pero orientados a UN Objetivo.

Y si hay varios…

…Priorizad

El % de espacio en pantalla que dedicamos a cada objetivo, es una métrica válida


Por qué decir Trololo, si podemos decir…


¿Segunda mentira?


Done is better than perfect


Pero…

¿Podrías definirme “done”?


Done ≠ Perfect

Done ≠ Chapuza


Mejor

Good enough & done

Is better than

perfect but undone


¿Y para una App?

Recurramos de nuevo a Nielsen


Leslie Nielsen

A nadie le importaba un comino. Pero era nuestro comino.


En resumen


1.  Muestrale cómo estás y dile porqué. 2.  Háblale en su idioma, con metáforas que entienda 3.  Si se equivoca en un cruce, dale una ruta alternativa. 4.  Pon Antena 3 en el 3. (Cada cosa en su sitio). 5.  Pon barandillas en las escaleras. 6.  Que reconozca lo que muestras. No te recordará. 7.  Dale tenedor o palillos si le hacen falta. No a la vez. 8.  Si quieres decir “Árbol”, no lo pongas con adornos 9.  Si no puedes evitar que se caiga, ayúdale a levantar 10.  Y si todo falla, que pueda acceder a la ayuda

Veamos de nuevo la lista de heurísticos:


Pero, por encima de todo…


Sed siempre fieles al

Objetivo


Que nadie pueda decir que

no nos dio la mandanga

por que todo le sonaba a trololó.


¡Muchas gracias!

Para cualquier duda o cuestión [email protected]

@sergiodelacasa

www.unexpendables.com

10 claves, un mandamiento y un par de mentiras para diseñar webs y apps

Design