3. “En 1990 Bill Moggridge, director de la firma de
diseño IDEO, se dio cuenta de que él y algunos de
sus colegas habían estado produciendo una clase de
diseño muy diferente. No era exactamente diseño
de producto. Tampoco era diseño de comunicación,
aunque habían usado algunas de las herramientas
de esta disciplina. No era tampoco ciencias de la
computación, aunque una gran parte tenía que ver
con software.
!
No, era algo diferente. Se apoyaba en todas estas
disciplinas, pero era algo más, y tenía que ver con
conectar personas a través de los productos que
usaban. Moggridge denominó a esta nueva práctica
diseño de interacción”.
5. El diseño de interacción es una disciplina práctica acerca del comportamiento, sobre cómo se
comportan las personas utilizando productos y cómo se comportan dichos productos; y sobre cómo
armonizar la relación interactiva entre ambos comportamientos.
6.
7.
8. Esta interacción tiene lugar sobre la interfaz de usuario,
entendida como el conjunto de dispositivos hardware
(de entrada y salida) y el software que posibilitan el
intercambio de mensajes o instrucciones entre el usuario y el
ordenador.
9. 1) Formulación del objetivo. Qué queremos lograr.
!
2) Ejecución. Qué hacemos:
• Formular nuestra intención
• Especificar la acción
• Ejecutar la acción
!
!
3) Evaluación. Comparar qué ha ocurrido con qué querríamos que ocurriera
tras nuestra acción:
• Percibir el estado (o respuesta) del sistema
• Interpretar el estado del sistema
• Evaluar el resultado!
D. Norman.
10. Este modelo nos permite identificar en qué momentos se
pueden producir problemas de uso para el usuario en forma de
inconexión entre los estados mentales del usuario (qué
pretende conseguir y cómo) y los estados físicos del sistema
(qué funciones permite y cómo induce a realizarlas).
Estos problemas o brechas en la interacción11
son básicamente
dos: la brecha en la ejecución y la brecha en la evaluación.
11. La brecha en la ejecución se produce cuando no somos
capaces de relacionar qué pretendemos lograr y cómo llevar a
cabo la acción con las opciones que nos ofrece el sistema. La
brecha en la evaluación, en cambio, se produce cuando no
somos capaces de interpretar la respuesta del sistema ante
nuestra acción o cuando esta respuesta no se corresponde
con la que esperábamos.
12.
13.
14. 1) Líneas de comandos
2) Menús de selección o navegación
3) Formularios
4) Diálogo basado en lenguaje natural
5) Manipulación directa
Estilos de Interacción
Preece y otros (1994) y Shneiderman (1997)
15. Líneas de comando
En estos sistemas, el usuario debe introducir a través de un prompt,
instrucciones o comandos que pueden ser combinados con parámetros. Tras la
introducción de un comando, el sistema evalúa la instrucción y la ejecuta, o
devuelve un mensaje de error en caso de que el usuario haya cometido algún
error en la instrucción.
16. Menús de selección
o navegación
En este estilo de interacción el sistema le presenta al usuario la lista de
opciones o comandos posibles en cada momento y el usuario sólo ha de elegir
aquella opción u opciones que se correspondan con su objetivo.
A diferencia de las líneas de comandos, este estilo de interacción resulta
mucho más fácil de usar para usuarios inexpertos, ya que permite reconocer
cómo llevar a cabo la acción, en vez de tener que recordar o conocer previa-
mente el comando requerido.
17. Formularios
Los formularios representan un estilo de interacción que utiliza la metáfora de
los formularios clásicos en papel. En éstos se presentan una serie de campos,
con sus etiquetas asociadas, que el usuario debe introducir o completar. En
muchos casos incluyen elementos propios del estilo de interacción
anteriormente explicado, como listas desplegables, casillas de verificación o
botones de opción.
18. Diálogo basado en
lenguaje natural
Aunque éste es un estilo de interacción sobre el que los autores llevan mucho
tiempo escribiendo e investigando (principalmente en el campo de la
inteligencia artificial y la lingüística), la realidad es que a día de hoy sigue sin
ser posible interactuar con los ordenadores (u otros productos) utilizando el
lenguaje natural.
19. Manipulación directa
La manipulación directa es aquel estilo de interacción que permite al usuario
manipular y controlar físicamente los elementos presentes en la interfaz,
incluyendo la posibilidad de seleccionar, arrastrar o mover objetos, así como
la de deshacer las acciones realizadas. En este estilo de interacción, tanto el
estado del sistema como el resultado de nuestras acciones deben ser visibles
en todo momento.
21. Metáforas
El uso de metáforas forma parte intrínseca del lenguaje y, por tanto, de nuestro
pensamiento. Una metáfora consiste en usar una palabra o expresión para
referirse a un concepto, que no es denotado de modo literal, sino en sentido
figurado sobre la base de determinadas semejanzas entre ambos.
22.
23. Affordances
“Pensemos en unas tijeras: incluso si nunca has visto
o usado unas antes, puedes ver que el número de
posibles acciones es limitado. Los agujeros están
claramente para introducir algo, y las únicas cosas
lógicas que se ajustan son los dedos. Los agujeros
son autoexplicativos: permiten introducir los dedos.
El tamaño de los agujeros limita los posibles dedos a
introducir: el agujero grande permite varios dedos, el
agujero pequeño sólo uno”.
D. Norman.
30. Objetos humanos
Los objetos humanos de la interfaz se comportan de manera
estándar por lo que se facilita su uso.
31. Protege el trabajo
del usuario
Asegúrate de que el usuario nunca pierda su trabajo como
resultado de un error suyo, los problemas de internet u otro tipo de
problemas inevitables, como un apagón.
33. Consistencia
Frente al mismo estímulo, la misma decisión.
Es tan importante ser visualmente inconsistente con los objetos que se comportan
de forma distinta, como ser consistente con los que se comportan de igual
manera. Evita la uniformidad. Haz que los objetos que se comportan distinto
parezcan distintos. La consistencia más importante es aquella que espera el
usuario. La única manera de comprobar las expectativas del usuario es hacer
pruebas con ellos.
34. Carga Cognitiva
El usuario no debe ser obligado a retener información crítica para
el funcionamiento del sistema. Deja que el sistema haga todo el
trabajo que le sea posible con tal de que el usuario se enfoque en
las tareas en las que su participación es crítica.
35. Minimalismo
funcional
Todo debe ser tan simple como sea posible, pero no más simple
que eso. Evita funcionalidades superfluas. Separa tareas
complejas en minitareas. Limita las funcionalidades en pro de la
experiencia.
36. Flow
El engagement aumenta cuando un usuario siente que la tarea que
ejecuta es lo suficientemente demandante como para que sea
entretenida, y no es tan difí cil como para que llegue a ser
frustrante.
37. Functional
layering
Según la ley de Pareto (80 -20) el 20% de las funcionalidades son
usadas el 80% de las veces.
Debemos hacer que las funcionalidades más recurrentes sean más
fáciles de encontrar. Debemos entregar herramientas a los usuarios
más experimentados para que ejecuten las tareas de manera más
rápida (aunque sea un tanto menos lógica).
38. Control y
confianza
Si el usuario se siente en control de lo que sucede en la interacción
eventualmente presentará confianza en el funcionamiento de esta
por lo que se sentirá en condiciones de explorarla de manera más
abierta.
39. Prevención,
detección y
recuperación de
errores
Prevenir errores:
• Deshabilita funciones que no son útiles
• Usa los patrones de interacción correctos para permitir el ingreso de data por parte del usuario
• Entrega instrucciones claras y precisas Detectar errores
• Entrega feedback al usuario en el caso que se presuma que pueda estar cometiendo un error
Recuperación de errores
• Si el error ya fue cometido siempre dale al usuario maneras de deshacerlo
• Si una acción es crítica y no puede ser deshecha indícalo antes de su ejecución
51. Creemos que ______________________
Para este segmento ______________________
Lograremos ______________________
Veremos que es verdad cuando pase ______________________
56. ¿Qué es?
Es un board que se llena según los recuadros descritos
¿Para qué sirve?
Para sistematizar los antecedentes y definiciones
preliminares de diseño
¿Cuándo realizarlo?
Al principio del proyecto
!
Contenido:
•
Gancho de la idea
•
Forma
•
Acción esperada
•
Métricas
•
Canales
•
Detonador de uso
•
Persona (usuario)
•
Recursos involucrados
•
Resultados esperados
Content Strategy Canvas
57. !
!
!
¿Qué es?
Es una ficha con descriptores de los usuarios
arquetípicos de mi idea
¿Para qué sirve?
Para entender a los usuarios, sus intereses,
motivaciones, contextos de uso, preocupaciones, etc.
¿Cuándo realizarlo?
Al principio del proyecto
!
¿Cómo se hace?
•
Se definen arquetipos de usuarios
•
Se hacen entrevistas con los
involucrados
•
Se crean fichas por cada usuario mencionando sus
características como si estuviéramos definiendo a
una persona real
!
Personas
58. !
!
¿Qué es?
Es una historia dibujada de formas
de uso de la idea
¿Para qué sirve?
Para focalizarse en lo central de la
idea, para revisar la lógica de la idea,
para comunicar el concepto de
manera fácil
¿Cuándo realizarlo?
Cuando se tienen las primeras ideas,
usuarios y contextos de uso
!
¿Cómo se hace?
•
Se definen las tareas y usuarios a
dibujar
•
Se establece el guión
•
Se dibuja la historia
•
Se evalúa su resultado
!
Storyboarding
59. !
!
!
¿Qué es?
Es una sistematización de las mejores
ideas de otros proyectos existentes
¿Para qué sirve?
Para no inventar la rueda, para no
cometer los mismos errores de otros,
para diferenciarme de mi competencia
¿Cuándo realizarlo?
Al momento de empezar un proyecto
que ya está relativamente definido en
su contexto
!
¿Cómo se hace?
•
Se definen los referentes a analizar
•
Se analizan rescatando lo bueno y
lo malo
•
Se establecen conclusiones
haciendo énfasis en las ideas que
me sirven
!
!
Benchmarks
60. !
!
!
¿Qué es?
Es un listado detallado de todas las
posibles funcionalidades que puede
tener nuestra idea
¿Para qué sirve?
Para definir y jerarquizar las
funcionalidades de nuestro proyecto
¿Cuándo realizarlo?
Al momento de tener la idea clara, los
usuarios estudiados y los referentes
analizados
!
¿Cómo se hace?
•
Se crea una tabla con todas las
posibles funcionalidades del
sistema
•
Se asignan niveles de importancia y
complejidad a cada funcionalidad
•
Se definen las funcionalidades que
van finalmente en la solución
!
Capacidades del sistema
61. !
¿Qué es?
Es una dinámica de organización de contenidos
¿Para qué sirve?
Para obtener información respecto de cuál es la
manera más lógica de agrupar contenido
¿Cuándo realizarlo?
Al momento de tener los contenidos delineados y/o
definidos
¿Cómo se hace?
•
Se invita a varios grupos de usuarios a una sesión
de trabajo
•
Se le entregan postits (definidos o en blanco) con
los contenidos del proyecto
•
Se les pide que organicen los postits en secciones
(ya definidas o por crearse)
•
Se realiza un reporte de los resultados
!
!
!
!
Card sorting
62. !
!
!
¿Qué es?
Es un diagrama de ordenamiento de secciones y sus
contenidos
¿Para qué sirve?
Para visualizar las distintas pantallas de la solución y
sus relaciones
¿Cuándo realizarlo?
Al momento de tener definidos los contenidos
¿Cómo se hace?
•
Se recopilan los contenidos que deben formar
parte del proyecto
•
Se establecen cuáles serán las páginas que
formarán parte del proyecto
•
Se establecen secciones donde se encontrará cada
página
•
Se definen relaciones jerárquicas entre cada
pantalla
•
Se crea un diagrama que lo especifique
!
Site Maps
63. !
!
¿Qué es?
Es un diagrama de ordenamiento de procesos y tareas
¿Para qué sirve?
Para visualizar la manera en que las distintas tareas son
realizadas (paso a paso) y encontrar posibles errores de lógica
¿Cuándo realizarlo?
Al momento de tener definidas las capacidades del sistema
¿Cómo se hace?
•
Se definen las tareas a visualizar
•
Se establecen los pasos necesarios para
realizar una tarea
•
Se buscan los puntos de bifurcación y se establecen rutas
alternativas
•
Se crea un diagrama que explica las distintas posibilidades
de interacción
!
!
!
!
Task flows
64. !
¿Qué es?
Es un diagrama que muestra la interacción ideal de un usuario
con el proyecto
¿Para qué sirve?
Para que al momento de diseñar el proyecto podamos
priorizar evidentemente el flujo ideal
¿Cuándo realizarlo?
Al momento de tener definidas las capacidades del sistema
¿Cómo se hace?
•
Se definen las tareas más relevantes
•
Se determina la ruta o los pasos ideales con los que un
usuario debería relacionarse con el sistema
•
Se determinan los puntos clave
•
Se visualizan en una serie de diagramas simples
!
!
!
!
!
Ideal Task Flows
65. !
!
¿Qué es?
Es un proceso de bocetaje de las principales ideas del proyecto
(no sólo pantallas)
¿Para qué sirve?
Para sistematizar y visualizar las ideas y sus posibles
soluciones
¿Cuándo realizarlo?
Al momento de tener definidas las capacidades del sistema
(*mapa de navegación)
¿Cómo se hace?
•
Se definen las ideas a bocetear
•
Se establecen las variables que
conforman cada idea
•
Se realizan múltiples iteraciones hasta encontrar las mejores
soluciones
•
Se realizan anotaciones que permitan argumentar, detallar
o invalidar una idea
!
!
!
Sketching
66. !
¿Qué es?
Es una serie de imágenes que muestran el layout, sin gráfica,
de las principales pantallas
¿Para qué sirve?
Para especificar el diseño de layout de cada página y
comprobar su funcionalidad (usabilidad)
¿Cuándo realizarlo?
Al momento de concluir conforme el proceso de sketching
¿Cómo se hace?
•
Se determinan las pantallas que forman parte de la médula
del proyecto (plantillas a prototipar)
•
Se crean las pantallas utilizando un software de wireframing
(Axure, Omnigraffle)
•
Se validan los resultados con usuarios
•
Se realizan iteraciones hasta estar convencido de la solución
!
!
!
!
!
Wireframes
67. !
!
¿Qué es?
Es una serie de wireframes posicionados en una única gran
pizarra
¿Para qué sirve?
Para ejemplificar las relaciones entre una pantalla y la otra con
tal de validar la lógica de estas en su contexto
¿Cuándo realizarlo?
Paralelamente al proceso de wireframing
¿Cómo se hace?
•
Se posicionan los wireframes sobre una superficie que
permita de un vistazo ver el «big picture»
•
Se trazan conectores entre las pantallas que están
relacionadas
•
Se realizan comentarios escritos sobre la pizarra para que
faciliten el entendimiento del documento
!
!
!
!
Wireflows
68. !
!
¿Qué es?
Es una serie de wireframes o sketches que están vinculados
entre si (eventualmente tienen funcionalidades básicas
también)
¿Para qué sirve?
Para testear con usuarios determinados flujos de tareas
¿Cuándo realizarlo?
Cuando se tienen listos los wireframes o sketches asociados a
un flujo de tarea
¿Cómo se hace?
•
Se determina la tarea a testear
•
Se realizan los wireframes o sketches que
forman parte de la tarea
•
Se les agrega funcionalidad
•
Se ejecuta el proceso de testeo
•
Se realizan cambios según los resultados obtenidos
!
!
!
Prototipado interactivo
72. Lab De carácter formal, Alto presupuesto, segmentos de personas
73. Contextual De carácter informal, con el usuario
en su entorno habitual con sus herramientas habituales
74. Remote De carácter formal, en el contexto del usuario,
con alto control sobre la segmentación.
75. Mejoras constantes
Ciclos de iteración
Supervisión colaborativa de desarrollo
Control de calidad Prototipos funcionales
User testings
Evaluación de KPIs
etc...
112. Wireflows
!
¿Para qué sirve?
Para ejemplificar las relaciones entre una pantalla y la otra con tal de validar la lógica de estas en su contexto
¿Cómo se hace?
•
Se posicionan los wireframes sobre una superficie que permita de un vistazo ver el «big picture»
•
Se trazan conectores entre las pantallas que están relacionadas
•
Se realizan comentarios escritos sobre la pizarra para que faciliten el entendimiento del documento
113.
114.
115.
116.
117.
118. Generar un espacio de interacción
Contar una historia con los wireframes sobre la experiencia de un usuario
en búsqueda de resolver una necesidad
119. ¿Qué es lo más importante?
• Descripción de pasos y necesidades de la persona
• “Leo donde dice “muebles”.
• Hace click en muebles y se despliega un menú
• Escoge “Dormitorio”
• Accede a un landing de Muebles de dormitorio
120. Básicamente
• Articular los wireframes para el flujo de una persona.
• En este caso nuestros dos personas tratando de resolver
las dos principales tareas más importantes.