Tentándole (interacción)

Hace cinco meses me compré un GPS de última generación de SysOnChip y el caso es que después de un tiempo usándolo no sé donde pudo acabar el manual del mismo (posiblemente en la papelera y como ésta no es precisamente de reciclaje…) Nada intranscedente ya que su funcionamiento no es en absoluto complejo: una entrada para conectar el cable a corriente, un botón de encedido y apagado y tres led indicadores respectivamente de que está conectado y funcionando el bluetooth, de que hay una señal fija de recepción del GPS y del estado de carga de la batería.

El problema viene cuando intento interpretar que significan exactamente las luces del led correspondiente a la batería. Hay tres posibles estados:

1. Led apagado
2. Led encendido en color verde
3. Led en color rojo

¿Qué me indica cada estado?

Bien, si he de hacer caso a la experiencia y los conocimientos que extraigo del mundo y me acuerdo de un semáforo de tráfico que es lo primero que se me viene a la cabeza o acudo a mis convenciones de occidental, la luz roja me suena a algo así como a señal, aviso, peligro o detención mientras que la verde, puede significar adelante, bien, correcto o camino libre.

Y ahí viene mi confusión… de repente, se me enciende la luz verde ¿Qué significa esto cuando el aparato está funcionando normalmente? ¿Todo va bien no? Me pregunto confuso porque el conocimiento que tengo en base a mi experiencia me dice que la luz verde indica que no hay problemas, que adelante… y sin aviso, el GPS se apaga y mi PDA deja de recibir la señal en medio de la carretera ¿?

Por alguna extraña y oscura razón, los diseñadores del aparato han decidido que la luz verde, lejos de indicar por ejemplo, funcionamiento sin problemas o batería cargada al cien por cien como sucede cuando termino de cargar mi cámara digital, es señal indicativa de que debo recargar inmediatamente el aparato o conectarlo a una fuente de electricidad.

Por otro lado, el led se pondrá de color rojo sólo cuando lo esté recargando. ¿? Y sigue la confusión… ¿cómo sé entonces cuando está cargada al cien por cien la batería? ¿? Si observo mi PDA veo que los posibles estados que tiene el led de la batería son:

1. led apagado: el aparato está desconectado de la corriente
2. led naranja parpadeando: signifca que la batería está cargando
3. led naranja fijo: la batería ha terminado de cargar

En este punto, dado que no tengo el manual para aclararme, vencido por la curiosidad acudo a Google…

y encuentro la respuesta.

ah!!! resulta que:

1. Led encendido en color verde: batería escasa, conecte el aparato a corriente inmediatamente o te quedas sin señal ¿¿?? ¡¡!!
2. Led en color rojo y fijo: el dispositivo está conectado a corriente y cargando ¿¿?? ¡¡!!
3. led apagado: la batería está al cien por cien y se apaga la luz ¿¿?? ¡¡!! ni una señal de que la carga ha finalizado correctamente, de que todo está bien, nada, nada de retroalimentación al usuario, ni ninguna confirmación de que el proceso ha finalizado

En definitiva, para los diseñadores su modelo mental estará muy claro pero desde luego para mí, usuario, me ha costado saber cómo podía tener la certeza de que la batería estaba cargada al cien por cien y no cargármela por dejar el aparato tiempo de más conectado a la corriente. Supongo que no se me olvidará a partir de ahora pero desde luego, el código que han elegido resulta de todo, menos intuitivo.

¿De verdad han usado alguna vez este aparato los diseñadores?

No respetar las convenciones tiene su coste. En el diseño de objetos y en la Web.

Ésta es una foto de un curioso cuchillo que anda por casa, en este caso, se invierte la convención de mantener recta la parte del cuchilo que no corta y redondeada la parte del filo, antifuncional y peligroso ¡¡!! En la Web no existen este tipo de diseños críticos ¿o sí?

No respetar las convenciones en la World Wide Web tiene su coste. Estético, funcional y económico entre otros muchos. Algunos buenos principios de diseño que hay que tener en cuenta a la hora de desarrollar se pueden encontrar en “Principios universales de diseño”, un libro que no tiene desperdicio.

Uno de los principios que suele ser más ignorado en la World Wide Web es el relativo a la visibilidad.

Dado que en la Red no podemos echar mano de un diseño basado en la topografía natural de los objetos, que permite inferir el conocimiento necesario del mundo para funcionar (figura 1), en el espacio virtual el usuario interactúa en base a unos principios arbitrariamente establecidos, aprendidos con la experiencia de uso durante su navegación por la Web.

Figura 1. La topografía natural del diseño del lavajillas indica cómo se abre y cuál es el botón de puesta en marcha/apagado (primero de la izquierda). El piloto inmediatamente encima de él da un indicio sobre su función.

Entre otras cosas el principio de la visibilidad implica hacer evidentes los elementos de la interfaz con los que el usuario puede llevar a cabo alguna acción. En relación a los hiperenlaces, uno de los que comúnmente se obvia es el relativo a la escaneabilidad y la identificación de qué es y qué no es un hiperenlace.

La interfaz es espacialmente limitada siendo necesario ejecutar un diseño minimalista suprimiendo cualquier elemento, ya sea de contenido, ya sea funcional, innecesario.

Para salvar dichas limitaciones uno de los elementos del diseño de interfaces con los que contamos son los hiperenlaces que nos permiten presentar de manera progresiva y modular la información. Por ello es esencial que el usuario pueda identificar rápidamente en una página qué es un hiperenlace y qué no lo es.

Dos estándares clásicos de diseño existentes, son el uso del azul - morado para los enlaces sin visitar - visitados, y la utilización del subrayado de las palabras. Otros igualmente empleados derivan de la agrupación espacial de los elementos de navegación separados respecto de los bloques de contenido (figura 2) y el empleo de pequeños iconos o marcas visuales que actúan como atractores de la atención y dan indicio de su función (figura 3).

Figura 2. Agrupación espacial de elementos de navegación e individualización respecto del contenido

Figura 3. Variaciones sobre la forma básica de la flecha o ángulo mayor qué y uso del símbolo “+”. Metáforas. Evocan la idea de desplazamiento y de más información.

El problema surge cuando las convenciones (ya sea de uso de los colores: estándar azul-morado, color suficientemente contrastado con el fondo y utilizado de forma homogénea para marcar enlaces en el web, empleo de subrayados, etc) se ignoran y se da relevancia al diseño frente a la funcionalidad, como sucede en la web de la recién inaugurada plataforma para la difusión de información bibliográfica española Dilve

¿Dónde debe hacer clic el usuario para seguir navegando en esta interfaz? ¿Qué se percibe visualmente como hiperenlace?

Aunque debería ser el texto lo que actuase como hiperenlace en realidad, son los bloques gráficos inmediatamente inferiores los que hacen la función de tales. Por otro lado, navegando por las secciones, ni se marca visualmente la sección donde se encuentra el usuario, ni se aprovecha el código de color que se impone con dichos bloques gráficos para enfatizar la diferencia de secciones.

Los estándares y las buenas prácticas pueden ser ignoradas pero, aunque en este caso el problema de usabilidad es nimio, la percepción del usuario respecto de la Web queda afectada (y por supuesto la usabilidad). Las buenas prácticas lo son por buenas razones. Obviarlas tiene su coste. Una implementación de este estilo en un web de comercio electrónico o de gestión de correo vía web sería impensable.