Diseñando interfaces para humanos

Diseñando Interfaces para Humanos
José Gutiérrez
@josernitos

Canción: Stairway to Heaven (Normal y al revés)
https://youtu.be/zGsUcPdPWBg?t=28s
// Escuche el video de Led Zeppelin, pero no lo vea, dura 1
minuto. Luego de escuchar el video, vea la próxima diapositiva.

• So here’s to my sweet Satan
• The one little path
• Would make me sad whose power is satan
• He’ll give those with him 666
• And all those fools who made us suffer, sad satan
¿Escuchó esto?

Canción: Stairway to Heaven (Normal y al revés)
https://youtu.be/zGsUcPdPWBg?t=28s
// Vea el video, especialmente cuando suena la canción al revés,
para comprobar si pudo o no escuchar la letra anterior.

¿Cómo es que antes no entendíamos el audio y luego con
las letras si entendemos claramente lo que decía?
Nuestro cerebro está diseñado a buscar patrones y llenar
huecos informativos si no los encuentra, todo para poder
entender el mundo que nos rodea.

Diseño debería ser la representación de la intención
@josernitos
Limitaciones del ser humano

@josernitos
Limitaciones del ser humano

@josernitos
Percibimos lo que esperamos

Psycho: Escena de la ducha
https://youtu.be/8VP5jEAP3K4?t=1m12s
// Ver escena de Psycho

Los cineastas toda la vida han utilizado esta característica de
nuestras mentes para generar suspenso.
Esto lo podemos ver cuando como espectadores tenemos mayor
cantidad de información que el personaje, lo que nos hace
preguntarnos qué es lo que el personaje va hacer o cómo va
reaccionar ante la situación.

• Contexto
• Experiencia
• Metas
• Expectativas

• ¿Cuántas notiﬁcaciones tengo?

• ¿Cuántas notiﬁcaciones tengo?
• ¿Qué hora era?

@josernitos
Nuestros sentidos se “agudizan” cuando
tenemos una meta.
• Cuando buscamos a una persona en un lugar lleno de
gente, nuestro cerebro se pone en modo “búsqueda".

@josernitos
• Debemos alejarnos de la ambigüedad
• Ser consistentes
• Entender las metas de nuestros usuarios
• Diseñar teniendo en cuenta cuáles son las aspiraciones y
expectativas del usuario para completar su objetivo/meta.
Implicaciones en Diseño

@josernitos
Visión está optimizada para ver estructura

Gestalt:
• Nuestro sistema visual primero ve objetos como un todo, antes que
sus partes individuales.
• Nuestra mente simpliﬁca el mundo visual para tratar de clariﬁcar y
entenderlo con mayor facilidad.
• Rellenamos la información visual con el objetivo de completar
objetos.

• Continuidad
amazon.com
ArtfulDodger.com

• Figura / Fondo basecamp.com

• Fácil:
8123 - 4567
• Difícil:
81234567
• Fácil:
1234 - 5678 - 9012 - 3456
• Difícil:
1234567890123456

• FÁCIL:
8123 - 4567
• DIFÍCIL:
81234567
• FÁCIL:
1234 - 5678 - 9012 - 3456
• DIFÍCIL:
1234567890123456

• FÁCIL: 8123 - 4567
• DIFÍCIL: 81234567
• FÁCIL:1234 - 5678 - 9012 - 3456
• DIFÍCIL:1234567890123456

FÁCIL: 8123 - 4567
DIFÍCIL: 81234567
FÁCIL:1234 - 5678 - 9012 - 3456
DIFÍCIL:1234567890123456

@josernitos
Si vemos estructuras, primero
diseñemos estructuras.
• Bocetos -> Wireframes -> Prototipo -> Diseño

@josernitos
• Las personas no leen, escanean.
• Jerarquía visual ayuda a las personas a enfocarse en la
información relevante para lo que ocupan.
• Diseñe estructuras que podamos escanear información.

@josernitos
El lenguaje es innato, la lectura no

• Sin ningún sistema o forma de aprender a los:
• 7 - 12 meses ya podemos decir algunas palabras
• 12 - 24 meses ya podemos decir frases
• Estamos programados para hablar y entender lenguaje hablado

• Sea conciso
• Escriba lo necesario
• Nadie quiere leer relleno
"Get rid of half the words on each page,
then get rid of half of what’s left."
—krug’s third law of usability

Su sesión ha expirado. Por
favor re-autentíquese.
Su sesión ha expirado. Por
favor vuelva iniciar sesión.vs

@josernitos
La lectura ya implica un esfuerzo
cognitivo, disminuyamos esa carga.
• Lenguaje común, texto conciso.

@josernitos
• Mal diseño de información puede afectar la lectura.
• Lenguaje inusual, jerga, etc.
• Tipografías difíciles de leer
• Uso de mayúsculas
• Letra pequeña
• Texto en fondo difícil de leer
• Texto centrado
• Leemos poco, escaneamos mucho.

@josernitos
Nuestra visión periférica es imperfecta

baccredomatic.com

www.bncr.ﬁ.cr/BNCR/Default.aspx

@josernitos
Hagamos obvios los errores, los pasos
a seguir, etc.
• Comuniquemos donde el usuario lo espera o está viendo.

@josernitos
• Señale los errores
• Use símbolos de error
• Use el rojo

@josernitos
Nuestra atención es limitada

• Ir a la cocina, abrir la refri, olvidar qué iba hacer.
• Tomar una llamada y olvidar que era lo que estaba haciendo.
• Ir al cajero, sacar plata, olvidar la tarjeta.
Nos enfocamos en nuestras metas y le ponemos poca
atención a nuestras herramientas.

• Seguimos el “olor” a nuestra meta
Nos enfocamos en nuestras metas y le ponemos poca
atención a nuestras herramientas.

Meta: Pagar a Iván 20.000 colones

¿Cuál es la diferencia?
Supongo que, local.

Es de otro banco,
pero ¿porqué cheque?
¿qué es SINPE?

@josernitos
Las metas gobiernan nuestra atención,
diseñemos en función a estas metas.

@josernitos
• Recuérdele al usuario qué ha hecho, qué ha cambiado
• Piense cuál es la meta del usuario, diseñe en función a eso.
• Piense los posibles modelos mentales del usuario.
• Cree consistencia
• Atomic Design
• Style Guides

@josernitos
Diseño es la representación
de la intención

@jmspool
Design is the Rendering of Intent

Diseño es la representación de la intención
• Diseño = Solución
• Representación = Manifestación
• Intención = Objetivo

¿Cuál es mejor solución (diseño)?

Ninguna

@josernitos
El mejor diseño debe tomar en cuenta el
Usuario, el Negocio y sus Recursos.

@josernitos
• Debemos entender el contexto del Negocio, presupuesto
disponible, tiempo, tecnología, equipo.
• Diseñar manteniendo un equilibrio entre las necesidades
del negocio + las necesidades de los usuarios.
• Entender los objetivos de lo que vamos a crear,
cuestionar esos objetivos hasta entenderlos al 100%.

@josernitos
Comprendiendo cómo el ser humano
procesa información, es el primer paso
para diseñar soluciones acertadas,
entendibles y usables.

@josernitos
Diseñar comprendiendo las limitaciones
del ser humano, fortalece nuestro
negocio y lo puede llevar a otro nivel.

@josernitos
facebook: UX Costa Rica
josernitos.com

Diseñando interfaces para humanos

Más contenido relacionado

Similar a Diseñando interfaces para humanos

Último

Diseñando interfaces para humanos