#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