Algoritmos y programación III 1C2018 Curso Fontela, FIUBA 18-6-2018

Diseñando para humanos:

HCI/UX

Maia Naftali (maia.naftali@gmail.com)

 Me presento…

• Maia Naftali maia.naftali@gmail.com

• Ing. En Informática Fiuba, 2010.
• Sobrevive a la graduación e inicia maestría en investigación HCI en UMD, Maryland
• Después de dos tesis e inviernos helados, vuelve a la industria como UX/etc
 Hoy:HCI/UX

oParte I: Interacción h-c y usabilidad

o Qué, por qué, desde cuándo, cómo
o Proceso de diseño centrado en el usuario

oParte II: Principios de diseño de interacción

oHeurísticas Nielsen
oConsejos generales
oEjercicio UCD de ideación/diseño
Parte I:
Interacción h-c y usabilidad, UX, UCD
Por qué
Nosotros – licenciados e ingenieros informáticos
– somos quienes ideamos, creamos y facilitamos
tecnología a la sociedad.
Malos ejemplos y experiencias frustrantes
Malos ejemplos y experiencias frustrantes
Video: Norman’s Doors
 El mal diseño genera malas experiencias de usuario

• Causa frustración: menos satisfacción de usuarios

• Provoca accidentes
• Menos personas lo usan
• Alto costo de ayuda/soporte técnico
Por qué nos invaden las
“malas experiencias”?
Por qué nos invaden las “malas experiencias”
No se tuvo en cuenta
• Usuario
• Contexto
• Objetivo/propósito
No siempre el usuario está sentado en una oficina
El efecto Malkovich (Malkovich Bias)

Tendencia a pensar que los demás usan la tecnología

como uno
 Definiciones

User
HCI eXperience Usabilidad UCD Accesibilidad
(UX)
 1. Qué es HCI
“La interacción humano-computador (human-computer
interaction) es el área de la informática/CS que estudia cómo las
personas interactuamos con la tecnología.”
Implica el entendimiento de las habilidades cognitivas y
psicológicas de los usuarios, y abarca tanto el diseño como la
evaluación de la tecnología.
Arte

Ciencias de la Computación

Diseño

Economía

Ergonomía

Ingeniería

Psicología

Sociología

[Findlater, inst631]
Douglas Engelbart (1935-2013)
Uno de los fundadores de HCI

Famoso por inventar el Mouse

En 1968

Impulsor del desarrollo de

tecnologías para mejorar la
interacción humano-
computadora

SRI en los 70’s: bitmaps,

multiuser sw, múltiples
ventanas
XEROX Palo Alto RC (70s)
Primera GUI

Manipulación directa WYSISYG

Smalltalk

Edición de gráficos

Dispositivos de entrada
XEROX Palo Alto RC (70s)

Uso de metáforas
 II. Qué es la Usabilidad

La usabilidad es el el grado de efectividad de la

interacción entre operadores y sus máquinas
(Nielsen J.).

Se toma como un atributo de calidad que mide cuán

fácil es nuestra interfaz de ser usada.
Hay 5 componentes que la definen: (LEMES)

[https://www.nngroup.com/articles/definition-user-experience/]
Atributos de la USABILIDAD - LEMES

• Learnability/Aprendizaje: ¿Qué tan fácil es para los

usuarios hacer tareas básicas desde el primer uso?
Learnability

• Efficiency/Eficiencia: Una vez que aprendieron el

diseño, Qué tan rápido pueden completer las tareas?
Efficiency

• Memorability/Memorización: Cuando los usuarios

vuelven a la interfaz después de un tiempo sin
Usability haberla usado, Qué tan fácil pueden volverse
performantes nuevamente?

Satisfaction Memorability • Errors/Errores: Cuántos errores comenten los

usuarios, qué tan severos son, y cómo se pueden
recuperar?
Errors
• Satisfaction/Satisfacción: Qué tan placentero es
usar la interfaz?

[https://www.nngroup.com/articles/definition-user-experience/]
[ISO 13407: Human-centered design process]
Learneability – Efficiency – Memorability - Errors - Satisfaction

Consola  Eficiencia Tinder  Satisfacción, aprendizaje

 Qué es UX
“User experience" encompasses all aspects of the end-
user's interaction with the company, its services, and its
products”( Nielsen-norman).
Una Buena experiencia de usuario:
• Satisface los requerimientos de un usuario final

• Genera productos que sean deseables de tener y utilizar

• Involucra servicios de muchas disciplinas, incluyendo ingeniería,

marketing, diseño industrial y visual, y diseño de interfaces

Estudia todos los aspectos de la interacción de un usuario con el servicio,

producto o software. No se limita a la UI o parte visual solamente!

[https://www.nngroup.com/articles/definition-user-experience/]
 Accesibilidad (a11y)
“Capacidad de que un artefacto pueda ser usado por
personas con discapacidad”
 Algunas definiciones
“… lo que hace que algo sea usable es la ausencia
de frustración en el uso”

“La verdadera usabilidad es invisible. Si algo anda

bien, nadie se queja.”

“Las interfaces son como una broma> si hay que

explicarlas ya no son buenas”

Jeffrey Rubin & Dana Chisnel

[Fontela, 1C2015]
 Algunas definiciones (2)
“Don’t make me think”
(Steve Krug)
“Cuando todo falle, lea las instrucciones”
(Ley de Murphy)
“Vice-presidents are not users”
(Jackob Nielsen)
“El programa funciona bien. Lo que pasa es que
usted está cometiendo el mismo error que todos.”
(Steve McConnell)

[Fontela, 1C2015]
 User-centered design (UCD)

Diseñar pensando en el usuario

Antecedentes en la Ing. Industrial

Frederick Taylor Junto con Ford exploraron métodos para

hacer al operario más eficiente en la línea de producción
 Ergonomía, estudio del movimiento
User-centered design

El diseño se adapta al usuario (y no al revés)

 Qué es User-centered design
Es un enfoque del proceso de diseño que toma en cuenta los
requerimientos, limitaciones y necesidades de los usarios en toda las
etapas.

Es iterativo, empieza entendiendo la necesidad del usuario, y se

prueban continuamente prototipos de baja a alta resolución con
usuarios

Research Ideate Design Develop Evaluate

[ISO 13407: Human-centered design process]

Prototipo de baja resolución
Pruebas con usuarios
Parte II:
Principios de diseño de interacción
 Ley de Fitts (1954)
“modelo del movimiento humano, que predice el tiempo necesario para
moverse rápidamente desde una posición inicial hasta una zona destino
final como una función de la distancia hasta el objetivo y el tamaño de
éste.”(Wikipedia)
El tiempo que tardo en ir hacia un objetivo depende del ratio entre
distancia y tamaño
 Para reducir el tiempo de apuntar un objeto, conviene reducir la distancia
o aumentar el tamaño  lo importante, grande y cerca preferentemente
Estudio de la eficiencia vs. Satisfacción
 De personal computer a portable
- computación ubicua
- Displays reducidos
- Dispositivos móviles que nos conocen  adaptive ui
- Manipulación directa (touch vs point devices)
- Wearables, augmented body….
Pensar en la tarea que el usuario intenta hacer
Tarea, objetivo, contexto, persona

Qué intenta hacer

Qué información
Quién es mi usuario necesita

Qué restricciones hay En dónde está

Mental Models

Las interfaces deben comunicar un modelo

Modelos preconcebidos: Predicción
 Mental Models
Los Buenos modelos conceptuales ayudan a predecir los efectos de nuestras
acciones
Affordances, constraints, mappings

Los agujeros
sugieren introducir
algo en ellos
(dedos)

El diseño El tamaño de los

condiciona la agujeros limita el
relación entre los objeto a introducir
filos, los dedos, y
los agujeros
Mental Models
 Mental Models

“You know it won’t work because you form a

conceptual
model of the device and mentally simulate its
operation.
You can do the simulation because the parts are
visible
and the implications are clear.”
–Don Norman
 Creadores de guías de diseño
6 Design Principles First Principles of Interaction Design

Bruce Tognazzinni
Donald Norman

8 Golden Rules 10 Usability Heuristics

Ben Shneiderman Jakkob Nielsen

Principios de diseño de Norman

1. Visibility: Can I see what to use?

2. Affordance: How do I use it?
3. Feedback: What is it doing now?
4. Mapping: How does it relate?
5. Constraint: I can do this, but I can’t do
6. Consistency: Have I seen this before?
 Visibility
Can I see what to use?
Visibility
 Affordance
How do I use it?
 Feedback
What is it doing right now?
Feedback
 Mapping
How does it relate?
 Constraint
I can do this, but I can’t do that.: semantic, cultural
 Consistency
Have I seen this before?
Nielsen’s Heuristics (1995)

1. Visibility of system status

2. Match between system and the
real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose
and recover from errors
10. Help and documentation

[https://www.nngroup.com/articles/ten-usability-heuristics/]
1. Visibilidad del estado del Sistema: el Sistema siempre tiene que mantener a los usuarios informados de lo que está pasando,
y dar feedback en tiempo razonable.

2. Relación entre el Sistema y el mundo (AKA hablemos el mismo idioma): between system and the real world. El Sistema debe
hablar el idioma del usuario, con frases que conoce y son familiares y no jerga técnica. Siga las convenciones del mundo real, y
haga que la información aparezca en el orden natural y lógico.

3. Control del usuario y libertad: Soporte de hacer y deshacer (undo/redo). Los usuarios suelen elegir opciones por error y
necesitan una salida delimitada para abandonar ese estado.

4. Consistencia y estádares. Siga el estándar de su plataforma. Los usuarios nunca deberían adivinar si diferentes palabras,
situaciones o acciones significan lo mismo.

5. Prevención de errores. Un diseño que previene errores desde el inicio es major que unos Buenos mensajes de error. Elimine
condiciones que conducen a errores, o verifiquelas y presentele a los usuarios una confirmación antes de ejecutar la acción.

6. Reconocimiento antes que recuerdo. Minimice el uso de memoria del usuariohaciendo que objetos, acciones y opciones
estén visibles. El usuario no debería recorder información de una interfaz en otra. Las instrucciones de uso deberían ser
accesibles en le momento necesario.

7. Flexibilidad y eficiencia de uso. Los atajos o shortcuts, invisibles para el novato, agilizan la interacción con el usuario experto,
y de esta forma se puede satisfacer a ambos por igual. Permita que los usuarios agilicen acciones frecuentes.

8. Estética y diseño minimalista. La interfaz no debería contener información no relevante o poco usada. Cada unidad extra de
informaci’n compite con la relevante, y degrada su visibilidad.

9. Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores. Los mensajes de error deberían mostrarse en
lenguaje plano, sin código, indicar el problema y sugerir una solución.

10. Help and documentation. Even though it is better if the system can be used without documentation, it may be necessary to
provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps
to be carried out, and not be too large.

[https://www.nngroup.com/articles/ten-usability-heuristics/]
“1. Visibilidad del estado del sistema”

El Sistema siempre tiene que mantener a los usuarios

informados de lo que está pasando, y dar feedback en
tiempo razonable.
“I1. Relación mundo-sistema: Familiaridad”

El Sistema debe hablar el idioma del usuario, con

frases que conoce y son familiares y no jerga técnica.
Siga las convenciones del mundo real, y haga que la
información aparezca en el orden natural y lógico.
“III. Control de usuario y libertad

Soporte de hacer y deshacer (undo/redo). Los

usuarios suelen elegir opciones por error y necesitan
una salida delimitada para abandonar ese estado.
“ IV. Consistencia y estándares”

Comandos: misma acción,

mismo efecto
Tareas similares se manejan igual
EN la misma suite, mismos
comandos

Siga el estándar de su plataforma. Los usuarios nunca

deberían adivinar si diferentes palabras, situaciones o
acciones significan lo mismo.
“V. Prevención de errores”

Manejar los errores de forma positiva

• Recuperación de datos perdidos
• Prevención de errores de entrada
• Informar de forma clara en lenguaje de
usuario
• Undo por sobre confirmación (trash)
• Prevenir a los usuarios de continuar
una acción no permitida o bloquearla y
avisar
Un diseño que previene errores desde el inicio es
mejor que unos buenos mensajes de error.
Elimine condiciones que conducen a errores, o
verifíquelas y preséntele a los usuarios una
confirmación antes de ejecutar la acción.
“V1. Reconocimiento antes que memorización”

Minimice el uso de memoria del usuario haciendo que

objetos, acciones y opciones estén visibles. El usuario
no debería recordar información de una interfaz en
otra. Las instrucciones de uso deberían ser accesibles
en le momento necesario.
“VI1. Flexibilidad y eficiencia de uso (shortcuts)”

Poner atajos a las operaciones o acciones más usadas

Un experto debería realizar las operaciones frecuentes rápidamente

Cómo? Favoritos, toolbars, recientes, typeahead

Los atajos o shortcuts, invisibles para el novato,

agilizan la interacción con el usuario experto, y de
esta forma se puede satisfacer a ambos por igual.
Permita que los usuarios agilicen acciones frecuentes.
“VII1. Estética y diseño minimalista”

La interfaz no debería contener información no

relevante o poco usada. Cada unidad extra de
información compite con la relevante, y degrada su
visibilidad.
“1X. Recuperación ante errores”

Los mensajes de error deberían mostrarse en lenguaje

plano, sin código, indicar el problema y sugerir una
solución.
“X. Ayuda y documentación”

Aunque es mejor que el sistema sea usado sin

documentación, puede ser necesario proveer ayuda.
Debería ser fácil de buscar y enfocada en la tarea del
usuario, listar pasos concretos y no ser muy extensa.
Recomendaciones generales
de diseño
No usar el color cómo única forma de mostrar información

- Personas con daltonismo (ceguera al color) podrían no

percibirlo
- La interpretación es puramente cultural
Elegir colores con suficiente contraste

- Personas con baja visión podrían no ver la información

- Usuarios de dispositivos móviles al sol se verían
perjudicados
El color debe ser consistente con la información

rojo, amarillo, verde, azul, rojo, amarillo, verde, azul, rojo, amarillo, verde, azul,
rojo, amarillo, verde, azul, verde, rojo, azul, amarillo, verde, verde, amarillo,
azul, rojo,rojo, amarillo, verde, azul, rojo, amarillo, verde, azul, rojo, amarillo,
verde, azul, verde, amarillo, rojo, amarillo, verde, azul, rojo, amarillo, verde,
azul, rojo, amarillo, verde, azul, rojo, amarillo, verde, azul, verde, rojo, azul,
amarillo, verde, verde, amarillo, azul, rojo,rojo, amarillo, verde, azul, rojo,
amarillo, verde, azul, rojo, amarillo, verde, azul, verde, amarillo

- Hagan la prueba de leer sin errar..

Evitar parpadeos, transiciones fuertes de color, efectos

- Distraen, dificultan la lectura

- Al usar videos, ser cuidadosos con los
colores/velocidad (paypal=ok)
- Evitar los carruseles que no paran. Nadie puede leer en
5 segundos!
Diseñar el texto para el “picoteo”/scam

- Leemos en F
- Asegurarse de que lo más importante esté al inicio
- Ayudarse con bold/imágenes
- Un buen libro del tema: don t make me think (S. Krug)
El número de oro 5 +/-2 para los elementos en un grupo

8564 5585 3559 3588  agrupar números en bloques para

mejorar la memorización

- Si hay más de 10 elementos en un conjunto (por ejemplo, menú)

requiere más esfuerzo mental encontrarlos  evitar menús infinitos
- Dar menos opciones y mejorar el agrupamiento
- Mostrar la información en bloques o chunks
Formularios: agrupar, reducir, informar, persistir

- Agrupar los elementos similares (ejemplo 1)

- Si hay muchos campos, dividir el form en partes. Necesito todo? (mal
ejemplo 2)
- Mostrar errores y campos requeridos
- Permitir la acción reversa (undo)
- Guardar mientras el usuario completa (deseable)
Aceptar/cancelar en posiciones consistentes

- Alterar el orden sólo para llamar la atención ante acciones

‘peligrosas’ (“Desea realmente formatear su disco?”)
Aceptar/cancelar en posiciones consistentes

- Alterar el orden sólo para llamar la atención ante acciones

‘peligrosas’ (“Desea realmente formatear su disco?”)
Botones y elementos fáciles de apuntar (recordar Fitt’s)

- Al menos 44x20 de medidas

- Separar las acciones como aceptar-cancelar
- Contraste suficiente
- Feedback ante evento tap/click
Dar feedback y acceso por teclado a formularios

- Informar a dónde tengo el foco

- Siempre proveer acceso por teclado y shortcuts
Finalmente..todo hermoso pero no me hagas pensar!!

- El ejemplo es un sitio web. A dónde tengo que ir??

- El minimalismo extremo es poco descubrible!!! Evitar
- Evitar bajos contrastes, tan de moda.. Y letras ultra-thin. Leer o adornar?
- Tendencia no es usabilidad ni diseño. La moda pasa..
Ejercicio
de UCD
 “Fútbol App”
Trabajás en el operador de cable “rebif”. Un jefe con
mucho presupuesto decidió lanzar una app para que
todos los jubilados con DNI vean fútbol en HD
gratis.

A cambio, se muestra publicidad dirigida y se

obtienen datos de uso de la aplicación.

El CTO armó un hackathon en la empresa y regala un

viaje a la final del mundial para la mejor solución.
En grupos de 4 Diseñar la pantalla de ingreso
(login) y reproducción de la app

- Sólo se transmite 1 partido a la vez

- No puede ser usada por alguien que no sea ese jubilado
- Todos los jubilados tienen DNI

Actividades: 5 min cada una

- Empatizar
- Idear
• Protitipar
• Napkin Pitch para feedback
 1. Empatizar con el usuario:
Protopersona en 5 minutos!
Pensar en alguien que va a usar la app, ponerle un nombre e
inventar una historia alrededor de el (1 o 2 párrafos)
Nombre, edad, cuadro, qué hace, qué tecnologías usa, cómo vive,
con quien, de qué trabajó, como está, cómo se siente.

Luis López, 70 años, supervisor de planta retirado, River

Plate. Luis trabajó 40 años en Aluar, y ahora vive en Temperley con su
mujer Elida. Tiene 2 hijas y 5 nietos en Capital.
En su tiempo libre juega al tenis. Hace unos meses le regalaron un
teléfono Android que su hija no quiere más y lo usa para hablar con la
familia y sacar fotos.
Le cuesta mucho leer la letra pequeña, y se olvida seguido de cargarle la
batería al igual que de otras cosas. Sus nietos lo visitan el fin de semana
y se encargan de que esté todo bien
II. Idear la mejor solución para
nuestra persona (5 minutos)
• La mejor solución para que nuestra persona pueda
ingresar a la app (login) y ver el partido en vivo del
momento (player)

• Piensen en problemas que pueda tener con la

forma tradicional

• sean creativos, piensen que todo es posible! No se

restrinjan a lo que hay….
III.A dibujar! (5 minutos)
• Papel y lápiz: dibujen su solución
IV. Pitches!
• Discutan como mostrarle a los demás su
solución y mostrar por qué funcionaría para
“Luis”, y todo lo que tuvieron en cuenta para
diseñarlo
Cuántos pensaron en…
• Tamaño de los botones y letras?
• Botón para cerrar y parar?
• Aumento y disminución del volumen? Mute?
• Qué pasa si no hay internet??
• Incluir ayuda o help?
• Problemas de memorización de la contraseña
tradicional?
• Métodos alternativos al uso de contraseñas?
reconocimiento de imagen? huella digital?
Reconocimiento de voz? Y de iris?
• Uso de la batería?
Preguntas
?
Sociedades profesionales

• ACM SIGCHI comunidad académica y de investigación, con alta

presencia de ingenieros e investigadores.
• UXPA (User Experience Professional Association) : comunidad de
práctica de profesionales de experiencia de usuario
• IXDA : Interaction Design Association . Comunidad de diseñadores de
interacción (diferencia con UXPA: más enfocados en la creación que en la
investigación o evaluación)
• HFES Human Factors and Ergonomics Society: más enfocado a
investigación operative y ergonomía
• IIID International Institute for Information Design
Bibliografía

• Steve Krug. Don’t Make me Think.

• Donald Norman. The design of everyday things, revisited (2013).
• Jeff Johnson :Designing with the Mind in Mind
• Jeff Johnson: Gui Bloopers 2.0
• Susan Weinschenk: 100 Things Every Designer Needs to Know
About People (2011) (MUY fácil de leer)
• Designing the User Interface 6th edition (Shneiderman et al)
• ACM Digital Library & Learning Center (muchos libros gratis)
• Nielsen & Norman articles (https://www.nngroup.com/articles/)
• Usability.gov
• Hcibib.org
 Muchas gracias
por su atención!

2018, Maia Naftali. Cualquier pregunta, escríbanme a: Maia.Naftali@gmail.com