1 1 Ingeniería del Software Diseñó de Interfaz de Usuario Universidad de los Andes Demián Gutierrez Septiembre 2009
2 2 ¿Interfaz de Usuario? Desde el punto de vista de la Ingeniería de Software, la interfaz de usuario juega un papel en extremo importante en el desarrollo y puesta en marcha de todo sistema Es la carta de presentación del sistema y en ocasiones resulta determinante para la aceptación o rechazo de todo un proyecto En promedio, se estima que del 35% al 45% de los gastos destinados a un proyecto son direccionados al diseño e implementación de la interfaz
3 3 ¿Interfaz de Usuario? La interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo Wikipedia
4 4 ¿Interfaz de Usuario? Involucra cualquier medio de interacción usuario computador: Todas las pantallas, menús, iconos, atajos de teclado, lenguajes de comando y ayuda en línea, así como los dispositivos físicos tales como botones, diales, palancas, ratones, teclados, pantallas táctiles, controles remotos, joysticks, game pads, guantes de datos, etcétera.
5 5 ¿Interfaz de Usuario?
6 6 En algunos casos, la interfaz de usuario puede ser un instrumento muy poderoso para ayudar en la captura y especificación de requerimientos Es muy sencillo diseñar algunas pantallas, enseñárselas al usuario para que las evalúe y de esta manera aclarar dudas o confusiones en los requerimientos Desde este punto de vista, es posible apoyarse en el desarrollo de “prototipos” de IU para resolver problemas de requerimientos e inclusive especificar parte del sistema
7 7 ¿Interfaz de Usuario? La idea fundamental en el concepto de interfaz es el de mediación, entre hombre y máquina. La interfaz es lo que "media", lo que facilita la comunicación, la interacción, entre dos sistemas de diferente naturaleza, típicamente el ser humano y una máquina como el computador. Esto implica, además, que se trata de un sistema de traducción, ya que los dos "hablan" lenguajes diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico.
8 8 ¿Interfaz de Usuario? El diseño de la interfaz de usuario es el proceso de determinar los distintos componentes, tanto de hardware como de software, sus características y su disposición, que se utilizarán para interactuar con una serie de usuarios determinados en un medio ambiente determinado
9 9 ¿Por que es necesario hacer una buena Interfaz de Usuario? A continuación se muestran algunos errores comunes de interfaz de usuario...
10 10 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Son las etiquetas de los botones lo suficientemente claras? ¿El botón de “detener” no está demasiado cerca del de “encendido”? ¿Es adecuado un arreglo de botones en matriz?
11 11 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Será que hay muchos “tabs”?
12 12 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¡La misma funcionalidad anterior, pero mejorada!
13 13 ¿Por que es necesario hacer una buena Interfaz de Usuario? A) B) Tanto para A como para B, ¿Qué interfaz es mejor, la de la derecha o la de la izquierda?
14 14 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Cómo dice?
15 15 ¿Por que es necesario hacer una buena Interfaz de Usuario? La claridad en los mensajes de error y en la comunicación con el usuario es fundamental Presione alguna tecla para continuar ¡Evite la ambigüedad!
16 16 ¿Por que es necesario hacer una buena Interfaz de Usuario? Provea al usuario con suficiente información......pero hable en un lenguaje que el usuario pueda comprender Poca información ¿Qué? ¿Cómo? Escriba usando un lenguaje que el usuario pueda entender
17 17 Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Lea todo el mensaje de error...
18 18 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Dónde tengo que hacer click para descargar el archivo?
19 19 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Dónde tengo que hacer click para descargar el archivo?
20 20 ¿Por que es necesario hacer una buena Interfaz de Usuario? El uso de iconos excesivos puede impactar considerablemente la legibilidad El programa no tiene la posibilidad de desactivar los emoticons
21 21 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¡Use los colores adecuados, dependiendo del caso! Este ejemplo en particular no usa colores adecuados para la lectura
22 22 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Por qué es necesario paginar los resultados en una lista?
23 23 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Son estas transparencias lo suficientemente legibles? ¿Se puede leer el texto, se pueden ver bien las imágenes?
24 24 ¿Por que es necesario hacer una buena Interfaz de Usuario? Algunos afirman que el éxito comercial del iPod se ha debido en buena medida a un excelente diseño (y evolución) de su Interfaz de usuario...
25 25 ¿Por que es necesario hacer una buena Interfaz de Usuario?
26 26 Look & Feel (ver y sentir) versus funcionalidad... La interfaz de usuario es importante pero no lo es todo ¿Por que es necesario hacer una buena Interfaz de Usuario?
27 27 Factores Humanos 4 factores humanos fundamentales...
28 28 Factores Humanos Memoria a corto plazo limitada: Las personas recuerdan usualmente a corto plazo 7 elementos de información. Si es necesario que memoricen más, entonces se vuelven mas propensas a cometer errores Las personas se equivocan: Esto es un hecho. Una respuesta adecuada (alarmas, confirmaciones, colores, etcétera) puede hacer la diferencia entre una buena o una mala interfaz de usuario...recordar que...
29 29 Factores Humanos Recordar que un error mal manejado puede llevar a otro error... y este puede llevar a otro y a otro, y así hasta llegar a un error catastrófico
30 30 Factores Humanos Las personas tienen preferencias diferentes: Algunas personas preferirán utilizar interfaces gráficas, otras usarán interfaces de linea de comandos, etcétera Las personas son diferentes: No todas las personas tienen las mismas capacidades o usaran el sistema de la misma forma (Recordar caricatura anterior) ¿Factores ambientales o del entorno?
31 31 Principios de Diseño de IU Familiaridad: La interfaz debe usar términos y conceptos familiares al usuario y al dominio de la aplicación Uniformidad: La interfaz debe ser uniforme, operaciones comparables deben funcionar de la misma manera Mínima Sorpresa: El comportamiento del sistema no debe provocar sorpresa al usuario. El sistema debería comportarse de la forma más predecible posible
32 32 Principios de Diseño de IU Guía de Usuario: Retroalimentación significativa y coherente al ocurrir errores y características de ayuda sensibles al contexto Diversidad de Usuarios: La interfaz debe estar orientada a todos los tipos de usuarios del sistema (Novatos, expertos, daltónicos, discapacitados, etcétera) Recuperabilidad: La interfaz debe permitir al usuario recuperarse de errores, o al menos, ayudarle a evitarlos
33 33 Recomendaciones Use el sentido común. Nada de lo que se dice en esta presentación es “Rocket Science”. Use software (No desarrollado por usted) y medite (sea consciente) de la forma en que está hecha la Interfaz de usuario.
34 34 Recomendaciones Use el software que desarrolle y haga críticas sobre la interfaz de usuario y estudie la forma en que puede mejorarla para lograr un sistema más usable. ¡Debata sobre la IU! Con el programador de la oficina de al lado, con el jefe, con el vecino, con sus usuarios, clientes, etcétera.
35 35 ¡Debate! ¿Debe ser igual la interfaz de usuario de un cajero, la del gerente y la del contador de un supermercado? ¿En que se diferencian?
36 36 Interacción del Usuario Manipulación Directa: El usuario interactúa directamente con los objetos en la pantalla Selección de Menús: El usuario selecciona un comando de una lista de posibilidades (menú). Rellenado de Formularios: El usuario rellena campos de un formulario (Similar a cuando se rellena una planilla en papel)
37 37 Interacción del Usuario Lenguaje Natural: El usuario escribe / habla en lenguaje natural (emite un comando) y el sistema interpreta la solicitud, la analiza y la traduce a comandos del sistema (¿Ha visto usted Star Trek (Viaje a las Estrellas) u Odisea del Espacio 2001? ¿Sabe usted quién o qué es HAL 9000?) Lenguajes de Comandos: Similar al Shell de linux o de MS-DOS, el usuario escribe comandos y el sistema los ejecuta
38 38 Interacción del Usuario Es importante escoger el estilo de interacción adecuado según las necesidades y el contexto. ¿Se imaginan un “Counter Strike” con una interfaz de “consola de comandos”? ¿Y un procesador de texto con una interfaz puramente de arrastrar y soltar?
39 39 Interacción del Usuario
40 40 Un poco de Arquitectura y UI... Arquitectura a 3 capas Presentación (IU) (HTML) Capa de Proceso / Negocio (Lógica / Reglas de Negocio) (Universal / Independiente de la IU) Capa de Persistencia BD Presentación (IU) (QT / GTK) Presentación (IU) (Excel) Cajer o Gerent e Contado r Internet / WAN / LAN u otro medio
41 41 Un poco de Arquitectura y UI... Sistema Operativo Linux Comandos Del Sistema Operativo Gestor de Ventanas X-Windows Ambiente de Escritorio (Gnome / KDE / Otro) Intérprete de Comandos (sh / bash / csh / ksh) Usuario Ocasional Usuario Avanzado
42 42 Un poco de Arquitectura y UI... TODO: ¿UI y patrones de diseño? ¿UI y arquitecturas orientadas a eventos? ¿Código? No, esto es mejor ponerlo en la parte de codificación de software
43 43 Procesos de Diseño de UI (Pasos elementales para diseñar UI) Reunir y analizar la información del usuario: Análisis de tareas, estudios etnográficos, entrevistas, observaciones, o un conjunto de todas estas técnicas. Diseñar la interfaz de usuario: Herramientas de desarrollo rápidas (Editores de GUI), HTML, en papel. Validar la interfaz de usuario: Entrevistas, observaciones, prototipos, etcétera. Repetir los tres pasos anteriores en caso de ser necesario Construir la interfaz de usuario: En base al diseño, o desarrollando prototipos evolutivos, desechables.
44 44 Procesos de Diseño de UI (Pasos elementales para diseñar UI) Es posible diseñar interfaz de usuario simplemente usando lápiz y papel y haciendo un bosquejo. O se pueden utilizar herramientas mas sofisticadas: Editores de IU, HTML, etcétera
45 45 Ejemplo... Se puede usar una herramienta de dibujo para diseñar IU (Ej: sdraw de OpenOffice, MS Visio u otra similar) ¿Qué errores puede usted encontrar en esta pantalla?
46 46 Procesos de Diseño de UI (Ejemplos)
47 47 Procesos de Diseño de UI (Ejemplos) Analizar y comprender las actividades del usuario Realizar el Diseño del prototipo en papel Evaluar el diseño con los usuarios finales Realizar diseño dinámico del prototipo Evaluar el diseño con los usuarios finales Implementar la interfaz de usuario definitiva Diseño del prototipo Prototipo ejecutable Modelo Basado en Prototipos (Sommerville)
48 48 Procesos de Diseño de UI (Ejemplos) Identificar la necesidad de diseñar la IHC Identificar la necesidad de diseñar la IHC El producto de software satisface los requisitos especificados Precisar el contexto de uso Especificar los requisitos Crear perfiles de usuarios Estudiar el ambiente de trabajo Determinar elementos de hardware y software Determinar la funcionalidad delsistema Evaluar el diseño Modelo para el Diseño de la Interacción Humano- Computadora (MODIHC) (Flor Narciso 1998)
49 49 Navegación de la IU Hasta ahora, la gran mayoría de los problemas de interfaz de usuario resaltados corresponden generalmente de forma aislada sólo a una pantalla o interfaz de la aplicación ¿Qué hay sobre la manera en que interactúan las distintas pantallas de la aplicación entre si? La navegación es tan importante como el diseño individual de las pantallas
50 50 Grafo de Navegación Grafo (Mapa) de Navegación: Permite ver la secuencia lógica de pantallas y acciones por las que tiene que pasar el usuario para realizar una tarea determinada Entrar al Sistema Listar Bancos Registrar Inversión Confirma r Datos Imprimir Plantilla Pantalla Principal Crear Banco Editar Banco Eliminar Banco
51 51 Grafo de Navegación Entrar al Sistema (login) Listar Bancos Registrar Inversión Confirma r Datos Imprimir Plantilla Pantalla Principal Crear Banco Editar Banco Eliminar Banco listar banco s registrar inversión cancelar regresar cancelar siguiente eliminar editar crear siguiente Aquí si puede expresar secuencia (a diferencia de en los casos de uso)
52 52 Grafo de Navegación (Por ejemplo un CRUD / Opción A) Listar Bancos Pantalla Principa l Crear Banco Editar Banco Eliminar Banco MENU: listar bancos regresar MENU: crear banco MENU: editar banco MENU: eliminar banco regresar MENU: Crear Banco Editar Banco Eliminar Banco Listar Bancos... Otras Opciones MENU: Banco >>... Otras Opciones Crear Editar Eliminar Listar ¿Cómo serían las pantallas de la derecha?
53 53 Grafo de Navegación (Por ejemplo un CRUD / Opción B) cancelar Listar Bancos Pantalla Principal Crear Banco Editar Banco Eliminar Banco MENU: listar bancos eliminar editar regresar MENU: crear banco MENU: Crear Banco Listar Bancos... Otras Opciones MENU: Banco >>... Otras Opciones Crear Listar ¿Cómo serían las pantallas de la derecha?
54 54 Grafo de Navegación (Por ejemplo un CRUD / Opción C) Listar Bancos Pantalla Principal Crear Banco Editar Banco Eliminar Banco MENU: listar bancos cancelar eliminar editar crear regresar MENU: Bancos... Otras Opciones O bien “Listar Bancos” o “Administrar Bancos” ¿Cómo serían las pantallas de la derecha?
55 55 Ejemplo de una mala navegación: Visual Paradigm for UML, edición de los valores de los atributos de un objeto... Navegación de la IU
56 56 Mostrar algunos problemas de navegación del libro GUI Bloopers Navegación de la IU
57 57 En resumen: Piense bien y defina como va a ser la navegación entre las distintas pantallas de la aplicación Navegación de la IU
58 58 Pautas de Diseño de IU (Diseño Visual) La intención del Diseño Visual no es que las aplicaciones se vean “bonitas”. Un buen Diseño Visual esta centrado en la comunicación. La información visual es, específicamente, un complemento del diseño estructural de una aplicación Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez Es buena idea buscar expertos en el área de diseño gráfico para diseñar adecuadamente las pantallas, seleccionar colores, matices, contrastes, paletas, etcétera
59 59 Aplique un conjunto limitado de colores: Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Los colores apagados, sutiles y complementarios suelen ser los más apropiados en el diseño de interfaces en aplicaciones de corte empresarial y académicas (andragogía) Los colores primarios, cálidos sin tender a “carnavalizar” la interfaz se recomiendan generalmente en caso de que la audiencia sean niños En general debe diseñarse la interfaz en función de los intereses de la audiencia: edad, cultura, conocimientos y conductas previas, etcétera
60 60 Los usuarios con desordenes visuales (ceguera nocturna, o baja visión nocturna, daltonismo, deuteranopia, protanopia, tritanopia) requieren alternativas para la asignación de colores por defecto de una aplicación Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Una buena Interfaz de Usuario se anticipa a estas necesidades, proporcionando una opción para la personalización de las preferencias del color Aun mejor si la aplicación ya esta configurada con una cuidadosa selección de color y contraste por defecto
61 61 Se estima que un 11% de la población mundial tiene algún desorden de ceguera nocturna, o baja visión nocturna, daltonismo, deuteranopia, protanopia, tritanopia, etcétera... Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)...es muy probable que alguien en este curso tenga algún problema de visión de este tipo...
62 62 Foto Original Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)
63 63 Como lo ve una persona con deuteranopia transformación cortesía de http://www.vischeck.com/ Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)
64 64 Como lo ve una persona con protanopia transformación cortesía de http://www.vischeck.com/ Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)
65 65 Como lo ve una persona con tritanopia transformación cortesía de http://www.vischeck.com/ Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)
66 66 El color debe ser considerado como una herramienta adicional en el diseño, no una necesidad básica Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernández Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) No dependa de colores para mostrar información importante, recuerde que si los colores no son correctamente percibidos (en casos de que el usuario tenga sistemas de poca resolución o posea algún impedimento visual leve), su aplicación debe continuar siendo usable
67 67 El color es una forma de información secundaria: Evite confiar en el color como único medio de informar una condición o valor Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Presión de Refrigerante Temperatura del Núcleo Imagine usted un panel de control de una central nuclear con los siguientes indicadores:
68 68 Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Deuteranopi a (Rojo/Verde) Protanopia (Rojo/Verde ) Tritanopia (Azul/Amarillo)
69 69 Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) The mechanical failures were compounded by the initial failure of plant operators to recognize the situation as a loss of coolant accident due to inadequate training and human factors industrial design errors relating to ambiguous control room indicators in the power plant's user interface. The Three Mile Island accident was a partial core meltdown in Unit 2 (a pressurized water reactor manufactured by Babcock & Wilcox) of the Three Mile Island Nuclear Generating Station in Dauphin County, Pennsylvania near Harrisburg. It was the most significant accident in the history of the American commercial nuclear power generating industry, resulting in the release of up to 481 PBq (13 million curies) of radioactive gases, but less than 740 GBq (20 curies) of the particularly dangerous iodine- 131. Fuente: http://en.wikipedia.org/wiki/Three_Mile_Island_accidenthttp://en.wikipedia.org/wiki/Three_Mile_Island_accident
70 70 Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Mucho mejor de la siguiente forma: Presión de Refrigerante PELIGRONORMAL Temperatura del Núcleo NORMALPELIGRO ¡PELIGRO!
71 71 Utilice un contraste adecuado entre el color del texto y el color de fondo Tomado de las transparencias de Interfaz Humano / Computador del Prof. Domingo Hernandez Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor) Esto casi no se puede leer... (Poco contraste) Esto cansa la vista... Esto también cansa la vista... Hay usuarios que NECESITAN alto contraste
72 72 !No torture a sus usuarios con combinaciones de colores tortuosas o poco adecuadas! Pautas de Diseño de IU (Color, Matiz, Contraste y Resplandor)
73 73 La galería del Horror de la Interfaz de Usuario
74 74 La galería del Horror de la Interfaz de Usuario Un problema de navegación, al exportar (ver siguiente transparencia)
75 75 La galería del Horror de la Interfaz de Usuario Un problema de navegación, al exportar (recordar valores por defecto)
76 76 La galería del Horror de la Interfaz de Usuario Por tratar de introducir publicidad o mejorar el “caramelo visual” se entorpece la labor del usuario http://www.movilnet.com.v e No es un formulario, es una imagen, que cuando le hacen click...
77 77 La galería del Horror de la Interfaz de Usuario Por tratar de introducir publicidad o mejorar el “caramelo visual” se entorpece la labor del usuario http://www.movilnet.com.v e No es un formulario, es una imagen, que cuando le hacen click...
78 78 La galería del Horror de la Interfaz de Usuario El texto lo dice todo... ¿Dónde está el botón para cancelar?
79 79 La galería del Horror de la Interfaz de Usuario ¿Uh?
80 80 La galería del Horror de la Interfaz de Usuario ¿Este dialogo se entiende? ¿Donde está el botón de cancelar?
81 81 La galería del Horror de la Interfaz de Usuario Cuidado con el texto utilizado... puede ser confuso o ambiguo...
82 82 La galería del Horror de la Interfaz de Usuario ¿Se entiende? (checkboxes de arriba y checks de abajo)
83 83 La galería del Horror de la Interfaz de Usuario Do not logout...
84 84 La galería del Horror de la Interfaz de Usuario Escriba bien...
85 85 Lecturas Recomendadas Jeff Johnson GUI Bloopers 2.0 (Common User Interface Design Don'ts and Dos Morgan Kaufmann 2 nd Edition
86 86 Diseño Arquitectónico http://interfacemindbraincomputer.wetpaint.com/page/2.A.1.0.- +Ejemplos+de+Interacci%C3%B3n+Humano+Maquina Ian Sommerville, Ingeniería de Software Addison-Wesley 6da. Edición (Capítulo 16 Diseño de Interfaces de Usuario)
87 87 Gracias ¡Gracias!