Tentándole (interacción)

Acabo de incorporarme a un proyecto en el que vamos a trabajar, como ha comentado en alguna ocasión Jesus Encinar, “al pixel”. En el que cada cambio que se acomete de la interfaz cuenta y ha de estar sustentado por una serie de decisiones que muevan a decidir la conveniencia de llevarlo a cabo o no. Y esta circunstancia, junto al hecho del transfondo de los proyectos que llevo como consultor de Experiencia de Usuario, Arquitecto de Información y Diseñador de Interacción (perdonad lo rimbombante que pueda parecer citar los tres campos principales de mi área de trabajo pero creo que es fundamental hacerlo a propósito de la esencia o idea principal que voy a tratar de exponer y defender en el presente post), me ha llevado a plantearme una cuestión interesante:

¿Existen metapatrones de diseño ambientales en UX, AI en HCI y más genéricamente en Diseño de Interacción?

¿Existen realmente?

En este proyecto acaban de pedirme que presente argumentos para ver la conveniencia de cambiar de lugar un “Teléfono de Atención al Cliente”. Lo curioso del tema es que la web en cuestión en la que estoy trabajando, por sus características, es bastante singular, no tiene un amplio campo (al menos a priori) de “competidores” o webs similares con las que poder comparar y realizar el clásico benchmarking a partir del cual extraer conclusiones válidas de diseño. De hecho, en España, es única, y en el mundo, que yo sepa, sólo hay tres organismos que se la puedan equiparar.

¿Cómo presentar razones sobre las que defender o no la conveniencia de acometer el cambio de lugar del teléfono a otra parte de la interfaz?

Bueno, hay muchas formas, y el benchmarking no es sino una de tantas. Por ejemplo, se pueden hacer test A/B, testar con usuarios reales, medir el aumento o disminución del número de llamadas al Call Center en función del lugar en el que se posicione el teléfono, echar mano de CrazyEg y monitorizar los puntos focales de atención o puntos calientes de interacción mediante mapas calientes generados a partir de donde clickan los usuarios en el actual diseño de interfaz, se pueden analizar los logs y tratar de extraer las pertinentes conclusiones asociadas al hecho de moverlo o no de lugar, etc.

Unas son más accesibles para el trabajo diario de cualquier consultor. Otras no. Así que una de las cosas que estaba haciendo era realizar un benchmarking cruzado de otro tipo de webs, no extrictamente ceñidas al campo de la actual (de hecho es lo que me habían aconsejado que hiciera para la presente tarea). Y con ello se me estaba planteando algo curioso.

Realmente creo que existen patrones de diseño que pueden considerarse desde múltiples y muy variados puntos de vista: UX, AI, HCI y Diseño de Interacción y en general, que exceden o implican a muchas más áreas de conocimiento a la vez. De ahí el hablar de metapatrones de diseño ambientales parafraseando a Peter Morville y su “nueva” disciplina, como ha dado en llamarla “Ambient Findability”.

Porque a pesar de hacer un benchmarking cruzado de diferentes sitios para observar dónde posicionan el “Teléfono de Atención al Cliente” en sus respectivas homes y webs, y a pesar de que son de campos de negocio diferentes, la cuestión principal, el leit motiv, o uno de los principales y más fuertes motivos, que puede mover a posicionar en todas ellas un teléfono en una posición particular es cuando menos fuertemente similar:

Es potenciar su visibilidad para que los clientes o usuarios del web lo vean con extremada facilidad, si tal es la meta -potenciar el Call Center-, u ocultarlo o posicionarlo en un lugar menos importante o con una jerarquía informativa inferior en la página para reducir el número de llamadas al mismo, frente al uso de la web u otros sistemas o ayudas en línea, si tal es el objetivo principal que se busca con el rediseño.

Así, no parece descabellado, sino ciertamente pertinente, conveniente, e incluso necesario realizar un benchmarking cruzado de sitios de diferentes áreas y modelos de negocio para analizar cómo y por qué posicionan el Teléfono de Atención al Cliente en determinados lugares en sus respectivas webs: evaluando tanto las razones contextuales que pueden llevar a tal decisión -las características particulares de diseño de la interfaz y los condicionamientos que pueden haber dado lugar a esa decisión en esa web concreta y en esa interfaz específica-, y las características que pueden haber llevado a tal decisión en otras webs no relacionadas e incluso en otros dispositivos y/o en otras interficies (no necesariamente superficies interactivas).

Un análisis ambiental intentando inferir las razones de diseño que guían un objetivo que se busca respecto a un propósito específico con un diseño en distintos soportes, interficies (web, papel) y dispositivos.

La busqueda de metapatrones de diseño ambientales.

Existen, pienso. Los patrones de diseño lo son, sólo hay que leerse el libro de Jennifer Tidwell uno de tantos otros por ejemplo, para ser conscientes de ello, y ampliar un poco el campo del razonamiento a otras interficies y dispositivos.

En general, analizar qué cuestiones desde un punto de vista ambiental pueden forzar a tomar una determinada decisión de diseño respecto a un elemento específico a evaluar y a un objetivo o meta concretos, tanto gráficamente hablando, de acuerdo a la importancia jerarquica informativa que tiene en la interfaz, hasta las razones desde un punto de vista diseño ergónomico (por ejemplo por qué en la máquina de café de nuestra oficina se pone el Teléfono de Atención al Cliente donde se pone -¿esquina superior derecha? donde suele estar la ranura por la que echamos la moneda para obtener el café? ¿Está posicionada en ese lugar por el condicionamiento físico de que una gran mayoría de la población es diestra y a una determinada altura porque la media de altura de la población, o más genéricamente del hombre y la mujer es “X”?) físico ¿qué factores influyen en el diseño del objeto físico, qué affordances ofrece? o cognitivo ¿cómo las percibimos y procesamos? con el fin de extrapolarlas al entorno digital.

Al fin y al cabo, el proceso psicofísico de percepción de nuestro mundo tridimensional, aunque complejísimo, reduce (creo, por favor, entiéndase esto con el debido, necesario y considerado excepticismo científico de quién no puede comprobarlo en laboratorio) la complejidad de los factores implicados en la toma de decisiones que guían nuestras acciones, nuestra percepción cotidiana y nuestro proceder cognitivo diario.

Metapatrones de diseño ambientales.

Amplía el campo de análisis de tu benchmarking y no te ciñas únicamente a las webs de tu sector de negocio, a tu interfaz concreta, a tu soporte informativo específico (papel o digital) o al dispositivo con el que trabajes.

Si lo amplías es posible que obtengas información, razonamientos y conclusiones que te pueden llevar a identificar metapatrones de diseño ambientales ciertamente interesantes.

Insisto, todo ello expresado con el necesario excepticismo científico. Pero aún así, creo que es una nueva área en cuanto al Diseño en general, y en cuanto a la Experiencia de Usuario y a la Interacción Hombre-Ordenador en particular se refiere, que debería comenzar a ser reconocida y tenida en cuenta y por ende, articulada e investigada.

Me gustaría ver algún día el equivalente del libro de Jennifer Tidwell “Diseñando interfaces: Patrones para un Diseño de Interacción efectivo”, el propio título de su libro lo dice, escrito e identificando patrones de diseño, de organización de contenidos y de interacción no ciñéndose a la World Wide Web, sino ampliado a diversas áreas de conocimiento, ocio o negocio, a distintos soportes informativos y a diversos dispositivos que no tienen porque ser necesariamente el ordenador (la interacción que mantenemos actualmente con el mismo y el paradigma que ahora está cayendo sobre el que se ha sustentado hasta ahora la HCI clásica, forma física del ordenador y periféricos de entrada como el teclado o el ratón, es ciertamente limitada cuando podría ser potenciada, como se está comenzando a hacer ahora por otros medios de interacción multimodales como el tacto, la vista, o la voz).

Una concepción mucho más universal del Diseño de Interacción y la Experiencia de Usuario en línea o mucho más próxima a la Teoría del Diseño de Información e Interacción integral explicitada por Nathan Shedroff.

“One of the most important skills for almost everyone to have in the next decade and beyond will be those that allow us to create valuable, compelling, and empowering information and experiences for others. To do this, we must learn existing ways of organizing and presenting data and information and develop new ones. Whether our communication tools are traditional print products, electronic products, broadcast programming, interactive experiences, or live performances makes little difference. Nor does it matter if we are employing physical or electronic devices or our own bodies and voices. The process of creating is roughly the same in any medium. The processes involved in solving problems, responding to audiences, and communicating to others are similar enough to consider them identical for the purposes of this paper. These issues apply across all types of media and experiences, because they directly address the phenomena of information overload, information anxiety, media literacy, media immersion, and technological overload–all which need better solutions. The intersection of these issues can be addressed by the process of Information Interaction Design. In other circles, it is called simply Information Design, Information Architecture, or Interaction Design, Instructional Design, or just plain Common Sense”.

Explicitada por Sharp, Rogers y Preece (1):

“How many interactive products are there in everyday use? Think for a minute about what you use in a typical day: cell (mobile) phone, computer, personal organizer, remote control, coffe machine, ATM, ticket machine, library information system, the web, phtocopier, watch, printer, stereo, DVD player, calculator, video game… the list is endless. Now think for a minute about how usable they are. How many area actually easy, effortless, anda ajoyable to use? All of them, several, or just one or two? This list is probably considerably shorter. Why is this so?…

…

The main aims of this chapter are to:

Explain the difference between good and porr interaction design.
Describe what interaction design is and how it relates to human-computer interaction and other fields.
Explain what is meant by the user experience and usability.
Describe what and who is involverd in the process of interaction design.
Outline the differente forms of guidance used in interaction design.
Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the goals and core principles of interaction design”

¿What is Interaction Design?”

o implicita en la definición comunitaria de la Wikipedia sobre Arquitectura de la Información:

“La Arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

…

La Arquitectura de la Información trata indistintamente del diseño de: sitios web, interfaces de dispositivos móviles o gadgets (como los iPod), CDs interactivos, videoclips digitales, relojes, tableros de instrumentos de aviones de combate o civiles, interfaces de máquinas dispensadoras, interfaces de juegos electrónicos, etc.

Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido”.

Realmente está todo escrito. El conocimiento y la Ciencia avanzan a partir de, y evolucionando, el propio conocimiento y la Ciencia existente en un momento dado, examinando el “estado del arte” en un campo o cuestión determinada. Tan sólo hay que tener curiosidad y otro (muchas veces necesario) punto de vista.

Metapatrones de diseño ambientales.

(1) Capítulo 1. p. 0: Sharp, Helen; Rogers, Yvonne; Preece, Jenny. Interaction design : beyond human-computer interaction. 2ª ed. reimpr. corr. Hoboken : John Wiley & Sons, 2007. 775 p. ISBN 978-0-470-01866-8

(nota, lo de página 0 no es una errata, realmente es el primer libro que veo que empieza por la página 0 en lugar de por la 1 ¿error del editor?

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.