el diseño de la interfaz -...
TRANSCRIPT
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