Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Diseño centrado en el usuario

Prof. Adelaide Bianchini

Dpto. de Computación y Tecnología de la InformaciónUniversidad Simón Bolívar

Mayo 2008

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Agenda

• Motivación – Objetivos• Aspectos a conocer• Principios• Proceso general de diseño de interfaces• Interactividad

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Motivación - Objetivos

Diseñador

DispositivoUsuario

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Objetivo del diseño centrado en el usuario

1. No todo consiste en conseguir el funcionamiento perfecto de una herramienta sino en hacer que este funcionamiento sea útil para el usuario.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Objetivo del diseño centrado en el usuario

1. No todo consiste en conseguir el funcionamiento perfecto de una herramienta sino en hacer que este funcionamiento sea útil para el usuario.

2. Conocer los aspectos que pueden mejorar o dificultar el entendimiento entre la máquina y el hombre, para poder detectarlos en su momento ante un caso concreto.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Objetivo del diseño centrado en el usuario

1. No todo consiste en conseguir el funcionamiento perfecto de una herramienta sino en hacer que este funcionamiento sea útil para el usuario.

2. Conocer los aspectos que pueden mejorar o dificultar el entendimiento entre la máquina y el hombre, para poder detectarlos en su momento ante un caso concreto.

3. Considerar los distintos niveles de análisis del diseño de interfaces.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Objetivos – Niveles de análisis

Entorno

Aplicación

Interfaz

Aspectos sociales Organización

Avancestecnológicos

Funciones y tareas

Usuario Tecnología

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Aspectos a conocer (del usuario)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Aspectos a conocer (del usuario)

1. Habilidades físicas y sensoriales2. Habilidades cognitivas3. Diferencias de personalidad4. Diferencias culturales5. Tareas, actividades6. Entorno físico, social, institucional, organización7. .8. .

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Aspectos a conocer (del usuario)

1. Habilidades físicas y sensoriales2. Habilidades cognitivas3. Diferencias de personalidad4. Diferencias culturales5. Tareas, actividades6. Entorno físico, social, institucional, organización7. .8. .

Profundo conocimiento del usuario

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Principios de diseño

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Principios de diseño

1. Una repartición apropiada de funciones entre el usuario y la aplicación/dispositivo

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Principios de diseño

1. Una repartición apropiada de funciones entre el usuario y la aplicación/dispositivo

2. Una participación activa del usuario3. Iteraciones en las soluciones de diseño4. Equipos de diseño multidisciplinario

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

1. Reunir y analizar la informaciónFuente:

usuario, situación, contexto, etc.tareas, entorno físico1 y social2

1 Aspectos ergonómicos2 Trabajo grupal, colaborativo, autónomo, etc.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

1. Reunir y analizar la informaciónFuente:

usuario, situación, contexto, etc.tareas, entorno físico1 y social2

2. Diseño apoyado en principios, guías y estándares.

¿Qué son esos elementos?

1 Aspectos ergonómicos2 Trabajo grupal, colaborativo, autónomo, etc.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

1 Aspectos ergonómicos2 Trabajo grupal, colaborativo, autónomo, etc.

Principios

Son conceptos de muy alto nivel que deben ser utilizados en el diseño de aplicaciones.

A modo de ejemplo

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Aliviar la carga cognitiva• Confiar en el reconocimiento ¿Cómo?• Proporcionar pistas visuales • Proporcionar opciones por defecto botones• Proporcionar atajos

Principios – A modo de ejemplo

Proceso general de diseño de interfaces

Ctrl +S

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Aliviar la carga cognitiva• Promover la sintaxis objeto–acción• Emplear metáforas del mundo real• Emplear la revelación progresiva para evitar

abrumar al usuario ¿EJM?• Promover la claridad visual

Principios – A modo de ejemplo (cont.)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Reglas de diseño

Guían al diseñador con el fin de incrementar la “usabilidad”. Se clasifican en estándares y directrices.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Reglas de diseño

Guían al diseñador con el fin de incrementar la “usabilidad”. Se clasifican en estándares y directrices.

EstándaresSon requisitos, recomendaciones o reglas basadas en principios probados y en práctica.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Directrices

Las directrices recomiendan acciones que se basan en un conjunto de principios de diseño.

Son más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas que éstos.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Guías de estilo

Llamadas también guías corporativas. Están basadas en principios y contienen directrices que se concretan a muy bajo nivel.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

Guías de estilo

Las guías de estilo corporativas se centran en presentaciones comunes, comportamientos y técnicas que deben ser implementadas por todos los productos en una compañía.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ?

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ?

Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ? Guía de

Estilo delProducto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N

Guías de estilo de la suite de productos

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ?

Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N

Guías de estilo de la suite de productos

Guías de estilo corporativa

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ?

Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N

Guías de estilo de la suite de productos

Guías de estilo corporativa

Guías de estilo de la plataforma (Windows, MacOS, Unix)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿ Cómo se aplican estos conceptos desde el punto de vista metodológico ?

Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N

Guías de estilo de la suite de productos

Guías de estilo corporativa

Guías de estilo de la plataforma (Windows, MacOS, Unix)

Estándares Internacionales (ISO, DIN, etc.)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

3. Utilización de estrategias y metodologías de evaluación del producto.

Métodos formales: especificaciones precisas y sin ambigüedades. Permiten además una verificación formal. Se usan lenguajes de especificación (Z, UML, etc.)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

3. Utilización de estrategias y metodologías de evaluación del producto.

Métodos formales: especificaciones precisas y sin ambigüedades. Permiten además una verificación formal. Se usan lenguajes de especificación (Z, UML, etc.)

Herramientas de desarrollo de interfaces

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

3. Utilización de estrategias y metodologías de evaluación del producto.

Métodos formales: especificaciones precisas y sin ambigüedades. Permiten además una verificación formal. Se usan lenguajes de especificación (Z, UML, etc.)

Herramientas de desarrollo de interfaces

Prototipado (¿Bueno o malo?)

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿Cómo diseñar para mejorar la interacción hombre-máquina?

Contextos básicos a considerar

Físicos relacionados con el hardwarey dispositivos de interfaz

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿Cómo diseñar para mejorar la interacción hombre-máquina?

Contextos básicos a considerar

Físicos relacionados con el hardwarey dispositivos de interfaz

Sintácticos • presentación de información• secuencia, orden de las acciones

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Proceso general de diseño de interfaces

¿Cómo diseñar para mejorar la interacción hombre-máquina?

Contextos básicos a considerar

Físicos relacionados con el hardwarey dispositivos de interfaz

Sintácticos • presentación de información• secuencia, orden de las acciones

Semánticos • significado de los objetos• significado de las acciones

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• El intercambio de información entre un usuario y un sistema informático.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• El intercambio de información entre un usuario y un sistema informático.

• El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• El intercambio de información entre un usuario y un sistema informático.

• El intercambio tiene asociado un lenguaje, por consiguiente una sintáxis y una semática.

• Se interactúa con objetos para activar acciones y eventos.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• Todo está basado en las primitivas de interacción:

PosicionamientoObtención de una posición u orientación (2D y 3D)

Ejm. Aplicación de dibujo

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• Todo está basado en las primitivas de interacción:

PosicionamientoObtención de una posición u orientación (2D y 3D)

Ejm. Aplicación de dibujo

Introducir ValorObtención de un dato cuantificable (numérico, porcentual, etc.)

Ejm. Datos sensibles en una aplicación

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• Todo está basado en las primitivas de interacción:

Introducir TextoIntroducción de un texto o identificador

Ejm. Nombre de un archivo

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• Todo está basado en las primitivas de interacción:

Introducir TextoIntroducción de un texto o identificador

Ejm. Nombre de un archivo

SelecciónObtención de una alternativa (entre varias posibles). Puede ser sobre un conjunto finito o un conjunto de cardinalidad variable.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Conceptos generales

• Todo está basado en las primitivas de interacción:

ArrastreSecuencia de posiciones entre un punto inicial y otro final.

Ejm. Mover un documento hacia otra carpeta.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales

VentanasMenúes

Íconos

Botones

Campos

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Ventanas

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Ventanas

Ventanas tipo diálogo

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Menúes

Menúes

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Íconos

Íconos

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Botones

Botones

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Mecanismos generales - Botones

Campos

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Selección

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Varios

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Varios

¿Cómo interactúa el usuario con esta aplicación?

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Varios

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

VS.

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 2008.

Diseño centrado en el usuario

Interactividad – Interacción – Objetos en la vida real

¿Cuál es la semántica?