victormgonzalez.me
La relevancia de los fundamentos en el diseño de sistemas interactivos: teorías y conceptos de la Psicología, Sociología y la Economía
Conductual que todo diseñador debería conocer
Guadalajara, Jalisco, Noviembre 2017
Dr. Víctor M. González The User Experience Researcher /
Consultant / Professor / Speaker [email protected] @vmgyg
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial Soy profesor-investigador del Instituto Tecnológico Autónomo de México
(ITAM) y me especializo en el Diseño de Sistemas Interactivos, Estudios de Innovación Tecnológica, Definición de Experiencias de Usuario (UX), y
Desarrollo de Sistemas con Interfaces no Tradicionales (ej. Interfaces Cerebro-Computadora). Soy Jefe del Departamento Académico de Computación en el ITAM y Co-Director del EPIC Lab: Centro ITAM de Creatividad, Innovación y Emprendimiento. Cuento con Certificaciones en el área de Métodos Ágiles
como ScrumMaster y Scrum Product Owner (Scrum Alliance) y he participado en el programa Innovation Master Series de la d-School de Stanford
University (origen del Design Thinking). Soy consultor en temas de Desarrollo de Sistemas con Métodos Ágiles, Diseño Centrado en el Usuario, Pruebas de
Usabilidad, y Diseño de Experiencias de Usuario. Recibí grados de Doctor (PhD) en Information and Computer Science y Maestro en Ciencias (MSc) en
Information and Computer Science por la University of California at Irvine (EEUU), Maestro en Ciencias (MSc) en Telecommunications and Information
Systems por la University of Essex (Reino Unido).
¿quiénes somos?
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
La psicología está en todo lo que nos rodea.
En ninguna parte es esto más evidente que cuando diseñamos experiencias/productos para uso humano. • ¿Cómo interactuarán los usuarios con mi producto? • ¿Por qué los usuarios se comportan de la manera que lo hacen? • ¿Qué elementos de mi diseño son clave para facilitar los comportamientos
que deseas que los usuarios tengan con tu producto?
La psicología ayuda a responder a estas preguntas, guiándonos a tomar decisiones de diseño efectivas.
La psicología cognitiva es una de las bases que sostiene mucho del trabajo de la disciplina de Interacción Humano-Computadora y el Diseño de la Experiencia de Usuario (UX)
psicología: fundamento de la UX
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial psicología cognitiva: una definición
La psicología cognitiva es el estudio científico de la mente y la función mental, incluyendo el aprendizaje, la memoria, la atención, la percepción, el razonamiento, el lenguaje, el desarrollo conceptual y la toma de decisiones. El estudio moderno de la cognición se basa en la premisa de que el cerebro puede ser entendido como un sistema de computación complejo.
Source: http://psych.rutgers.edu/menu-iv/co
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
psicología cognitiva: aplicación a UX La Psicología Cognitiva orientada a la UX nos ayuda a entender que los seres humanos:
– percibimos lo que esperamos – percibimos estructura – nuestra memoría es limitada y volátil – nuestro sistema de visión periférica es pobre – y muchas otras cosas más…
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
guía de ruta para esta plática: En esta plática aprenderemos sobre fundamentos y su aplicación al diseño de la experiencia de usuario interactiva bajo tres enfoques: a) Capacidad Sensorial del Ser Humano b) Capacidad Cognitiva del Ser Humano c) Configuración Social del Ser Humano
victormgonzalez.me
fuente
Designing with the Mind in Mind – Second Edition By Jeff Johnson Publisher: Morgan Kaufmann Release Date: 2014
Jeff Johnson, Principal Consultant at UI Wizards Inc., San Francisco, California, USA
https://www.youtube.com/watch?v=Rh18iJ8gSfI http://www.uiwizards.com/
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
percibimos con nuestros sentidos • percepción visual • percepción al color y resolución visual
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Los Principios de Diseño Visual están basados en la forma en como percibimos y procesamos información
• Principios Gestalt de Percepción Visual – Entender la forma en como opera la percepción visual
• Ideas principales: – Nuestro sistema visual automáticamente impone una
estructura a la entrada visual que recibimos – Estamos configurados para percibir lo que nos rodea en
términos de objetos completos • Gestalt es una marco descriptivo
percepción visual
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial principio gestalt de simplicidad
Fuente:h=p://www.smashingmagazine.com/2014/03/28/design-principles-visual-percep:on-and-the-principles-of-gestalt/
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial principio gestalt de proximidad
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fuente:h=p://architec:ngusability.com/2011/05/26/using-the-gestalt-laws-of-percep:on-in-ui-design/
principio gestalt de proximidad
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fuente:h=p://architec:ngusability.com/2011/05/26/using-the-gestalt-laws-of-percep:on-in-ui-design/
principio gestalt de proximidad
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
principio gestalt de similitud
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fuente:h=p://architec:ngusability.com/2011/05/26/using-the-gestalt-laws-of-percep:on-in-ui-design/
principio gestalt de similitud
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
… principio gestalt de figura y fondo principio gestalt de cierre principio gestalt de región común principio gestalt de simetría principio gestalt de destino común …
y muchos otros más
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
percibimos con nuestros sentidos • percepción visual • percepción al color y resolución visual
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
funcionamiento del sistema de visión en color
Bastones – detectan luz pero no colores Conos – tres tipos, sensibles al rojo, verde y azul claro
Los bastones son sensibles al brillo Los conos son sensitivos a tres diferentes frecuencias de luz
percepción de color
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial sensibilidad de los conos
Baja frecuencia - sensible a la luz en casi toda la gama Frecuencia media - menos sensible que los conos de baja frecuencia
Alta frecuencia - menos sensible y menos numerosa
percepción de color
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Palidez, Tamaño y Separación
distinguir colores depende de cómo se presentan percepción de color
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Visión anómala tricromática/dicromática resulta cuando algunos conos están mal alineados o uno de los tipos de conos no existe: – Protanopia: No se percibe el rojo – Deuteranopia: No se percibe el verde – Tritanopia: No se percibe el azul/amarillo
deficiencias en percepción de color percepción de color
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Protanopia: No se percibe el rojo
deficiencias en percepción de color percepción de color
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Deuteranopia: No se percibe el verde
deficiencias en percepción de color percepción de color
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Tritanopia: No se percibe el azul/amarillo
deficiencias en percepción de color percepción de color
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
nuestra visión periférica es limitada (pobre)
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial resolución de la fóvea vs. periferia
Distribution of photoreceptos cells (cones and rods) across the retine (Lindsay and Norman, 1972)
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
resolución de la fóvea vs. periferia
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
resolución de la fóvea vs. periferia
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Cualquier cosa que no está dentro de 1 o 2 centimetros del área donde se da clic a un elemento, queda en el campo de la visión periférica
implicaciones de diseño resolución fóvea vs periferia
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Este mensaje de error para el inicio de sesión defectuoso aparece en la visión periférica, donde probablemente se perderá.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Este mensaje de error para el inicio de sesión defectuoso no es percibido por algunos usuarios a pesar de que no está lejos del botón de "Inicio de sesión”.
implicaciones de diseño resolución fóvea vs periferia
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Una simulación del campo visual de un usuario mientras que la fóvea se fija en el botón "Inicio de sesión”.
implicaciones de diseño resolución fóvea vs periferia
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Este mensaje de error para el inicio de sesión con error se muestra con más prominencia, cerca de donde los usuarios estarán buscando.
implicaciones de diseño resolución fóvea vs periferia
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
percibimos lo que esperamos • Nuestra percepción del mundo no se basa únicamente en lo
que nos rodea • Percibimos, en buena medida, lo que esperamos percibir • Nuestras expectativas – y de ahí nuestras percepción – son
influenciadas por tres factores: – el pasado: nuestra experiencia – el presente: nuestro contexto – el futuro: nuestras metas
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
percepción influenciada por nuestra experiencia
patrones de percepción (frames) La exposición repetida a un tipo de situación, escenario o contexto crea un patrón en nuestras mentes de lo que esperamos ver. • Objetos esperados: Cocina, oficina, consultorio • Esto crea “Mental shortcuts”: no es necesario examinar a
detalle… puede resultar en obviar cosas
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
percepción influenciada por nuestra experiencia
Patrones de Percepción (Frames) • Los diseñadores de software normalmente asumen que los
usuarios veran y actuarán de acuerdo a lo que está en la pantalla.
• Lo que los usuarios perciben de una interfaz está principalmente basado en su experiencia pasada (y lo que ésta los guía a esperar) más que en lo que realmente está en la pantalla.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial percepción influenciada por nuestras metas
• Nuestras metas filtran nuestras percepciones: cosas que no están relacionadas a nuestras metas tienden a ser filtradas, y no se registran en nuestra mente consciente
• Cuando la gente inspecciona una interfaz pasamos por encima de la pantalla de forma rápida y superficial sobre elementos no relacionados con nuestra meta.
• No es sólo ignorar esos elementos, la mayoría de las veces, no los notamos.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Busca por unas tijeras en la caja de herramienta
percepción influenciada por nuestras metas
Fuente:DesigningwiththeMindinMind2ndEdi2on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• Fenómeno de la Fiesta (Cocktail Party Phenomenon): nuestras metas filtran nuestras percepciones
• Mientras más interesado estés en una conversación, más inténsamente tu cerebro filtrará el ruido que te rodea (conversaciones).
percepción influenciada por nuestras metas
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• ¿De qué manera nuestras metas guian nuestra percepción?: – Influenciando a dónde enfocamos nuestra atención. – Sensibilizando nuestro sistema de percepción para
detectar ciertas características.
percepción influenciada por nuestras metas
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial implicaciones para el diseño de la UX
– Evita la ambiguedad: forzar al usuario a tomar decisiones – reforzar la decisión
– Ser consistentes: con el contexto, con las metas, con la experiencia
– Entender las metas: las metas del usuario pueden variar, y sus metas tienen una fuerte influencia en la forma en como percibe la interfaz.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
atención y memoria • Nuestra atención es limitada y nuestra memoria imperfecta
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial concepción tradicional:
memoria de corto vs. largo plazo • memoria de corto plazo cubre situaciones en que la
información es retenida por intervalos muy cortos que van de una fracción de segundo a varios segundos o incluso minutos.
• memoria de largo plazo cubre situaciones en que la información es retenida por periodos largos, por ejemplo minutos, horas, días, años o incluso toda la vida de una persona.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial concepción moderna: memoria de largo plazo
• Toda las percepciones crean alguna forma de trazo o marca, sin embargo algunas son tan débiles que pueden considerarse como no registradas: el patrón se activa una vez, pero nunca nuevamente.
• La formación de recuerdos (memorias) consiste de cambios de largo plazo y permanentes en las neuronas e involucra un patrón de actividad neuronal, que hace que el patrón se reactive con mayor facilidad en el futuro.
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
– no es un espacio de almacenamiento. – es producto de nuestro sistema de percepción y
atención. – es resultado de actividad residual neuronal después de
que ha cesado un estímulo. – es el enfoque de atención combinado: el patrón neuronal
activo del que estamos conscientes – La característica principal de la memoria de corto plazo
es su baja capacidad y su volatilidad.
concepción moderna: memoria de corto plazo
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial • The Door
memoria de corto plazo
h=ps://www.youtube.com/watch?v=FWSxSQsspiQ
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
• La implicación básica es que las interfaces de usuario deben ayudar a la gente a recordar información esencial de un momento a otro.
• No debemos demandar que los usuarios recuerden el estado del sistema o de lo que han hecho porque su atención está enfocada en la tarea principal y en monitorear su avance en ésta.
implicaciones de diseño atención y memoria
Fuente:DesigningwiththeMindinMind2ndEdi:on.JeffJohnson
victormgonzalez.me
fuente
Design for the Mind Seven Psychological Principles of Persuasive Design Victor S. Yocco June 2016 ISBN 9781617292958
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Siete principios comúnmente aceptados de la psicología: ■ Comportamiento Planificado ■ Teoría y la Heurística de prospectiva ■ Modelo de Comportamiento de Fogg ■ Influencia ■ La Influencia Social ■ Enmarcado de Comunicación ■ Persuasión
Design for the Mind – Victor Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
El diseño para el uso regular: abordar el comportamiento previsto (planificado)
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Fundamentos: Comportamiento Previsto Tres factores principales conducen a la intención de un individuo para participar en el comportamiento: 1. Creencias sobre el resultado del comportamiento: Las personas
tienen creencias acerca de si un comportamiento tendrá un resultado bueno o malo.
2. Creencias normativas: Las personas ven su entorno y consideran lo que otros creen acerca de un comportamiento como una referencia para valorar si deben participar en una conducta.
3. Creencias de control: la percepción de la gente en cuanto al control que tienen sobre un comportamiento afecta y determina si van a participar en el.
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Fuente: Design for the Mind: Victor S. Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Comportamiento Previsto: Creencias, Resultados y Aplicación
Creencia Definición Resultado Aplicación
Conductual creenciasdelosusuariosrelacionadosconelresultadodeuncomportamiento-eselresultado¿buenoomalo?
Ac:tudhacíaunaconductaespecífica
¿Tususuariossesientenposi:vosonega:voshaciaelusodetudiseño?
Norma:vo creenciasdelosusuariosacercadelasexpecta:vasdelosdemáshaciauncomportamiento-¿eselcomportamientosocialmenteaceptable?
Normasubje:va ¿Tususuariospiensanqueotraspersonas,queellosconocenestánu:lizandotudiseño?
Control creenciasdelosusuariosacercadequién:eneelcontroldeadoptaruncomportamiento-lagentepuedepar:ciparenelcomportamiento¿porelección?
Controlpercibidodelaconducta
¿Tususuarioscreenquetudiseñolesdamáscontrolsobresucomportamiento,yloshacesen:rseencontroldelaeleccióndeusarlo?
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Ejemplo: Comportamiento Previsto Cynthia está considerando comprar una Laptop
Fuente: http://il6.picdn.net/shutterstock/videos/5764190/thumb/1.jpg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Ejemplo: Comportamiento Previsto Los usuarios (personas) quieren un resultado positivo
Creencias de un usuario respecto a la compra de una laptop • Aliviar la velocidad lenta y errores que experimenta con su laptop actual (positivo) • Tener una mayor productividad (positivo) • Hacer su vida mejor (positivo) • Costo en dinero (negativo)
Creencias de un usuario respecto a la compra en Amazon • Proporciona información precisa de los detalles del producto (positivo) • Tiene un precio competitivo con otras opciones (positivo) • Proporciona orientación a través de valoraciones de los usuarios (positivo)
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me 60
Fuente: Design for the Mind: Victor S. Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Ejemplo: Comportamiento Previsto Los usuarios (personas) quieren saber lo que otros hacen
Cynthia analiza a sus conocidos y concluye que para ella comprar una laptop no es una norma social subjetiva:
• Muchos de los miembros de su familia no son propietarios de computadoras portátiles (un nuevo laptop no es una norma social).
• Algunos de los miembros de su familia poseen computadoras portátiles que son muy viejas (un nuevo laptop no es una norma social).
• Sólo algunos miembros de la familia tienen nuevas laptops (una nueva laptop es una norma social).
• La mayoría de sus amigos usan los portátiles más antiguos (una nueva laptop no es una norma social).
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Fuente: Design for the Mind: Victor S. Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Ejemplo: Comportamiento Previsto Los usuarios (personas) quieren control
Cynthia cree que ella tiene la decisión final con respecto a la compra de una laptop por las siguientes razones:
• Tiene un trabajo (ella tiene el control) • Tiene el dinero para la laptop (ella tiene el control) • Se puede encontrar fácilmente una gran cantidad de opciones usando el
Internet para investigar los precios de laptops (ella tiene el control)
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Fuente: Design for the Mind: Victor S. Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Ejemplo: Comportamiento Previsto Los usuarios (personas) quieren control
Amazon ayuda a incrementar los sentimientos de control de Cynthia sobre la decisión de compra. Amazon le permite:
• Filtrar por el tipo de características que quiere y el rango de precios que puede pagar
• Comprar a a cualquier hora del día o de la noche • Guardar y comparar sus favoritos • Solicitar una línea de crédito con bajo interés, eliminando la barrera potencial
del costo que controla la compra de una computadora por parte de algunos usuarios
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Ejemplo: Comportamiento Previsto Los usuarios (personas) tienen la intención de ejecutar
Muchas personas pueden distraerse en el intento o sienten que necesitan más tiempo para considerar tomar una decisión. Cynthia se da cuenta de que necesita un poco más de tiempo para ahorrar el dinero para la compra. Ella tiene la intención de comprar una laptop, pero quiere esperar hasta su próximo período de pago.
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Fuente: Design for the Mind: Victor S. Yocco
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
victormgonzalez.me
Comportamiento Previsto: Creencias, Resultados y Aplicación
Creencia Definición Resultado Aplicación
Conductual creenciasdelosusuariosrelacionadosconelresultadodeuncomportamiento-eselresultado¿buenoomalo?
Ac:tudhacíaunaconductaespecífica
¿Tususuariossesientenposi:vosonega:voshaciaelusodetudiseño?
Norma:vo creenciasdelosusuariosacercadelasexpecta:vasdelosdemáshaciauncomportamiento-¿eselcomportamientosocialmenteaceptable?
Normasubje:va ¿Tususuariospiensanqueotraspersonas,queellosconocenestánu:lizandotudiseño?
Control creenciasdelosusuariosacercadequién:eneelcontroldeadoptaruncomportamiento-lagentepuedepar:ciparenelcomportamiento¿porelección?
Controlpercibidodelaconducta
¿Tususuarioscreenquetudiseñolesdamáscontrolsobresucomportamiento,yloshacesen:rseencontroldelaeleccióndeusarlo?
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me
Cómo Diseñar para el Comportamiento Previsto
• Resalta los aspectos positivos y los beneficios de usar tu diseño (producto) y que éste es superior
• Haz tu diseño socialmente aceptable, promueve la socialización del uso (Share this) y muestra que otros los usan
• Provee control a los usuarios a través de educación, opciones, usabilidad, que permita entender cómo tendrán control sobre su conducta
• Diseña para usuarios indecisos: permite elementos que faciliten el tomar la decisión en otro momento
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
Fundamentos Diseño de la Experiencia Interactiva @vmgyg
Fuente: Design for the Mind: Victor S. Yocco
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
conclusiones El diseño de la experiencia de usuario interactiva requiere conocer sobre: a) Capacidad Sensorial del Ser Humano … para entender los
límites de nuestros sentidos b) Capacidad Cognitiva del Ser Humano … para entender la
forma en como atendemos, procesamos y retenemos información
c) Configuración Social del Ser Humano … para entender elementos sociales y económicos que moldean nuestra interacción
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
conclusiones Requerimos entonces: - No solamente equipos multidisciplinarios sino enfoque
multidisciplinario - No solamente hacer investigación del usuario, sino hacer
investigación y contribuir a la generación de conocimiento - No solamente justificar el diseño, sino fundamentar el
diseño
victormgonzalez.me Fundamentos Diseño de la Experiencia Interactiva @vmgyg
creado
porVíctorM
.Gon
zález-victor.g
onzalez@
acm.org-licen
ciaCrea:veCo
mmon
sA=rib
u:on
-Non
Commercial
conclusiones En resumen: - Intelectualizar la disciplina de la UX nos hace crecer como
gremio UX (profesional) - Tenemos los métodos, pero también los fundamentos
Recuerda: “No hay nada más práctico que una buena teoría” ;-)
Kurt Lewin
victormgonzalez.me
La relevancia de los fundamentos en el diseño de sistemas interactivos: teorías y conceptos de la Psicología, Sociología y la Economía
Conductual que todo diseñador debería conocer
Guadalajara, Jalisco, Noviembre 2017
Dr. Víctor M. González The User Experience Researcher /
Consultant / Professor / Speaker [email protected] @vmgyg
¡gracias!
victormgonzalez.me
¿quieres aprender más?
¿buscas consejo y guía experta para diseñar mejores experiencias de usuario
con productos digitales?
!Platiquemos¡
Medium (blog): https://medium.com/@victormgonzalez LinkedIn: https://www.linkedin.com/in/victor-m-gonzalez
Twitter: @vmgyg email: [email protected]
Web: https://victormgonzalez.me/