HCI – Diseño para la interacción

40
HCI – DISEÑO PARA LA INTERACCIÓN Human Computer Interaction - Diseño de interfaces de usuario Producción Digital- UPB
  • Upload

    upb
  • Category

    Design

  • view

    123
  • download

    0

Transcript of HCI – Diseño para la interacción

Page 1: HCI – Diseño para la interacción

HCI – DISEÑO PARA LA INTERACCIÓN

Human Computer Interaction - Diseño de interfaces de usuario

Producción Digital- UPB

Page 2: HCI – Diseño para la interacción

Diseño de experiencias

ANTES: Diseño contemplativo, información lineal.

HOY: Diseño de experiencias e interacción.

Page 3: HCI – Diseño para la interacción

Diseño de experiencias

“Experiencia de usuario”

Vivencia multisensorial e intelectual cuandodesarrollamos o participamos en una actividad,de pensamiento, de corazón, de acción yreacción, que llega a todos nosotros por igual ysin embargo nos agita de maneras tan distintas,evidenciando en activo nuestra individualidad,nuestra humanidad.

Page 4: HCI – Diseño para la interacción

Diseño de experiencias

“Experiencia de usuario”

Una experiencia significativa desde la individualidad

Soy yo y nadie mas quien vive y siente las experiencias

Las estrategias gráficas o interactivas debe tener en cuenta al individuo, al usuario, escucharlo, darle control, darle voz, y permitirle así la interacción

La interacción es nuestra mejor arma como diseñadores de experiencias, a través de ella logramos un encuentro cercano con el usuario, con sus gustos, preferencias y decisiones.

Page 5: HCI – Diseño para la interacción

Diseño de experiencias

“Experiencia de usuario”

Uso real de un servicio o producto

Proporciona un goce mas allá de lo funcional llegando a ser una experiencia

Page 6: HCI – Diseño para la interacción

Diseño de experiencias

“Experiencias que provee el objeto de diseño”

Mediación: Facilita o mejora la comunicación entre las personas

Función: Amplia o mejora la acción física humana Significación: Expresa pertenencia a un grupo

social Sexualidad: Atrae a sus usuarios y a otros Conocimiento: Brinda información al usuario Estética: Emociona por su forma y belleza

Material Culture in the Social World. Open University Press. Tim Dant

Page 7: HCI – Diseño para la interacción

HCI – Human Computer Interaction

Page 8: HCI – Diseño para la interacción

Principios de las Interfaces• Simplicidad• Consistencia• Familiaridad• Accesibilidad• Flexibilidad• Eficacia, Eficiencia, Satisfacción• Predicción• Retroalimentación• Seguridad• Affordances

Page 9: HCI – Diseño para la interacción

Principios de las Interfaces

Una buena interfaz debe ser “invisible” o ignorada para centrarnos en la tareano en la herramienta o interfaz.

Page 10: HCI – Diseño para la interacción

Diseñar para la gente

• Las tareas, metas y valores del usuario guían el desarrollo

• Trabaje con los usuarios durante todo el proceso

• Tome decisiones desde el punto de vista del usuario, su trabajo y su ambiente

• Preste atención a las habilidades del usuario y su situación

• Hable con expertos actuales

Page 11: HCI – Diseño para la interacción

Prototipos Son estrategias para confirmar

acciones y reacciones de interfaces difíciles de predecir

Page 12: HCI – Diseño para la interacción

Prototipos Lo importante no es el objeto

sino la retroalimentación que nos brinda al usarlo

Page 13: HCI – Diseño para la interacción

Prototipos Son preguntas en forma de objeto e interfaz y

permite comunicarnos con los demás miembros, clientes y el equipo de desarrollo

Page 14: HCI – Diseño para la interacción

Prototipos Son incompletos, solo se enfatiza la

pregunta o área que deseamos aclarar

Page 15: HCI – Diseño para la interacción

Prototipos Son incompletos: Fácil hacer cambios,

fácil desecharlos y hacer una nueva versión

Page 16: HCI – Diseño para la interacción

Prototipos En papel, mockups esquemas

Funcional, interacción básica

En video: Casos de uso

Page 17: HCI – Diseño para la interacción

Prototipos En papel, mockups

esquemas

Page 18: HCI – Diseño para la interacción

Prototipos Funcional, interacción

básica

Page 19: HCI – Diseño para la interacción

Prototipos En video: Casos situaciones

de uso

Page 20: HCI – Diseño para la interacción

Prototipos: ¿Qué prototipan?A. Emoción: Como luce y se

sienteB. Implementación: Lo

funcionalC. Rol: La experiencia que

brindan

Page 21: HCI – Diseño para la interacción

Prototipos

Page 22: HCI – Diseño para la interacción

PrototiposEl mejor camino para tenerUna buena idea es tener muchas ideas.

Linus Pauling

Page 23: HCI – Diseño para la interacción

Prototipos

Los prototipos son preguntas

Haga muchas de ellas

Scott Klemmer

Page 24: HCI – Diseño para la interacción

Evaluando los prototipos

• Encuestas• Grupos objetivos• Opinión de expertos• Experimentos comparativos• Observación directa

Page 25: HCI – Diseño para la interacción

¿Como empezar el prototipado ?1. Storyboarding

2. Prototipado en papel3. Pruebas a prototipos en papel4. Prototipos digitales5. Video prototipos

Page 26: HCI – Diseño para la interacción

¿Como empezar el prototipado?1. Storyboardi

ng

Page 27: HCI – Diseño para la interacción

¿Como empezar el prototipado?2. Prototipado en

papel

Page 28: HCI – Diseño para la interacción

¿Como empezar el prototipado?2. Prototipado en

papel

Page 29: HCI – Diseño para la interacción

¿Como empezar el prototipado?3. Pruebas a prototipos en papel:

Page 30: HCI – Diseño para la interacción

¿Como empezar el prototipado?4. Prototipos digitales

Page 31: HCI – Diseño para la interacción

¿Como empezar el prototipado?5. Video prototipos

Page 32: HCI – Diseño para la interacción

Cognición distribuida

Representar solo lo mas importante permite:

• Comparar• Explorar• Resolver problemas

Page 33: HCI – Diseño para la interacción

Cognición distribuida

Representar solo lo mas importante permite:

Page 34: HCI – Diseño para la interacción

Cognición distribuida

Page 35: HCI – Diseño para la interacción

Diseño visual- GUI Elements

• Diagramación• Tipografía• Color• Navegación• Interacción

Page 36: HCI – Diseño para la interacción

Diseño visual - Metas

• Escaneabilidad visual: Jerarquías: • Auto Guiado • Capas de información• Mensaje: Contenido claro y conciso

Page 37: HCI – Diseño para la interacción

Diseño visual - Metas• Escaneabilidad visual: Jerarquías:

Page 38: HCI – Diseño para la interacción

Diseño visual - Metas• Escaneabilidad visual: Jerarquías:

Page 39: HCI – Diseño para la interacción

Búsqueda de necesidades1. Observar

2. Lluvia de ideas sobre las necesidades / objetivos

3. Encontrar la inspiración

4. Describir, prototipar

5. Pruebas

6. Nuevo prototipo

Page 40: HCI – Diseño para la interacción

Diseñar y conquistar