tentándote.com

UN CASO DE ESTUDIO

Hace poco estaba prototipando una interfaz que permitía al usuario gestionar las etiquetas asociadas a una imagen. Concretamente estaba pensada y diseñada para que el usuario pudiese llevar a cabo dos tareas:

• Borrar una etiqueta concreta
• Visualizar las imágenes asociadas a una etiqueta para, con posterioridad, añadir más etiquetas a dichas imágenes o realizar otras operaciones sobre ellas.

Después de un rato salieron dos opciones:

 

Alternativa A:

 

Alternativa B:

 

En la alternativa A las etiquetas se agrupan alfabéticamente por la primera letra. El objetivo es facilitar la búsqueda de una etiqueta concreta para lo que se recurre a una doble solución:

• Por un lado se utiliza el espacio en blanco para introducir una separación visual entre letras que sea lo suficientemente significativa para que rápidamente se perciba la “ruptura” de cada bloque,
• Por otro, se añaden las letras del alfabeto en mayúsculas, agrupando en conjuntos las etiquetas que empiezan por la misma. Con ello se pretende crear un punto focal sobre las letras mayúsculas de inicio de cada bloque para facilitar la búsqueda de las etiquetas una vez localizado rápidamente el grupo.

 

En la alternativa B por el contrario se eliminan las letras mayúsculas agrupadoras y se usa el espacio en blanco como único recurso para separar los conjuntos de etiquetas.

Aunque lo mejor para un escaneado más rápido y una lectura óptima es tener una sola columna con la relación de todas las etiquetas, se optó por distribuirlas en tres paralelas con el fin de evitar un excesivo scroll vertical.

El caso es que después de estar un rato mirándolas se me planteó la pregunta de cual de las dos opciones sería la mejor por usabilidad.

¿?

 

ATENCIÓN, LOCUS DE ATENCIÓN E IMPLICACIONES PARA LA USABILIDAD DE LAS INTERFACES

En su libro The Humane Interface (me encanta este libro y lo voy a seguir utilizando como fuente de inspiración para futuros posts) Jef Raskin reflexiona sobre dos conceptos que vienen al caso, la atención y el Locus de Atención.

En cuanto a la atención Fernández-Abascal, Dolores Martín y Domínguez Sánchez (1) (2009, p. 52) la definen como:

• Un estado de concentración en algo.
• Capacidad de procesamiento que puede distribuirse o compartirse en el tiempo entre las diversas tareas y estímulos que exigen atención.

Ahondando en la definición, Tejero (2) menciona que:

“La atención puede definirse como el mecanismo cognitivo mediante el que ejercemos control voluntario sobre nuestra actividad perceptiva, cognitiva y conductual, entendiendo por ello que activa/inhibe y organiza las diferentes operaciones mentales requeridas para llegar a obtener el objetivo que pretendemos y cuya intervención es necesaria cuando y en la medida en que estas operaciones no pueden desarrollarse automáticamente”.

Los procesos en los que media nuestra atención son procesos conscientes. La atención nos permite centrarnos en parte de la información que recibimos a través de nuestros órganos sensoriales y controla y orienta nuestra actividad de forma consciente para conseguir un objetivo concreto. Por el contrario hay ocasiones en que las tareas las llevamos a cabo guiadas por un hábito, las hacemos de forma automática o insconciente.

No obstante, ambos procesos, no se dan plenamente por separado sino que puede haber un cierto grado de interacción entre los mismos.

Un buen ejemplo es el el de escribir en el ordenador. Si hemos aprendido mecanografía ejecutamos esta acción de manera inconsciente. Una vez que posamos las manos sobre el teclado no sómos conscientes de dónde se encuentran posicionadas las teclas que corresponden a los caracteres del alfabeto. Cuando pensamos en una palabra nuestros dedos se mueven de manera automática presionando las que hagan falta y como resultado aparece la palabra en pantalla. El proceso de escribir está guiado por nuestro hábito adquirido a través de un proceso de aprendizaje. Y si el hábito está mal adquirido, los errores tenderán a repetirse.

Por el contrario,si tuviésemos que pensar en los caracteres que conforman una palabra determinada, por ejemplo -g-a-z-p-a-c-h-o- y decidiéramos escribirlos uno a uno, en el proceso entraría en juego nuestra consciencia: En tal caso las operaciones serían:

• ¿Cuál es el primer carácter de la palabra que estamos escribiendo? –> la “g”
• ¿Dónde está la tecla que se corresponde con el carácter “g”– > en la parte central del teclado, la localizamos –> y la presionamos continuando la tarea con el resto de caracteres en un proceso recursivo hasta completar la palabra.

Raskin sumariza las diferencias entre los procesos cognitivos conscientes e inconscientes de la siguiente forma (3):

Propiedad	Cognitivos conscientes	Cognitivos inconscientes
Guiados por	La novedad  Emergencias Peligro	Repetición  Eventos esperados Seguridad
Usados en	Nuevas circunstancias	Situaciones rutinarias
Puede manejar	Decisiones	Tareas no ramificadas
Admiten	Proposiciones lógicas	Lógica o incosistencias
Opera	Secuencialmente	Simultáneamente
Los controla	La voluntad	Hábitos
Capacidad	Pequeña	Grande
Persistencia durante	décimas de segundos	Décadas (toda la vida)

Por último, en cuanto al concepto de Locus de atención comenta que (4):

“Uso el término locus porque significa un lugar, o en el sitio. El término foco, que a veces se utiliza de forma similar, se puede entender como un verbo, por lo que transmite una falsa impresión sobre cómo trabaja la atención. Cuando uno está despierto y consciente, el Locus de Atención es una característica, un rasgo de, o un objeto en el mundo físico, o una idea sobre la que está pensando activamente y con atención”

¿Cómo influye la atención y el locus de atención en el desempeño de las tareas que acometemos cuando interactuamos con el ordenador?

Volvamos a la interfaces planteadas al principio del post.

Considerando el ejemplo A, cuando el usuario busca una etiqueta específica como por ejemplo “invertebrado” el locus de atención se centra en la búsqueda de palabras que empiecen por “i”. Este proceso lo ejecutamos en un primer momento de manera inconsciente. La separación de las etiquetas en grupos usando el espacio en blanco no interfiere con la tarea, no añade “ruido”, ni visual, ni cognitivo, sino más bien lo contrario, aporta una pista sutil y que, de manera insconsciente, nos ayuda a diferenciar unos grupos de otros rápidamente.

El problema se presenta cuando la persona se topa con la letra mayúscula que abre cada grupo de etiquetas. -¿?- -¿Qué es esto…?- piensa. En ese momento se rompe el proceso inconsciente al encontrarse el usuario con algo inesperado que le lleva a tener que razonar e interpretar lo que está viendo. A partir de ahí el proceso requiere de su consciencia y atención:

• ¿Una letra mayúscula? ¿? –> ha de interpretar que las letras mayúsculas agrupan conjuntos de etiquetas que empiezan por las mismas.
• A continuación pasa a preguntarse por qué letra empieza la etiqueta buscada –> por “i” –> pasa a buscar el grupo de la “I” mayúscula –>una vez que lo ha localizado –>
• ¿Qué etiqueta estaba buscando y cuál es el siguiente carácter de la misma? –> “invertebrados” –> busca la palabra invertebrados en el conjunto de etiquetas identificado.

El diseño con letras mayúsculas para separar los grupos de etiquetas rompre nuestro locus de atención e interfiere directamente con la acción que se está llevando a cabo.

La altenativa de diseño B es más óptima dado que se juega con los espacios en blanco y no se incluyen terceros elementos como las letras mayúsculas que desencadenen un proceso de razonamiento consciente. La mirada fluye de manera natural por el listado, los espacios en blanco organizan las letras marcando los diferentes conjuntos de etiquetas y el locus de atención no se rompe, siendo el proceso mucho más rápido. La interfaz es más óptima.

 

REPENSAR LA INTERACCIÓN Y LAS METÁFORAS DE LOS SISTEMAS OPERATIVOS: DECONSTRUIRLOS

Las metáforas que utilizamos para dar forma a, y modelar los espacios de información, y los procesos de interacción de los actuales sistemas operativos requieren de un importante esfuerzo por parte del usuario para comprenderlos o llevarlos a cabo.

Las interrupciones son parte inherente de cualquier actividad. No obstante podemos optimizar los flujos de interacción de los actuales sistemas operativos para disminuir el esfuerzo cognitivo necesario para realizar las tareas que ejecutamos con ellos.

Si quiero modificar una imagen que estoy viendo en el navegador antes, tengo que llamar a una aplicación para llevar a cabo dicha actividad rompiéndose nuestro locus de atención ¿Por qué tenemos que usar una “aplicación” para editar una imagen si mi tarea es modificar una imagen, no lanzar una aplicación? ¿? A continuación tengo que pensar qué aplicación he de utilizar para ello. Ésta podría ser por citar una Photoshop. La siguiente tarea para conseguir nuestro objetivo sería dilucidar cómo lanzarla ¿Tendría que acudir al escritorio o al menú de inicio? En el menú de inicio, en Windows ¿debería buscarla en el box de búsqueda o ir a la lista de “Todos los programas” para localizarla. Si opto por esta última opción… ¿bajo qué carpeta -grupo de programas- la encontraría? ¿Carpeta? ¿? ¿Por qué usamos la metáfora de una carpeta del mundo real para representar algo que guarda una “aplicación” utilizando la misma metáfora para agrupar aplicaciones y documentos? ¿? Cuando he localizado la carpeta con la aplicación tengo que hacer clic en el icono que la abre, esperar a que se abra lo cual lleva un tiempo variable de ¿15 – 40 segundos…? ¿más? con la consiguiente distracción del usuario hasta que se abre. A continuación he de abrir la imagen que previamente debería haber salvado en el disco duro haciendo clic con el botón derecho del ratón sobre la misma en el navegador, de seleccionar la “carpeta” donde guardarla, y de pulsar el botón “Guardar” del correspondiente cuadro de diálogo.

El proceso y el tiempo que media desde que el usuario decide modificar la imagen que está viendo en el navegador hasta que empieza a editarla puede ser de… ¿3 minutos? ¿5? El proceso de modificar la imagen que estamos viendo en un navegador se termina subdividiendo en multitud de tareas con constantes interrupciones para llevar a cabo toda la serie de pasos intermedios que finalmente nos permitan dar cumplimiento a lo que queremos.

Opciones del menú secundario que se abre al pulsar el botón derecho del ratón sobre el icono de una imagen en el escritorio de Windows 7. Un total de 27 tareas posibles sin contar las que hay detrás de los submenús como el de la opción “Abrir con” de la captura de la imagen. El usuario tiene que hacer el ejercicio de identificar cuál es la tarea adecuada para modifica la imagen: “Abrir” “Edita con Fireworks” “Editar” “Abrir con” > “Adobe Fireworks CS4″, “Adobe Photoshop CS4″,  “Microsoft Picture Manager”, “Paint”, “Snagit Editor” ¿Cuál elijo y a qué coste cognitivo? ¿?

De todas las opciones que se me ofrecen sólo me interesa una: la editar.

¿Cómo podemos diseñar interfaces más optimizadas? ¿Interfaces más orientadas al modelo mental de las personas y no condicionadas por las limitaciones impuestas por el software o el Sistema Operativo?

Una posible solución es lo que Donald Norman denomina”Informática basada en actividades” (Activity-Based Computing, ABC) (5) :

“La idea básica es sencilla: tener a mano todo el material necesario para una tarea, con poco o ningún esfuerzo mental”

Sencillo de explicar, muy difícil hacerlo realidad…

Al menos hasta hoy día sólo se ha conseguido en parte, y sólo ahora comienzan a verse interfaces más centradas en las personas que en la propia tecnología.

Captura de pantalla del “Control por voz” del iPhone
Ahora… ¡¡podemos hablar con nuestros móviles para decirles lo que queremos que hagan…!! Ya iba siendo hora de que por fin podamos comunicarnos por voz con un dispositivo pensado para hablar por voz con otras personas… y aún así… ¿por qué se rotula la pantalla como “Control por voz”?
¿Por qué no mejor algo como… ¿Qué quieres hacer?? ¿? … La complejidad se carga en la tecnología, no en la interfaz.
También se puede prescindir del botón de “Cancelar” dado que ya tenemos el propio del teléfono para volver a la “Home” o “escritorio”.

 

Todavía hoy estamos anclados por el paradigma de las interfaces de unas máquinas y unos lenguajes de programación conceptualizados hace tres décadas y unos modelos de negocio empresariales orientados a maximizar la obtención de beneficios económicos antes que el beneficio para las personas, ejemplo del cual, por citar tan sólo uno, es el actual modelo de aplicaciones que se ha desarrollado para los nuevos móviles “inteligentes”, una oportunidad de oro perdida para centrar de verdad la informática en donde tiene que estar centrada, en las personas, no en la forma de hacer dinero.

Norman (6) establece una jerarquía en los procesos que está conformada por (desde la más alta a las más bajas):

• Actividades: conjunto de tareas dirigidas a unos objetivos concretos -poner al día las cuentas de casa- -llamar a un amigo- son dos posibles ejemplos de actividades.
• Tareas: aquellos pasos que seguimos para llevar a cabo los objetivos subordinados de las actividades.
• Acciones: conjunto de operaciones que llevamos a cabo para ejecutar una tarea, por ejemplo, una operación al escribir una palabra puede ser teclear un carácter y la acción, escribir la palabra.

La Interfaz Humana (prefiero éste término al de Sistema Operativo, ajeno a las personas) ha de estar centrada en las actividades, no en las tareas. No en tener que pensar en qué programas o aplicaciones “estancas” necesito para llevarlas cabo.

No en algo llamado Mozilla Thunderbird sino en escribir un mensaje y en mandárselo a mi hermana.

Aza Raskin explica muy bien un nuevo modelo de negocio que podría convertirse en una alternativa al de la informática actual (que está basado en aplicaciones y programas, algo que entra en constante conflicto con nuestro modelo mental que tenemos como personas que somos) y que es igualmente viable desde un punto de vista económico y más centrado en las personas.

Un ejemplo de ello es la evolución que están sufriendo los navegadores. El navegador se está transformando en una capa que está envolviendo a los sistemas operativos convirtiéndolos en interfaces “más humanas” orientadas a responder nuestras actividades cotidianas:

• las necesidades de interrelación social -redes sociales –> Facebook, Tuenti-
• las necesidades de comunicación –> Twitter, Skype, Google Voice, GMail, Hotmail…-
• las de productividad -búsqueda y localización de información –> Google, Bing-
• para servirnos como memoria –>almacenamiento en la nube –> Google Docs, Dropbox-
• y para la recuperación, gestión y aprovechamiento de la información –> Google, Bing, Google Docs…

Y lo están empezando a hacer de forma bastante más eficaz que los sistemas operativos. Integrando todo ello en una interfaz deconstruida que se centraliza en un campo de entrada de texto que está dejando de ser “barra de navegación” para convertirse en “barra de interacción”:

La AwesomeBar HD permite seleccionar un comando para, a continuación, escribir la necesidad de información.
Pulsando a continuación retorno se ejecuta la acción (por ejemplo, se presenta la página de resultados de Amazon
con los títulos de los libros que coinciden con las palabras escritas

El binomio Web-navegador está reemplazando a los sistemas operativos por algo más cercano a nosotros y ha de seguir evolucionando.

Un posible camino para ello y hacia una interfaz más humana puede ser el proyecto en el que está trabajando MozillaLabs –> AwesomeBar HD que no es sino una pequeña adaptación de algo mucho más potente, Ubiquity, una metainterfaz que se sitúa por encima del sistema operativo y que se integra plenamente en el navegador. La comunicación tanto con la AwesomeBar HD como con Ubiquity se da mediante palabras escritas y comandos muy específicos aunque el día de mañana quizá podra darse también a través de la voz y en un lenguaje natural. Una interfaz como Ubiquity permitiría simplificar el proceso de editar una imagen para que fuese algo así como seleccionarla en el navegador, hacer clic en la barra de navegación, escribir “modificar”, y lanzar la interfaz en la misma ventana para llevar a cabo la acción. Compararlo con el anterior proceso descrito…

Desde un punto de vista cognitivo mucho mejor.

La AwesomeBar HD da continuidad al proyecto Ubiquity, un éxito tan rotundo y algo tan innovador e importante que posiblemente lo estarán desarrollando internamente. La AwesomeBar HD no es más que un vistazo a lo que veremos a medio plazo.

Google podría hacer algo similar y la verdad, es que es sorprendente que todavía no lo hayan hecho, evolucionar su interfaz para pasar de un buscador a un asistente personal que guíe al usuario en su interacción con la Web. Medio trabajo ya lo tienen hecho, la pregunta que deberían plantearse los ingenieros de Google es la de cómo podrían unificar las funcionalidades de los diferentes box de búsqueda-interacción de los distintos servicios que ofrecen: Gmail, Google Docs, Google Calendar, Google Translate… en el box del buscador principal.

Recuperar la idea del sistema operativo, ubicuo, multimodal y humano, vamos

Quizá mañana, Mozilla, Google, Microsoft o Apple vuelvan a sorprendernos.

Seguro que sí.

–O–

BIBLIOGRAFÍA:

1. Fernández Abascal, Enrique G.; Martín Díaz, María Dolores; Domínguez Sánchez; Javier. Procesos psicológicos. Madrid : Ediciones Pirámide, p. 52. ISBN 978-84-368-1605-1
2. – Ibid. p. 36.
3. Raskin, Jef. The Humane Interface: New directions for designing interactive systems. Boston : Addison Wesley, p. 16, ISBN: 0-201-37937-6
4. – Ibid. p. 17.
5. Norman, Donald. El ordenador invisible. Paidós : Barcelona, p. 101. ISBN 84-493-1089-X
6. –Ibid, p. 102.

El pasado 10 de febrero, ElMundo.es publicó una noticia científica que trataba sobre cómo lograban las pulgas realizar saltos de hasta 2 metros de distancia en un segundo.  El caso es que me llamó la atención por la secuencia fotográfica que la acompañaba y que habían hecho los científicos para poder analizar el salto en detalle:

Un buen ejemplo de Diseño de Información ya que:

• Utilizan “pequeños múltiples” para estudiar cada una de las fases del salto. Por “pequeños múltiples” se entiende un conjunto de imágenes presentadas secuencialmente unas al lado de las otras que permiten detectar patrones, variaciones y cambios significativos en un instante o período temporal concreto mediante la comparación de cada una de ellas respecto a las demás. En palabras de Tufte (Envisioning Information, p. 67):

“En el corazón del razonamiento cuantitativo hay una pregunta simple: ¿Comparado con qué? Los diseños de múltiples pequeños, análisis multivariados y de datos, ofrecen una respuesta directa mediante la aplicación de las comparaciones visuales de los cambios, de las diferencias entre los objetos en el ámbito de las alternativas.”

• En el conjunto de múltiples pequeños los científicos utilizan una doble representación para extraer la información:
  • Por un lado usan fotografías reales de una pulga saltando. La fotografía es una reproducción muy fiel y aproximada de la realidad. Por mucho detalle que tenga, un dibujo no es capaz de transmitir la misma cantidad de información que una fotografía  real del objeto o animal, ni el mismo tipo de información que otro tipo de representación visual,
  • Junto a la fotografía dibujan un esquema de las patas de la pulga formado por líneas conectadas por puntos que reproducen sus articulaciones. Deconstruyen así la realidad simplificándola y centrando la atención en el aspecto que desean analizar: el proceso del salto.

Analizando los múltiples pequeños con algo más de detalle llama además la atención su alta densidad informativa:

• En cada uno aparece el tiempo en milisegundos, hasta que comienza y desde que comienza el salto, en la esquina superior izquierda.
• En el primero aparecen los nombres de cada una de las partes de la pata de la pulga (tarso, tibía, femur, etc) junto a la correspondiente línea que la representa.
• En el primero, además del esquema superior con las líneas negras, este aparece nuevamente duplicado en color amarillo y superpuesto directamente sobre el propio cuerpo de la pulga para destacar la anatomía de la pata directamente sobre la foto.
• En los múltiples pequeños, primero, segundo, cuarto y octavo aparece el ángulo del cuerpo de la pulga respecto a la horizontal del suelo en ese momento.
• En el último múltiple pequeño de la esquina inferior derecha se presenta la escala de la pulga.

Mediante el uso del doble recurso de objeto real (imagen) y representación esquemática de la estructura de las patas en cada instante logran comunicar visualmente, de manera extraordinaria, una altísima cantidad de información en un mínimo espacio. En definitiva, un estupendo ejemplo de Diseño de Información de aquellos de los que gusta Edward R. Tufte.

¿Qué más cosas podemos hacer como Diseñadores de Información para facilitar y complementar la comunicación visual y ayudar a los científicos a analizar el proceso del salto?

Una primera acción puede ser separar las fotografías reales de los esquemas de la estructura de las patas y centrarnos en estos últimos:

Alineamos los múltiples pequeños tomando como referencia el punto gris (de partida) de la esquina inferior izquierda de cada uno. Este punto permite hacerse una idea de la distancia recorrida en cada instante del salto:

Quitamos las líneas grises que nos sirven de referencia para alinear ya que cuanta menos “tinta” innecesaria que no aporta ningún valor extra haya en el gráfico, mejor será la visualización de información. Nótese  además como en el último múltiple pequeño de la secuencia, dada la gran distancia que salta la pulga respecto al punto de origen, tenemos que alinearlo no en relación al múltiple pequeño de al lado que le tocaría, sino al siguiente de más abajo (dos líneas grises en lugar de una). Ello da una idea intuitiva adicional al observador acerca de la gran distancia que recorre la pulga saltando en un milisegundo:

En éste conjunto de múltiples pequeños se ha optado por individualizar la capa de información de la estructura de la pata  y no se ha añadido ningún otro elemento informativo más. No obstante si se desea, se pueden incorporar capas informativas adicionales tales como por ejemplo, la del tiempo:

Tanto el tiempo como el punto gris de referencia para medir la distancia se consideran elementos informativos secundarios por lo que se utiliza un color gris claro para su representación. Con ello se logra que aparezcan más atenuados con el fin de pasar más desapercibidos respecto a la capa que se considera elemento informativo principal: los esquemas de la estructura de la pata de la pulga que van en negro puro.

Asimismo se  ha optado por conservar el tiempo en milisegundos expresado en números en lugar de recurrir a algún otro tipo de solución visual gráfica que transmitiese la idea de transcurrir del tiempo (por ejemplo, las manillas de un reloj que pasasen desde la izquierda -tiempo negativo en -40 ms- hacia la derecha -tiempo positivo, + 2ms-). La razón es que en este caso particular los números transmiten de manera más directa e inequívoca el tiempo transcurrido en cada momento dado que los períodos temporales con los que se trabaja son muy pequeños y dado que el número es otro tipo de elemento visual diferente a una línea que transmite un significado distinto: el de cantidad. La línea por el contrario representa (en este caso concreto) un objeto: una parte de un insecto. Desde un punto de vista del Diseño de Información, números y líneas son otras dos capas de información más diferenciadas que están presentes en el gráfico. Por último, otra más si atendemos a una división por formas, son los círculos, diferentes de líneas y números. Su análisis por separado aporta igualmente otro tipo de información interesante sobre la posición de las articulaciones de la pata en cada instante:

La imagen original está en blanco y negro y la representación esquemática en tonos de gris. Un potente recurso adicional que tenemos a nuestro alcance para individualizar los elementos de las patas y compararlos visualmente con mayor facilidad es el uso del color. Para ello asignamos uno para cada parte de la pata con lo que emergen con mayor claridad nuevas comparaciones e información que está implícita en el gráfico pero oculta hasta el momento:

Con color o sin él, trabajar con una parte y eliminar el resto nos permite comparar elementos individuales posibilitando llegar a un grado de análisis más profundo de ser necesario:

 

En Diseño de Información y en superficies planas como el papel jugamos con dos dimensiones. Cuando algo no cabe a lo alto se puede disponer a lo ancho o si no hay espacio suficiente, combinar ambas disposiciones. En el caso que nos ocupa en el conjunto original, los múltiples pequeños se han dispuesto en dos columnas verticales paralelas de 6 y 4 módulos siendo el patrón de lectura una “N” invertida.

Si el objetivo perseguido o en el que se quisiera incidir fuese poder estudiar la diferencia en cuanto a la distancia horizontal recorrida en cada momento antes y después del salto, una representación vertical sería más óptima ya que todos los múltiples pequeños quedarían alineados a la izquierda respecto al punto gris que sería la referencia para establecer la distancia en cada instante:

 

No obstante y por el gran espacio en vertical que ocupa, esta representación tiene la desventaja de que no nos permite apreciar el conjunto entero de un sólo vistazo al no caber en pantalla. Las soluciones posibles para este problema son: a) optar por una distribución espacial mixta de los mismos (en el eje X e Y) como se ha hecho en la imagen original utilizando 2 columnas verticales, una al lado de la otra, de 6 y 4 múltiples o b) escalar el tamaño hasta que quepa en el área de visualización (pantalla) o de representación (papel). Para ello deberíamos reducir la imagen hasta una altura de 500 píxeles. La desventaja a cambio de obtener la visión global del conjunto es la perdida de detalle respecto a la representación original -vista completa/análisis particular vs vista reducida/análisis global- (nótese como en el caso de la vista global habría que remarcar más el punto gris poniéndolo en negro puro o aumentando artificialmente su tamaño para que se perciba correctamente, dado que al escalarlo prácticamente no se aprecia):

 

 

El escalado es una estrategia que se utiliza en las interfaces de zoom inmersivo. En Visualización de Información nos permite mostrar altísimas cantidades de información dando lugar a visualizaciones bellísimas que pueden poner de manifiesto patrones informativos ocultos que nos ayuden a extraer conocimiento como por ejemplo en…

ésta espectacular visualización del catálogo de Amazon

(leeros el post entero que merece la pena)

Frente a la alineación en vertical de los múltiples pequeños, la alineación en horizontal ofrece una sensación más natural tanto de movimiento como del transcurrir del tiempo al coincidir con nuestro sentido de lectura de izquierda a derecha. Además, mientras que la representación en vertical nos servía para juzgar de manera más óptima la distancia recorrida en el eje X, la representación horizontal nos permite hacer lo propio en cuanto al eje Y (la altura):

Ver imagen ampliada en Flickr

Por último, cuando nos encontramos en un medio líquido como la pantalla de un ordenador o tablet podemos agregar una dimensión extra respecto al papel -un eje Z- para simular la interacción del movimiento de manera mucho más efectiva que mediando el papel. Para ello, “apilamos” unas imagenes encima de las otras y las presentamos secuencialmente. Para descargar el documento pulsar sobre el enlace de más abajo de “Representación esquemática y a continuación seleccionar en Google Docs dentro del menú archivo > Descargar original o utilizar la combinación de teclas Ctrl+S.

 

Representación esquemática animada de las patas de la pulga en el salto (PDF)

 

Cuando lo tengáis salvado en vuestro ordenador abrirlo con Adobe Reader y previsualizarlo a pantalla completa (menú Ver > Modo Pantalla Completa o combinación de teclas Ctrl+L). Utilizando a continuación las teclas de Avanzar – Retroceder página podemos simular el movimiento y obtener otro tipo de comparación visual que no da ninguna de las anteriores representaciones planas y estáticas.

Y es que la pantalla y el ordenador nos permiten escapar de la “Tierra plana” del papel.

Bola extra:
Para los que hayáis visto la película Up de Pixar, en los créditos del final, cuando está pasando las páginas del cuaderno de fotos, hay un curioso y llamativo pequeño gran homenaje a Edward R. Tufte. En una esas páginas aparece un conjunto de 3 múltiples pequeños en los que se ve al perro de la película saltando a imagen y semejanza del que aparece en la portada del conocido libro de Tufte “Beatiful Evidence” :)

Bola extra 2:
Y aunque es más difícil de percibir, también en los créditos del final, en los que se van deslizando de arriba a abajo, aparece otro pequeño y algo más oculto mensaje que la gente de Pixar le manda a su compañía madre: Y es que cuando están acabando los créditos en un momento dado se ve el nombre de Walt Disney y a su lado, aparece una pequeña “medalla de explorador” tejida en hilo amarillo/anaranjado (en el lado derecho de la pantalla) en cuyo interior puede verse un bonito hongo nuclear. Casualidad o no, lo que no se puede negar es que en Pixar sentido del humor tienen :)

Mira la imagen al centro. Al cabo de un rato verás como entre las líneas blancas interiores de separación entre los cuadrados comienzan a aparecer o crecer líneas azules que se extienden a lo largo de los bordes de los mismos coloreando el espacio interior excepto en las esquinas donde “intersectan” los cuadrados.

 

De cara a usabilidad, tiene implicaciones a tener en cuenta.

A continuación mirad fíjamente la imagen de un poco más abajo durante un minuto. Luego desplazad ligeramente la vista a la parte inferior, a la superior, a izquierda y a derecha, parándoos en cada zona unos 30 segundos. Veréis aparecer correspondientemente bandas horizontales completas de color verde, azul, y verticales de color naranja. El color se define en función de la longitud de onda y de la intensidad de la luz que se refleja sobre los objetos. El ojo humano tiene diferentes sensibilidades a la hora de captar unos u otros colores. En esa imagen se puede ver una demostración práctica de cómo la mezcla de diferentes longitudes de onda y su interpretación por el cerebro generan unas u otras percepciones. Una espectacular demostración de cómo percibe el sistema visual humano nuestra realidad y de cómo se pueden crear capas de información, y por ende jerarquizar información, basándose en el uso de colores, cuyo uso meditado impacta en la usabilidad de una interfaz.