Diseño Interacción

Diseño de para la interacción

“En 1990 Bill Moggridge, director de la ﬁrma 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”.

Interacción / Interfaz

¿diferencias?

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.

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.

1) Formulación del objetivo. Qué queremos lograr.
!
2) Ejecución. Qué hacemos:
• Formular nuestra intención
• Especiﬁcar 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.

Este modelo nos permite identiﬁcar 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.

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.

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)

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.

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.

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 veriﬁcación o
botones de opción.

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 artiﬁcial 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.

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.

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
ﬁgurado sobre la base de determinadas semejanzas entre ambos.

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.

Affordances = Propiciar.
D. Norman.

Principios para la interacción
!

Anticipación
Las aplicaciones deberían intentar anticiparse a las necesidades y
deseos del usuario.

Objetos humanos
Los objetos humanos de la interfaz se comportan de manera
estándar por lo que se facilita su uso.

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.

Alinear
experiencias y
expectativas
Consiste en realizar modelos conceptuales que se comporten de la
manera en que espera el usuario (modelo mental).

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.

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.

Minimalismo
funcional
Todo debe ser tan simple como sea posible, pero no más simple
que eso. Evita funcionalidades superﬂuas. Separa tareas
complejas en minitareas. Limita las funcionalidades en pro de la
experiencia.

Flow
El engagement aumenta cuando un usuario siente que la tarea que
ejecuta es lo suﬁcientemente demandante como para que sea
entretenida, y no es tan diﬁ́ cil como para que llegue a ser
frustrante.

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).

Control y
conﬁanza
Si el usuario se siente en control de lo que sucede en la interacción
eventualmente presentará conﬁanza en el funcionamiento de esta
por lo que se sentirá en condiciones de explorarla de manera más
abierta.

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

Waterfall
!
Agile
!
Dos vertientes metodológicas

“Todo proyecto parte con presunciones”

Creemos que ______________________
Para este segmento ______________________
Lograremos ______________________
Veremos que es verdad cuando pase ______________________

“No diseñes un producto, diseña un experimento”

Entregables. La traducción diseñístico - humano

¿Qué es?
Es un board que se llena según los recuadros descritos
¿Para qué sirve?
Para sistematizar los antecedentes y deﬁniciones
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

!
!
!
¿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.
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

!
!
¿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
Cuando se tienen las primeras ideas,
usuarios y contextos de uso
!
¿Cómo se hace?

•
Se deﬁnen las tareas y usuarios a
dibujar

•
Se establece el guión

•
Se dibuja la historia

•
Se evalúa su resultado
!
Storyboarding

!
!
!
¿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
Al momento de empezar un proyecto
que ya está relativamente deﬁnido en
su contexto
!
¿Cómo se hace?

•
Se deﬁnen los referentes a analizar

•
Se analizan rescatando lo bueno y
lo malo

•
Se establecen conclusiones
haciendo énfasis en las ideas que
me sirven
!
!
Benchmarks

!
!
!
¿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
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

!
¿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
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

!
!
!
¿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
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

!
!
¿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
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

!
¿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 ﬂujo ideal
¿Cómo se hace?

•
Se deﬁnen 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

!
!
¿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
(*mapa de navegación)
¿Cómo se hace?

•
Se deﬁnen 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

!
¿Qué es?
Es una serie de imágenes que muestran el layout, sin gráﬁca,
de las principales pantallas
¿Para qué sirve?
Para especiﬁcar el diseño de layout de cada página y
comprobar su funcionalidad (usabilidad)
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

!
!
¿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
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

!
!
¿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 ﬂujos de tareas
Cuando se tienen listos los wireframes o sketches asociados a
un ﬂujo 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

Guerrilla Lab Contextual Remote

Guerrilla De carácter informal, con bajo o nulo presupuesto

Lab De carácter formal, Alto presupuesto, segmentos de personas

Contextual De carácter informal, con el usuario
en su entorno habitual con sus herramientas habituales

Remote De carácter formal, en el contexto del usuario,
con alto control sobre la segmentación.

Mejoras constantes 
Ciclos de iteración
Supervisión colaborativa de desarrollo
Control de calidad Prototipos funcionales 
User testings 
Evaluación de KPIs 
etc...

Analizemos un par de sitios desde el punto de vista de los usuarios….

Mamá 50 años.
Tratando de
contratar pack para
el hogar

Usuario que sólo
tiene TV contratado

Hombre 50 años
tratando de
escoger un servicio

Usuario tratando de
aprovechar la
portabilidad

Usuario
conociendo el
servicio de puntos

Usuario tratando de
contratar un
servicio de internet

¿Mucha
información?
o Ordenada

Selección de
productos sin ser
tan ambiciosos
gráﬁcamente

Elementos de
interacción.
Breadcrum,
selectores de valor,
Nombres,

http://www.welie.com/patterns/

https://www.dropbox.com/sh/d46s7au90ouqbaf/AACSia7fDQEJ7o1Ca1rSSEUHa

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

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

¿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

Básicamente
• Articular los wireframes para el ﬂujo de una persona.
• En este caso nuestros dos personas tratando de resolver
las dos principales tareas más importantes.

Diseño Interacción

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Diseño Interacción

Similar a Diseño Interacción (20)

Más de Gustavo Soto Miño

Más de Gustavo Soto Miño (20)

Último

Último (20)

Diseño Interacción