Diseño y evaluación de interfaces visuales: Usuarios comunes

Julio Lillo Jover.

Departamento de Psicología Diferencial y del Trabajo.

Tubo de Rayos catódicos y formación de imágenes (imagen)

1. FORMACIÓN DE IMÁGENES EN MONITORES.
A. PERSISTENCIA VISUAL-1

• Lo experimentado ante un monitor de televisión es resultado de aprovecharse de la persistencia de la respuesta visual.
• Algunos monitores se aprecian con parpadeos ("fliqueo"):
• En áreas grandes.
• De alta claridad.
• Visionadas periféricamente (trabajo en grupo)

1. Formación de imágenes en monitores
A. PERSISTENCIA VISUAL-2

• Puede combatirse el parpadeo:
• Usando áreas poco luminosas/extensas (Fondos azulados).
• Usando un sistema entrelazado.
• Mejor solución: Utilizando una alta tasa de refresco. (Elimina desventajas otras soluciones).

Entrelazado

1. FORMACIÓN DE IMÁGENES EN MONITORES (3)
B. DEFINICION DE IMAGEN-1

• La definición de una imagen es mejor cuanto más pequeños son los contornos que permite apreciar.
• La definición se incrementa con:
• El número de pixeles (D. Referenciable).
• La reducción en el tamaño del monitor (d. Referenciable).
• La independencia en la activación.

1.FORMACIÓN DE IMÁGENES EN MONITORES (4)

Tamaño de pantalla y definición de imagen

• Las grandes pantallas incrementan el número de elementos que pueden presentar
• Para mantener un nivel de resolución debe compensarse el incremento en la superficie con un aumento equivalente en la resolución referenciable.

2. UTILIZACION DE COLORES:1. Nociones de percepción de color

• Las cosas no tienen color. Un mismo objeto puede ser visto con colores diferentes por:
• (1) Diferentes observadores y/ó
• (2) Un mismo observador en condiciones diferentes.

• Generalmente:
• Se experimentan colores ante estimulaciones energéticamente desequilibradas.

2. UTILIZACION DE COLORES:2. Funcionalidad colores primarios.

• Todos los monitores producen colores mezclando la luz de tres tipos de elementos:
• A. De longitud de onda larga ("rojizos").
• B. De longitud de onda media ("verdosos").
• C. De longitud de onda corta ("azulados").

Tipos de Pixeles: delta y trinitrón

2. UTILIZACION DE COLORES: Primario Azul Monitor convencional

2. UTILIZACION DE COLORES: Primario Verde Monitor convencional

2. UTILIZACION DE COLORES: Primario Rojo Monitor convencional

2. UTILIZACION DE COLORES: Principios mezcla aditiva

• Ningún monitor es capaz de presentar todos los colores percibibles.
• Distintos monitores utilizan distintos primarios.
• Es posible, pero no sencillo, especificar el rango de colores que pueden producirse mediante un monitor concreto.

Mezclas de colores

Amarillo/morado

Blanco

2. UTILIZACION DE COLORES: Niveles

• Los colores se forman en función del nivel de activación de los primarios.
• La finura con la que se puede regular la activación de los primarios es variable.
• Cuantos más bits se utilicen en la regulación, mas adecuados serán los colores obtenidos.

1 Pixel, 2 niveles, 1 bit

1 Pixel, 8 niveles, 2 bit

Niveles color, 1, 2, 3 y 4 bits

Niveles color, 5, 6, 7, 8 bits

Oposición color-definición: Dithering

• La tarjeta que controla el monitor es limitada (1 Mb; 2 Mb; etc.)
• Mucha resolución espacial implica mucha información.
• Mucha resolución cromática implica mucha información.
• El dithering es un promediado cromático en el espacio.

Dithering

Ajustes y observaciones 1

• Utilización de opciones Windows para ver la contraposición resolución-color.
• Visionado de una misma página web a 4 niveles de profundidad color (simulación transmisión-degradación cromática).

Colores seguros. Conjunto de 216 no alterados (GIF)

Escala RGB. Ejercicio

• Variando sólo los valores RGB y sin utilizar otra información intentar confeccionar un verde-amarillento en el que:
• La experiencia de verde y amarillo estén compensadas

Escala Matiz, Saturación, Luminosidad (Brillo/claridad). Ejercicios (Word).

• Definir que se entiende por Matiz, Saturación y Luminosidad.
• Evaluación de la escala de matiz. Preparese en Word tabla de recogida datos y evaluese matiz experimentado en base a dos categorías

Escala Matiz

• ¿Es lineal la variación especificada en la escala matiz respecto a los cambios percibidos?.
• Ejercicio 2. Localización mejores ejemplos rojo/verde/azul/amarillo/naranja.(Usese saturación máxima; Luminosidad 120).

Escala Matiz

• ¿Varia el matiz percibido al variar la luminosidad. Usar mejores ejemplos rojo/verde/azul/amarillo/naranja. Comparar su apariencia manteniendo constante la saturación. Luminancias a comparar 120; 60 y 200. Dos muestras simultaneas en pantalla.

Escala de saturación

• ¿Se perciben con la misma saturación aquellos estímulos idénticos en la escala de saturación?.
• Probar saturación máxima y diferente matiz.
• Probar saturación máxima y luminosidades medias y extremas.

Conclusiones (dolorosas) sobre el uso de colores.

• 1. Ninguna de las dos escalas más comunes (RGB) son psicologicamente adecuadas.
• 2. La mejor selección visual se basa en el uso directo de las superficies de colores y la regla de claridad.
• 3. Los colores seleccionados pueden sufrir serias transformaciones al cambiar la profundidad de colores y/o el monitor.

Conclusiones (no tan dolorosas) sobre el uso de colores-2

• Los sistemas más precisos y adecuados para referenciar colores no estan al alcance del usuario medio.
• Los usuarios medios no requieren excesiva precisión en el manejo cromático cotidiano.
• PASAR A DOCUMENTO WORD SOBRE EL USO DE COLORES.

CODIFICACIÓN, FORMATEO Y DISEÑO, MEDIANTE EL USO DE COLORES: PUNTOS CLAVE (Cita)

Recomendaciones de carácter general:

1. Diseñe primero en monocromático.

Basesé en el modelo del usuario respecto a como se utiliza el color en el mundo real

Formato

1. Escoja un fondo oscuro, tal y como puede ser un azul profundo, y colores brillantes para los primeros planos.
2. Relate áreas separadas utilizando un matiz común; por ejemplo mediante un fondo común o texto en color.
3. Realce regiones mediante el uso de colores que contrasten con el fondo en matiz, saturación y luminancia.
4. Evite resaltar demasiados grupos al mismo tiempo. Restrinja el resaltado a uno o dos ítems clave.
5. Siempre que sea importante la legibilidad (por ejemplo, con las combinaciones texto fondo), escoja un color de fondo que guarde como mínimo una relación de contraste 3.:1 con el fondo.

Codificación

1. Pregúntese hasta que punto un código de colores es la mejor forma para representar la información. Puesto que existen numerosos métodos para codificar la información: Es el basado en el color el mejor para una aplicación concreta.
2. Siga los siguientes 6 principios: Los colores escogidos deben ser discriminables, detectables, perceptivamente semejantes, significativos, y estéticamente agradables.

1. Distinga entre la información que se desea codificar como: (1) Nombres o categorías. (2) Información cuantitativa y (3) Categorías o nombres ordenados.
2. Para nombres o categorías utilice grandes diferencias en el matiz. Esto enfatiza la percepción categorial.
3. Para categorías o nombres ordenados : Utilícense grandes diferencias en el matiz cuando no sea importante mantener el orden de los rangos en los datos. En caso contrario siga las recomendaciones correspondientes a la codificación de la información cuantitativa.
4. Información Cuantitativa: Use pequeñas diferencias en el matiz o un código basado en la saturación o en la luminancia (no los dos al mismo tiempo). Estas escalas enfatizan la relación existente entre los diferentes niveles de la información.
5. Excepto para la información cuantitativa, restrinja el número de colores a una media docena. Si es necesario codificar más estados que estos, considérese el uso de una codificación multidimensional

Estética.

1. Los indicadores visuales deben ser, además de funcionales, estéticamente agradables.
2. Para conseguir pantallas agradables siga los dos principios de la armonía de colores: Los colores complementarios son armoniosos; Armonía =orden.

Factores especiales.

1. Evite utilizar azules saturados para los detalles finos (¿¿??).
2. Evite utilizar en conjunción rojo y azul.

CUESTIONARIO DE EVALUACIÓN DE LAS CONDICIONES DE TRABAJO. SEGUNDA PARTE VERSIÓN SIMPLIFICADA.

Entorno ambiental.

El habitáculo de trabajo debe proporcionar un confort ambiental suficiente en términos de temperatura, humedad, ausencia de ruidos molestos, etc. Sin duda, las condiciones de iluminación y la posible presencia de reflejos forman una parte esencial de él. Pero, como estos aspectos están íntimamente relacionados con la visibilidad de lo presentado en pantalla (apartado 2.C), los trataremos con posterioridad.

Orientaciones dimensionales específicas.

1. ¿Es ajustable la superficie de trabajo ? Si No

En caso afirmativo

¿Son los usuarios conscientes de ello?. Si No

2. ¿Está la cara inferior de la superficie de trabajo libre de obstrucciones Si No

3. ¿Su altura está entre 72-75 cm?. Si No

4. ¿Es estable?. Si No

5. Caso de utilizarse ratón, ¿permite la superficie de trabajo moverlo con comodidad?. SI, NO

6. ¿Hay espacio suficiente para contener los objetos personales del usuario y para realizar la actividad laboral?. Si No

7. ¿Hay 17-20 cm entre su cara inferior y el asiento de la silla?. Si No

8. ¿Se ha conseguido que sea posible la visión simultánea del teclado, la pantalla,

los documentos, etc. (no abigarramiento). Si No

9.En caso de que la superficie de trabajo tenga cajones, ¿pueden usarse sin afectar

su estabilidad?. Si No

10. ¿Hay aire acondicionado en el habitáculo de trabajo?. Si No

11. ¿Se ha evitado la presencia de corrientes de aire excesivas? Si No

12. ¿Se mantiene la temperatura próxima a 18-21 grados (invierno) o entre 21-24

grados centígrados (verano). Si No

13. ¿ Está el nivel de humedad entre el 45 y el 55 %?. Si No

14. ¿Está el nivel de ruido por debajo de 55 dB (A) Si No

2. VISIBILIDAD DE LA PANTALLA Y MULTIMEDIA.

Las imágenes presentadas por el monitor son el medio más común mediante el cual el ordenador transmite información. Tal transmisión se facilita cuando las imágenes son nítidas (definición o resolución de imagen), estables (ausencia de parpadeos u oscilaciones), y su contemplación no se ve dificultada por ningún tipo de reflejo o deslumbramiento.

El desarrollo de las aplicaciones multimedia hacen cada vez más importante la utilización de estimulación auditiva en conjunción con la visual. Debe evaluarse la calidad con la que se puede utilizarse esta conjunción estimular

2.A. Definición de imagen y visibilidad perceptiva.

Orientaciones dimensionales específicas.

1. ¿Conoce el usuario la posibilidad de mejorar la visibilidad de los caracteres actuando

sobre los controles de brillo-contraste. Si No

2. ¿Son los caracteres identificables a una distancia tres veces superior a la utilizada

normalmente?. Si No

3. ¿Se aprecian los contornos en forma nítida y carente de borrosidad?. Si No

4. ¿Carecen los caracteres de "aureola" o difuminación de contornos Si No

En caso negativo:

3.1. ¿Puede reducirse-eliminarse? manipulando los controles de contraste-brillo. Si No

5. ¿La resolución referenciable es suficiente para presentar los caracteres al tamaño deseado? Si No

6. Para material escrito: ¿Se utiliza una fuente (p.ej. times new roman) que fomente la legibilidad.

     Si No

7. Para iconos: ¿El tipo de dibujo empleado permite diferenciar identificar lo representado en ellos?. Si No

8. Funciona adecuadamente el resaltado selectivo de partes de la pantalla. Si No

9. ¿Pertenecen a categorías cromáticas básicas diferentes los colores utilizados para segregar partes distintas de la pantalla?. Si No

10. ¿Permiten los distintos colores utilizados como fondo una identificación-reconocimiento cómoda de las figuras y caracteres presentadas sobre ellos?. Si No

11. ¿Son semejantes los niveles de identificación figura-fondo permitidos por los distintos fondos de colores. Si No

12. Caso de necesitarlo. ¿Utiliza el trabajador una ayuda óptica adecuada?. Si No

2.B. Estabilidad de imagen.

Aunque nuestra impresión perceptiva sea la de que toda la superficie de la pantalla emite energía luminosa al mismo tiempo, la realidad física es que en un instante concreto sólo lo hace una porción muy limitada de ella porqué, de hecho, cada una de las imágenes presentadas se crean activando sucesivamente las distintas líneas horizontales en las que pueden descomponerse. Cuanto más rápido sea este trazado de líneas, cuantas más veces por segundo se activen todas las líneas que componen una imagen (tasa de refresco), más difícil será que se aprecie parpadeante el fondo de la pantalla.

Cuando la tasa de refresco es baja (inferior a 75 Hz), la probabilidades de que se aprecie parpadeo se reducen: (1) Con fondos de baja luminancia. (2) Con estimulaciones de dimensiones reducidas y (3) Utilizando un sistema entrelazado. Por el contrario, las probabilidades se incrementan cuando la estimulación se proyecta en la periferia de la mirada (como sucede con la energía procedente de los monitores utilizados por otros trabajadores).

Aunque un sistema entrelazado reduce las probabilidades de que se experimente fluctuación y, por ello, halla sido utilizado en muchos monitores baratos; Aumenta el riesgo de que ciertas partes de la pantalla se vean como si estuviesen sometidas a vibración (jitter). Este es el motivo por el que este sistema debe evitarse. En esta misma línea, aunque los monitores pequeños y los fondos oscuros reduzcan también el riesgo de que se aprecie parpadeo, pueden conllevar ciertas desventajas (respectivamente, el abigarramiento de la imagen y la mayor visibilidad de los reflejos) que hacen recomendable la utilización de tasas de refresco altas siempre que sea posible.

Además del propio monitor, existe una posible fuente adicional de fluctuación en el entorno de trabajo: los tubos fluorescentes (al final de su vida operativa o mal conectados electrónicamente). Deben tomarse medidas para eliminar esta fuente de malestar.

Orientaciones dimensionales específicas.

1. ¿Es el monitor de tipo no entrelazado y tiene una tasa de refresco igual o superior a 75 Hz? Si No

2. Si la tasa de refresco es inferior a 75 Hz. ¿Puede incrementarse reduciendo el número de líneas

por imagen sin que se resienta la calidad de esta?. Si No

3. ¿Esta la pantalla libre de parpadeo?. Si No

En caso negativo:

3.1. ¿Puede eliminarse utilizando fondos más oscuros? Si No

3.2. ¿Puede eliminarse reduciendo el tamaño de los fondos más claros?. Si No

4. ¿Se ha conseguido evitar que el trabajador aprecie parpadeo procedente de otros ordenadores

próximos?. Si No

En caso de respuesta negativa:

4.1. Puede evitarse variando la orientación relativa trabajador-ordenador próximo?. Si No

5. ¿Se perciben los fluorescentes como carentes de oscilaciones en su intensidad?. Si No

2.D. Multimedia y nuevos desarrollos.

Dos son los aspectos que más diferencian el trabajo informático realizado en la actualidad respecto del habitual al principio de esta década: (1) Cada vez se utilizan más recursos gráficos y auditivos. (2) Cada vez es mayor la comunicación entre ordenadores (internet, teleconferencias, etc.). Debe evaluarse la efectividad con que se utilizan estas dos nuevas posibilidades informáticas.

Orientaciones dimensionales específicas

1. ¿La normal actividad laboral implica el uso de recursos multimedia?. Si No

1.1.¿Las imágenes estáticas (fotografías, dibujos, etc.) tienen una calidad (nitidez)

adecuada?. Si No

1.2. ¿Las imágenes estáticas (fotografías, dibujos, etc.) tienen un contraste adecuado.

Si No

1.3.¿Las imágenes dinámicas (fotografías, dibujos, etc.) tienen una calidad (nitidez) adecuada?

Si No

.1.4. ¿Las imágenes dinámicas (fotografías, dibujos, etc.) tienen un contraste adecuado?.

Si No

1.5. ¿Es adecuado el tamaño de la ventana de movimiento?. Si No

2. ¿Se utiliza estimulación auditiva?. Si No

2.1. ¿Con la intensidad adecuada? Si No

2.2. ¿Con la nitidez-definición adecuada?. Si No

3. ¿Se contacta con otros ordenadores (internet-teleconferencia)?. Si No

3.1. ¿La conexión es rápida?. Si No

3.2. ¿Es suficiente el número de conexiones posibles?. Si No

3.3. ¿Es adecuada la forma en que se transmiten (Envio-recepción). programas?. Si No

3. USABILIDAD DE LA PROGRAMACIÓN.

El término "usabilidad" es traducción del inglés "usability" y se utiliza para referirse a la facilidad con la que un trabajador interactúa con un software informático. Aunque tal interacción se facilita cuando son adecuados los aspectos contemplados en los apartados 1 ("Ubicación del trabajo") y 2 ("Visibilidad de la pantalla y multimedia"), un buen nivel en ambos puede coexistir con una usuabilidad muy reducida. Más concretamente, el trabajador puede tener la mejor de las posturas al contemplar nítidos caracteres en pantalla y no desempeñarse adecuadamente porque no comprende lo que ve, no sabe como responder, teme hacerlo, etc.

3.A. Características generales.

¿Qué es lo que diferencia una aplicación usuable de otra que no lo es?. Expresándolo en términos globales, puede decirse que la usabilidad se incrementa en tanto en cuanto el trabajador es capaz de elaborar un adecuado modelo cognitivo sobre las posibilidades y forma de interactuar con el programa (qué es lo que se puede hacer y cómo). Tal modelo fomentará la interacción por dos motivos: (1) Al proporcionar una estructura lógica respecto a cómo se hacen las cosas, incrementará la exploración-descubrimiento de las posibilidades del sistema y (2) el carácter reversible de los errores reducirá el temor del usuario a sus consecuencias y, por tanto, la animará a explorar-descubrir nuevas características del sistema.

¿Qué factores se relacionan con la construcción de un modelo cognitivo?. El primero es la facilidad con la que se aprende a utilizar (su "aprendibilidad" en la jerga informática al uso), debiendo diferenciarse al respecto la aprendibilidad del manejo básico y la que tiene que ver con las características más avanzadas del programa. El segundo factor, muy relacionado con el anterior, se refiere a la capacidad del sistema para proporcionar ayuda "sobre la marcha" ("on line") y la facilidad con la se puede "salir de"/deshacer los efectos de los errores cometidos. El tercer factor es la flexibilidad del sistema para amoldarse a las singularidades de sus usuarios y, por ejemplo, presentarse en forma diferente para el novel y el experto. Para terminar, y puesto que es importante a la hora de generar una primera impresión en el usuario, este cuestionario evalúa también la facilidad con la que se instala un sistema.

Orientaciones dimensionales específicas

1. En general, ¿ Puede calificarse como positiva a la interacción con el programa? Si No

1.1. En general, ¿el programa permite hacer lo que se desea?. Si No

1.2. En general, ¿ funciona con la suficiente rapidez?. Si No

1.3. En general, ¿es flexible en su funcionamiento (posibilita distintas formas de conseguir un mismo resultado)?. Si No

1.4. En general, ¿fomenta la exploración de sus posibilidades y modos de funcionamiento?. Si No

2. ¿Es fácil la instalación del programa?. Si No

2.1. ¿Es rápida?.

2.2. ¿Es fácilmente adaptable a distintos usuarios? Si No

2.3. ¿Proporciona información al tiempo que se realiza?. Si No

2.4. ¿Proporciona explicaciones comprensibles sobre los problemas que puedan surgir?. Si No

3. En general, ¿es fácil aprender a manejar el programa?. Si No

3.1. ¿ Es fácil aprender sus aspectos básicos?. Si No

3.2. ¿ Es fácil aprender sus características avanzadas?. Si No

3.3. ¿Se requiere relativamente poco tiempo para aprender a usarlo?. Si No

3.4. ¿Se fomenta el descubrimiento por ensayo y error de sus características?. Si No

3.5. ¿Es fácil recordar cómo se hacen las cosas?. Si No

3.6. ¿Resulta lógica la forma en que se hacen las cosas?. Si No

3.6.1. ¿ Es reducido el número de pasos requeridos para efectuar una tarea?. Si No

3.6.2. ¿Siguen un orden lógico los pasos requeridos para completar una tarea?. Si No

3.6.3. ¿Las tareas parecidas se efectúan en forma similar?. Si No

3.6.4. ¿Cuando una tarea implica distintos pasos se informa de la realización con éxito de cada uno de ellos?. Si No

4. Si el programa incorpora algún tutorial, ¿es útil?. Si No

4.1. ¿Presenta la información bien estructurada?. Si No

4.2. ¿Es fácil pasar de un tema a otro y desplazarse entre los

distintos aspectos de un tema?. Si No

4.3. ¿Es conciso y específico en sus contenidos?. Si No

4.4 ¿Facilita que el usuario aprenda experimentando por si mismo Si No

3.B. Feedback y visibilidad cognitiva

El apartado anterior se centró en los factores más importantes para que el trabajador desarrollase un adecuado modelo mental de las características funcionales del software. Este se ocupa de los que tienen que ver con su normal utilización. Esto es, aquí se consideran los factores que tienen que ver con lo en la nomenclatura técnica se denomina visibilidad cognitiva.

La visibilidad es alta cuando el programa presenta a sus usuarios información directamente interpretable sobre: (1) Las acciones que se pueden realizar en un momento dado. (2) La forma en que pueden realizarse. (3) El hecho en sí de que se halla realizado una acción y (4) sus consecuencias. Estos dos últimos aspectos se encuadran dentro de lo que tradicionalmente se considera como feedback o retroalimentación.

Orientaciones dimensionales específicas.

1. En general, ¿Se tiene la impresión de que las pantallas son adecuadamente informativas (buena visibilidad cognitiva) respecto a las posibilidades del programa en un momento dado?. Si No

1.1. ¿Es adecuada la cantidad de información presentada?. Si No

1.1.¿Es adecuada la forma en que se presenta la información?. Si No

1.2. Cuando las tareas implican el uso de pantallas (p.ej. cuando se accede a ellas mediante menús) en secuencia: ¿Es fácil navegar entre ellas?. Si No

2. En general, ¿El ordenador informa en forma adecuada respecto a lo que hace?. Si No

2.1. ¿Se utilizan cursores animados para indicar que el sistema es operativo?. Si No

2.2. ¿Es soportable La duración de la demora entre operaciones?. Si No

2.3. ¿Puede personalizarse la cantidad y el tipo de feedback proporcionado al usuario?. Si No

2.4. ¿Se evita la utilización de "terminología de ordenadores"? Si No

3. En general, ¿Puede calificarse al sistema como consistente?. Si No

3.1. ¿La terminología usada es consistente?. (mismos vocablos, mismos significados)?. Si No

3.2. ¿Los grafísmos se usan en forma consistente (relación símbolo-información; posición de presentación de los símbolos). Si No

4. En general, ¿ son adecuados los mensajes de error?. Si No

4.1. ¿Sirven para clarificar el problema?. Si No

4.2. ¿Indican lo que debe hacerse?. Si No

4.3. ¿Utilizan un lenguaje sencillo y comprensible?. Si No

4.4. ¿Se presentan en una posición adecuada de la pantalla?. Si No

5. Armonía

   Regreso al programa del curso sobre aulas virtuales

****