el diseño de la interfaz -...

Dr. Pedro Latorre Dra. Sandra Baldassarri Dra. Eva Cerezo

Interacción Persona Ordenador

El diseño de la interfaz

Tema: Diseño

Objetivos

• Conocer las técnicas que se aplican en el diseño de la interacción y de la interfaz.

• Conocer las reglas y principios básicos que rigen el diseño de las interfaces.

• Entender la necesidad y la utilidad de los estándares y las guías de estilo.

• Conocer algunas de las guías de estilo actuales: – Mac OS X – Java – Windows

Tema:

El proceso de diseño

• Diseño

– Iteración: Prototipado y Evaluación • Técnicas de prototipado • Técnicas de evaluación

– Definir tareas: • Análisis jerárquico de las tareas • Diálogos

– Definir estilo: Interacción e Interfaz

• Guías • Estándares • Reglas

Tema: Diseño

Proceso de diseño

El diseño de un sistema interactivo implica considerar:

• Diseño de la interacción – Sistema global – Reglas de Usabilidad y Accesibilidad (UNE, ISO) – Guías de estilo

• Diseño de la interfaz – Reglas de diseño:

• Pantallas y Distribución / Maquetación (layout)

– Guías de estilo

Tema: Diseño

Diseño de la interacción

• Hay que tener en cuenta: – Estructura local: una sola pantalla – Estructura global: la aplicación como un conjunto

(mapas de navegación)

start the systems

info and help management messages

add user remove user

main screen

remove user confirm

add user

Tema: Diseño

Diseño de la interfaz

Reglas de diseño: Principios básicos

• Preguntar – ¿Qué está haciendo el usuario?

• Pensar – ¿Qué información, comparaciones, orden?

• Diseñar – La forma debe ser coherente con la función

Tema: Diseño

Diseño de la interfaz

• Reglas de diseño

– Agrupación de elementos – Orden de los elementos – Decoración:

• fuentes, • bordes, • cajas, etc.

– Alineación de los elementos – Espacios en blanco entre los elementos

ABCDEFGHIJKLM NOPQRSTUVWXYZ

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

Tema: Diseño

Diseño de la interfaz

• Agrupación de los elementos

Si por lógica van juntos ⇒ deben ir juntos de forma física

Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

Tema: Diseño

Diseño de la interfaz

• Orden de los elementos y los grupos

Hay que pensar cuál es el orden natural… … que se debe corresponder con el orden en la

pantalla! – Utilizar cajas, espacios, etc. – Utilizar los tabuladores correctamente

• Instrucciones – Beware the cake recipe syndrome!

… mix milk and flour, add the fruit after beating them

Tema: Diseño

Diseño de la interfaz

• Decoración

– Usar cajas para agrupar elementos con lógica – Usar tipografía para enfatizar, para las cabeceras… … ¡¡¡pero no demasiado!!!

ABCDEFGHIJKLM NOPQRSTUVWXYZ

Tema: Diseño

Diseño de la interfaz

• Alineación de los elementos Texto: Nombres: Se lee de izquierda a derecha Facilitar la búsqueda

¡alineación a izquierda!

Alan Dix Janet Finlay Gregory Abowd Russell Beale

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

Alan Dix Janet Finlay Gregory Abowd Russell Beale Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography Wizard of Oz

Xena - Warrior Princess

Bien para efectos especiales pero dificil para realizar búsquedas

Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess

legible

Tema:

Diseño de la interfaz

• Alineación de los elementos Números Pensar el propósito de la información ¿cúal es el número más grande?

Visualmente: número más largo = mayor Alinear también puntos decimales

532.56 179.3

256.317 15

73.948 1035

3.142 497.6256

627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

Tema: Diseño

Diseño de la interfaz

• Alineación de los elementos Columnas sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Tema: Diseño

Diseño de la interfaz

• Alineación de los elementos Columnas sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Tema: Diseño

Diseño de la interfaz

• Uso del espacio en blanco:

para organizar para separar

Tema: Diseño

Diseño de la interfaz

• Uso del espacio en blanco:

para destacar

Tema: Diseño

Diseño de la interfaz

• Acción y control del usuario

El usuario debe saber en todo momento qué debe hacer y cómo debe hacerlo.

• Hay que diseñar: – Entrada de información – Saber qué hacer

Tema: Diseño

Diseño de la interfaz

• Entrada de información

• Formularios, cuadros de diálogo – Presentación + entrada de datos – Utilizar las reglas vistas anteriormente – Alineación – Tener en cuenta las longitudes de las etiquetas

• Ordenación lógica – Utilizar análisis de tareas – Agrupación de elementos – Ordenación natural para la entrada de datos

• arriba-abajo, izquierda-derecha (dependiendo de la cultura) • Utilizar el orden del tabulador para la entrada por teclado

Name: Address:

Alan Dix

Lancaster

Name: Address:

Alan Dix

Lancaster

Name: Address:

Alan Dix

Lancaster

?

Tema: Diseño

Diseño de la interfaz

• Saber qué hacer

• ¿Qué elementos están activos y qué elementos no? – donde se puede hacer click – donde se puede escribir

• Consistencia con los estilos de ayuda – e.g. web underlined links

• Etiquetas e iconos – para acciones comunes: estándares – lenguaje – negrita = indicar el estado o acción actual

Tema: Diseño

Diseño de la interfaz

• Apariencia apropiada La apariencia general de la interfaz es muy importante

para propiciar un uso correcto y satisfactorio para el usuario.

• Hay que diseñar: – Presentación de la información – Estética y utilidad – Color y 3D – Localización e internacionalización

Tema: Diseño

Diseño de la interfaz

• Presentación de la información

• Dependiendo del objetivo: – orden (columnas, ordenación numérica, alfabética,...)

– texto vs. diagramas – gráficos vs. histogramas

• ¡Utilizar las reglas de diseño!

...pero hay que agregar interactividad – opciones de diseño flexibles

• e.g. re-ordenación de columnas • gráficos o diagramas por selección del usuario

chap1 chap10 chap11 chap12 chap13 chap14 …

17 12 51

262 83 22

…

size name size

chap10 chap5 chap1 chap14 chap20 chap8 …

12 16 17 22 27 32 …

name size

Tema: Diseño

Diseño de la interfaz

• Actividad: encontrar el precio de una habitación doble en el Holiday Inn de Bradley

Tema: Diseño

Diseño de la interfaz

• Actividad: encontrar el precio de una habitación doble en el Quality Inn de Columbia

Tema: Diseño

Diseño de la interfaz

• Estética y uitlidad

• Diseño estéticamente agradable – aumenta la satisfacción del usuario e incrementa la productividad

• Estética y utilidad pueden entrar en conflicto

– fondos detrás del texto … agradables, pero difíciles de leer

• pero pueden funcionar juntos – en ciertos productos de consumo, como factor diferenciador

Tema:

Diseño de la interfaz

• Estética y utilidad:

¿Cuál es más fácil de leer?

What is the time?

What is the time?

What is the time?

What is the time?

What is the time?

Tema: Diseño

Diseño de la interfaz

• Color y 3D ¡No siempre se usan adecuadamente!

• Color – Los monitores antiguos tienen una paleta limitada de colores – Muchas veces se usa porque ‘está ahí’ – Tener en cuenta que hay personas que no distinguen los colores – Utilizarlos para reforzar o recalcar otra información

• Efectos 3D – Buenos para mostrar información física o algunos gráficos – Pero si se usan en exceso …

e.g. textos en perspectiva o gráficos de tarta en 3D

Tema: Diseño

bad use of colour

• over use - without very good reason (e.g. kids’ site)

• colour blindness • poor use of contrast • do adjust your set!

– adjust your monitor to greys only – can you still read your screen?

Tema: Diseño

Ejemplo de sobre-uso de gráficos

Tema: Diseño

Diseño de la interfaz

• Localización e internacionalización

• Diferentes culturas – Cambiar las interfaces para adecuarlas a diferentes culturas e idiomas

(lectura de izquierda a derecha, etc)

• Globalización – Tratar de elegir símbolos simples que se entiendan en cualquier lugar

• Otros temas – Tener en cuenta creencias y valores culturales

Tema: Diseño

Diseño de la interfaz

Las 8 Reglas de Oro del diseño de interfaces de Ben Shneiderman son una base para el diseño de una buena interacción:

– Buscar la consistencia. – Permitir que los usuarios frecuentes utilicen accesos

directos. – Ofrecer retroalimentación informativa. – Diseñar acciones secuenciales. – Errores simples – Fácil reversión de las acciones. – Apoyar al usuario con una interfaz amigable. – Reducir la carga de memoria Algunos ejemplos: Parte 1 – Parte 2

Tema: Diseño

Diseño de la interfaz

Estándares:

• Requisitos, reglas o recomendaciones basadas en principios probados en la práctica. Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional. – Ejemplos: teclado de teléfono, teclado QWERTY

• Los estándares de la interfaz pretenden conseguir un software mas fácil y seguro estableciendo y unos requisitos mínimos de fabricación, eliminando inconsistencias y variaciones innecesarias en las interfaces.

Tema: Diseño

Diseño de la interfaz

Estándares: de Iure • Son generados por comités con status legal y

tienen el apoyo de un gobierno o institución para producir esos estándares.

Tema: Diseño

Diseño de la interfaz

Estándares: de Iure - ISO/IEC 9126: Evaluación de productos software:

características de calidad y directrices para su uso - ISO 9241: requisitos ergonómicos para trabajar con

terminales de presentación visual (VDT) - ISO/IEC 10741: interacción de diálogos - ISO/IEC 11581: símbolos y funciones de los iconos - ISO 11064: diseño ergonómico de centros de control - ISO 13406: requisitos ergonómicos para trabajar con

presentaciones visuales basadas en paneles planos - ISO 9241-210 (antes ISO 13407): procesos de diseño

centrados en la persona para sistemas interactivos

Tema: Diseño

Diseño de la interfaz

Estándares: de facto • Son estándares que nacen a partir de productos

de la industria que tienen un gran éxito en el mercado o desarrollos hechos por grupos de investigación en la Universidad que tienen una gran difusión.

• Son aceptados como tales por su uso generalizado

• Su definición se encuentra en manuales, libros o artículos

Tema: Diseño

Diseño de la interfaz

Guías de estilo

• La mayoría de los sistemas de GUI han publicado directrices que indican como asociar esos principios abstractos a entornos de programación concretos, son las guías de estilo.

• Proporcionan un marco que puede guiar a los diseñadores a tomar decisiones correctas en sus diseños (look and feel).

• Comerciales, corporativas, guías de estilo para la web

Tema: Diseño

Diseño de la interacción y la interfaz: Guías de estilo

• Son documentos que recogen normativas y patrones básicos relacionados con el aspecto de un interfaz para su aplicación en el desarrollo de nuevas aplicaciones dentro de un entorno concreto (sitio web de contenidos, nuevas secciones, …) y los recursos necesarios para su realización consistente.

Tema: Diseño

Guías de estilo

• Hemos dicho aspecto. ¿Qué otras perspectivas debería abordar una Guía de Estilo?

• Conceptualmente, la interfaz de usuario descansa en 3 puntos: – Significado (qué): es la base de la interfaz. Recoge el contenido o información

de la pantalla. Textos, campos de formularios, botones, menús... – Comportamiento: trata el funcionamiento de la interfaz. Cómo se comporta

cuando un usuario envía un formulario (validaciones), hace clic en un enlace... – Aspecto: apariencia final de un sistema: colores, tipografía, disposición de los

elementos en pantalla (layout).

• Las Guías de Estilo generalmente se centran en el aspecto: diseño y maquetación (colores, tipografías y píxeles).

• No siempre incluyen criterios o casuística para aplicar en el proceso de diseño de la interfaz.

Luis Villa Alzado.org

Tema: Diseño

Guías de estilo

• Las Guías de Estilo no son Manuales de Usabilidad • A menudo se confunde el término Guía de Estilo con Guía

de Usabilidad. – Ejemplo: Un coche se adapta a un uso por sus características (carretera,

familiar, pequeño, todoterreno, descapotable) (significado) y no por su color (aspecto).

– Identificar "usabilidad" y "diseño" equivale a decir: – - "Quiero un coche rojo."

- "¿Para que lo quieres? Carretera, montaña, niños..." - "¿Qué más da? Que sea rojo."

• Para que una Guía de Estilo pueda convertirse en un Manual de Usabilidad debe ofrecer criterios para seleccionar las características que se adapten al destino final de una aplicación (objetivos+usuarios+contexto), dentro de un estilo definido.

Luis Villa Alzado.org

Tema: Diseño

Guías de estilo

• Problemas de las Guías de Estilo: nadie lee. La experiencia demuestra que los equipos de desarrollo no se apoyan en las Guías de Estilo para realizar su trabajo.

• Razones: En ocasiones… – Resultan demasiado abstractas y simplistas: Si se crean desde áreas

(márketing, negocio...) que carecen de visión de la complejidad del trabajo del desarrollador obvian su problemática cotidiana.

– No se adecúan a los métodos de desarrollo: El desarrollador no tiene tiempo para leer ni asimilar una documentación que además de ser voluminosa, le resulta ajena.

– Tienen demasiado detalle: la documentación entra en cuestiones de detalle (pixels de separación entre elementos, tipografías, colores y valores hexadecimales) impropias del trabajo de un desarrollador. ¡Pero debe conocer los detalles!

– Carecen de mantenimiento consistente: no existe una política de mantenimiento del Manual con una visión integradora de todo el proceso de desarrollo.

Luis Villa Alzado.org

Tema: Diseño

Mac OS X Human Interface Guidelines

Guía de estilo, de usabilidad, experiencia de usuario, etc. • Mac OSX human Interface Guidelines

Tema: Diseño

Java Look and Feel Design Guidelines

Guía de diseño y fundamentalmente de programación en Java

• Java look and feel design guidelines Part I: Overview Part II: Fundamental Java Application Design

3: Design Considerations 4: Visual Design 5: Application Graphics 6: Behavior

Part III: The Components of the Java Foundation Classes Part IV: Backmatter

Appendix A: Keyboard Shortcuts, Mnemonics, and Other Keyboard Operations Appendix B: Graphics Repository Appendix C: Localization Word Lists Appendix D: Switching Look and Feel Designs

Tema: Diseño

Windows Application UI Development

Guía de estilo, de usabilidad, de experiencia de usuario, etc. sobre S. O. Windows 7 y Vista

• Windows Application UI Development

Tema: Diseño

Conclusiones

• Las reglas de diseño, los estándares y las guías de estilo facilitan el diseño de interfaces.

• También facilitan el aprendizaje y reducen los errores al permitir al usuario aprovechar el conocimiento adquirido en otros productos.

• Es imprescindible para un diseñador de IPO conocer las reglas, los estándares existentes y las guías más adecuadas al entorno en el que se va a trabajar. – Habrá que estudiar las recomendaciones específicas

para cada entorno o paradigma de interacción (web, móviles, …)

Tema: Diseño

Bibliografía

El material presentado en estas transparencias debe complementarse con:

• Dix, Finley, Abowd, Beale. “Human-Computer Interaction”, 3º ed, Prentice Hall, 2004 – Capítulo 5.6 y 5.7

• Preece, Rogers, Sharp: “Interaction Design: Beyond Human-Computer Interaction”, 3º ed, Wiley, 2011 – Capítulo 3.2