Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simó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


Prof. Adelaide Bianchini

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

Mayo 2008



Agenda

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



Motivación - Objetivos

Diseñador

DispositivoUsuario



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.





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.



Objetivos – Niveles de análisis

Entorno

Aplicación

Interfaz

Aspectos sociales Organización

Avancestecnológicos

Funciones y tareas

Usuario Tecnología



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. .




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



Principios de diseño




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




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



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.




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?






Principios

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

A modo de ejemplo



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


Ctrl +S




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.)




Reglas de diseño

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




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.




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.




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.




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.




¿ 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




¿ 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





Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N


Guías de estilo corporativa





Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N



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





Guía deEstilo del

Producto 1

Guía deEstilo del

Producto 2

Guía deEstilo del

Producto N



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

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




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






Herramientas de desarrollo de interfaces

Prototipado (¿Bueno o malo?)




¿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







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

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



Interactividad



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.





• 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.




• 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





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





Introducir TextoIntroducción de un texto o identificador

Ejm. Nombre de un archivo





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.





ArrastreSecuencia de posiciones entre un punto inicial y otro final.

Ejm. Mover un documento hacia otra carpeta.



Interactividad – Mecanismos generales

VentanasMenúes

Íconos

Botones

Campos



Interactividad – Mecanismos generales - Ventanas



Interactividad – Mecanismos generales - Ventanas

Ventanas tipo diálogo



Interactividad – Mecanismos generales - Menúes

Menúes



Interactividad – Mecanismos generales - Íconos

Íconos



Interactividad – Mecanismos generales - Botones

Botones



Interactividad – Mecanismos generales - Botones

Campos



Interactividad – Interacción – Selección



Interactividad – Interacción – Varios




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



Interactividad – Interacción – Objetos en la vida real

VS.




¿Cuál es la semántica?

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

Documents

Transcript of Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón...