contenidos - cd universidad de...

1

Martínez & Cueva Interacción Persona-Ordenador

Contenidos1. Interacción Hombre-Máquina2. El Factor Humano3. Diseño Gráfico4. Estilos de Interacción5. Metáforas6. Internacionalización7. Soporte al Usuario8. Usabilidad Web9. Guías y Estándares

10. Accesibilidad 11. Trabajo cooperativo 12. Evaluación


3. Diseño Gráficon Introducción

n Organización perceptual de los objetos

n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico

2


Introducción

El objetivo del diseñador es presentar la información de un modo fácil, inteligible y manipulable para el usuario, acercándose a las necesidades del cliente y consiguiendo un modo de utilización más intuitivo.

Es la pieza clave entre el tratamiento de la información y su desarrollo en la pantalla del ordenador

Es fundamental en primer lugar conocer las características del usuario al que va dirigido el producto

- Conocer- Volumen de usuarios- Perfil de los usuarios

- Desarrollar un prototipo (probar con distintas configuraciones,monitores,...)

Diseño Gráfico


Introducción(II)El diseñador gráfico ha de proponer la organización de los elementos en la pantalla y entre pantallas, como

Tipografía

El color

Uso de gráficos e ilustraciones

Animaciones

Sistema de navegación

Debe presentar las pantallas optimizadas atendiendo a unos criterios ergonómicos, y cuidar la calidad de los mensajes y el lenguaje visual

Diseño Gráfico

3


Contenidosn Introducción


n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico


Organización Perceptual de ObjetosLa distribución de los elementos en la interfaz es una decisión del diseñador.

Es posible ayudar a la distribución acudiendo a los procesos psicológicos que subyacen a la percepción organizada de escenas.

Leyes de Agrupación que dan como resultado que varios elementos de la escena se perciban conjuntamente.

Estas leyes son el punto de la organización perceptual que más y mejor puede ser empleado para el diseño de interfaces

Diseño Gráfico

4


Organización Perceptual de Objetos (II)

Principios de Agrupación:Proximidad. Dos objetos que están uno cerca de otro y alejados de los otros tienden a ser percibidos conjuntamente.

Similitud. Objetos que comparten alguna característica perceptual tienden a ser percibidos conjuntamente.

Destino común. Dos elementos que se mueven en la misma dirección se percibirán agrupados.

Buena continuación. Elementos que pueden ser vistos como buenas continuaciones del otro tienden a ser percibidos conjuntamente.

Diseño Gráfico


Organización Perceptual de Objetos (III)

Principios de Agrupación:Cierre. Elementos formando una figura cerrada tienden a ser percibidos como agrupados.

Región común. Objetos colocados dentro de una misma región cerrada se percibirán agrupados

Conexión entre elementos. Objetos que están conectados por otros elementos tienden a ser agrupados conjuntamente.

Sincronía. Elementos visuales que ocurren al mismo tiempo tienden a ser vistos como un conjunto

Diseño Gráfico

5


Organización Perceptual de Objetos (IV)

Por lo general, cuantos más principios se apliquen coherentemente en una agrupación concreta, más facilidad habrá de que el usuario la perciba, pero si varios elementos operan de forma opuesta deberán ser analizados con mayor detenimiento.

Diseño Gráfico


Organización Perceptual de Objetos (V)

Según Wickens la organización perceptual de la información debe estar supeditada a cómo el usuario lleve a cabo la tarea sobre la misma

Diseño Gráfico

6




n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico


TextoDetermina la correcta legibilidad de la información en la pantalla y tiene una intervención directa en la visión del usuario.

En la legibilidad intervienen:

Tipo

Color

Tamaño

Diseño Gráfico

7


Texto - Fuente Tipográfica

Las fuentes reflejan el carácter del documento:

Helvética -> transparencia y neutralidad

Times-> clasicismo y tradición

No deben emplearse muchas fuentes distintas en una página (máx. 3). Ejemplo

Para la selección de la fuente principal

Tener en cuenta aspectos funcionales(niños, ...)

Debe funcionar sin espacio adicional entre líneas

Diseño Gráfico


Texto - Recomendaciones (I)El texto debe ser escueto y claro, evitando redundancias y ambigüedades.

Nunca de deben finalizar titulares con .

No se debe emplear subrayado para destacar. Mejor negrita o cursiva. Tampoco abusar de sombras o huecos.

El tamaño de 12 puntos es el valor más pequeño en que resultan legibles cómodamente muchas fuentes.

El texto en minúsculas es más fácil de leer que en mayúsculas

Diseño Gráfico

8


Texto - Recomendaciones (II)Aconsejable un tipo de letra sencillo en el que se de una relación óptima entre el grueso de los trazos y la altura de los mismos. Ejemplo

Ejemplo de escritura Ejemplo de Escritura

El espacio entre líneas de texto debe ser mayor (dos o tres puntos) que el espacio entre palabras.

Líneas largas necesitan más espacio de separación que las líneas más cortas.

Alinear siempre el texto a la izquierda o en su defecto justificarlo. Es más fácil su lectura.

Diseño Gráfico


Texto - Recomendaciones (III)El texto enlazado de los documentos debe aparecer en un color que lo resalte: Ejemplo

Azul, para enlaces que aún no han sido usados

Verde, para enlaces en ejecución

Violeta o sepia, para enlaces ya visitados con anterioridad

Hay que controlar la cantidad de texto

La lectura en la pantalla de ordenador es un 25% más lenta.

A los usuarios no les gusta hacer Scroll

Ejemplo

Diseño Gráfico

9


Texto - Recomendaciones (IV)

Contraste

Un contraste acentuado implica llamada de atención pero si es muy acentuado puede disminuir la legibilidad

Por lo general es preferible un contraste moderado en el que se logre destacar la letra del fondo

Los textos sobre fondos obscuros no deben utilizarse salvo que el texto sea corto o pertenezca a un titular.

Diseño Gráfico




n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico

10


ColorEs un factor clave para los elementos que construyen el diseño. Cuando se añade color a un diseño, casi siempre se convierte en el principal punto de atención, es el que más afecta inmediatamente a nuestra memoria.

Permite resaltar informaciones relevantes pero no se puede emplear sin criterios de comunicación.

En general, los colores claros quedan bien integrados si se unen con colores obscuros ya que hay buen contraste. En determinados casos pueden combinar con tonos también claros, excepto si son demasiado parecidos como el azul y el verde.

Diseño Gráfico


Color (II)

El área ocupada por un color entraña un mensaje:

Área con color obscuro. Efecto de pesadez y seriedad.

Área con color claro. Alegría y sencillez

Grandes zonas de color poco destacable, sean obscuras o claras. Aburrimiento.

Diseño Gráfico

11


Color (III)El ojo humano contiene bastones y conos sensibles a la luz.

Los conos están especializados en el color. Sin ellos se vería en blanco y negro.

Hay conos para los colores rojo, verde y azul y a partir de su combinación se obtienen el resto de colores.

Los defectos en la visualización del color provienen de carencias en algunos de los tres tipos de conos.

Afectan al 8% de los hombres y al 0.5% de las mujeres

Diseño Gráfico


Color (IV)

Todos Sin azul Sin rojo Sin verde

Accesibilidad

SalirAyudaAdelante

Sin rojo

Sin verde

Sin azul

Diseño Gráfico

12


Color (V)Existen procesos oponentes: Rojo-Verde, Azul-Amarillo que deben ser evitados Ejemplo1 Ejemplo2

Cuando se mira fijamente,durante un tiempo, un color como el rojo se producen imágenes verdes.

Si se ponen letras en color azul sobre un fondo amarillo puede captarse la atención del usuario pero los posefectos del color puede hacer que se dejen de ver las letras en la pantalla.

Diseño Gráfico


Color (VI)

Guías para la selección del color en las interfaces

Elegir combinaciones de colores compatibles. Evitar rojo-verde, azul-amarillo,verde-azul y rojo-azul

Usar contrastes altos de color entre la letra y el fondo

Limitar el número de colores a 4 para los novatos y a 7 para los expertos

Usar color blanco para la información periférica

Usar códigos redundantes (formas además de colores)

Diseño Gráfico

13




n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico


Imágenes y GráficosCuando una persona lee un texto accede al conocimiento que tiene almacenado en la memoria semántica a través de la transformación fonológica de las palabras.

También se puede acceder a la información almacenada en la memoria mediante imágenes. De hecho, los iconos permiten un acceso directo y más rápido a la información semántica del objeto

El empleo de un icono para representar un objeto sencillo es mejor que la inclusión del icono más la palabra correspondiente.

Para la representación de acciones complejas es mejor ambas representaciones: icono y texto. Ej. visita guiada por museos

Los iconos han de ser fácilmente distinguibles unos de otros

Deben presentarse en las mismas posiciones a lo largo de todas las pantallas.

Diseño Gráfico

14


Imágenes y Gráficos (II)

Las imágenes han de adecuarse a la transmisión de un contenido determinado.

Es fundamental que la función o mensaje que represente sea inteligible con facilidad

Si se emplean imágenes desconocidas (o poco claras) se dificulta el entendimiento y obligan a la memorización de sus funciones, provocando cansancio visual y quizá abandono.

Diseño Gráfico


Imágenes y Gráficos (III)Si queremos destacar un elemento concreto de una

imagen sobre el resto, lo colocaremos cercano al foco. Los aspectos poco relevantes se ubicarán en el punto de fuga.

Como nosotros leemos de izquierda a derecha y de arriba hacia abajo, percibimos mucha mayor sensación de velocidad en el movimiento en esas direcciones que con las opuestas.

Diseño Gráfico

15




n Texto

n Color

n Gráficos

n Navegación

Diseño Gráfico


Navegación

Desorientación del Usuario

“Pérdida en el Hiperespacio”

La navegación no es una tarea en si misma, sino un medio para realizar la tarea, con lo que la carga cognitiva asociada debería ser lo más baja posible.

A veces son necesarios una gran cantidad de comandos para realizar la navegación

Diseño Gráfico

16


Navegación (II)Al principio el usuario no sabe con exactitud donde quiere ir o lo que se va a encontrar, por lo que los saltos entre páginas deben ser sutiles y la nueva interfaz debe mantener algún tipo de relación visual con la anterior

Tratar de colocar los controles de las páginas en lugares fácilmente accesibles y visibles. Usar iconos y botones reconocibles.

Evitar fondos llamativos o que creen contrastes agresivos salvo para segmentos de pantalla muy concretos.

Tonos claros e inocuos se utilizan en documentos con mucho texto para facilitar la lectura o para páginas compuestas fundamentalmente por iconos.

Los fondos con mosaicos o imágenes ocupan mucha memoria por lo que deben reducirse.

Calibración correcta de los tiempos de respuesta.

Diseño Gráfico


Navegación (II)Se pueden emplear una serie de técnicas o herramientas que ayuden en la navegación:

Visitas Guiadas

Mapas

Mecanismo de vuelta atrás

Recuperación de la información

Metáforas

Diseño Gráfico

17


Visitas GuiadasUna visita guiada es un camino lineal a través del espacio de información que puede utilizarse para ayudar a los usuarios a familiarizarse con los contenidos del hipertexto.

El usuario puede abandonar la visita cuando quiera y continuar navegando por el hipertexto. También puede retomarla dónde la había dejado.

Diseño Gráfico


MapasSe basan en la metáfora del mapa turístico

Proporcionan una representación esquemática de la estructura de la página, indicando los principales conceptos incluidos en el espacio de información y las interrelaciones existentes entre ellos.

Pueden presentarse en forma de tablas de contenidos bidimensionales o tridimensionales o bien representaciones más acordes con el contexto.http://www.cnacgp.fr/pompidou/home.nsf/docs/fhome

Diseño Gráfico

18


Mapas (II)En los mapas suelen incluirse huellas (footprints) que indican tanto la posición actual del usuario como las previas.

Es apropiado también que ofrezcan marcas (landmarks), con las que se señalan nodos realmente interesantes.

Diseño Gráfico


Mecanismo Vuelta AtrásEs aconsejable que el usuario siempre pueda volver al nodo anterior.

Puede compararse con un salvavidas de forma que el usuario siempre puede ir donde quiera teniendo la certeza de que siempre le será posible retornar a un lugar conocido.

Diseño Gráfico

19


Recuperación de InformaciónEs importante proporcionar mecanismos de búsqueda que complementen la navegación ya que en muchos casos el usuario no quiere navegar; únicamente quiere acceder a una información concreta directamente.

Diseño Gráfico


Bibliografía Diseño Gráfico

Designing Visual InterfacesK. Mullet, D. Sano. Prentice–Hall, 1995.

Normas Básicas en el Diseño de una Interfaz Gráfica de UsuarioM. Aguiar y K. Aguiar. Novática, nº 121, 1996.

The Design of Sites: Patterns, Principles and Processes forCrafting a Customer-Centered Web ExperienceK. Douglas. Addison-Wesley, 2002

Diseño Gráfico

contenidos - cd universidad de...

Documents