interacción persona-ordenador el diseño gráfico. objetivos valorar la importancia del diseño en...
TRANSCRIPT
![Page 1: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/1.jpg)
Interacción persona-ordenador
El diseño gráfico
![Page 2: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/2.jpg)
Objetivos
Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas del diseño
![Page 3: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/3.jpg)
Contenido
Objetivos de un buen diseño de la interfaz Tipografía Técnicas de diseño gráfico Iconos Ejemplos Elementos morfológicos de la imagen Uso del color
![Page 4: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/4.jpg)
El estilo y la apariencia del texto Factores que influyen en legibilidad del texto:
Tipo de fuente Tamaño de la fuente Mayúsculas y minúsculas Espaciamiento entre caracter, palabra y línea Longitud de la línea Justificación Ambiente del texto Márgenes Distinción tipográfica
Tipografía
![Page 5: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/5.jpg)
Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo.
Tipografía
Tipo de la fuente
![Page 6: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/6.jpg)
Tipografía
Tipo de la fuenteLas fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son más legibles que las de ancho fijo.
![Page 7: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/7.jpg)
El espacio entre caracteres depende en gran medida del tamaño de la fuente.
El espacio recomendado entre palabras es el ancho de una “n”. Espaciamiento entre palabras con una ene
Tipografía
Espaciamiento
![Page 8: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/8.jpg)
2. Dieciseís puntos pueden ser empleados para títulos 2.1 Catorce puntos para encabezado de sección Doce puntos están bien para texto fluido (1) . Recuerde hacer diferenciación de por lo menos 2 puntos entre distintos
tamaños
(1) Diez puntos son apropiados para notas de pie de página, subíndices y superíndices.
10 puntos son legibles. 11 y 12 puntos son más legibles.
La distinción entre tamaños de fuentes debe ser por lo menos de 2 puntos.
Tipografía
Tamaño de la fuente
![Page 9: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/9.jpg)
Mezclar mayúsculas y minúsculas hace más legible el texto que si son sólo mayúsculas.
El reconocimiento de palabras está parcialmente basado en reconocimiento de formas. La mezcla de mayúsculas y minúsculas produce formas más
irregulares. Facilita el reconocimiento.
Tipografía
Mayúsculas y minúsculas
![Page 10: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/10.jpg)
Tipografía
Mayúsculas y minúsculas
DEFINIR UNA GRAN CANTIDAD DE TEXTO EN LETRAS MAYÚSCULAS AFECTA SERIAMENTE LA LEGIBILIDAD DEL TEXTO. LAS LETRAS MAYÚSCULAS DEBERÍAN USARSE SÓLO PARA DAR ÉNFASIS, PERO RECUERDE DEFINIR EL TAMAÑO DE LA FUENTE UN POCO MÁS
PEQUEÑO QUE EL RESTO DEL TEXTO
Definir una gran cantidad de texto en letras mayúsculas afecta seriamente la legibilidad del texto. Las letras mayúsculas deberían usarse sólo para dar énfasis, pero recuerde definir el tamaño de la fuente un poco más pequeño que el resto del texto.
![Page 11: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/11.jpg)
El espacio recomendado entre líneas es de 2 puntos.
Tipografía
Espaciamiento entre lineas
![Page 12: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/12.jpg)
Tipografía
Longitud de la líneaSi una línea es muy larga, los lectores tendrán dificultad para encontrar el comienzo de la siguiente línea. En este primer ejemplo hay alrededor de 90 caracteres por línea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por línea. Las columnas de los diarios tienen típicamente 30 caracteres o cinco palabras por línea.
Si una línea es muy larga, los lectores tendrán dificultad para encontrar el comienzo de la siguiente línea. En este primer ejemplo hay alrededor de 90 caracteres por línea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por línea. Las columnas de los diarios tienen típicamente 30 caracteres o cinco palabras por línea.
Si una línea es muy larga, los lectores tendrán dificultad para encontrar el comienzo de la siguiente línea. En este primer ejemplo hay alrededor de 90 caracteres por línea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por línea. Las columnas de los diarios tienen típicamente 30 caracteres o cinco palabras por línea.
![Page 13: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/13.jpg)
Inserción de espacio adicional dentro de una línea para alinear el margen derecho.
La justificación sin guiones divisores de palabras retrasa la lectura.
Debido a brechas entre palabras
Alinear a la izquierda o dividir palabras.
Tipografía
Justificación
![Page 14: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/14.jpg)
Tipografía
Justificación
Justificación a la izquierda:
Interacción Humano-computador es una disciplina que involucra el diseño, evaluación e implementación de los sistemas computacionales interactivos para el uso humano
Justificación a la derecha:
Interacción Humano-computador es una disciplina que involucra el diseño, evaluación
e implementación de los sistemas computacionales interactivos para el uso
humano
Justificación centrada:
Interacción Humano-computador es una disciplina que involucra el diseño, evaluación
e implementación de los sistemas computacionales interactivos para el uso
humano
Justificación a ambos lados:
Interacción Humano-computador es una disciplina que involucra el diseño, evaluación e implementación de los sistemas computacionales interactivos para el uso humano
![Page 15: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/15.jpg)
Utilice un máximo de
Dos tipos de fuente diferentes
Dos inclinaciones diferentes (normal y cursiva)
Dos pesos diferentes (medio y negrita)
Cuatro tamaños (título, subtítulo, texto y pie de página)
Tipografía
Ambiente del texto
![Page 16: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/16.jpg)
Evite el “síndrome de los procesadores de texto”. Texto al borde de la ventana (vea Notepad)
Deje márgenes amplios a los lados
Tipografía
Márgenes
vs.
![Page 17: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/17.jpg)
Información es “cualquier diferencia que hace una diferencia”. (Gregory Bateson)
Use distinción tipográfica como cursiva, negrita o cambio de fuente si ello lleva consigo información adicional. Importancia de un elemento
Tipografía
Distinción tipográfica
![Page 18: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/18.jpg)
Crear una interfaz transparente
No obstruya el acceso.
donde el usuario tenga una buena experiencia al interactuar con el sistema.
y la interfaz casi no sea detectada.
Objetivos del diseño gráfico
![Page 19: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/19.jpg)
Disposición de los elementos:
Cómo se colocan los elementos en la pantalla.
Permite dar más importancia a ciertas cosas.
Técnicas de diseño gráfico
![Page 20: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/20.jpg)
Disposición de los elementos:
El orden de lectura es importante y varía según el idioma.
Técnicas de diseño gráfico
![Page 21: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/21.jpg)
Énfasis
Los elementos realzados se ven antes y se perciben como más importantes.
Para enfatizar se usan 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.
Técnicas de diseño gráfico
![Page 22: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/22.jpg)
![Page 23: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/23.jpg)
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.
Iconos
![Page 24: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/24.jpg)
Iconos
Diseñar con significado Factores que determinan el significado de un icono:
Contexto Entorno en que 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)
![Page 25: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/25.jpg)
Tras decidir el objeto a incluir en el icono hay que decidir cómo dibujarlo => Nivel de realismo Más detallado o más simplificado Regla: incluir sólo los detalles imprescindibles
Iconos
Cómo diseñar iconos
![Page 26: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/26.jpg)
Partes de un icono Borde Fondo Imagen Etiqueta
Iconos
Cómo diseñar iconos
![Page 27: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/27.jpg)
Evite el uso de muchos colores. Diseñe primero en blanco y negro.
Agregue color después Utilice tonos grises y uno o dos colores
No utilice letras o caracteres alfabéticos dentro del icono. Necesitará versiones para idiomas diferentes.
Evite símbolos de manos o rostros humanos. Recuerde que las metáforas son específicas para una determinada
cultura. No se olvide de la etiqueta de texto que servirá de guía al usuario.
Tooltip
Iconos
Cómo diseñar iconos
![Page 28: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/28.jpg)
Consiste en definir iconos coordinados que representan distintas acciones aplicables a un elemento
Ejemplo: depuración de código
Iconos
El lenguaje icónico
Punto de observación
avanzar retroceder borrar
![Page 29: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/29.jpg)
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.
En tamaño, color, metáfora, nivel de realismo 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
Iconos
Ventajas
![Page 30: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/30.jpg)
Iconos
Ejemplos
bien
mal
Microsoft Word
Zoc
WinCim
![Page 31: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/31.jpg)
Para representar algo utilizamos 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
Elementos de la imagen
![Page 32: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/32.jpg)
Elementos de la imagen
El punto
El 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.
Ayuda a dirigir la visión del observador.
![Page 33: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/33.jpg)
Elementos de la imagen
La línea
Organizan el espacio. Determinan ejes que
delimitan zonas de atracción.
Pueden crear texturas, profundidad y movimiento.
Su dirección y grosor les da expresividad.
![Page 34: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/34.jpg)
Define 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.
Elementos de la imagen
La forma
![Page 35: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/35.jpg)
Elementos de la imagen
La composición
Es la forma de ordenar y organizar los elementos morfológicos de la imagen en el espacio estructural que ofrece el formato
![Page 36: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/36.jpg)
Elementos de la imagen
La luz Contribuye 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.
![Page 37: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/37.jpg)
Elementos de la imagen
El tiempo Se puede simular el paso del tiempo en imágenes fijas,
organizando adecuadamente el espacio: Uso de diferentes intensidades lumínicas, contrastes cromáticos, de
textura, de escala, entre otros. Jerarquización de los elementos representados, ordenándolos según
una cierta secuencia
![Page 38: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/38.jpg)
Elementos de la imagen
El tamaño El 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.
![Page 39: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/39.jpg)
Elementos de la imagen
El formato 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. formatos horizontales son más estáticos, verticales y
circulares son más dinámicos
![Page 40: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/40.jpg)
Elementos de la imagen
El color
Papel 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).
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.
![Page 41: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/41.jpg)
![Page 42: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/42.jpg)
Elementos de la imagen
El color
Papel del color en la imagen: 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 (cantidad de blanco) 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.
![Page 43: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/43.jpg)
Elementos de la imagen
El color
Formas de relación dinámica entre colores: Armonía: crea una composición con variaciones
cromáticas suaves y graduales Se relacionan colores afines
Contraste: yuxtapone colores diferentes entre sí, 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
![Page 44: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/44.jpg)
El 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.
Uso del color
Motivación
![Page 45: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/45.jpg)
Vincular significados prácticos e intuitivos a los colores primarios, rojo, verde, amarillo y azul, que son fáciles de aprender
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
Uso efectivo del color
Simplicidad
![Page 46: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/46.jpg)
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
Uso efectivo del color
Consistencia
![Page 47: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/47.jpg)
Utilizar 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á.
Uso efectivo del color
Consistencia
![Page 48: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/48.jpg)
El 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.
También mejora la efectividad del procesamiento de la información y el rendimiento de la memoria.
Uso efectivo del color
Claridad
![Page 49: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/49.jpg)
Uso efectivo del color
Claridad
La 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
![Page 50: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/50.jpg)
Para usar el color efectivamente, debe conocerse al usuario y su entorno de trabajo.
Es más difícil usar el color efectivamente que no efectivamente.
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.
Uso efectivo del color
Lenguaje de color
![Page 51: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/51.jpg)
Combinar colores para producir efectos positivos requiere el conocimiento de ciertas técnicas, como las combinaciones de color
Uso efectivo del color
Lenguaje de color
Programming the user interface: principles and
examples.Brown y Cunningham
![Page 52: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/52.jpg)
Existen reglas y sugerencias fáciles de seguir. Marcus:
Utilice el color azul para el fondo. Mantenga bajo el número de colores. Evite usar colores adyacentes que difieran solamente en la
cantidad de azul. Utilice colores brillantes para indicar peligro o para llamar la
atención del usuario. Sugerencia: diseñe la interfaz primero en blanco y negro.
Uso efectivo del color
Lenguaje de color
![Page 53: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/53.jpg)
Evite el despliegue simultáneo de colores espectralmente extremos que estén altamente saturados.
Descarte el color azul puro para texto, líneas delgadas y figuras pequeñas.
Evite 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.
Uso efectivo del color
Las reglas de Murch
![Page 54: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/54.jpg)
La 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. Evite 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),
evite hacer distinciones de un sólo color.
Uso efectivo del color
Las reglas de Murch
![Page 55: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/55.jpg)
Uso efectivo del color
Ejemplos
Pixelcentric (http://pixelcentric.net/x-shame/color.html)
Legibilidad
Mac OS X QT 4 / 5,6
Significado del color
Mac OS X
![Page 56: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/56.jpg)
Uso efectivo del color
Ejemplos
Interface Hall of Shame(http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)
IBM RealCD
Uso del color
Webforms
![Page 57: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/57.jpg)
Ejemplos ... varios
![Page 58: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/58.jpg)
La información sencilla reduce la carga de memoria
![Page 59: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/59.jpg)
![Page 60: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/60.jpg)
Sobrecarga informativa
![Page 61: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/61.jpg)
![Page 62: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/62.jpg)
Ejemplos
Información jerarquizada
![Page 63: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/63.jpg)
Ejemplos
Información dispuesta por temas
![Page 64: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/64.jpg)
Los iconos ayudan a identificar los contenidos... a veces
![Page 65: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/65.jpg)
![Page 66: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/66.jpg)
Uso del color para distribuir la información
![Page 67: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/67.jpg)
El contraste de color anima y estimula
![Page 68: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/68.jpg)
![Page 69: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/69.jpg)
![Page 70: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/70.jpg)
Un fondo llamativo dificulta la lectura
![Page 71: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/71.jpg)
![Page 72: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/72.jpg)
Ejemplos
Contraste erróneo, rojo-azul, exige gran esfuerzo de acomodación visual
![Page 73: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/73.jpg)
Ejemplos
Recomendaciones
Facilite la visibilidad - céntrese en el contenido.
Utilice diálogos simples y naturales.
Reduzca la memorización haciendo visible toda la información. Evite desplazamientos. instrucciones de uso visibles
Reduzca la complejidad de las acciones. Predicción y realimentación, evitar ambigüedad en las
representaciones
![Page 74: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/74.jpg)
Ejemplos
Recomendaciones
Marque las opciones de navegación con claridad.
Agrupe los datos lógicamente. Jerarquice la información. Muestre sólo la información necesaria.
Flexibilice la presentación. Personalización
Diseñe siguiendo una “imagen global”. mantener representaciones, estructura gráfica
![Page 75: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/75.jpg)
Ejemplos
Recomendaciones
Mensajes de error en lenguaje natural
Proporcionar ayuda
Permitir que el usuario controle la velocidad
Evaluar uso de maquetas desde el principio
![Page 76: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/76.jpg)
![Page 77: Interacción persona-ordenador El diseño gráfico. Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas](https://reader036.vdocuments.site/reader036/viewer/2022081513/5665b47b1a28abb57c91dc42/html5/thumbnails/77.jpg)
El diseño es importante para la usabilidad de la interfaz.
Un buen diseño reune 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.
Conclusiones