1 Interacción persona-ordenador El diseño gráfico

2 Objetivos Valorar la importancia del diseño en la interfazConocer los principios, métodos y herramientas del diseño

3 Contenido Objetivos de un buen diseño de la interfazElementos morfológicos de la imagen Uso del color Técnicas de diseño gráfico Iconos Ejemplos

4 Objetivos del diseño Crear una interfaz transparenteNo obstruye el acceso El usuario tiene una buena experiencia interaccionando con el sistema La interfaz casi no es detectada

5 Objetivos del diseño ¿Cómo conseguirlos?Considerar cada aspecto con un sentido del conjunto Conjuntar el diseño funcional y el visual Los controles deben tener un aspecto acorde a su función y funcionar de acuerdo con su aspecto Cuando el diseño visual clarifica sus funciones, la interfaz resulta intuitiva

6 Elementos de la imagen Para representar algo utilizamos unos elementos que constituyen un alfabeto gráfico. Estos elementos son: El punto La línea La forma La luz El color El tiempo El tamaño El formato La composición

7 Elementos de la imagen El puntoEl elemento más simple Posee una gran fuerza atractiva como marca Su situación puede establecer los ejes básicos de la estructura Varios puntos juntos se perciben agrupados creando formas Una secuencia de puntos puede imprimir ritmo a la imagen, creando una dirección de movimiento Ayuda a dirigir la visión del observador

8 Elementos de la imagen La líneaOrganizan el espacio Determinan ejes que delimitan zonas de atracción Pueden crear texturas, profundidad y movimiento Su dirección y grosor les da una expresividad

9 Elementos de la imagen La formaDefine una superficie con unas dimensiones dadas Formas básicas Cuadrado, triángulo y círculo Función: definir y organizar el espacio Pueden simular tridimensionalidad cuando se representan en perspectiva

10 Elementos de la imagen La luzContribuye a la composición de la escena Puede sugerir profundidad y tridimensionalidad Puede modelar formas, superficies y volúmenes Una característica importante es la tonalidad, que incide en la captación de las formas: Un tono claro parece más claro cerca de un tono oscuro y vic. Un tono claro se expande rodeado de uno oscuro Un tono oscuro se comprime rodeado de uno claro

11 Elementos de la imagen El colorCaracterísticas: Tonalidad o matiz: longitud de onda Saturación o intensidad: cantidad de blanco Luminosidad o claridad: cantidad de luz Sistemas de color: Aditivo: combina radiaciones de distinta longitud de onda Utilizado en las pantallas electrónicas Sustractivo: combina pigmentos cian, magenta y amarillo Utilizado en el papel

12 Elementos de la imagen El colorPapel del color en la imagen: Contribuye a la recreación del espacio Ayuda a simular la profundidad (sombreado) Sugiere distancia (difuminación progresiva del tono) Ayuda a dinamizar la composición a través de la interacción de los colores Los colores claros son excéntricos y los oscuros concéntricos Los colores saturados producen un fuerte impacto y se relacionan con sensaciones dinámicas y alegres. Los colores no saturados transmiten sensaciones débiles y más sutiles El color transmite “sentimientos” Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres La percepción del color es subjetiva y depende de factores culturales

13 Elementos de la imagen El colorFormas de relación dinámica entre los colores: Armonía: crea una composición con variaciones cromáticas suaves y graduales relacionando colores afines Contraste: yuxtapone colores diferentes entre sí, fundamentalmente colores complementarios: Rojo-verde, amarillo-violeta, azul-naranja La composición llama fuertemente la atención Si es muy acentuado puede reducir la legibilidad al producirse vibración Es necesario conocer las relaciones cromáticas para combinar correctamente los colores

14 Elementos de la imagen El tiempoSe puede simular el paso del tiempo en imágenes fijas, organizando adecuadamente el espacio: Usando diferentes intensidades lumínicas, contrastes cromáticos, de textura, de escala... Jerarquizando los elementos representados, ordenándolos según una cierta secuencia

15 Elementos de la imagen El tamañoEl tamaño establece un peso visual y una jerarquización en cuanto al espacio ocupado por el elemento Ayuda a crear sensación de profundidad mediante la perspectiva

16 Elementos de la imagen El formatoEs la proporción del cuadro donde se muestra la imagen Debe favorecer la adaptación al campo visual humano, buscando una armonía entre las dimensiones Influye decisivamente en la composición general y le da un significado Los formatos horizontales son más estáticos Los formatos verticales y circulares son más dinámicos

17 Elementos de la imagen La composiciónEs la forma de ordenar y organizar los elementos morfológicos de la imagen en el espacio estructural que ofrece el formato Principios: unidad y claridad Se puede crear diversidad y contraste para añadir dinamismo, aunque complica la composición Hay que delimitar claramente el centro de interés, el que atraerá la mirada del espectador, y que depende de la composición

18 Elementos de la imagen La composiciónAlgunas reglas de composición: La zona inferior suele ser más estática y sólida y la superior más dinámica y llamativa La zona izquierda es más estable y permite colocar pesos mayores sin desequilibrar A mayor tamaño, mayor peso compositivo

19 Uso del color El color es un aspecto muy importante de la interfazPartes de la interfaz relacionadas con el color: Persona: sistema humano visual Ordenador: presentación de información

20 Uso del color MotivaciónEl color tiene un gran impacto en la presentación de información Si se usa adecuadamente mejora la presentación Su uso inapropiado puede reducir su funcionalidad Es un componente principal de las GUI El uso de colores apropiados puede ayudar a la memoria del usuario y facilitar la formación de modelos mentales efectivos

21 Uso del color Fundamentos del colorModelos de color: Basados en la percepción HSV: Matiz (Hue), Saturación (Saturation), Valor (Value). Usado por artistas, diseñadores, fabricantes HLS: Matiz (Hue), Luz (Light), Saturación (Saturation). Desarrollado por Tektronix Basados en los dispositivos de presentación RGB. Usado en los monitores de ordenador YIQ/YUV. Usado en la transmisión de televisión Modelo CIE (Comisión Internacional sobre Iluminación)

22 Fundamentos del color Modelo RGBLos colores presentados en un monitor han de ser trasladados al espacio de color RGB Problema: no hay un mapeo uno a uno entre los modelos perceptuales y los de presentación El modelo CIE permite traducciones del HSV al RGB

23 Fundamentos del color El ojo humanoEl ojo humano contiene una lente y una retina La retina contiene receptores sensibles a la luz, los conos y los bastones Los bastones proporcionan visión de noche Los conos trabajan en niveles más altos de intensidad de luz Los conos contienen fotorreceptores sensibles al rojo (64%), al verde (32%) o al azul (2%)

24 Fundamentos del color El ojo humanoEl ojo es sensible a un rango de longitudes de onda Menos sensible a longitudes más cortas (azules) Más sensible a longitudes más largas (amarillos y anaranjados) Debido a la distribución física de los fotorreceptores azules, podemos ver los azules mejor en la periferia que en el frente

25 Fundamentos del color El ojo humanoConsecuencias de la organización física del ojo: Por la falta de fororreceptores azules, Las líneas azules delgadas (como el texto) tienden a verse borrosas Pequeños objetos azules tienden a desaparecer cuando tratamos de enfocarlos Los colores que difieren sólo por la cantidad de azul no producen bordes claros Objetos del mismo color pueden parecer marcadamente diferentes en color dependiendo del color del fondo

26 Fundamentos del color El ojo humanoEjemplo: R: 255 G: 102 B: 0 R: 255 G: 102 B: 100 R: 255 G: 0 B: 102 R: 255 G: 100 B: 102

27 Fundamentos del color El ojo humanoEjemplo: El texto en azul tiende a verse borroso El texto en azul tiende a verse borroso El texto en azul tiende a verse borroso

28 Fundamentos del color El ojo humanoEjemplo:

29 Fundamentos del color El ojo humanoConclusión: El uso inefectivo de los colores puede causar vibraciones y sombras, imágenes que distraen al usuario y pueden forzar la vista

30 Uso del color Uso efectivo del colorLa persona interactúa con el mundo a través de modelos mentales que ha desarrollado Al diseñar una interfaz hay que desarrollar las herramientas de la interfaz que le ayudarán a realizar el trabajo ayudar al usuario a desarrollar modelos mentales del sistema que faciliten su trabajo El color ayuda a desarrollar modelos mentales eficientes si se siguen unas pautas

31 Uso efectivo del color SimplicidadVincular significados prácticos e intuitivos a los colores primarios, rojo, verde, amarillo y azul, que son fáciles de aprender y recordar Mantener el esquema del color simple, utilizando pocos colores: 5±2 Mantener el mensaje sencillo: no sobrecargar el significado del color vinculando más de un concepto a un sólo color. Conceptos diferentes = colores diferentes

32 Uso efectivo del color ConsistenciaMantener el orden espectral y perceptual de los colores: rojo, verde, amarillo, azul: El rojo se enfoca en el frente El verde y el amarillo se enfocan en medio El azul se enfoca en el fondo Evitar cambiar el significado de los colores en diferentes pantallas, sobre todo cuando se usa para codificar o agrupar información Ejemplo: color de fondo de campos no editables

33 Uso efectivo del color ConsistenciaUtilizar colores diferentes para conceptos diferentes No utilizar varios matices del mismo color, sobre todo para los azules Evitar el uso de colores que aparecen diferentes debido a la variación del color de fondo Pueden ser percibidos por el usuario como colores diferentes y el significado se perderá

34 Uso efectivo del color ClaridadEl tiempo de búsqueda para encontrar una información disminuye si su color es conocido de antemano y sólo se aplica a ella Utilizar colores estandarizados El uso del color mejora la estética y el atractivo de la interfaz, pero también la efectividad del procesamiento de la información y el rendimiento de la memoria

35 Uso efectivo del color ClaridadLa usabilidad mejora al usar colores para agrupar informaciones relacionadas Utilizar códigos de color en los mensajes rojo = alertar al usuario de un error amarillo = mensaje de advertencia verde = progreso positivo

36 Uso efectivo del color Lenguaje de colorLas personas tenemos un lenguaje de color basado en el uso común y cultural Ejemplo: el color del buzón de correo es efectivo para un icono de correo en un sistema de correo electrónico Para usar el color efectivamente debe conocerse al usuario y su entorno de trabajo

37 Uso efectivo del color Lenguaje de colorEs más difícil usar el color efectivamente que inefectivamente Usar una combinación equivocada para el fondo y el frente puede crear ilusiones que forzarán la vista Usar múltiples colores puros o colores muy saturados obliga al ojo a reenfocar constantemente y causa fatiga Usar colores difíciles de enfocar para texto o líneas delgadas causa fatiga y estrés

38 Uso efectivo del color Lenguaje de colorCombinar colores para producir efectos positivos requiere el conocimiento de ciertas técnicas, como las combinaciones de color Programming the user interface: principles and examples. Brown y Cunningham

39 Uso efectivo del color Lenguaje de colorExisten reglas y sugerencias fáciles de seguir Marcus: Utiliza el color azul para el fondo Utiliza la secuencia de color espectral (rojo, anaranjado, amarillo, verde, azul, índigo y violeta) Mantén pequeño el número de colores Evita usar colores adyacentes que difieran solamente en la cantidad de azul Utiliza colores brillantes para indicar peligro o para llamar la atención del usuario Suger.: diseña la interfaz primero en blanco y negro

40 Uso efectivo del color Las reglas de MurchEvita el despliegue simultáneo de colores espectralmente extremos que estén altamente saturados Descarta el color azul puro para texto, líneas delgadas y figuras pequeñas Evita colores adyacentes que se diferencien sólo por la cantidad de azul que contienen Los operadores de edad avanzada necesitan niveles más altos de brillo para distinguir los colores Los colores cambian de apariencia a medida que el nivel de luz ambiental cambia

41 Uso efectivo del color Las reglas de MurchLa magnitud de un cambio detectable en el color varía a través del espectro Es difícil enfocar hacia las orillas creadas solamente por el color Evita utilizar el rojo y el verde en la periferia de presentaciones a gran escala Los colores opuestos se ven bien juntos Para los observadores con deficiencias del color (ciegos al color), evita hacer distinciones de un sólo color

42 Uso efectivo del color EjemplosLegibilidad Mac OS X QT 4 / 5,6 Significado del color Mac OS X Pixelcentric (http://pixelcentric.net/x-shame/color.html)

43 Uso efectivo del color EjemplosSignificado del color (colores fijados en el código) Easy CD Creator Interface Hall of Shame (http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)

44 Uso efectivo del color EjemplosUso del color IBM RealCD Webforms Microsoft Access Interface Hall of Shame (http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)

45 Técnicas de diseño gráficoDisposición Cómo se colocan las cosas en la pantalla. Permite dar más importancia a ciertas cosas. El orden de lectura es importante y varía según la cultura Énfasis Los elementos realzados se ven antes y se perciben como más importantes. Para enfatizar se usa la posición, el color y los atributos del texto Si todos los elementos tienen el mismo peso la composición es aburrida y la navegación difícil

46 Técnicas de diseño gráficoFoco El punto focal es el centro de atención, el punto que normalmente se ve antes. Se puede utilizar para dirigir al usuario a la información deseada Alineación Ayuda a conseguir equilibrio, armonía, unidad y modularidad. Una alineación exacta y consistente es la manera más fácil de mejorar la estética de la interfaz

47 Iconos Los iconos se utilizan desde la primera interfaz gráfica (Xerox Star) y son útiles por dos motivos: Las personas reaccionan instintivamente a las imágenes Son pequeños, importante para el espacio limitado de la pantalla de ordenador Los iconos representan objetos y también funciones

48 Iconos Diseñar con significadoFactores que determinan el significado de un icono: Contexto. Entorno donde se utiliza Función. Tipo de tarea en la que se utiliza Forma representativa. Puede ser de tres tipos: Uso de un objeto concreto Uso de un objeto abstracto Uso de una combinación de ambos (iconos más comprensibles)

49 Iconos Diseñar con significadoTipos de iconos según forma representativa: a) Iconos similares: presentan el concepto a través de una imagen análoga b) Iconos ejemplares: sirven como ejemplos c) Iconos simbólicos: se utilizan para dar una referencia a un mayor nivel de abstracción d) Iconos arbitrarios: no guardan relación y la asociación ha de aprenderse

50 Iconos Cómo diseñar iconosTras decidir el objeto a incluir en el icono hay que decidir cómo dibujarlo Más detallado o más simplificado Regla: incluir sólo los detalles imprescindibles

51 Ejemplo: depuración de códigoIconos El lenguaje icónico Consiste en definir iconos coordinados que representan distintas acciones aplicables a un elemento Ejemplo: depuración de código Punto de observación avanzar retroceder borrar

52 Iconos Ventajas Diseñar un conjunto coordinado de iconos es mejor que hacerlo uno a uno Reduce el esfuerzo en el diseño y el dibujo Asegura la consistencia Da un estilo al producto Hace que los iconos sean autoexplicativos y permite al usuario prever cómo serán Los sistemas complejos disponen de un lenguaje icónico simple y consistente

53 Iconos Ejemplos bien mal Microsoft Word Mac OS X Finder WinCim ZocMac OS X Browser Chimera

54 Ejemplos La información sencilla reduce la carga de memoria

55 Ejemplos Información jerarquizada

56 Ejemplos Información dispuesta por temas

57 Ejemplos Sobrecarga informativa

58 Ejemplos Mantenimiento de una misma estructura de navegación

59 Ejemplos Un fondo llamativo dificulta la lectura

60 Ejemplos Los iconos ayudan a identificar los contenidos

61 Ejemplos Uso del color para distribuir la información

62 Ejemplos Uso del color para resaltar y jerarquizar la información

63 Ejemplos El contraste de color anima y estimula

64 Ejemplos Contraste erróneo, rojo-azul, exige gran esfuerzo de acomodación visual

65 Ejemplos Agrupación lógica de datos

66 Ejemplos Imagen global

67 Ejemplos RecomendacionesFacilitar la visibilidad - centrarse en el contenido Utilizar diálogos simples y naturales Reducir la memorización haciendo visible toda la información – evitar desplazamientos Reducir la complejidad de las acciones – predicción y realimentación Marcar las opciones de navegación con claridad Agrupar los datos lógicamente – jerarquizar la información – mostrar sólo la necesaria Flexibilizar la presentación - personalización Diseñar siguiendo una “imagen global”

68 Conclusiones El diseño es importante para la usabilidad de la interfazUn buen diseño aúna la funcionalidad con la estética El diseño no es sólo cuestión de ‘buen gusto’. Está basado en conocimientos fundados sobre la percepción humana Existen reglas de fácil aplicación que pueden ayudar a realizar un buen diseño Es importante recurrir a las guías de estilo