Relevancia de los fundamentos en el diseño de sistemas interactivos

75
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

Transcript of Relevancia de los fundamentos en el diseño de sistemas interactivos

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

CAPACIDAD SENSORIAL DEL SER HUMANO Percepción y Uso de los Sentidos

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

CAPACIDAD COGNITIVA DEL SER HUMANO Expectativas, Atención y Memoria

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

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

CONFIGURACIÓN SOCIAL DEL SER HUMANO Comportamiento (previsto) planificado

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

CONCLUSIONES e ideas finales

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/