SlideShare une entreprise Scribd logo
1  sur  120
Diseño de interacción
Diseño de para la interacción
“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”.
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
	 •	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.
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.
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 verificació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 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.
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
Affordances
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.
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 superfluas. 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 suficientemente demandante como para que sea
entretenida, y no es tan difí 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
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.
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
Agile
!
Agile
!
Agile
!
“Todo proyecto parte con presunciones”
Creemos que ______________________
Para este segmento ______________________
Lograremos ______________________
Veremos que es verdad cuando pase ______________________
MVP
“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 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
!
!
!
¿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
!
!
¿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
!
!
!
¿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
!
!
!
¿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
!
¿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
!
!
!
¿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
!
!
¿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
!
¿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
!
!
¿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
!
¿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
!
!
¿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
!
!
¿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
User testing
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...
usabilityhub.com
Click testfive second Nav
Analizemos un par de sitios desde el punto de vista de los usuarios….
Mamá 50 años.
Tratando de
contratar pack para
el hogar
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 tratando de
aprovechar la
portabilidad
Usuario
conociendo el
servicio de puntos
Usuario tratando de
contratar un
servicio de internet
¿Mucha
información?
o Ordenada
Explicación de
cada item
Selección de
productos sin ser
tan ambiciosos
gráficamente
Elementos de
interacción.
Breadcrum,
selectores de valor,
Nombres,
Gráfica de tallas y
colores
¿Cómo se ve
realmente?
¿Tipo de pantalón?
¿Dónde encontrar patrones?
http://www.welie.com/patterns/
http://littlebigdetails.com/
http://ui-patterns.com/
http://www.pttrns.com/
http://useyourinterface.com/
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 flujo de una persona.
• En este caso nuestros dos personas tratando de resolver
las dos principales tareas más importantes.

Contenu connexe

Tendances

5 principles of Interactive design
5 principles of Interactive design 5 principles of Interactive design
5 principles of Interactive design Steelers50
 
Pac1 presentacion nuevos medios segun manovich
Pac1  presentacion nuevos medios segun manovichPac1  presentacion nuevos medios segun manovich
Pac1 presentacion nuevos medios segun manovichMaria Jóse Vidal Morant
 
METODOLOGÍA DE LA INVESTIGACIÓN
METODOLOGÍA DE LA INVESTIGACIÓNMETODOLOGÍA DE LA INVESTIGACIÓN
METODOLOGÍA DE LA INVESTIGACIÓNfabianaquileshey
 
Usability Testing Methods
Usability Testing MethodsUsability Testing Methods
Usability Testing Methodsdillarja
 
11 3-p2_rivasrangelsebastianweb1,2,3y4
11  3-p2_rivasrangelsebastianweb1,2,3y411  3-p2_rivasrangelsebastianweb1,2,3y4
11 3-p2_rivasrangelsebastianweb1,2,3y4sebastianrivas23
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User ResearchJoan Lumanauw
 
Understanding Users
Understanding UsersUnderstanding Users
Understanding UsersAbby Covert
 
Salinas - Linea del tiempo IA
Salinas - Linea del tiempo IASalinas - Linea del tiempo IA
Salinas - Linea del tiempo IASergio Sanchez
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
PiX - Partituras de Interacción
PiX - Partituras de InteracciónPiX - Partituras de Interacción
PiX - Partituras de InteracciónKatherine Exss
 
Creación de User Persona para productos digitales
Creación de User Persona para productos digitalesCreación de User Persona para productos digitales
Creación de User Persona para productos digitalesBrenda Montes
 
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...Xicoténcatl Alcántar
 
Usability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsUsability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsAndres Baravalle
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overviewBen Melbourne
 
Multimedia y Redes de Comunicacion
Multimedia y Redes de ComunicacionMultimedia y Redes de Comunicacion
Multimedia y Redes de Comunicacionanariverob
 

Tendances (15)

5 principles of Interactive design
5 principles of Interactive design 5 principles of Interactive design
5 principles of Interactive design
 
Pac1 presentacion nuevos medios segun manovich
Pac1  presentacion nuevos medios segun manovichPac1  presentacion nuevos medios segun manovich
Pac1 presentacion nuevos medios segun manovich
 
METODOLOGÍA DE LA INVESTIGACIÓN
METODOLOGÍA DE LA INVESTIGACIÓNMETODOLOGÍA DE LA INVESTIGACIÓN
METODOLOGÍA DE LA INVESTIGACIÓN
 
Usability Testing Methods
Usability Testing MethodsUsability Testing Methods
Usability Testing Methods
 
11 3-p2_rivasrangelsebastianweb1,2,3y4
11  3-p2_rivasrangelsebastianweb1,2,3y411  3-p2_rivasrangelsebastianweb1,2,3y4
11 3-p2_rivasrangelsebastianweb1,2,3y4
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User Research
 
Understanding Users
Understanding UsersUnderstanding Users
Understanding Users
 
Salinas - Linea del tiempo IA
Salinas - Linea del tiempo IASalinas - Linea del tiempo IA
Salinas - Linea del tiempo IA
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
PiX - Partituras de Interacción
PiX - Partituras de InteracciónPiX - Partituras de Interacción
PiX - Partituras de Interacción
 
Creación de User Persona para productos digitales
Creación de User Persona para productos digitalesCreación de User Persona para productos digitales
Creación de User Persona para productos digitales
 
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...
Evaluación Heuristica, Recorrido Cognitivo e Inspecciónes Estándares - Intera...
 
Usability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsUsability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metrics
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
Multimedia y Redes de Comunicacion
Multimedia y Redes de ComunicacionMultimedia y Redes de Comunicacion
Multimedia y Redes de Comunicacion
 

En vedette

Gamification | Transmedia | Geolocalización
Gamification | Transmedia | GeolocalizaciónGamification | Transmedia | Geolocalización
Gamification | Transmedia | GeolocalizaciónJuan Paulo Madriaza
 
The Architecture of Understanding (and Happiness)
The Architecture of Understanding (and Happiness)The Architecture of Understanding (and Happiness)
The Architecture of Understanding (and Happiness)Peter Morville
 
Advertising stunts and ideas Q1|2008
Advertising stunts and ideas Q1|2008Advertising stunts and ideas Q1|2008
Advertising stunts and ideas Q1|2008Ayman Sarhan
 
Gamification Magister en comunicación UDD
Gamification Magister en comunicación UDDGamification Magister en comunicación UDD
Gamification Magister en comunicación UDDJuan Paulo Madriaza
 
10 Formas Creativas Para Hacer Fracasar Una CampañA
10 Formas Creativas Para Hacer Fracasar Una CampañA10 Formas Creativas Para Hacer Fracasar Una CampañA
10 Formas Creativas Para Hacer Fracasar Una CampañAByron Cabrera
 
Diseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y TestingDiseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y TestingJuan Paulo Madriaza
 
Un mundo con múltiples pantallas
Un mundo con múltiples pantallasUn mundo con múltiples pantallas
Un mundo con múltiples pantallasJuan Paulo Madriaza
 
Convergencia Digital / Transmedia / Gamification
Convergencia Digital / Transmedia / GamificationConvergencia Digital / Transmedia / Gamification
Convergencia Digital / Transmedia / GamificationJuan Paulo Madriaza
 
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable Service Design Network
 
Modelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startupsModelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startupsJuan Paulo Madriaza
 
Design Principles
Design PrinciplesDesign Principles
Design PrinciplesDavid Gelb
 
Planning for Strategic Design
Planning for Strategic DesignPlanning for Strategic Design
Planning for Strategic DesignPeter Morville
 
Personal Brand Consultant Brand Book
Personal Brand Consultant Brand BookPersonal Brand Consultant Brand Book
Personal Brand Consultant Brand BookKaye Putnam
 
Marketing Industry Personal Brand Book
Marketing Industry Personal Brand BookMarketing Industry Personal Brand Book
Marketing Industry Personal Brand BookKaye Putnam
 
Holistic Coach & Dr. Brand Book
Holistic Coach & Dr. Brand BookHolistic Coach & Dr. Brand Book
Holistic Coach & Dr. Brand BookKaye Putnam
 
Brand Design - Professional Branding Agency
Brand Design - Professional Branding AgencyBrand Design - Professional Branding Agency
Brand Design - Professional Branding AgencyKaye Putnam
 

En vedette (20)

Findability
FindabilityFindability
Findability
 
Gamification | Transmedia | Geolocalización
Gamification | Transmedia | GeolocalizaciónGamification | Transmedia | Geolocalización
Gamification | Transmedia | Geolocalización
 
The Architecture of Understanding (and Happiness)
The Architecture of Understanding (and Happiness)The Architecture of Understanding (and Happiness)
The Architecture of Understanding (and Happiness)
 
Design thebox
Design theboxDesign thebox
Design thebox
 
Advertising stunts and ideas Q1|2008
Advertising stunts and ideas Q1|2008Advertising stunts and ideas Q1|2008
Advertising stunts and ideas Q1|2008
 
Gamification Magister en comunicación UDD
Gamification Magister en comunicación UDDGamification Magister en comunicación UDD
Gamification Magister en comunicación UDD
 
Ux interfaces persuasivas
Ux interfaces persuasivasUx interfaces persuasivas
Ux interfaces persuasivas
 
10 Formas Creativas Para Hacer Fracasar Una CampañA
10 Formas Creativas Para Hacer Fracasar Una CampañA10 Formas Creativas Para Hacer Fracasar Una CampañA
10 Formas Creativas Para Hacer Fracasar Una CampañA
 
Diseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y TestingDiseño de interacción, Prototipado y Testing
Diseño de interacción, Prototipado y Testing
 
Un mundo con múltiples pantallas
Un mundo con múltiples pantallasUn mundo con múltiples pantallas
Un mundo con múltiples pantallas
 
Convergencia Digital / Transmedia / Gamification
Convergencia Digital / Transmedia / GamificationConvergencia Digital / Transmedia / Gamification
Convergencia Digital / Transmedia / Gamification
 
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable
Breaking the Blueprint - Chris Ferguson & Chad Story, Bridgeable
 
Modelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startupsModelo sistemático de testeo con usuarios para startups
Modelo sistemático de testeo con usuarios para startups
 
Thinking Visually
Thinking VisuallyThinking Visually
Thinking Visually
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Planning for Strategic Design
Planning for Strategic DesignPlanning for Strategic Design
Planning for Strategic Design
 
Personal Brand Consultant Brand Book
Personal Brand Consultant Brand BookPersonal Brand Consultant Brand Book
Personal Brand Consultant Brand Book
 
Marketing Industry Personal Brand Book
Marketing Industry Personal Brand BookMarketing Industry Personal Brand Book
Marketing Industry Personal Brand Book
 
Holistic Coach & Dr. Brand Book
Holistic Coach & Dr. Brand BookHolistic Coach & Dr. Brand Book
Holistic Coach & Dr. Brand Book
 
Brand Design - Professional Branding Agency
Brand Design - Professional Branding AgencyBrand Design - Professional Branding Agency
Brand Design - Professional Branding Agency
 

Similaire à Diseño Interacción

Similaire à Diseño Interacción (20)

Diseño de interfaces de usuario
Diseño de interfaces de usuarioDiseño de interfaces de usuario
Diseño de interfaces de usuario
 
Resumen patrones
Resumen patronesResumen patrones
Resumen patrones
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Diseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptxDiseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptx
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
11.interfaz de usuario
11.interfaz de usuario11.interfaz de usuario
11.interfaz de usuario
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
El Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian SommervilleEl Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
 
Hci
HciHci
Hci
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Paradigmas de interacción
Paradigmas de interacciónParadigmas de interacción
Paradigmas de interacción
 
GUI#2
GUI#2GUI#2
GUI#2
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
17 evaluacion heuristica basica
17 evaluacion heuristica basica17 evaluacion heuristica basica
17 evaluacion heuristica basica
 

Plus de Gustavo Soto Miño

UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.Gustavo Soto Miño
 
Modelo para gestión de equipos UX
Modelo para gestión de equipos UXModelo para gestión de equipos UX
Modelo para gestión de equipos UXGustavo Soto Miño
 
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...Gustavo Soto Miño
 
Presentación Modelo sistemático para testeo con usuarios en Startups
Presentación Modelo sistemático para testeo con usuarios en StartupsPresentación Modelo sistemático para testeo con usuarios en Startups
Presentación Modelo sistemático para testeo con usuarios en StartupsGustavo Soto Miño
 
Modelo sistemático para testeo con usuarios en Startups
Modelo sistemático para testeo con usuarios en StartupsModelo sistemático para testeo con usuarios en Startups
Modelo sistemático para testeo con usuarios en StartupsGustavo Soto Miño
 
Storyboards como herramienta de validación
Storyboards como herramienta de validaciónStoryboards como herramienta de validación
Storyboards como herramienta de validaciónGustavo Soto Miño
 
Eventual.ly Presentation #HackTheVisual
Eventual.ly Presentation #HackTheVisualEventual.ly Presentation #HackTheVisual
Eventual.ly Presentation #HackTheVisualGustavo Soto Miño
 
Design practice Project - MSc HCI
Design practice Project - MSc HCIDesign practice Project - MSc HCI
Design practice Project - MSc HCIGustavo Soto Miño
 
Personas e investigación de usuarios
Personas e investigación de usuariosPersonas e investigación de usuarios
Personas e investigación de usuariosGustavo Soto Miño
 
Recomendaciones para el diseño de interfaces para la tercera edad
Recomendaciones para el diseño de interfaces para la tercera edadRecomendaciones para el diseño de interfaces para la tercera edad
Recomendaciones para el diseño de interfaces para la tercera edadGustavo Soto Miño
 
Taller "Entendiendo a los Usuarios"
Taller "Entendiendo a los Usuarios"Taller "Entendiendo a los Usuarios"
Taller "Entendiendo a los Usuarios"Gustavo Soto Miño
 

Plus de Gustavo Soto Miño (20)

UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.
 
Modelo para gestión de equipos UX
Modelo para gestión de equipos UXModelo para gestión de equipos UX
Modelo para gestión de equipos UX
 
¿Como se trabaja hoy en ux?
¿Como se trabaja hoy en ux?¿Como se trabaja hoy en ux?
¿Como se trabaja hoy en ux?
 
Nuevas tendencias en UX
Nuevas tendencias en UXNuevas tendencias en UX
Nuevas tendencias en UX
 
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...
FRAMEWORK - Storyboard como herramienta de validación Interaction South Ameri...
 
Presentación Modelo sistemático para testeo con usuarios en Startups
Presentación Modelo sistemático para testeo con usuarios en StartupsPresentación Modelo sistemático para testeo con usuarios en Startups
Presentación Modelo sistemático para testeo con usuarios en Startups
 
Modelo sistemático para testeo con usuarios en Startups
Modelo sistemático para testeo con usuarios en StartupsModelo sistemático para testeo con usuarios en Startups
Modelo sistemático para testeo con usuarios en Startups
 
Storyboards como herramienta de validación
Storyboards como herramienta de validaciónStoryboards como herramienta de validación
Storyboards como herramienta de validación
 
Parents
ParentsParents
Parents
 
Eventual.ly Presentation #HackTheVisual
Eventual.ly Presentation #HackTheVisualEventual.ly Presentation #HackTheVisual
Eventual.ly Presentation #HackTheVisual
 
Design practice Project - MSc HCI
Design practice Project - MSc HCIDesign practice Project - MSc HCI
Design practice Project - MSc HCI
 
Clase UX - Diplomado de AI
Clase UX - Diplomado de AI Clase UX - Diplomado de AI
Clase UX - Diplomado de AI
 
Personas e investigación de usuarios
Personas e investigación de usuariosPersonas e investigación de usuarios
Personas e investigación de usuarios
 
Portafolio ux
Portafolio uxPortafolio ux
Portafolio ux
 
Recomendaciones para el diseño de interfaces para la tercera edad
Recomendaciones para el diseño de interfaces para la tercera edadRecomendaciones para el diseño de interfaces para la tercera edad
Recomendaciones para el diseño de interfaces para la tercera edad
 
Taller "Entendiendo a los Usuarios"
Taller "Entendiendo a los Usuarios"Taller "Entendiendo a los Usuarios"
Taller "Entendiendo a los Usuarios"
 
Diseño de servicios ATM
Diseño de servicios ATMDiseño de servicios ATM
Diseño de servicios ATM
 
Usabilidad Open D
Usabilidad Open DUsabilidad Open D
Usabilidad Open D
 
Introducción a la Usabilidad
Introducción a la UsabilidadIntroducción a la Usabilidad
Introducción a la Usabilidad
 
Caso sanemos.cl
Caso sanemos.clCaso sanemos.cl
Caso sanemos.cl
 

Dernier

Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadDiosymarSuarez
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docMerlyBrisetTorneroLu
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929FiorellaLaura2
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESMairaLasso1
 
PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .Rosa329296
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabrielaMarcano12
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDAdiawaraplast
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAPjuanrincon129309
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
Diapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarloDiapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarlojefeer060122
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfalguien92
 
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...maria Apellidos
 

Dernier (20)

Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la Modernidad
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONES
 
PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimiento
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAP
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
Diapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarloDiapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarlo
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
 
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...PRIS - (2021) - SEMANA 3 - AZUFRE  -  ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
PRIS - (2021) - SEMANA 3 - AZUFRE - ÁCIDO SULFÚRICO - ASPECTOS GENERALES - ...
 

Diseño Interacción

  • 2. Diseño de para la interacción
  • 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.
  • 25.
  • 26.
  • 27.
  • 28. Principios para la interacción !
  • 29. Anticipación Las aplicaciones deberían intentar anticiparse a las necesidades y deseos del usuario.
  • 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.
  • 32. Alinear experiencias y expectativas Consiste en realizar modelos conceptuales que se comporten de la manera en que espera el usuario (modelo mental).
  • 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
  • 41.
  • 42.
  • 43.
  • 44.
  • 48.
  • 49.
  • 50. “Todo proyecto parte con presunciones”
  • 51. Creemos que ______________________ Para este segmento ______________________ Lograremos ______________________ Veremos que es verdad cuando pase ______________________
  • 52. MVP
  • 53. “No diseñes un producto, diseña un experimento”
  • 54.
  • 55. Entregables. La traducción diseñístico - humano
  • 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
  • 71. Guerrilla De carácter informal, con bajo o nulo presupuesto
  • 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...
  • 78.
  • 79.
  • 80. Analizemos un par de sitios desde el punto de vista de los usuarios….
  • 81. Mamá 50 años. Tratando de contratar pack para el hogar
  • 82. Mamá 50 años. Tratando de contratar pack para el hogar
  • 83. Usuario que sólo tiene TV contratado
  • 84. Hombre 50 años tratando de escoger un servicio
  • 88. Usuario tratando de contratar un servicio de internet
  • 91. Selección de productos sin ser tan ambiciosos gráficamente
  • 93. Gráfica de tallas y colores
  • 95.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 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.