Diseño de Interfaces de Usuario

Presentación del tema: "Diseño de Interfaces de Usuario"— Transcripción de la presentación:

1 Diseño de Interfaces de Usuario
Tema 3 Diseño de Interfaces de Usuario Características Deseables Principios de Diseño Elementos Importantes en el Diseño Ayudas al Usuario (Tema aparte)

2 Diseño de Interfaces de Usuario INTRODUCCIÓN
Definición del Diseño en Ingeniería (Jones, 1981): “Empleo de principios científicos, información técnica e imaginación para definir máquinas, estructuras mecánicas o sistemas que ejecuten unas funciones especificadas previamente, con el máximo de economía y eficiencia”

3 Diseño de Interfaces de Usuario INTRODUCCIÓN(II)
El proceso de diseño de I.U. y los mecanismos asociados a dicho proceso guardan similitud con otros procesos de diseño de sistemas, especialmente software. Es válida, por tanto, la definición anterior y se cumplen también los principios asociados enunciados por Jones: Descripción de elementos componentes de una estructura física Solución de un problema comprobando de antemano que, efectivamente, se resolverá Simulación de lo que se pretende hacer antes de que se haga Un esfuerzo de previsión para imaginar futuras posibilidades Una actividad creativa

4 Diseño de Interfaces de Usuario INTRODUCCIÓN (III)
Tiene sin embargo características especiales que lo distinguen frente a los restantes procesos de diseño: Debe estar especialmente centrado en los usuarios, lo que caracteriza principalmente los mecanismos empleados en dicho diseño Tiene un alto componente “artístico” y psicológico Se necesita la ayuda de usuarios finales para chequear los sistemas así creados; no vale normalmente con los escenarios o baterías de pruebas empleados en otros procesos de diseño

5 Características Deseables FORMACIÓN DE LOS EQUIPOS DE DISEÑO
Por las características especiales de este tipo de diseño, los equipos de diseño de I.U. sería conveniente que estuvieran formados, especialmente para grandes sistemas, es decir aparte de por personas de desarrollo, por formadores, especialistas en marketing, diseñadores artísticos, médicos, educadores y Han de ser fáciles de usar Han de ser fáciles de aprender Han de ser seguros y fiables Han de ser efectivos a la hora de facilitar las tareas necesarias en una aplicación OBJETIVOS POR DISCIPLINAS RELACIONADAS

6 Características Deseables FACTORES A TENER EN CUENTA
Según se vio al ver los principales factores relacionados con la definición de un I.U. deberían valorarse a la hora del diseño: Usuarios: Características Individuales (edad, formación, discapacidad ...) Características especiales por Agrupaciones de los mismos Frecuencia de uso del Interfaz Trabajo: Características de las Tareas a realizar Restricciones de Tiempo Errores posibles

7 Características Deseables FACTORES A TENER EN CUENTA (II)
Entorno: Factores generales Factores organizativos Soporte y ayuda de la que dispondrán los usuarios Tecnología: Elementos hardware disponibles para su utilización Adecuación de los elementos hardware a los factores anteriores Soporte disponible para el equipo de diseño

8 Características Deseables más relacionadas con el Software EL USUARIO AL MANDO
Máxima interacción posible, evitando procesos largos indicándolo y permitiendo abortarlos cuando sea irremediable tenerlos Personalización, Los gustos son muy personales y hay que respetarlos Permitir la personalización del I.U. Ofrecer valores razonables por defecto Interfaces sencillos, Facilitar trabajos y no distraer la atención innecesariamente

9 Características Deseables más relacionadas con el Software INTERFACES INTUITIVOS Y DIRECTOS
Selección fácil del objeto y acción aplicables Iconos y elementos de interfaz en general significativos y relacionados con usos de objetos en el mundo real (metáforas), si se puede Manipulación directa, siempre que sea posible Con el mundo real, (metáforas) Dentro de la aplicación Entre aplicaciones dentro de un mismo entorno CONSISTENCIA

10 Características Deseables más relacionadas con el Software CLARIDAD
Iconos, opciones y representaciones en general Mensajes Mensajes suficientemente expresivos Evitando el uso de jergas Proporcionar ayuda en los mensajes No echar la culpa al usuario de los errores (recordando siempre que es el jefe) Realimentación constante Reacción inmediata a las acciones del usuario Si un proceso es lento (o se espera que pueda serlo) señalizarlo

11 Características Deseables más relacionadas con el Software POSIBILIDAD DE ARREPENTIRSE
Permitir deshacer una acción siempre que sea posible Permitir al usuario Cancelar la realización de la acción Avisar antes de realizar acciones destructivas, por lo menos Asemejar siempre la apariencia al mundo real (factores tridimensionales y de sonido) Resaltar únicamente lo importante Uso de Colores Recuadros y agrupación espacial ESTÉTICA

12 Características Deseables DIFERENTES TIPOS DE SISTEMAS
Conviene también tener en cuenta los diferentes tipos de sistemas que nos podemos encontrar: SOFTWARE A MEDIDA vs PRODUCTOS DE DISTRIBUCIÓN Diferencias en las especificaciones y las formas de determinar éstas y chequear su cumplimiento Es una diferenciación que determina fuertemente el proceso de diseño El software a medida es fundamental si el usuario final es una persona con discapacidad

13 Características Deseables DIFERENTES TIPOS DE SISTEMAS (II)
SISTEMAS NUEVOS vs MANTENIMIENTO O MEJORAS La creatividad es más restringida en los segundos, limitándose la labor a un análisis y prueba de lo previo y su rediseño En los sistemas nuevos cabe la posibilidad incluso de elegir entre varias posibilidades iniciales para solucionar el problema NIVELES DE COMPLEJIDAD DE UN SISTEMA Los factores de complejidad y los factores críticos de un sistema (Tiempo Real, seguridad, ...) determinan especialmente el empleo de mecanismos de diseño especialmente robustos

14 Principios de Diseño PROCESO GLOBAL
El diseño del I.U. será un proceso llevado a cabo en paralelo con el diseño de la parte computacional o el de otras partes del sistema global Se compone de una serie de fases análogas a las de diseño de cualquier sistema software: Análisis del Sistema General y recogida de Especificaciones Creación de modelos de funcionamiento del I.U. (como en otros casos de diseño, cómo se ve éste desde fuera) Especificación de tareas humanas necesarias para el funcionamiento del sistema y orientación de éstas hacia el uso del ordenador

15 Principios de Diseño PROCESO GLOBAL (II)
Se consideran entonces todos los aspectos de diseño que se deriven del análisis de los factores estudiados hasta ahora Uso de las herramientas para la realización de prototipos Se evalúa el resultado de este modelo bajo criterios de calidad Iterar el proceso en función de los comentarios o críticas al interfaz (Refinamientos sucesivos)

16 Principios de Diseño REPRESENTACIONES PARA EL DISEÑO
Independientemente de lo formal o informal que sea, lo vaga o lo precisa, trabajar con una representación o modelo del sistema final a realizar es indispensable para diseñar En distintas etapas del desarrollo estas representaciones irán cambiando, progresando hacia lo que finalmente será la aplicación completa. En cada fase, el modelo utilizado será lo bastante correcto para reflejar las características del sistema interesantes en esa fase y lo bastante simple como para evitar complejidades innecesarias En HCI, el modelo más importante con el que podemos trabajar, y cuyo uso se está extendiendo cada vez más, es el propio prototipo del Interfaz, que muestre a usuarios o clientes cómo trabajará éste

17 Principios de Diseño ITERACIÓN EN EL PROCESO DE DISEÑO
El diseño de los I.U. se hace especialmente en refinamientos sucesivos, a través de la evaluación del interfaz resultante y su modificación a raíz de los comentarios sobre el mismo Diseño Preliminar Modelo de diseño Construcción del prototipo inicial Modelo de Diseño Construcción del prototipo n Prototipo Prototipo Modificaciones en el diseño Evaluación del Interfaz por el usuario Estudio por el diseñador de la evaluación Comentarios y Críticas Correcciones propuestas

18 Principios de Diseño CICLOS DE DESARROLLO. CASCADA
El ciclo de vida en cascada, por ejemplo, será especialmente adaptado (como se viene haciendo ya en general) para posibilitar refinamientos sucesivos y corrección de problemas cuanto antes Recogida de Especificaciones Análisis del funcionamiento 1. Descripción de la Aplicación 2. Especificación de Requisitos Diseño del Sistema 3. Análisis de Tareas Implementación 4.Diseño del Interfaz 5. Producto

19 Principios de Diseño CICLOS DE DESARROLLO. ESPIRAL
DETERMINACIÓN DE OBJETIVOS, ALTERNATIVAS,... Costes EVALUACIÓN DE ALTERNATIVAS, IDENTIFICACIÓN, EXPRESIÓN DEL DISEÑO Análisis y Diseño Análisis y Diseño Análisis y Diseño Análisis y Diseño Prototipo Operacional Prototipo 3 Prototipo 2 Prototipo 1 Planificación del Ciclo de Vida Simulaciones, Evaluaciones, Medidas Planificación del Desarrollo Requisitos del Sistema Validación de Requisitos Diseño de Producto Planificación de Integración y Pruebas Diseño detallado Especificación de la Validación y Verificación Test de Módulos Integración y Pruebas FASES DE PLANIFICACIÓN Pruebas de Aceptación EVALUACIÓN Y PREPARACIÓN DEL PRÓXIMO NIVEL Implementación

20 Principios de Diseño RECOGIDA DE ESPECIFICACIONES
Parte del mismo punto de análisis del sistema global a realizar Se encuentran necesidades y problemas con anteriores sistemas Las técnicas a utilizar son diversas y dependen de cada aplicación: estudio de documentos iniciales del cliente y/o usuario, entrevistas con tomas de datos, estudios estadísticos (para software de distribución), observación, etc. Se han de eliminar las ambigüedades y términos vagos que se puedan detectar tras la aplicación de esas técnicas y producir un modelo final que recoja las especificaciones de una forma más o menos formal (un modelo de comportamiento)

21 Principios de Diseño ANÁLISIS DE TAREAS
Los sistemas remplazarán normalmente actividades manuales o semimanuales de las personas que deberán comprenderse y detallarse perfectamente Tras eso, se transformarán en un conjunto, más o menos similar, de tareas integradas en el contexto del I.U. Para cada una de estas tareas se podrá todavía clasificar y definir todos los pasos, datos y nuevas tareas posibles Todo este análisis es perfectamente compatible con otro enfoque de diseño de software final, con el que pueda estar realizándose el resto del sistema global (metodología orientada a objetos, por ejemplo)

22 Principios de Diseño ANÁLISIS DE TAREAS. EJEMPLO
Para un software de diseño de interiores se podrían ir contemplando distintas tareas principales a realizar: diseño del mobiliario, selección de tejidos y materiales, selección de recubrimientos en paredes y ventanas, presentación al cliente, costes y compras A partir de ahí, el diseño de mobiliario podría consistir a su vez en dibujar la planta de la habitación, situar puertas y ventanas, colocar muebles a través de los modelos en librerías, desplazarlos hasta la posición más adecuada, etc. La realización de esos pasos podría hacerse mediante elementos software diseñados con otras metodologías: plantillas de muebles como objetos sobre los que se realicen distintas operaciones Otro Ejemplo

23 Principios de Diseño REALIZACIÓN DEL PROTOTIPO
Este modelo de diseño será creado con ayuda de los UIMSs, que nos permitirán construir rápidamente: Control de los dispositivos de entrada y salida Validación de la entrada de datos del usuario Manejo de errores y visualización de los mismos Realimentación Ayudas e indicaciones Manejo de ventanas y/o campos Conexiones entre el software y el interfaz Aislamiento de la aplicación de las funciones del interfaz

24 Principios de Diseño EVALUACIÓN DEL DISEÑO
A partir del prototipo diseñado, para comprobar la satisfacción y cumplimiento de las necesidades del usuario Dependiendo de la clase de software a desarrollar, irá desde una simple prueba de usuario hasta la evaluación, por métodos estadísticos, de cuestionarios realizados por usuarios finales que probaron igualmente el prototipo Los criterios de evaluación son diversos: longitud de los comandos a introducir, memoria requerida, tiempo de interacción, facilidades de ayuda, ...

25 Elementos Importantes en el Diseño DISEÑO GRÁFICO (HOLISTIC)
Juega con el modelo conceptual del sistema a desarrollar, una imagen informal de cómo el sistema podría aparecer finalmente ante el usuario Frente a las metodologías de diseño formal que se deberán aplicar para desarrollar el sistema, aporta una primera visión creativa e idealista del mismo. Partiremos de un problema en el que se tienen ya, como mínimo, el conjunto de tareas que se han de llevar a cabo en el sistema. El equipo de diseño emprenderá la realización de este modelo con papel y lápiz, antes de haber definido nada del software o hardware a utilizar, para no verse limitados por nada

26 Elementos Importantes en el Diseño DISEÑO GRÁFICO (HOLISTIC) (II)
Es nuevamente un proceso iterativo en el que se empezará por un modelo en el que los diseñadores se habrán abstraído incluso de los elementos que compondrán los interfaces en el entorno a usar (sistema de ventanas, iconos, ...) y se irán considerando progresivamente éstos hasta acabar en un primer prototipo real Cuando se intenta llevar los modelos conceptuales a la realidad, unas veces encontraremos elementos de interfaz en el entorno que se acoplen perfectamente a los mecanismos a conseguir Otras veces, cuando se vea muy complicada la resolución de los conceptos abstractos, se crearán elementos nuevos o derivados de los anteriores

27 Elementos Importantes en el Diseño SISTEMAS DE VENTANAS
Los Sistemas de Ventanas para la realización de interfaces gráficos poseen ventajas indiscutibles que han hecho incluso que el ordenador se acerque a cualquier usuario, menos a usuarios con deficiencias visuales. Están basados en la metáfora del escritorio, orientados a la manipulación directa y siguiendo la filosofía WYSIWYG (What You See Is What You Get)

28 Elementos importantes en el Diseño USO DEL COLOR COMO ELEMENTO DE INTERFAZ
El color es una dimensión extra que proporciona atención y puede utilizarse como apoyo para la representación de estructuras de información compleja En algunos sistemas su uso es incluso imprescindible para abordar la difícil representación de los elementos con los que se trabaja (Diseño de Circuitos, Artes Gráficas, ...) Su uso ha de ser cuidadoso (ya lo veremos) y podríamos decir que se ha guiado por unas ciertas reglas que pretenden evitar la problemática y dificultades asociadas a su uso

29 Elementos importantes en el Diseño REGLAS PARA EL USO DEL COLOR
Procuraremos no abusar del color para el diseño (en una ventana hasta 4 ó 5 y en una aplicación no más de 7), hasta el punto de utilizarlo únicamente para aquello en que su uso puede ser verdaderamente importante No deberíamos basar todo o casi todo el significado de la información a transmitir en el color Buen ejemplo: Alertas Mal ejemplo: Mapas, Mensajes Críticos, etc .. (daltónicos)

30 Elementos importantes en el Diseño REGLAS PARA EL USO DEL COLOR (II)
Usar bien la codificación del color (No en todas las culturas u ocupaciones se da el mismo significado a un color) y hacer que su uso sea consistente Permitir al usuario modificar en cualquier momento su entorno, en lo que a colores se refiere. Configurable Realizar el diseño pensando en pantallas monocromas. El color servirá después para reforzar y mejorar la información y el aspecto Ser cuidadosos con las mezclas de colores (la fisiología del ojo no puede enfocar de igual forma todas las combinaciones: rojo y azul, por ejemplo)

31 Elementos importantes en el Diseño HERRAMIENTAS PARA MODIFICAR COLORES
También a la hora de permitir al usuario variar los colores de su entorno se impone la manipulación directa, permitiéndole elegir entre un rango completo y continuo (formado por distintas mezclas RGB) Posibilidades de mostrar interactivamente las diferentes combinaciones de colores que pueden ir resultando en el proceso En la actualidad, las herramientas más avanzadas asisten al usuario en la elección de colores mediante sistemas expertos, con la previa formulación de reglas de diseño con color, o redes neuronales entrenadas con ejemplos de combinaciones aceptables para el usuario

32 Elementos Importantes en el Diseño ICONOS
Sirven para asociar de una forma gráfica elementos en la aplicación con determinadas acciones o el uso de elementos reales Se diseñan a partir de varios iconos elementales que se podrán ver después en secuencia o con una única imagen en cada estado determinado del sistema Sirven para mejorar la asociación a elementos reales (metáforas) o destacar los estados en que se encuentra una aplicación o elementos de la misma ICONOS ANIMADOS

33 Elementos importantes en el Diseño ICONOS. TIPOS
Basados en Analogía, cuando hay un parecido entre la imagen y lo que se quiere representar (Señal de desprendimientos) Basados en Muestras, cuando se simbolizan elementos que intervienen en lo que se está representando (Señal de información sobre cercanía de restaurante) Basados en Símbolos, cuando se muestra mediante una imagen algo mucho más abstracto (Señal de peligro indefinido) Iconos Arbitrarios, donde la relación entre el icono y lo que expresa es aprendida (Señal de peligro por radioactividad)

34 Elementos importantes en el Diseño REPRESENTACIÓN DE IMÁGENES
Gráficos orientados al punto (Bitmaps): Son aquellos que se descomponen en un conjunto de puntos que pueden o no tener color a representar Son rápidos de dibujar La modificación de su contenido no es posible una vez que están construidos. Únicamente podemos repintar encima Es difícil aplicar transformaciones (escalados, giros, ...) sin que se produzca una merma en la calidad de la imagen visualizada

35 Elementos importantes en el Diseño REPRESENTACIÓN DE IMÁGENES (II)
Gráficos orientados al Objeto: La imagen se compone mediante la definición de los diferentes elementos que la pueden contener (líneas rectas, curvas, figuras, colores, ...) Son más lentos de dibujar cuando la dificultad del escenario a representar se incrementa Como la imagen está expresada en función de los componentes, no es problema modificarla en función de variaciones sobre éstos Su escalado, o transformaciones del estilo, no provocan merma en la calidad de la imagen inicial