#tertuliaspuntolab análisis del libro "the design of everyday things", don norman
TRANSCRIPT
#TERTULIASPUNTOLABLibro: “The Design of Everyday Things” de Don
Norman & Principios de diseño de HCI
Vero Urzúa & Vero Traynor | noviembre 2016
www.puntolab.co
ÍNDICE
1. Affordances2. Visibilidad3. Contraste4. Diferenciación5. Consistencia6. Limitaciones7. Topografía8. Modelo conceptual9. Feedback de interacción
10. Gestión de errores
“Lo seres humanos no siempre se portan con torpeza, no siempre se equivocan. Pero sí lo hacen cuando las cosas que
utilizan están mal concebidas y diseñadas”
Donald Norman
Primera edición: 1988
Última edición:2013
Editorial:Basic Books
1. AFFORDANCE
“El diseño es un acto de comunicación entre el diseñador y el usuario, donde toda la comunicación proviene de la apariencia
del objeto, el cual necesita explicarse por sí mismo”
Donald Norman
CALL TO ACTION CON AFFORDANCE
DE BOTÓN
CALL TO ACTION CON AFFORDANCE
¡Mira, tienes esta otra opción!
CALL TO ACTION CON AFFORDANCE
¡Tienes esta opción!
¡FALSO AFFORDANCE!
AFFORDANCECORRECTO :)
¡FALSO AFFORDANCE!
¡TSUNAMI DE FALSOS
AFFORDANCES!
2. VISIBILIDAD
“La falta de visibilidad hace que tantos dispositivos resulten difíciles de manejar. Y un exceso de visibilidad hace que
resulten tan intimidantes”
Donald Norman
VISIBILIDAD POBRE
No vemos cuál es el call to
action
EXCESO DE VISIBILIDAD
¡No resulta fácil hacer o encontrar
algo!
3. CONTRASTE
“Un buen diseño exige atención, planificación, reflexión. Exige una atención consciente a las necesidades del usuario”
Donald Norman
¡Hola!, soy un textosin mucho contraste
AL DISEÑADOR NO LE IMPORTÓ QUE LA
GENTE PUDIERA LEER :)
Herramienta para pruebas de contraste texto vs. background
4. DIFERENCIACIÓN
“La visibilidad indica unas distinciones cruciales. Gracias a ella podemos distinguir el salero del pimentero”
Donald Norman
NO SABEMOS CUÁL ES EL
CALL TO ACTION
PRINCIPAL
CALL TO ACTION
PRINCIPAL DIFERENCIADO
REGLA DE OROUN LINK NO SE PUEDE PARECER A UN TEXTOY UN TEXTO NO SE PUEDE PARECER A UN LINK
5. CONSISTENCIA
“¿Cómo hacer las cosas mal? Ser incoherente...
Que una cosa se haga de una forma en un modo y de otra forma en otro modo (...)
Lo bueno de la normalización es que por muy arbitrario que sea el mecanismo normalizado,
no hay que aprenderlo más que una vez”
Donald Norman
ESTE ÍCONO LLEVA A LA PÁGINA DEL
CARRITO
AQUÍ EL MISMO ÍCONO DESPLIEGA EL
BOX
Ejemplo de incoherencia en el lenguaje interactivo :/
“SHARE” NO ES UN BOTÓN(FALTA DE
CONSISTENCIA)
Ejemplo de incoherencia en el lenguaje interactivo :/
6. LIMITACIONES
“¿Cómo se pueden señalar los actos posibles? Un conjunto importante de señales procede de las limitaciones… que
reducen el número de cosas que es posible hacer”
Donald Norman
¿Por qué aparece el CTA habilitado si el usuario aún no ha
seleccionado nada? Debería estar
limitado el avance ;)
7. TOPOGRAFÍA
“La acción en sí tiene dos aspectos principales: hacer algo y verificar [...] La buena topografía sucede cuando es posible
determinar las relaciones entre los actos y los resultados, entre los mandos y sus efectos, y entre el estado del sistema y lo que
es visible”
Donald Norman
ACCIÓNDOWNLOAD
EFECTODOWNLOAD
8. MODELO CONCEPTUAL
“Un buen modelo conceptual nos permite predecir los efectos de nuestros actos.
Si no disponemos de un buen modelo, no podemos comprender por qué, qué efectos esperar ni qué hacer si las cosas salen mal”
Donald Norman
9. FEEDBACK DE INTERACCIÓN
“El usuario debe recibir una retroalimentación completa y consistente acerca de los resultados de sus actos”
Donald Norman
FEEDBACK DE INTERACCIÓN
“Aquí te aviso que ya no eres seguidor de
@GoogleTrends”
FEEDBACK DE INTERACCIÓN “Aquí te aviso que ya quedó
listo”
10. GESTIÓN DEL ERROR
“Si es posible cometer un error, alguien lo cometerá. El diseñador debe suponer que se van a cometer todos los
errores posibles y realizar su diseño con objeto de reducir al mínimo la posibilidad de error”
Donald Norman
¿Previene el error que el CTA “Cancelar” esté más jerarquizado?Suponer que el usuario va a cometer errores y permitirle DESHACER ;)
Diseñar para humanos es diseñar para permitir el error ;)
#TERTULIASPUNTOLAB¡Gracias por acompañarnos!
www.puntolab.co