tentándote.com

De sorpresa en sorpresa es lo que se puede decir al ver los conceptos de diseño y prototipos tecnológicos de múltiples compañías y grupos de investigación japoneses que se pueden ver recopilados en las galerías temáticas de Diginfo TV.

Concretamente os recomiendo echarle un vistazo a las galerías de Interfaces y Móviles.

Aunque son muchos los vídeos, destacar dos que me han llamado la atención:

En el concepto de interfaz flexible investigadores de la universidad de Osaka conceptualizan la misma como un material flexible que se estira o contrae cuando el usuario presiona sobre un punto de la pantalla y arrastra el dedo en una dirección. De esta forma pueden conseguir ver el punto de partida desde el cual se ha arrancado, el punto final al que se llega y el contenido intermedio (aunque sea con un cierto grado de distorsión). El usuario puede además decidir si desea hacer efectivamente el scroll, hacer una suerte de zoom interactivo -apoyándose en un dedo adicional extra para abarcar el área desde el punto de toque de inicio al punto de toque final- o recuperar la forma inicial de la interfaz después de haber examinado el contenido circundante en una dirección.

Desde un punto de vista de interacción humana esté “comportamiento” de la interfaz es mucho más cercano al de los materiales físicos con los que interactuamos cotidianamente tales como el papel, y tiene la particularidad de que aporta una affordance extra que mejora el modelo de interacción que mantenemos con las interfaces a través de pantallas táctiles y gestos de la mano.

El vídeo viene al caso para reflexionar sobre la problemática que Donald Norman exponía recientemente en su artículo la “Guerra de gestos” (enlace vía: @Usolab) acerca de la convivencia del actual modelo de interacción mediante el ratón y el cambio de paradigma que está imponiendo la introducción de los nuevos periféricos como el Trackpad de Apple o el Magic Mouse junto al nuevo conjunto de gestos para interaccionar con pantallas táctiles. A saber:

Cualquier interfaz física como por ejemplo el papel impone unas limitaciones espaciales a la representación de la información: en ella no se puede representar o contener más información de la que puede inscribirse en su superficie.

En los dispositivos digitales esta limitación está igualmente vigente pero presentan la gran diferencia de que al ser la pantalla digital (ya sea de un ordenador ya de un móvil) y al ser la información digital y líquida podemos presentar y “desplegar” información más allá de los límites físicos de la pantalla -de sus bordes-.

Desde las primeras interfaces gráficas de usuario de los ordenadores, el control por excelencia que se ha utilizado para indicar que existía más lienzo con más información que desbordaba la pantalla, ha sido el ascensor que aparecía en el lado derecho de la misma. Cuando el usuario interactuaba sobre dicho control el efecto que percibía era el de un marco estático -la pantalla del dispositivo- a través del cual visualizaba el contenido en un lienzo que se iba moviendo.

Con la introducción de la rueda del ratón, el estándar que se adoptó como modelo de interacción era:

• Al desplazar la rueda del ratón hacia arriba, el ascensor vertical sube y el contenido baja.
• Al desplazar la rueda del ratón hacia abajo, el ascensor vertical baja y el contenido sube.

Un posible modelo mental del usuario para describir este funcionamiento podría equivaler al de una persona que está parada y que acciona una polea:

• La vista del usuario -el marco o pantalla- permanece estático.
• La parte interior de la cuerda -el lienzo- asciende cuando el usuario tira de la cuerda exterior hacia abajo (con lo cual el control del ascensor desciende) y viceversa.

Con la llegada de las pantallas táctiles y de nuevos periféricos de entrada del ordenador tales como el Magic Mouse o el Trackpad de Apple se está consolidando un modelo de interacción basado en gestos que al ejecutarse tienen una respuesta directa y equivalente a la interacción que tenemos con los materiales físicos.

Así, Apple ha decidido cambiar el funcionamiento por defecto de la rueda del ratón invirtiendo el patrón al que estamos acostumbrados.

La confusión desde un punto de vista cognitivo se produce cuando el usuario se encuentra con un control físico -una rueda- y unos controles digitales -un lienzo con el contenido- y una cuerda exterior -el control del ascensor- cuyo funcionamiento debería corresponderse con los de un modelo físico, el del hombre que acciona una polea, pero que sin embargo no se corresponde.

En la figura (a) se puede observar una representación esquemática del funcionamiento actual de la rueda del ratón en un plano horizontal. Al accionar la rueda ésta ejerce tracción sobre el lienzo (contenido) y lo desplaza hacia atrás.

En la figura (b) se observa el cambio de funcionamiento que ha aplicado Apple y la ruptura del modelo físico. La rueda del ratón ya no funciona como una polea sino que el movimiento de la  mano es como si se deslizara desde la rueda al lienzo (contenido) para  empujarlo hacia adelante, de ahí deriva la confusión cognitiva.

En la figura (c) se complementa el modelo mental del funcionamiento actual de la rueda del ratón. El gráfico se gira 90º a la derecha para ponerlo en vertical (al igual que el monitor de un ordenador) y se añade en color naranja, el marco o ventana a través del cual el ojo observa el contenido o lienzo.

En la figura (d) se expone el cambio de modelo que ha aplicado Apple.

¿Por qué ha tomado Apple esta decisión entonces?

La respuesta puede ser porque esté pensando prescindir de ahora en adelante de la rueda del ratón (y quizá del ratón mismo) en favor de un modelo de interacción que se ejecute directamente con los dedos sobre una superficie plana como la del Trackpad.

En esta superficie no existen ruedas para desplazar el contenido con lo que no hay confusión posible. La respuesta a la acción que ejecuta la mano es directa: Si los dedos se desplazan sobre la superficie del Trackpad hacia arriba el lienzo con el contenido se desplaza hacia arriba. Igual que en el mundo físico donde si los dedos presionan sobre un folio y ejercen presión hacia el lado de la mesa más alejado del usuario- el folio se desplaza en dicha dirección.

¿Qué es lo que llama la atención y lo que me gusta del vídeo de las interfaces flexibles?

Pues que añaden una affordance extra que hasta ahora no se ha considerado en el mundo digital aportando un indicio cognitivo adicional para mejorar la interacción con las interfaces digitales:

Hasta ahora el lienzo siempre se ha considerado como una superficie rígida. Sin embargo los investigadores del proyecto consideran el lienzo del contenido cómo una superficie flexible que se puede doblar y distorsionar. Justo igual que sucede en el mundo físico dado que en función de la rugosidad de la superficie por la que se desplace el material (por ejemplo un folio), de su adherencia o de cómo lo cojamos, ésta puede presentar mayor o menor resistencia lo que puede suponer que el material se arrugue más o menos.

Esta affordance junto a la supresión del actual modelo de funcionamiento de la rueda del ratón en favor de una interacción a través de una superficie plana como la del Trackpad de Apple, ofrece una respuesta más cercana y consistente a la interacción física que mantenemos con los objetos que nos rodean.

Un pequeño paso más en la evolución hacia una interacción más humana con los ordenadores personales y dispositivos móviles.

En cuanto al otro vídeo, hace alusión a la concepción del teléfono móvil como un dispositivo extensible al que se le pueden añadir todo tipo de complementos para dotarlo de funcionalidades adicionales y a cómo se puede combinar con el software para, literalmente, aumentar nuestra percepción de la realidad: tanto visual, como háptica o sonora.

–O–

NOTA ADICIONAL

Las metáforas y los posibles modelos mentales de usuario que se pueden concebir para describir el funcionamiento de la rueda del ratón y su respuesta en el desplazamiento del contenido de la pantalla son múltiples dado que dependen de diversos factores entre los que se encuentra el punto de referencia que se tome por parte del observador, el movimiento del mismo (si se encuentra parado o no)  si la percepción del objeto que se mueve viene dada por el ojo que sigue con la mirada al objeto, etc. Al respecto, un par de documentos introductorios sobre la percepción psicológica del movimiento:

• Percepción del movimiento
• Percepción visual del movimiento (PDF)

Los siguientes son algunos de los componentes y diseños que por una u otra razón me han llamado últimamente la atención.

SPARTOO

Descubrí la tienda de zapatos por casualidad a través de un banner que apareció un día por Flickr cuando iba a logarme.

La home me parece muy recargada. Demasiadas cosas, demasiados puntos focales, demasiadas llamadas a la acción…

Me resulta interesante el diseño que tienen de la galería principal debajo del menú de navegación. Me llama la atención la posición del buscador de productos, teóricamente en una posición visual predominante pero que pasa desapercibido por su diseño visual y por carecer casi de aire para respirar, tanto por debajo del menú de navegación, como por encima de la gran galería gráfica central que se lleva toda la atención. Es algo que creo que habría que corregir si lo que quieren es realmente potenciar el buscador.

Volviendo al diseño de la galería principal, según el cursor del ratón se va desplazando por los “botones” de la derecha varía la gran imagen de la izquierda. Lo curioso es que dentro de la misma, en la esquina inferior izquierda, ponen una capa negra semitransparente con enlaces directos a las diferentes subsecciones de segundo nivel.

No es común insertar un menú de navegación, que al final es lo que es, en la grandes áreas centrales de comunicación que normalmente se dedican en las homes de las tiendas de comercio electrónico tanto para transmitir y comunicar la imagen y marca de la web como los productos destacados y promociones. Me llama la atención dicha práctica.

En la página de categoría de producto me llaman la atención algunos filtros abajo, a mano izquierda.

Concretamente me llaman la atención los filtros de “por tipo de tacón”, por colores y  el top de los cinco productos más vendidos que se presentan como miniaturas, unas encima de las otras. Muy majos los tres componentes:

LAINFORMACIÓN

Uno de los periódicos digitales nacionales más recientes. Me llama la atención el menú de navegación que tienen. Posicionando el cursor encima de una de las secciones principales se despliega una capa emergente con las subsecciones de segundo nivel a mano izquierda y a mano derecha, un listado de las últimas noticias de la sección correspondiente que incorpora además en algunos casos una pequeña miniatura gráfica de la noticia que enlaza. El color negro oscuro de fondo de la parte izquierda centra la atención en la navegación frente al contenido de la derecha que se considera secundario. Un uso diferente.

Como inconvenientes principales que presentan este diseño se puede destacar dos: por un lado el hecho de que en las secciones que están más a mano derecha (ver la web entera mejor que esta captura) el menú se ha de desplegar hacia la izquierda porque “choca” con el borde derecho de la pantalla. Esto hace que el nombre de la sección y las opciones de segundo nivel del menú desplegable no estén unas encima de otra rompiéndose la conexión entre ambas. Sería necesario realizar algún tipo de agrupación o diseño visual que los conecte. Para solucionar este problema LaInformación.com añade los encabezados grises en el menú desplegable con los literales de “En esta sección” y “Últimas noticias”.

Otro inconveniente es que tal y como está resuelto visualmente el diseño cuesta distinguir gráficamente la parte derecha del menú desplegable del fondo. Debería destacarse de manera más explícita la sección activa de primer nivel y la capa desplegable del menú para diferenciarlo respecto al fondo. Quizá se podría resolver añadiendo una pequeña sombra oscura a lo largo del borde inferior y del lateral derecho con el fin de crear un efecto de oclusión que trajese todo el menú a primer plano y lo resaltase con lo que se resolvería el problema. Otras soluciones podrían ser variar el color de fondo de la parte derecha del menú. En lugar de blanco utilizar un crema o cualquier otro color que estuviera dentro de la escala cromática del resto del diseño de la página pero que lo diferenciarse del fondo blanco de la web. Otro recurso sería utilizar un borde más grueso para todo el menú desplegable lo que también ayudaría a diferenciarlo del fondo.

NATIONAL GEOGRAPHIC

En National Geographic utilizan asimismo un mega menú desplegable enriquecido que aparece al posicionar el cursor sobre cualquiera de las secciones de primer nivel de navegación.

A diferencia de lainformación.com, National Geographic plantea un doble menú horizontal que distinguen en dos escalas cromáticas similares: en el caso de la sección de viajes, azul más oscuro para la navegación principal y azul más claro para el contenido secundario.

El problema que presenta esta navegación es que las secciones de segundo nivel pierden mucha relevancia frente a la parte inferior de contenido pasando casi desapercibidas. Asimismo cuesta igualmente diferenciar el menú de navegación del resto de la página por los mismos problemas que tiene el menú de la información.com. Se debería añadir una sombra a lo largo de borde inferior y del lateral derecho para traerlo a primer plano o se debería actuar sobre el color o grosor del borde para indivualizarlo más respecto al fondo.

OPERA

Me llama mucho la atención el diseño del menú desplegable de la sección “Browsers”. Incluyen en el menú de forma destacada dos enlaces para la descarga del navegador web y móvil.

Navegando he ido a dar con la home del Aeropuerto Internacional de Kansai

El caso, es que me ha llamado la atención cómo han diseñado el menú de navegación principal. No es un diseño muy ortodoxo que se diga ya que añaden iconografía a cada sección junto al correspondiente rótulo.

Así, los iconos predominan visualmente frente a los nombres de cada sección convirtiéndose en puntos focales de atención, dificultando la legibilidad de los rótulos e impactando en la usabilidad.

Diseño del menú de navegación con iconos y rótulos:

Sólo iconos:

Sólo rótulos:

En el caso de los menús de navegación de un sitio web no creo que sea buena idea añadir los iconos por la problemática intrínseca que tienen. Y menos en el sitio web de un aeropuerto internacional.

Por ejemplo, el avión de la primera sección sí se asocia a vuelos, pero también a aeropuertos, con lo cual la interpretación ya es cuando menos ambigua. El coche cuesta distinguirlo como coche por ser tan cuadrado en lugar de utilizar formas más redondas. Esta línea gráfica supone una menor usabilidad al reconocerse el coche con mayor dificultad. El tercer icono sí se interpreta más como llegadas y salidas, aunque también puede indicar tránsito o viajeros en tránsito (haciendo escalas). El de la cuarta sección no sé por qué, pero lo asocio a una bolsa bursátil o, por su forma, al monumento de Lincoln:

Lincoln memorial - Monumento a Lincoln. Imagen de Wikimedia Commons

El quinto se interpreta bien, tiendas y comida (restaurantes) y los dos últimos no los entiendo (el concepto que me evoca el último es el de radio) y el icono del mapa, puede ser cualquier cosa menos un mapa. ¿El perfil de la terminal del aeropuerto quizá? ¿?

Entre otros problemas que presentan los iconos pueden apuntarse:

• Hay iconos que más o menos pueden ser indicativos de la información que hay en la sección, pero para otros, su interpretación puede variar de cultura a cultura, e incluso de individuo a individuo en base a sus experiencias y vivencias personales. Cada uno visualizamos el conocimiento y el lenguaje de forma, y con formas gráficas diferentes. Y aunque como individuos con estructuras cognitivas similares podemos deducir e identificar patrones universales que nos permiten reconocer más o menos las mismas formas, precisamente por esas diferencias, interpretar un icono y darle un significado correcto puede costarnos más o menos a cada uno (si  logramos darle el significado correcto, circunstancia que a veces no no es posible).
• Por ello, a, a menudo los iconos requieren de ayudas textuales (tooltips que aparecen al posicionar el cursor del ratón encima del icono, o directamente, rótulos asociados al mismo) para poder comprenderse sin dificultades. En tal caso, la pregunta que se plantea es ¿por qué utilizar iconos en lugar de texto? ¿Por qué y cuando utilizar ambos?
• Los diseñadores gráficos pueden encontrarse con serias dificultades para representar y sintetizar conceptos abstractos complejos mediante una imagen que no es más que una metáfora, y más, a través de un icono con un tamaño, diseño o color determinados -, dificultades que son extensibles a los usuarios a la hora de comprenderlos.
• No es lo mismo una aplicación que un sitio web. En una aplicación, predominan los “verbos ” en las barras de herramientas. Las tareas que permite acometer la aplicación al usuario (por ejemplo, en un procesador de texto, entre otras tareas podemos: poner en negrita un texto, en cursiva, centrarlo, disminuir o aumentar su fuente, encontrar y reemplazar texto, etc). En una aplicación se diseña más una ARQUITECTURA DE INTERACCIÓN (el término es mío, no es una incorrección) que una Arquitectura de Información. Los espacios que se diseñan, aunque similares, son diferentes. Al igual que se definen espacios de información en cualquier sitio web, en una aplicación definimos espacios de interacción. E igualmente que hacemos como entregable, el mapa de un sitio web, deberíamos hacer entregables que sean mapas de interacción, que expliciten el modelo de interacción que subyace en la interfaz de la aplicación.  En un sitio web, la navegación se construye en base a una organización y jerarquización de su información (un espacio de información), y dado que hablamos principalmente de contenidos y no de acciones (verbos) o tareas, el lenguaje textual puede funcionar mejor en ellos, antes que los iconos.
• Añadiendo iconos junto a los rótulos en la navegación del sitio del aeropuerto, aparte de empeorar la legibilidad de los rótulos, los iconos interfieren directamente con nuestra capacidad cognitiva para abstraer la estructura de información del sitio y poder hacernos un mapa mental de las secciones. Los iconos en este caso son superfluos, ocupan un espacio innecesario y no añaden un valor determinante a la interfaz que justifique su presencia.

¿Cuando está justificado el uso de los iconos? ¿Cuando conviene utilizarlos? ¿Sólos, o con texto?

La respuesta, como suele serlo en cuanto a cuestiones de usabilidad se refiere, es depende de la circunstancia y el contexto.

Los iconos, por su tamaño, permiten un extraordinario grado de plegado de información y una vez que se aprende su código (a qué corresponde cada icono, al fin y al cabo familiarizarnos con la iconografía y funcionalidad de cualquier aplicación es aprender un código y un lenguaje visual, específico para la misma) pueden facilitar la búsqueda visual de una función en una aplicación y en una interfaz que utilicemos de manera intensiva y cotidiana:

Ribbon de Microsoft Visio. Al utilizar de manera cotidiana la aplicación y ser consistentes los iconos principales con las funcionalidades asociadas a lo largo de todas las aplicaciones de la suite (Word, Excel, Power Point, etc) terminamos por aprender parte del código iconográfico de las mismas con lo cual visualmente resulta mucho más rápido localizar las funcionalidades.

Si tuviéramos que expresar con palabras por ejemplo, las funcionalides del grupo de “Fuente” de la pestaña “Inicio” de la Ribbon de Word 2007 quedaría algo similar a:

Nótense tres cosas:

• El texto de las funcionalidades de un sólo grupo (a pesar de que aquí no está en la misma escala en la captura de la imagen que en el prototipo en blanco y negro) ya permite darnos cuenta de que ocupa mucho mayor espacio que los iconos gráficos. La densidad informativa de la interfaz que se comunica por píxel de pantalla es mucho mayor. Al fin y al cabo con la Ribbon se ha hecho un ejercicio de deconstrucción. Estadísticamente se han determinado qué funcionalidades de los menús eran las más usadas y se han explicitado directamente en la interfaz, con apoyo, en su caso, de rótulos textuales al lado de los iconos, cuando la interpretación de éstos no era directamente explícita. Con ello se han logrado suprimir las jerarquías de interacción presentes en los menús desplegables, ahorrando tiempo al usuario tanto para acceder a los comandos buscados, como para, en algunos casos, ver directamente el resultado de la acción del menú antes de aplicarlo, dado que al posicionar el cursor encima del icono esto ya provoca un feedback y un cambio inmediato en el texto inferior seleccionado.
• A pesar de que el texto suprime ambiguedades a veces es difícil expresar de forma precisa y con la concisión posible a través de una o dos palabras, la acción que se ejecutará cuando se haga clic sobre él.
• Dado que requiere de su lectura, el texto conlleva una mucho mayor cantidad de tiempo para leerlo y decidir qué funcionalidad estamos buscando, que si se utilizan iconos. Visualmente el texto cuesta más de escanear.

Cuadro de diálogo para la personalización de la Ribbon en Microsoft Word 2007. Si se conoce la forma correspondiente del icono de la funcionalidad que se está buscando es mucho más rápido hacer un escaneado visual de los iconos que se están viendo, que ir leyendo uno a uno sus nombres textuales.

• En una interacción continua en un dilatado período de tiempo (por ejemplo, 8 horas como las que cotidianamente nos pasamos delante del ordenador en una jornada laboral típica) la suma de los tiempos de las microinteracciones es francamente importante y significativa, al igual que el esfuerzo cognitivo que tenemos que hacer para llevar a cabo las tareas con mayor o menor eficacia con la aplicación. Esto en definitiva, es de lo que trata la usabilidad, de optimizar la eficacia y la eficiencia de una aplicación para alcanzar unos objetivos específicos en un contexto de uso específico. Y uno de los modelos clásicos para evaluar una interfaz en términos de eficacia y eficiencia es el conocido como GOMS (por Goals = Metas, Operators = Operadores, Methods = Métodos, y Selection rules = Reglas de selección) desarrollado por Card, Moran y Newell. Este modelo permite medir de forma cuantitativa, el rendimiento y el coste en términos de esfuerzo cognitivo y tiempo, de una interfaz frente a otra (al respecto puede consultarse el capítulo 4  “Cuantificación” del libro de Jef Raskin: “The Humane Interface”). Dicho modelo parte del hecho de que el tiempo que lleva a un sistema usuario-ordenador el ejecutar una tarea, es la suma de los tiempos de los gestos elementales que hay que llevar a cabo para ejecutar la tarea.  Estos se sintetizan en una serie de tiempos típicos característicos que son:
  • K = 0,2 sec. Keying (tecleado): El tiempo que lleva al usuario pulsar una tecla en el teclado.
  • P = 1,1 sec. Pointing (apuntar): El tiempo que lleva a ul usuario posicionar el cursor en un lugar específico de la pantalla.
  • H 0 0,4 sec. Homing (mover la mano): El tiempo que lleva a un usuario desplazar la mano desde el teclado hasta el Dispositivo Gráfico de Interfaz, tal como un ratón, o desde éste hasta el teclado.
  • M = 1,35 sec. Mentally preparing (preparación mental): El tiempo que lleva a un usuario prepararse mentalmente para el siguiente paso después de una microacción.
  • R Responding (respuesta): El tiempo que un usuario ha de esperar para que el ordenador responda a su input.
• Conforme a estos parámetros puede medirse la eficacia y la eficiencia de utilizar sólo iconos, sólo texto o ambos elementos en la interfaz de una aplicación. A bote pronto, en el caso de usar sólo texto, lleva más tiempo su lectura y comprensión, que el visualizar un icono del cual ya se conoce la funcionalidad que desempeña. Por otro lado, el texto al ocupar mayor espacio, conlleva un menor tiempo para ser alcanzado por el cursor, y menor precisión para ser pulsado que un icono pequeño.

En cuanto a usabilidad se refiere, hay que medir el coste de lo que representa tomar una decisión de diseño de la interfaz u otra. O, como mínimo y dada la imposibilidad que tenemos en muchas ocasiones de testarlo o medirlo en laboratorio, ser al menos conscientes de ello y de cómo las decisiones que se toman impactan en el rendimiento de la aplicación o del sitio web.

Barra de funcionalidades de Zoho Mail. Utilizan iconos y rótulos

Barra de funcionalidades del cliente de correo Thunderbird. En este caso conviven iconos y rótulos ¿són lo suficientemente significativos y se entienden sin problemas los iconos? ¿El de "responder" y "responder todos"? Nótese que los botones de archivar y basura no llevan icono, y que el icono de la funcionalidad "eliminar" se asocia al de cerrar las ventanas de Windows lo que produce una disonancia cognitiva e impacta en la usabilidad

Barra de funcionalidades de GMail. En este caso Google opta por no usar iconos junto a los rótulos

En cuanto a la World Wide Web, y dado que en cada sitio web solemos estar de forma muy puntual, e interactuando con su interfaz durante tiempos muy reducidos, no es la mejor idea construir y utilizar un código iconográfico propio que conviva con los rótulos de las secciones, en la navegación principal, ni para facilitar la misma, ni para realzar el diseño desde un punto de vista gráfico.

Por cierto, un último detalle más en cuanto a la barra de navegación del aeropuerto, la pestaña “top” de la derecha es un elemento 100% superfluo 2.0).

¿Opiniones? ¿En qué contextos consideráis que los iconos juegan un papel importante y son recomendables y en qué ocasiones no? ¿Más ejemplos que conozcáis?