10 claves, un mandamiento y un par de mentiras para diseñar webs y apps
-
Upload
sergio-de-la-casa -
Category
Design
-
view
335 -
download
0
Transcript of 10 claves, un mandamiento y un par de mentiras para diseñ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
Hacemos cosas que funcionan @unexpendables
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…
Hacemos cosas que funcionan @unexpendables
Sorprendentemente la fregona es un invento de los años 50
Hacemos cosas que funcionan @unexpendables
Pensamos, diseñamos y fabricamos los palos que convierten los trapos en
flamantes fregonas
Hacemos cosas que funcionan @unexpendables
NO somos una ONG J
Los usuarios felices están bien, pero
sólo porque nos aportan beneficio
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
Según Forrester, un producto debe ser:
Útil
Usable
Deseable
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
…estableció entonces
10 principios heurísticos
Uno por cada categoría de error
Hacemos cosas que funcionan @unexpendables
Los heurísticos NO son patrones de diseño
Son más bien Reglas de Oro
Un catálogo de
buenas prácticas
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
Y sobre todo, se apoyan en números
ü 249 problemas de usabilidad.
ü 10 heurísticos.
ü 318 subheurísticos.
Esto significa que…
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
Siempre informado del estado de su sistema…
Ejem, ¿Te ocurre algo sistema?...
Hacemos cosas que funcionan @unexpendables
“Todavía no te has dado cuenta de que
¡Los platos no se lavan solos!”
¡Mucho mejor!
Hacemos cosas que funcionan @unexpendables
Y no olvidarse de informar de cualquier cambio…
…en un tiempo
razonable
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
2.- Correspondencia entre el sistema y el mundo real
El diseño está adaptado al mundo real de los usuarios, su lenguaje, conocimientos, etc
Hacemos cosas que funcionan @unexpendables
Es necesario manejar
conceptos y metáforas familiares al usuario
Una web…
¡Es como un toro!
Hacemos cosas que funcionan @unexpendables
Manejamos… Archivos
Los guardamos en… Carpetas
Tiramos cosas a la… Papelera
Todos los días:
Hacemos cosas que funcionan @unexpendables
En iTunes
La metáfora de una biblioteca encaja con el modelo mental de los usuarios.
Contiene música, películas, audiolibros…
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
4.- Consistencia y estándares
El diseño es consistente internamente y con los estándares externos
Hacemos cosas que funcionan @unexpendables
De mi abuela he aprendido muchas cosas…
“Antena 3 en el tres”
Es así de simple
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
5.- Prevención de errores
El diseño debe prevenir los errores de los usuarios antes de que los cometan
Hacemos cosas que funcionan @unexpendables
(La gente intentará bajar corriendo)
Siempre que diseñes una escalera…
…ponle una barandilla
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
No te recuerda, ni te recordará nunca…
…pero es capaz de reconocerte
si le das la información adecuada
Hacemos cosas que funcionan @unexpendables
Vista previa de las fuentes en lugar de solo el nombre
Recomendaciones al escribir código en un entorno de desarrollo
Hacemos cosas que funcionan @unexpendables
7.- Flexibilidad y eficiencia de uso
Se facilita y optimiza la interacción con los usuarios cualesquiera que sean sus características
Hacemos cosas que funcionan @unexpendables
¿Qué prefieres?
O
Dos herramientas diferentes
para un mismo fin
Hacemos cosas que funcionan @unexpendables
El usuario elige
según el contexto y la necesidad
una opción u otra
Hacemos cosas que funcionan @unexpendables
¡Cuidado con los escenarios improbables!
Nadie come con palillos y tenedor a la vez
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
Si lo que quieres decir es “Árbol”
¡Quítale los adornos!
Por favor J
Hacemos cosas que funcionan @unexpendables
Los cuatro principios del diseño visual para diferenciar información:
• Contraste
• Color
• Alineamiento
• Proximidad
Hacemos cosas que funcionan @unexpendables
Pequeños detalles pueden marcar la diferencia y la percepción de calidad.
Hacemos cosas que funcionan @unexpendables
9.- Reconocimiento y recuperación de errores
Los mensajes de error ayudan a solucionar el problema
Hacemos cosas que funcionan @unexpendables
A veces no tenemos dinero para pagar barandillas…
Si no podemos evitar que se caiga…
…ayudémosle por lo menos
a levantarse
Hacemos cosas que funcionan @unexpendables
Feedback inmediato con instrucciones precisas
No siempre que ocurre un error es una tragedia. Lo importante es recuperarse.
Hacemos cosas que funcionan @unexpendables
10.- Ayuda y documentación
La documentación de ayuda está adaptada a las necesidades de los usuarios
Hacemos cosas que funcionan @unexpendables
Y si todo lo demás falla…
…sólo entonces
reconocerá que necesita ayuda .
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
Tooltips.
Para mostrar consejos sobre un elemento en concreto.
Y la ayuda de toda la vida. En ventana nueva con toda la información.
Hacemos cosas que funcionan @unexpendables
En 1976 Eduard Khil hizo un aporte impagable a la humanidad…
http://trololololololololololo.com/
Hacemos cosas que funcionan @unexpendables
• Puesta en escena perfecta
• Estética cuidada
• Ejecución es técnicamente muy profesional
• Pero…
Hacemos cosas que funcionan @unexpendables
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.
Hacemos cosas que funcionan @unexpendables
Un mandamiento nuevo nos dio el Señor:
Una página,
Un Objetivo
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
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
Hacemos cosas que funcionan @unexpendables
Mejor
Good enough & done
Is better than
perfect but undone
Hacemos cosas que funcionan @unexpendables
Leslie Nielsen
A nadie le importaba un comino. Pero era nuestro comino.
Hacemos cosas que funcionan @unexpendables
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:
Hacemos cosas que funcionan @unexpendables
Que nadie pueda decir que
no nos dio la mandanga
por que todo le sonaba a trololó.
Hacemos cosas que funcionan @unexpendables
¡Muchas gracias!
Para cualquier duda o cuestión [email protected]
@sergiodelacasa
www.unexpendables.com