1 Ingeniería del Software Diseñó de Interfaz de Usuario Universidad de los Andes Demián Gutierrez Septiembre 2009

2 ¿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

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

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

5 ¿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

6 ¿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?

7 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¿Será que hay muchos “tabs”?

8 ¿Por que es necesario hacer una buena Interfaz de Usuario? ¡La misma funcionalidad anterior, pero mejorada!

9 ¿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?

10 ¿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?

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

12 Factores Humanos

13 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

14 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?

15 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

16 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

17 Principios de Diseño de IU ● En general: ● Use el sentido común. ● Use software (No desarrollado por usted) y medite (sea consciente) de la forma en que está hecha la Interfaz de usuario. ● 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.

18 ¡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?

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

20 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 quien es HAL 9000?) Lenguajes de Comandos: Similar al Shell de linux o de MS-DOS, el usuario escribe comandos y el sistema los ejecuta

21 Interacción del Usuario

22 Un poco de Arquitectura... 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

23 Un poco de Arquitectura......por medio de un “marco” conceptual preestablecido (Ej: Watch / Diseño Orientado a Objetos) 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

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

25 Procesos de Diseño de UI (Ejemplos)

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

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

28 Procesos de Diseño de UI (Ejemplos) Pautas de Diseño de Interfaces Gráficas (Ver última parte de las transparencias Prof. Domingo Hernández)

29 Lecturas Recomendadas Jeff Johnson GUI Bloopers 2.0 (Common User Interface Design Don'ts and Dos Morgan Kaufmann 2 nd Edition

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