Santiago Bustelo

Director de diseo, Keikendo

IxDA Central and South America Regional Coordinator
29 de junio, 2012
Introduccin a Usabilidad
y Diseo de Interaccin
@sbustelo
MEMBER
Presentacin bajo licencia Creative Commons
Atribucin 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar
Diseo de Interaccin
MEMBER
Programa del curso
Santiago Bustelo
1. Introduccin a Usabilidad y Diseo de interaccin
Viernes 29 de junio, 13 a 16 hs.
2. Introduccin a Diseo de interfaces web
Viernes 6 de julio, 10 a 13 hs.
Juan Manuel Carraro
3. Taller de prototipado y pruebas de usabilidad I
Viernes 13 de julio, 13 a 16 hs.
4. Taller de prototipado y pruebas de usabilidad II
Viernes 20 de julio, 13 a 16 hs.
3
Diseo de Interaccin
MEMBER
Me presento
4
Santiago Bustelo, diseador de interaccin.
Director de diseo, Keikendo.
Coordinador IxDA Buenos Aires y Coordinador
Regional de IxDA en Latinoamrica. Fundador
Movimiento de Diseo Inclusivo.
Desde 1997 he participado en proyectos de diseo y
desarrollo para Intel, Microsoft, Staples, Coca-Cola,
HP, TetraPak, MetLife, Banco Santander, HSBC,
Techint, Mercado Libre, Grupo Clarn, Molinos,
Bumeran.com y Universidad de Stanford, entre otros.
He dictado presentaciones y talleres sobre Usabilidad,
Diseo de Interaccin y Diseo Centrado en el Usuario
en CAI, UBA, UTN, UP y UAI desde el ao 2001.
Diseo de Interaccin
MEMBER
Conociendo al equipo
5
Augusto - dis. web e interfaces
Daiana - lider de proyecto
Daniela - lider de proyecto
Nicols
Daniel - DG y web
Marina - AI
Alejandra - project leader
Santiago
Emiliano - dis web
Diseo de Interaccin
MEMBER
Qu vamos a ver hoy
Usabilidad y Diseo Centrado en el Usuario: Definicin de
conceptos y disciplinas.
Diferencias y beneficios frente a otras metodologas de
diseo y desarrollo.
Principios de diseo de interaccin.
Tcnicas existentes de anlisis de usabilidad.
Cmo se mide y mejora la efectividad, eficiencia y
satisfaccin de una interfaz.
Caso ejemplo: diseo de una aplicacin desde la usabilidad
y diseo de interaccin vs. Modelos habituales.
6
Diseo de Interaccin
MEMBER

Diseo de Experiencias (UXD)

Diseo de Interaccin (IxD)

Define el modelo de operacin de productos interactivos

para lograr mejores experiencias para ms usuarios.

Diseo de Interfaces (UID)

Define los elementos concretos empleados en la

interaccin.

Diseo visual (DG, Diseo Grfico)

Define lenguaje, carcter e identidad visual del producto.

ABSTRACTO
CONCRETO
Disciplinas de Diseo: definir cmo es,
cmo funciona y cmo luce un producto
7
Diseo de Interaccin
MEMBER
El usuario como procesador

Modelo de operacin:

Secuencias de pasos (algoritmo)

que el usuario debe descubrir y ejecutar
para lograr una tarea

Relevar y testear con usuarios:

debuggear el diseo
8
Diseo de Interaccin
MEMBER
Forma versus Funcin
1

2
3

4

5

6

7

8

9 1
0

1
1

1
2

1
3

1
4

1
5

1
6

17
1
8

1
9

2
0

2
1

2
2

2
3

2
4

2
5

2
6

2
7

2 8
2
9

3
0

3
1

9
Diseo de Interaccin
MEMBER
Forma y Funcin
11
D L M M J V S
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 2 3 4 5 6
Diseo de Interaccin
MEMBER

La usabilidad de una interfaz es una medida

de la efectividad, eficiencia y satisfaccin con
la cual determinados usuarios pueden
alcanzar determinados objetivos en un
entorno particular con dicha interfaz.
(ISO 9241, Requerimientos ergonmicos para
trabajo de oficina con terminales visuales, Parte
11 - 1997)
Usabilidad
13
Diseo de Interaccin
MEMBER
Diseo y Usabilidad como Calidad

Son atributos cualitativos intrnsecos al producto

Como la performance, no se pueden agregar.

Son afectados por todos los que construyen el producto.

Siempre ocurren

A un producto no le falta diseo o usabilidad. En

todo caso, su diseo o usabilidad son malos.

Hay diseos intencionales y diseos que se cometen

14
Diseo de Interaccin
MEMBER
Calidad y Cuantificacin

Calidad es lo que nuestros usuarios valoran. Todo lo dems

es desperdicio (Lean Software Development)

Si no medimos, no hay calidad. Punto y aparte

(Sebastin Fernndez Quezada, Keikendo)

Cuantificar nos permite:

Comparar alternativas de manera objetiva

Anlisis en lugar de opiniones

15
Diseo de Interaccin
MEMBER
Mejorando la Usabilidad
+ Efectividad
Diseo Centrado en el Usuario
+ Eficiencia
Optimizacin de la operacin
Menor carga cognitiva
Prevencin de errores, bajo costo de recuperacin
+ Satisfaccin
Previsibilidad
Consistencia interna y con la plataforma
Elementos funcionan cumpliendo expectativa
16
Diseo de Interaccin
MEMBER

Diseo Centrado en el Usuario versus:

Diseo autoreferencial

Diseo centrado en la tecnologa

Diseo centrado en el sponsor

Diseo centrado en la competencia

1. Aumentando la Efectividad
17
Diseo de Interaccin
MEMBER
Diseo Centrado en el Usuario
Filosofa de diseo:
Creacin de productos que resuelvan necesidades concretas de
sus usuarios finales, consiguiendo la mayor satisfaccin y mejor
experiencia de uso posible con el mnimo esfuerzo de su parte.
Proceso de diseo:
Conocer a fondo a los usuarios finales reales.
Disear un producto que resuelva sus necesidades y se ajuste a
sus capacidades, expectativas y motivaciones.
Poner a prueba lo diseado.
18
Diseo de Interaccin
MEMBER
Qu es un usuario?

No est viciado por el ejercicio de la profesin ni por el

proceso de conceptualizacin.

Tiene o puede representar intencin de usar la interfaz para

lograr un objetivo.

Tiene o puede representar el modelo mental del pblico al

que est destinada la interfaz.

No necesita ser una muestra demogrfica.

La prueba con el usuario no tiene que ser perfecta.
Tiene que existir (Jared Spool)
19
Diseo de Interaccin
MEMBER
Tcnicas de relevamiento
Entrevistas, Focus group
Card sorting
Mapeo Conceptual
Construccin de Personas/Arquetipos
Pruebas de usabilidad
Prototipado iterativo
Relevamiento Contextual
20
PIDE QUIERE NECESITA
Diseo de Interaccin
MEMBER
Los usuarios no son ratas de laboratorio
21
X
Foto: National Chiao Tung University
Diseo de Interaccin
MEMBER
Card Sorting
22
Diseo de Interaccin
MEMBER
Mapeo conceptual
23
Foto: Craig Duncan, United Nations
Diseo de Interaccin
MEMBER
Construccin de Personas o Arquetipos
Herramienta muy discutida: es difcil
evaluar si lo hicimos bien.
Permite generar empata en el equipo
con los usurios finales.
Basar las personas en relevamiento y
datos reales.
Poner foco en objetivos y actividades,
no en detalles personales.
Relacionadas con el producto. No se
reusan.
Es ms importante el relevamiento que el
entregable.
24
Ins, Contadora (73 aos)

Lleva una vida activa. Para mantener

las expensas bajas para todos, se hace
cargo de la administracin de su
edificio.

Trabaj con computadoras las ltimas

dcadas. Las considera herramientas,
no le interesa cmo funcionan.

Como millones de adultos mayores,

Ins sufre de degeneracin macular
asociada a la edad. Tiene dificultad en
leer textos pequeos o con poco
contraste. Sabe ampliar el texto en
Explorer, pero no funciona en todos
los sitios.

Tiene un ligero temblor en la mano

derecha. Usar el mouse a veces
resulta un desafo, particularmente
con links o botones muy pequeos.
Prefiere usar el teclado.

Las pginas que Ins puede leer y usar

sin problemas, funcionan muy bien en
la pantallita de nuestro celular.
Foto kellyCDB (CC)
La otra noche fuimos al teatro con
las chicas. Qu buenos actores!
Haca tiempo que no me rea tanto.
Pruebas de usabilidad de prototipo
Diseo de Interaccin
MEMBER
Pruebas de usabilidad: usuarios reales
Hasta que no testeamos, slo
podemos tener hiptesis.
Testear con 5 usuarios revela el 80%
de los problemas de usabilidad
presentes en el producto.
Pruebas rpidas y de gran impacto
cualitativo.
Observacin y anlisis de operacin
para resolver tareas solicitadas.
No se toman requerimientos del
usuario. Nos enfocamos en lo que
el usuario hace.
26
U
s
a
b
i
l
i
t
y

p
r
o
b
l
e
m
s

f
o
u
n
d
100%
75%
50%
25%
0%
0 3 6 9 12 15
Number of Test Users
Jakob Nielsen: Why You Only Need to Test with 5 Users
Diseo de Interaccin
MEMBER
Pruebas con usuarios

Preguntar y observar sin condicionar.

Tomar con cuidado las hiptesis del usuario.

Buscamos validar o refutar una hiptesis de diseo,

y obtener material para nuevas hiptesis:

modelo mental del usuario

operabilidad percibida (affordance) de la

interfaz

proceso de decisin del usuario

27
Diseo de Interaccin
MEMBER
Evaluacin de prototipo ecommerce
(escala: 1 a 5)
* Escala: 1. slo comprara presencialmente, 5. slo comprara online en este sitio.
** Usuarios con distracciones constantes.
28
Efectividad Eficiencia Satisfaccin Volvera a
comprar?*
Usuario 1** 5 5 5 3
Usuario 2 4 4 3 4
Usuario 3** 5 4 5 4
Promedio interfaz actual 3 2,33 2 1,33
Promedio prototipo 4,67 4,33 4,33 3,67
Mejora 56% 86% 117% 176%
Prototipado iterativo
Prototipado iterativo
Diseo de Interaccin
MEMBER
31
Netbook escolar
Beb
Relevamiento contextual
llamadas al
fijo y celular
Fuera de cmara:
hijos (4 y 7 aos)
Diseo de Interaccin
MEMBER
Lo que siempre necesita el usuario
El objetivo del usuario es realizar una tarea.
Nuestro producto es slo un medio entre
muchos posibles para lograr ese objetivo.
No quiere realizar tareas repetitivas: para eso
estn las computadoras, no los usuarios.
Nuestro producto siempre se compara con
otros productos digitales, productos no
digitales, y soluciones que el usuario puede
desarrollar por sus propios medios.
Accesibilidad: si tenemos suerte, nosotros
tambin seremos viejos el da de maana.
32
Caso tpico de un software que no logra
superar y absorber las alternativas.
Diseo de Interaccin
MEMBER

Principios, Modelos y Cuantificacin

Disear con bases racionales

Predecir numricamente el resultado

Obtener algo que funciona de acuerdo a lo

esperado
2. Aumentando la Eficiencia
33
Diseo de Interaccin
MEMBER
Anlisis de la operacin en una interfaz
34
Diseo de Interaccin
MEMBER
Optimizacin de tareas
Caso macro: Navegacin de
catlogo
35
Diseo de Interaccin
MEMBER
"CFSUVSBT
"JTMBDJPOFT
#BvPTZ$PDJOBT
$FSSBNJFOUPT
$MJNBUJ[BDJwOZWFOUJMBDJwO
$POTUSVDDJPOFT
%FDPSBDJwO
&MFDUSJDJEBEZFMFDUSwOJDB
&RVJQBNJFOUPT
&TQFDJBMJEBEFT
*OGPSNBDJwO
.BEFSBT
.BUFSJBMFT
.FUBMFT
.PWJMJEBEZUSBOTQPSUF
.gRVJOBTFRVJQPTZIFSSBNJFOUBT
3FWFTUJNJFOUPT
4BOJUBSJPTZHBT
4FHVSJEBEFJODFOEJP
4FSWJDJPT
5FSNJOBDJPOFT
Estructura del sitio: Modelo original

Home >> Rubros

Dilogo con el usuario: pregunta

36
Diseo de Interaccin
MEMBER
)PNF3FWFTUJNJFOUPT
"MGPNCSBT
$FSgNJDBT
$IBQBTZQMBDBT
$JFMPSSBTPT
.PMEVSBT
.PTBJDPT
.gSNPMFTZHSBOJUPT
1JFESBT
1JTPT
3FWFTUJNJFOUPT
5FKBT
Estructura del sitio: Modelo original

Home >> Rubros >> Subrubros

Dilogo con el usuario: acoso

37
Diseo de Interaccin
MEMBER
#PSEFTDFSgNJDPT
$FSBNJDBT
$FSgNJDBTFTNBMUBEBT
$FSgNJDBTSPKBT
$FSgNJDBTS|TUJDBT
&TDBMPOFTZ[wDBMPTDFSgNJDPT
-JNQJF[BZQSPUFDDJwOEFDFSgNJDPT
1PSDFMMBOBUPTQBSBQJTPTZSFWFTUJNJFOUPT
)PNF3FWFTUJNJFOUPT$FSgNJDBT
Estructura del sitio: Modelo original

Home >> Rubros >> Subrubros >> sub-subrubros

Dilogo con el usuario: interrogatorio

38
Diseo de Interaccin
MEMBER
Aaronico Flectrnica S.L.
Abab Argentina
Abaco SRL
Abad e hijos
Abalorios S.A.
Abanderado SRL
Abanicos Digitales
Abaratar S.A.
ABASI y CIA
Abasto Materiales
Abaz e Hijos
Abecedario S.A.
Abeja S.P.A.
Aberradux
Abaciscus S.A.
Abactor S.R.L.
Abacus SRL
Abarnare y Can
Abatamentux
Abatare S.A.
z q 6 ) 8 o prxima
Home Revestimientos Cermicas Cermicas esmaltadas
Estructura del sitio: Modelo original

Home >> Rubros >> Subrubros >> sub-subrubros >>

resultados

Dilogo con el usuario: desprecio

39
Diseo de Interaccin
MEMBER
Modelos mentales enfrentados
40
Quien hace el sitio Usuario
Conoce el contenido No conoce el contenido
Conoce a fondo el modelo del sitio Conoce, parcialmente, otros sitios
Quiere diferenciar el sitio de otros Quiere aplicar experiencia previa
Foco en estructura Foco en contenido
Diseo de Interaccin
MEMBER
Optimizacin: Ley de Pareto (80/20)

Priorizar y anticipar por relevancia:

Menos pasos en la operacin.
41
Diseo de Interaccin
MEMBER
home
Accesos
Pasos o
x
oo% = ooo
rubros
subrubros
sub-subrubros
items
item
Modelo original: Cuantificacin
42
Diseo de Interaccin
MEMBER
home
Accesos
Operacin
Pasos q z
x x x
o% zo% o%
oo o + + 8o
= z)o
item item item
Facetado+items Facetado+items items
Modelo optimizado: Cuantificacin
43
Diseo de Interaccin
MEMBER
Optimizacin de tareas
Caso micro: Formulario de
contacto
44
Diseo de Interaccin
MEMBER
Formulario de contacto: modelo original
Nombre: Apellido:
Email: Repetir
email:
Telfono:
Mensaje:
Verificacin:
Cmo lleg al sitio?
ENVIAR BORRAR
Seleccione... Seleccione...
Quiero recibir informacin de promociones He ledo y acepto la poltica de privacidad
Tipo de mensaje:
K98LQ1
45
Diseo de Interaccin
MEMBER
Anlisis de tareas
46
Nombre: Apellido:
Email: Repetir
email:
Telfono:
Mensaje:
Verificacin:
Cmo lleg al sitio?
ENVIAR BORRAR
Seleccione... Seleccione...
Quiero recibir informacin de promociones He ledo y acepto la poltica de privacidad
Tipo de mensaje:
K98LQ1
Diseo de Interaccin
MEMBER

Creencia: Preguntar es gratis

Si no quieren se lo saltean

No se percibe costo de agregar preguntas

no relevantes a la tarea para el usuario

No se evala beneficio de tener el dato vs.

obtener datos espurios, o abandono del
usuario
Importancia de la cuantificacin
47
Diseo de Interaccin
MEMBER
Cuantificacin: KLM-GOMS
Anlisis y estimacin de tiempo necesario para realizar una tarea.
Cada operacin del usuario tiene un costo.
Preguntar no es gratis.
48
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg.
Paso mouse teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparacin mental nueva tarea
Response ? Respuesta del sistema
Ms informacin: Artculo en Wikipedia sobre KLM-GOMS (en ingls)
Diseo de Interaccin
MEMBER
Cuantificacin: Formulario de contacto
Obligatorio (opcional)
Nombre 7.55 ( 2.70 )
Apellido 4.50 ( 2.70 )
Email 6.90 8.40
Repetir email 6.90 6.90
Cdigo de rea 3.50 ( 2.70 )
Telfono 4.50 ( 2.70 )
Cmo lleg al sitio 14.00 ( 2.70 )
Tipo de mensaje 13.40 ( 2.70 )
Mensaje 32.40 32.40
Quiero recibir promociones 4.40 4.40
Poltica de privacidad 2.65 2.65
Verificacin 20.05 20.05
Enviar 3.05 3.05
Total
122.25 seg. 94.05 seg.
49
Diseo de Interaccin
MEMBER
Formulario optimizado
Nombre y apellido:
Email:
Mensaje:
ENVIAR MENSAJE
recibir en mi email copia del mensaje enviado
7.60 seg.
6.90 seg.
2.70 seg.
32.40 seg.
3.05 seg.
52.65 seg.
50
Diseo de Interaccin
MEMBER
Preguntas y opcionales en segunda pantalla
Gracias!
Su mensaje ha sido enviado.
COMPLETAR ENCUESTA
Su opinin es muy importante para nosotros.
Le agradeceremos unos instantes ms de su tiempo:
Cmo supo de nosotros?
Desea recibir promociones y ofertas por e-mail?
opcin 1
No, gracias S, deseo recibir ofertas por e-mail
51
Diseo de Interaccin
MEMBER

Las mejores prcticas de programacin

buscan reducir el tiempo de respuesta del
sistema para cada operacin.

Las mejores prcticas de diseo de

interaccin buscan reducir la cantidad de
pasos y la complejidad cognitiva de las
operaciones.
KLM-GOMS: optimizacin de procesos
52
Diseo de Interaccin
MEMBER
Nombre y apellido:
Aplicacin de KLM-GOMS
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg. Paso mouse teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparacin mental nueva tarea
Response ? Respuesta del sistema
Tiempos de operacin:
53
Diseo de Interaccin
MEMBER
Aplicacin de KLM-GOMS
1
2
3
3
4
4
5
6
Estado inicial: mano en el mouse
M inicio tarea 1,35
P Apuntar a primer campo 1,1
M inicio tarea 1,35
K click campo de texto 0,2
M inicio tarea 1,35
H pasar al teclado 0,4
M pensar dato 1,35
K 18 tipear dato 3,6
Total 10,7
Cuantificacin
54
Nombre y apellido:
6 Juan Carlos Prez
4
3 2 1

5
Diseo de Interaccin
MEMBER
Tiempo promedio en apuntar a un objetivo:
T = a + b log2 ( D / W +1 )
a, b: latencia y velocidad,
determinadas experimentalmente.
Raskin: a falta de datos, tomamos a=50, b=150 msec.
D: distancia desde el punto de partida
hasta el centro del objetivo.
W: ancho del objetivo,
medido sobre el eje del movimiento.
Ms informacin:
Artculo en Wikipedia sobre Ley de Fitts
Ley de Fitts
55
Diseo de Interaccin
MEMBER
Priorizar ubicacin respecto a posicin inicial del cursor
Evitar movimientos complejos: submenes, drag & drop
Ampliar y distinguir reas clickeables:
Botn Flash mal hecho link estndar
1 2 3 4 5 6 7 8 9 10
Botn Botn
Opcin
Pgina
Pgina
1 2 3 4 5 6 7 8 9 10
<label for...>opcin</label>

Descripcin

Aplicacin de ley de Fitts: optimizacin de

operacin
56
Diseo de Interaccin
MEMBER
Separar funciones
Observar relacin vertical:
Alejar funciones destructivas de funciones habituales:

Ianus pungemeque
A uium ierunt
Ianus cadit, quis remansit?
Ianus pungemeque
A uium ierunt
Ianus cadit, quis remansit?
0 0
Aplicacin de ley de Fitts: reduccin de
errores
57
Diseo de Interaccin
MEMBER
Tiempo necesario para tomar una decisin:
T = a + b log
2
( n +1 )
a, b: latencia y velocidad,
dependientes del contexto.
Raskin: a falta de datos, tomamos a=50, b=150 msec.
n: cantidad de opciones
con igual ndice de probabilidad.
Ms informacin:
Artculo en Wikipedia sobre Ley de Hick (en ingls)
Ley de Hick-Hyman
58
Diseo de Interaccin
MEMBER
Aplicacin de Ley de Hick
Tenemos 32 items con igual
probabilidad.
Cmo nos conviene
disponerlos?
a) Una sola pgina con 32
items
b) 4 pginas distintas con 8
items cada una
T = a + b log
2
( n +1 )
59
x log2 x
1 0
2 1
3 1,58
4 2
5 2,32
6 2,58
7 2,81
8 3
9 3,17
10 3,32
11 3,46
x log2 x
12 3,58
13 3,7
14 3,81
15 3,91
16 4
17 4,09
18 4,17
19 4,25
20 4,32
21 4,39
22 4,46
x log2 x
23 4,52
24 4,58
25 4,64
26 4,7
27 4,75
28 4,81
29 4,86
30 4,91
31 4,95
32 5
33 5,04
Diseo de Interaccin
MEMBER

Tenemos 32 items con igual probabilidad.

Cmo nos conviene disponerlos?
a) Una sola pgina con 32 items
50 + 150 log
2
(32 + 1) = 806,6 ms.
b) 4 pginas distintas con 8 items cada una
50 + 150 log
2
(8 + 1) = 525,48 ms. cada pantalla
x 4 = 2101,92 ms.
Aplicacin de Ley de Hick
60
Diseo de Interaccin
MEMBER
3. Satisfaccin: experiencia ptima
Simplificacin del modelo de Mihaly Csikszentmihalyi
Frustracin
Fluencia
d
e
s
a
f

o
habilidad
Aburrimiento
61
Diseo de Interaccin
MEMBER

La ilusin de una interfaz "intuitiva" se produce

cuando los elementos responden de la manera
esperada por el usuario.

Esa expectativa est fundada en:

operabilidad percibida de los elementos

(affordance)

hbito generado por elementos operados

previamente por la operacin de otras
interfaces.
Satisfaccin: la ilusin de lo intuitivo
62
Diseo de Interaccin
MEMBER
Simplicidad vs complicacin
Menor cantidad de elementos
Mayor libertad de combinacin
Aprendizaje, claridad, consistencia, legibilidad, operabilidad*
Anticipacin a situaciones y objetivos del usuario
Menor cantidad de pasos en la operacin
Mayor relacin entre operacin y objetivo final
Accesibilidad, estndares, metforas, visibilidad*
Satisfaccin de expectativas
Fundadas en operabilidad percibida y hbitos
Autonoma, productividad, preservacin de estado y trabajo*
* Bruce Tognazzi, Principios de diseo de interaccin
Construyendo la ilusin de lo intuitivo
63
Diseo de Interaccin
MEMBER

1 + 1 = 3 o ms

La actividad visual suplementaria es

no-informacin, ruido, y recarga.
(Edward Tufte, The Visual display of Quantitive Information)
Simplicidad en la representacin
64
Diseo de Interaccin
MEMBER
Lenguaje visual: Principios de percepcin
(Gestalt)
Figure Ground Relationship
Elements are perceived as either figures (distinct
elements of focus) or ground (the background or
landscape on which the figures rest).
Law of Prgnanz
Humans tend to interpret ambiguous or complex
images as simple and complete.
Uniform Connectedness
Elements that share uniform visual characteristics
are perceived as being more related than elements
with disparate visual characteristics.
Good Continuation
Elements arranged on a line or curve are perceived
to be more related than elements not on the line or
curve.
Closure
When looking at a complex arrangement of
individual elements, humans tend to first look for a
single, recognizable pattern.
Common Fate
Humans tend to perceive elements moving in the
same direction as being more related than
elements that are stationary or that move in
different directions.
Proximity
Things that are close to one another are perceived
to be more related than things that are spaced
farther apart.
Similarity
Things that are similar are perceived to be more
related than things that are dissimilar.
Ms informacin: www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
65
Diseo de Interaccin
MEMBER
Qu categoras encontramos?
66
Diseo de Interaccin
MEMBER
Cmo clasificamos estas figuras?
67
Diseo de Interaccin
MEMBER
Y ahora?
68
Diseo de Interaccin
MEMBER
Unidad

Los objetos encerrados son percibidos como

un grupo
69
Diseo de Interaccin
MEMBER
Limitaciones

Los principios del lenguaje visual no escalan

indefinidamente
70
Diseo de Interaccin
MEMBER
Operacin no modal
Una interfaz es modal cuando su respuesta es modificada por un
estado de la misma, y el usuario no es consciente de ese estado.
Ej: Caps Lock, Insert, Backspace para borrar vs. para ver pgina
anterior, tipeo perdido por aparicin de mensaje.
Los modos son fuente de errores, confusiones, restricciones
innecesarias y complejidad en la operacin.
Monotona: una sola forma de conseguir el mismo resultado
Cuando hay ms de un mtodo capaz de producir el mismo
resultado, se requiere de actividad cognitiva adicional para
resolver la forma de realizar la tarea.
(Jef Raskin, The Humane Interface)
Simplicidad en la operacin
71
Diseo de Interaccin
MEMBER
La reduccin de "modos" requiere de la planificacin
cuidadosa de todas las funcionalidades, para permitir
su interoperabilidad.
Una funcionalidad determinada debe ser planteada de
manera consistente, tanto visual como operativa, en
las diferentes instancias de la aplicacin que la
incluyan.
La simplicidad en la operacin es el resultado de un
planteo unificado y consistente para todo el desarrollo.
Construyendo la simplicidad
72
Diseo de Interaccin
MEMBER
Punto de atencin
En un momento dado, el usuario tiene un solo objeto o idea como punto de
atencin consciente.
El usuario no tiene completo control sobre el punto de atencin.
El entorno puede modificarlo.
Las cosas que suceden fuera del punto de atencin son ignoradas, excepto
distracciones.
Necesitamos hasta diez segundos en prepararnos para una tarea consciente en un
nuevo contexto.
No registramos el paso del tiempo durante esa preparacin.
(Jef Raskin, The Humane Interface)
Percepcin y reaccin: por qu la simplicidad
es necesaria para la operacin
73
Diseo de Interaccin
MEMBER

No leemos pginas, las barremos. Estamos apurados y sabemos

que no necesitamos leer todo.

No esperamos a conocer todas las opciones para compararlas y

elegir la mejor. Tomamos la primera que se nos cruza aceptable.

No comprendemos cmo las cosas funcionan. Simplemente

nos las arreglamos.
Steve Krug: Dont Make Me Think
Cmo usamos la web: por qu la simplicidad
es necesaria para la comprensin
74
<BR />
Diseo de Interaccin
MEMBER
Caso de ejemplo y
proceso de diseo
centrado en el usuario
76
Diseo de Interaccin
MEMBER
Parte 1: Diseando desde la caverna
77
Vernica Traynor:
UX y la caverna de Platn
Diseo de Interaccin
MEMBER

Producto: Software de administracin de un videoclub

Nuestros personajes:
Caso de ejemplo
78
Programador
cavernario
Diseador
cavernario
Emprendedor
cavernario
Iconos: FastIcon
Diseo de Interaccin
MEMBER
Programador cavernario

3 entidades

Pelculas: Datos

Clientes: Datos

Alquileres: Relaciones

Operaciones

Alta, baja, modificacin y consulta

para cada entidad
Ejemplo desarrollado por Diego Gonzlez,
Fundador Lagash Systems
79
1234
1234
1234
Gonzalez
Gonzalez Diego 760 Rivadavia 5000 11 B BuenosAires 12
1234
760
Nohaystock.
760
1235
760
Diseo de Interaccin
MEMBER
Diseador cavernario

Metforas

Pelculas: DVDs

Clientes: Fichas

Alquileres: Ficha + DVD

Representacin

Experiencia inmersiva

Fotorealismo
95
Diseo de Interaccin
MEMBER
Emprendedor cavernario

Relevamiento competitivo

Definicin del mercado

Especificacin

Recursos y plan de trabajo

????

Profit!
107
Diseo de Interaccin
MEMBER
Relevamiento competitivo
108
freemium
Diseo de Interaccin
MEMBER
Relevamiento competitivo
109
screencast
Diseo de Interaccin
MEMBER
Relevamiento competitivo
110
amigable
touch
Diseo de Interaccin
MEMBER
Definicin del mercado
111
Foto: Ned Raggett Foto: Andrs Rueda
Diseo de Interaccin
MEMBER
Especificacin para diseo y desarrollo
112
Ms potente y con ms funciones que la
competencia.
Gestin de uno o mltiples locales.
Informes y estadsticas.
Clculo automtico de recargos.
Mdulo avanzado de bsquedas.
Tipos de artculos y formatos
configurables.
Mdulo de Promociones.
Sistema de premios y puntos de cliente.
Soporte de lectores de cdigos de
barras.
Mdulo de diseo de catlogos.
Mdulo de diseo de pginas web.
Control de envos y retiros a domicilio
(delivery) con emisin de ticket de retiro.
Creacin de abonos de alquiler con fecha
de vencimiento.
Mdulo de envo de catlogo por e-mail
a socios.
Interfaz amigable y fcil de usar.
Diseo de Interaccin
MEMBER
Recursos y metodologa
113
E
j
e
r
c
e
r

p
r
e
s
i

n
E
j
e
r
c
e
r

p
r
e
s
i

n
Diseo de Interaccin
MEMBER
Expectativa
114
En 3 meses
Foto: Wikipedia
Diseo de Interaccin
MEMBER
Resultado
115
Despus de
1 ao
Foto: Wikipedia
Diseo de Interaccin
MEMBER
Parte 2: Saliendo de la caverna
116
Diseo de Interaccin
MEMBER
Cundo est terminado el diseo de un
producto interactivo?

Cuando nos gusta a nosotros

Cuando funciona como queramos

Cuando le gusta al cliente

Cuando el usuario logra lo que esperbamos

117
Diseo de Interaccin
MEMBER
Proceso lineal
1. Definicin de requerimientos.
2. Diseo y desarrollo a nivel de produccin.
3. Entrega.
118
Diseo de Interaccin
MEMBER
Proceso lineal interminable
1. Definicin de requerimientos.
2. Diseo y desarrollo a nivel de produccin.
3. Entrega.
4. No es lo que el cliente quera o lo que
el usuario necesita,
retrocede tres casilleros.
5. Se repite hasta el hartazgo de una
o ambas partes.
119
Diseo de Interaccin
MEMBER
Problemas bien definidos
Es posible definir estado inicial,
estado deseado, y camino ms corto.
Se aplican algoritmos: secuencias
estructuradas de pasos que
garantizan la solucin.
Metodologa secuencial.
Foco en anlisis y documentacin.
Problemas complejos
El problema no es entendido hasta
no haberlo resuelto.
Se trabajan de forma heurstica, en
un proceso de prueba y error para
aproximarse a una solucin.
Metodologa gil.
Foco en entregables.
Entender el tipo de problema
120
Diseo como innovacin implica resolver problemas complejos.
Diseo de Interaccin
MEMBER
Proceso convergente
1. Objetivos y anlisis inicial.
2. Diseo y desarrollo en iteraciones
avanzando y validando progresivamente:

Funcionalidad

Estructura y elementos

Lenguaje visual

Viabilidad
3. Entrega y puesta en produccin.
121
Diseo de Interaccin
MEMBER
Prototipos

Permiten evaluar una propuesta (hiptesis) con...

nosotros mismos

equipo de desarrollo

cliente

usuarios reales

de forma rpida y aplicando el esfuerzo correcto.

Son nuestro instrumento para realizar preguntas.

122
Diseo de Interaccin
MEMBER
Prototipos e Iteraciones en el proceso
123
1. Planeamiento de la iteracin
Definicin del problema. Qu queremos aprender de
esta iteracin y cmo vamos a hacerlo.
2. Implementacin

Creacin del prototipo con la fidelidad correcta

3. Prueba

Obtenemos informacin que valida o descarta la

solucin.
4. Conclusiones y aprendizaje

Qu funcion o no, y por qu.

Jared Spool, Anatomy of an Iteration
Diseo de Interaccin
MEMBER
Caso Centrado en el Usuario
Proceso de diseo y desarrollo
convergente e iterativo
Evaluacin competitiva, identificacin de
oportunidades
Definicin preliminar del modelo
Validacin y ajuste del modelo con
usuarios
Priorizacin y estrategia de versiones
Prototipado de la interfaz
Pruebas con usuarios y ajuste de
prototipos
Metodologa gil
Pruebas de usabilidad y QA antes de
cada lanzamiento
124
Usaurio
Diseo de Interaccin
MEMBER
Cuantificacin: KLM-GOMS
Cada operacin del usuario tiene un costo.
125
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg. Paso mouse teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparacin mental nueva tarea
Response ? Respuesta del sistema
Ms informacin: Artculo en Wikipedia sobre KLM-GOMS (en ingls)
Diseo de Interaccin
MEMBER
Cuantificacin:
Buscar cliente (v. programador)
126
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea: 1,35
Apuntar menu Clientes: 1,10
click menu Clientes: 0,20
Apuntar men Clientes
Modificacin: 1,10
click men Clientes Modificacin:
0,20
Prxima tarea: 1,35
Apuntar campo texto: 1,10
click campo texto: 0,20
Mover mano al teclado: 0,40
Proxima tarea: 1,35
Tipear apellido: 1,60
Mover mano al mouse: 0,40
Proxima tarea: 1,35
point OK: 1,10
click OK: 0,20
Obtuvimos (o no) el dato:
14.75 segundos
Recuperacin:
Mover mano al mouse: 0,40
Proxima tarea: 1,35
point Cancel: 1,10
click Cancel: 0,20
Volvemos a abrir el cuadro,
Tipeamos apellido otra vez: 12,32
Mover mano al mouse: 0,40
Proxima tarea: 1,35
apuntarOK: 1,10
click OK: 0,20
Total con recuperacin:
32,55 segundos
Diseo de Interaccin
MEMBER
Cuantificacin:
Buscar cliente (v. diseador)
127
Inicio tarea: 1,35
Apuntar al fichero home: 1,10
Click Fichero home: 0,20
Animacin "files, lots of files: 4
Proxima tarea: 1,35
Apuntar boton prox serie ficheros:
1,10
Click proxima serie ficheros: 0,20
Animacin serie de ficheros: 1
Prox tarea: 1,35
Apuntar fichero "G": 1,10
Click fichero "G": 0,20
Animacin fichero G: 2
Proxima tarea: 1,35
Leer etiquetas x 4: 5,40
Proxima tarea: 1,35
Apuntar GON: 1,10
Click GON: 0,20
Animacin Cajn GON: 2
Proxima tarea: 1,35
Leer Apellido, Nombre x 5: 6,75
Proxima tarea: 1,35
Apuntar Gonzalez, Diego: 1,10
Click Gonzalez, Diego: 0,20
Obtuvimos la ficha:
28.10 segundos
Beneficio eliminar animaciones:
9 segundos
Total sin animaciones:
19,1 segundos
Diseo de Interaccin
MEMBER
Casos de uso: hiptesis inicial
128
Modalidad de atencin: mostrador, telfono y buzn
Bsqueda de clientes y ttulos
Alta de un cliente
Alta de nueva pelcula
Cliente alquila ms de una pelcula
Cliente devuelve pelculas y alquila otras
Carga de devoluciones de buzn
Copia daada
Reporte de atrasos
Diseo de Interaccin
MEMBER
Resultados del Relevamiento
(un videoclub, dos usuarios)
No tomamos requerimientos de los usuarios.
Nos enfocamos en lo que los usuarios hacen.
Procesos y problemas reales del negocio
Gestin actual, reas de mejora
Aprox. 5000 clientes y 5000 pelculas
Los clientes casi nunca saben el Nro. de Cliente, menos an
cuando no son titulares
Se dan de alta 10 a 20 ttulos por da, con datos mnimos
Cargar devoluciones de buzn puede llevar toda la maana
Muchas copias para una pelcula
No se dan clientes de baja
129
Diseo de Interaccin
MEMBER
Priorizacin y estrategia de versiones
130
v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
Diseo de Interaccin
MEMBER
Casos de uso reales y priorizados
131
Modalidad de atencin: mostrador,
telfono
Bsqueda de clientes: por nombre del
titular, direccin o telfono.
Bsqueda de copias: por ttulo o cdigo
Alta o modificacin de un cliente
Editar pelcula: ABM copias, baja si no
hay copias
Cliente alquila hasta 3 pelculas
Cliente devuelve hasta 3 pelculas
Cliente devuelve hasta 3 pelculas y
alquila hasta 3
Alta de 20 nuevos ttulos, asignacin de
copias
Modalidad de atencin: buzn
Carga de 40 devoluciones de buzn
Copia daada
Listado de pelculas por gneros /
estrenos
Reporte de atrasos
Qu temporadas vio el cliente?
Se desordena fila en mostrador
Diseo de Interaccin
MEMBER
Idea: Sistema centrado en la Bsqueda

Un campo con dos botones?

Un campo con dos radio buttons y botn

Buscar?

Dos campos de bsqueda?

Tal vez funcione, empezamos un

prototipo
132
Diseo de Interaccin
MEMBER
Sistema con dos campos de bsqueda
133
Diseo de Interaccin
MEMBER
Sistema con dos campos de bsqueda
134
Diseo de Interaccin
MEMBER
Sistema con dos campos de bsqueda
135
Diseo de Interaccin
MEMBER
Sistema con dos campos de bsqueda
Diseo de Interaccin
MEMBER
Propuesta: un solo campo de bsqueda
137

Resultado dependiente del contenido.

No hace falta especificar el tipo de dato.

Ventajas del patrn Instant Search

Mnimo input

Correccin sobre la marcha

Podemos usar [enter] para prxima accin:

el proceso es predecible en base a los datos

Necesitamos prueba de concepto

Diseo de Interaccin
MEMBER
Prueba de concepto
138
Diseo de Interaccin
MEMBER
Cuantificacin: Bsqueda 2.0
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea: 1,35
apuntar Buscar: 1,10
click Buscar: 0,20
Mover mano al teclado: 0,40
Proxima tarea: 1,35
Tipear 3 caratacteres apellido: 0,60
Proxima tarea: 1,35
Tipar espacio: 0,20
Proxima tarea: 1,35
Tipear 3 caracteres nombre: 0,60
Total: 10,25 segundos
Beneficio de mantener foco en bsqueda:
4,80 segundos
Total manteniendo
foco en bsqueda:
5,45 segundos
139
diseo de interaccin
MEMBER

Evitar uso del mouse

Modelo unificado y consistente

Metforas / Referencias: Mail, address book

Sujeto + verbo

No intrusivo

Diseo respetando Guas de diseo de interfaz de

Windows Vista / Windows 7
Bases del diseo
140
Diseo de Interaccin
MEMBER
Esquema
141
Funciones secundarias
listado
pelculas
alquiler
listado
clientes
detalle pelcula
listado copias
Seleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionar
pelcula
Buscar peliculas o clientes
Diseo de Interaccin
MEMBER
Buscar peliculas o clientes
Pelculas
Alquiler: 3 pelculas
La Rosa Prpura del Cairo
Woody Allen
La Rosa Prpura del Cairo
Woody Allen
La Rosa Prpura del Cairo
Woody Allen
La Rosa Prpura del Cairo
Woody Allen
Santiago Bustelo 32 aos
4123-4567
Diego Gonzlez 32 aos
4123-4567
Santiago Bustelo 32 aos
4123-4567
Diego Gonzlez 32 aos
4123-4567
Diego Gonzlez 32 aos
4123-4567
Juan de los Palotes 1638
Deuda $67
Clientes
Activar Cliente
+
+
Alquilar a Diego Gonzlez
78079
78079
78079
78079
78079
78079
78079
78079
78079
Reservar Relacionadas
78079
78079
78079
78079
La Rosa Prpura del Cairo (1985)
The Purple Rose of Cairo
La Rosa Prpura
del Cairo
#78909
Mia Farrow
Jeff Daniels
Danny Aiello
Irving Metzman
Stephanie Farrow
Actores
Woody Allen Director
Stira, Comedia, Woody Allen Gneros
1 hora 22 minutos Duracin
La Rosa Prpura
del Cairo
#78909
La Rosa Prpura
del Cairo
El ciudadano
Eterno resplandor de una mente...
Yo s que tu sabes que yo s
reservada
Mockup avanzado
142
Diseo de Interaccin
MEMBER
143
Mockup final
Diseo de Interaccin
MEMBER
Caso: Cliente devuelve y alquila

Anticipacin, no es necesario buscar al

cliente

Minimizar input y pasos

Permitir operaciones en cualquier orden

144
Diseo de Interaccin
MEMBER
Cliente devuelve y alquila
145
Diseo de Interaccin
MEMBER
Cliente devuelve y alquila
146
Diseo de Interaccin
MEMBER
Cliente devuelve y alquila
147
Diseo de Interaccin
MEMBER
Cliente devuelve y alquila
148
Diseo de Interaccin
MEMBER
Caso: Devolucin de 40 pelculas

Soportar un proceso de lotes con el mismo

modelo de interaccin
149
Diseo de Interaccin
MEMBER
Devolucin de 40 pelculas
150
Diseo de Interaccin
MEMBER
Devolucin de 40 pelculas
151
Diseo de Interaccin
MEMBER
Devolucin de 40 pelculas
152
Diseo de Interaccin
MEMBER
Devolucin de 40 pelculas
153
Diseo de Interaccin
MEMBER
Resultados
Tarea 1.0 2.0 %
Bsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %
Alta de 20 nuevas pelculas 1.543 seg. 204 seg. 656%
Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566%
Buzn 40 devoluciones 636 seg. 156 seg. 300%
Notificacin de 9 atrasos 10 a 15 min.? 7 seg. 8400%
154
Diseo de Interaccin
MEMBER
Conclusiones

No hay Experiencia de Usuario sin usuarios.

Usabilidad como QA: los problemas de que no

identifiquemos y resolvamos, los encontrarn
nuestros usuarios.

Proceso iterativo de anlisis y diseo centrado en la

operacin y necesidades del usuario.

Bases racionales, cuantificacin, calidad.

Obtener producto como resultado de un proceso, y

satisfaciendo metas.
155
Diseo de Interaccin
MEMBER
Referencias
Jakob Nielsen: Why You Only Need to Test with 5 Users
Wikipedia: KLM-GOMS
Wikipedia: Ley de Fitts (en castellano!)
Wikipedia: Ley de Hick
Wikipedia:Mihaly Csikszentmihalyi
Bruce Tognazzi: Principios de diseo de interaccin (en
castellano!)
Andy Rutledge: Gestalt principles - Figure/ground relationship
Jared Spool: Anatomy of an Iteration
156
MEMBER
Santiago Bustelo
29 de junio, 2012
Muchas gracias!