Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo Diseño centrado en el usuario Prof. Adelaide Bianchini Dpto. de Computación y Tecnología de la Información Universidad 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 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 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 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 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 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 Diseño centrado en el usuario Objetivos – Niveles de análisis Entorno Aplicación Interfaz Aspectos sociales Organización Avances tecnoló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 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 Diseño centrado en el usuario Aspectos a conocer (del usuario) 1.Habilidades físicas y sensoriales 2.Habilidades cognitivas 3.Diferencias de personalidad 4.Diferencias culturales 5.Tareas, actividades 6.Entorno físico, social, institucional, organización

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo Diseño centrado en el usuario Aspectos a conocer (del usuario) 1.Habilidades físicas y sensoriales 2.Habilidades cognitivas 3.Diferencias de personalidad 4.Diferencias culturales 5.Tareas, actividades 6.Entorno físico, social, institucional, organización Profundo conocimiento del usuario

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 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 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 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 usuario 3.Iteraciones en las soluciones de diseño 4.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 Diseño centrado en el usuario Proceso general de diseño de interfaces 1.Reunir y analizar la información Fuente: usuario, situación, contexto, etc. tareas, entorno físico 1 y social 2 1 Aspectos ergonómicos 2 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 Diseño centrado en el usuario Proceso general de diseño de interfaces 1.Reunir y analizar la información Fuente: usuario, situación, contexto, etc. tareas, entorno físico 1 y social 2 2.Diseño apoyado en principios, guías y estándares. ¿Qué son esos elementos? 1 Aspectos ergonómicos 2 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 Diseño centrado en el usuario Proceso general de diseño de interfaces 1 Aspectos ergonómicos 2 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 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 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 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 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ándares Son 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 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 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 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 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 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 del Producto 1 Guía de Estilo del Producto 2 Guía de Estilo del Producto N

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 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 del Producto 1 Guía de Estilo del Producto 2 Guía de Estilo 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 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 del Producto 1 Guía de Estilo del Producto 2 Guía de Estilo 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 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 del Producto 1 Guía de Estilo del Producto 2 Guía de Estilo 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 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 del Producto 1 Guía de Estilo del Producto 2 Guía de Estilo 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 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 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 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 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 hardware y dispositivos de interfaz

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 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 hardware y 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 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 hardware y 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 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 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 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 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 Diseño centrado en el usuario Interactividad – Conceptos generales Todo está basado en las primitivas de interacción: Posicionamiento Obtenció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 Diseño centrado en el usuario Interactividad – Conceptos generales Todo está basado en las primitivas de interacción: Posicionamiento Obtención de una posición u orientación (2D y 3D) Ejm. Aplicación de dibujo Introducir Valor Obtenció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 Diseño centrado en el usuario Interactividad – Conceptos generales Todo está basado en las primitivas de interacción: Introducir Texto Introducció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 Diseño centrado en el usuario Interactividad – Conceptos generales Todo está basado en las primitivas de interacción: Introducir Texto Introducción de un texto o identificador Ejm. Nombre de un archivo Selección Obtenció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 Diseño centrado en el usuario Interactividad – Conceptos generales Todo está basado en las primitivas de interacción: Arrastre Secuencia 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 Diseño centrado en el usuario Interactividad – Mecanismos generales Ventanas Menúes Íconos Botones Campos

Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Diseño centrado en el usuario Interactividad – Interacción – Objetos en la vida real ¿Cuál es la semántica?