Tentándole (interacción)

La Junta de Castilla La-Mancha estrena nuevo y flamante web. Mi más sincera enhorabuena.

Post actualizado (*)

Desde hace mucho tiempo, 9 años, hago un seguimiento de Idealista.

Me gusta. Y me gusta porque al igual que el blog de Aza Raskin Idealista me parece que es una escuela de diseño. Como ha comentado en alguna ocasión Jesús Encinar los rediseños se hacen analizando pixel a pixel, enlace a enlace y componente a componente de cada página. Y eso significa que, para quien tenga paciencia y sepa mirar un poco, se pueden extraer buenas lecciones de diseño.

En los últimos meses el aluvión de novedades ha sido continuo y por lo que parece, a tenor de la nueva interfaz que presentan algunas pantallas, van a venir más.

De los últimos rediseños hay muchas cosas, pero si tuviera que quedarme con una, por irrelevante que parezca frente a los demás cambios introducidos, me gusta especialmente el rediseño del icono de poner anuncios gratis. El post-it con la chincheta roja que lleva ahí si no recuerdo mal desde los mismos orígenes del portal o casi casi.

Diseño anterior del icono del post-it y chincheta roja de poner anuncio gratis

Diseño actual del icono del post-it y chincheta roja de poner anuncio gratis

Algo como esa imagen se ha convertido en toda una seña de identidad del mismo y es curioso ver qué tipo de valores transmite un icono tan aparentemente simple que poco a poco se hace más fotorealista (lo que lleva a preguntarme si habrán hecho algún test de usuario para evaluar estrictamente los aspectos emocionales del portal). Concretamente yo la relaciono con mi época de estudiante, pre y universitario. Los post-it, los tablones de corchos en los pisos compartidos donde los compañeros de piso se dejan notas con ese tipo de chinchetas o en tu cuarto donde clavabas aquellas notas con las cosas que no querías que se te olvidaran.

En el rediseño actual, el icono aumenta de tamaño reforzando su papel como punto focal de atención natural en la home, en cuanto que es una imagen frente al resto de elementos textuales y componentes de la interfaz. Al mismo tiempo, al aumentar su tamaño, desborda claramente el límite inferior del botón de buscar lo que añade tensión visual al diseño, rompe la simetría de líneas rectas de la interfaz e introduce un efecto sutil de 3d gracias a su casi imperceptible sombra en el lado inferior izquierdo, frente al inferior derecho que ocupaba en el anterior diseño.

Una posible explicación para tal actuación es que de esta forma, se crea una sensación de movimiento de izquierda a derecha al estar situada la fuente de luz que generaría dicha sombra a la derecha de la interfaz.

Antiguo icono de poner anuncio gratis en la barra de navegación

Nuevo icono de poner anuncio gratis en la barra de navegación

Por otra parte, además, en el diseño interior de selección de criterios de búsqueda, al estar situada la sombra en el lado izquierdo remarca el inicio de la barra de navegación y dirige el movimiento a la derecha. Finalmente y al igual que sucede en la portada, desborda el límite superior de la barra de navegación creando una fuerte tensión visual, actuando como atractor, que es precisamente lo que se pretende, aunque eso sí, con una gama de color muy sutil dado que en caso contrario centraría demasiado la atención. A tal fin, el otro elemento gráfico que lo compone, la chincheta roja, disminuye su tamaño y se hace más estilizada, menos gruesa ¿más moderna ya que las nuevas chinchetas son más de ese tipo frente a las antiguas? Quizá ese es el único pero que le encuentro al icono, me parece demasiado pequeña aunque dependiendo del tamaño del post-it quizá esa sea la escala adecuada y hacerla más grande centre demasiado la atención en el elemento. Habría que ver varias pruebas de diseño para observar el efecto que produciría aumentar su tamaño.

El buen diseño trata de eso, de jugar con la mínima diferencia perceptible en palabras de Tufte. De lo sutil (pero perceptible).

Más capturas. Por cierto, los tiradores para refinar el precio del inmueble y su tamaño, el box con el minimapa emergente justo al lado y la visión de los inmuebles a través del mapa, espectaculares.

Tiradores para refinar el precio y el tamaño del inmueble

Pantalla de resultados, minimapa emergente de la zona

Mapa de inmuebles

(*) Acabo de descubrirlo pero asimismo, y aunque todavía está muy beta, espectacular también la implementación del mismo mapa de inmuebles con la API de MSN Virtual Earth que se puede ver en Idealista Labs. La vista isométrica es extraordinaria para hacerse una rápida idea de dónde está situado el inmueble en su entorno espacial y de si potencialmente interesa o no al comprador.

Idealista Labs - API de MSN Virtual Earth, mapa de inmuebles. Vista 1

Idealista Labs - API de MSN Virtual Earth, mapa de inmuebles. Vista 2

Automatic text translation to english

Actualización (*)

Algunas propuestas de esas que se te ocurren medio dormido para el futuro Firefox 4.0.

Abajo, la idea original (se nota que estaba dormido):

Estas son otras propuestas un poco más trabajadas y algunas ideas sobre cómo podría ser el modelo de interacción de la barra de tabs. Lo dicho, veo Firefox y los futuros navegadores más como sistemas operativos en la nube que como simples navegadores. En los Labs de Mozilla ya hace tiempo que están trabajando en ello:

¿Ideas? ¿Críticas? ¿Sugerencias? ¿Cómo lo véis?

(*) Algunas capturas que acabo de descubrir con propuestas para la implementación de nuevas interfaces de Firefox:

y los correspondientes posts:

• Designing Firefox 3.2
• The Future of Firefox: No Tabs, Built-In Ubiquity
• Firefox Could Offer New Ways to View Data (Mock-ups)

Automatic text translation to english

RESUMEN:

La evolución de la World Wide Web y la introducción de nuevos dispositivos portables están configurando un entorno ubicuo en el que los usuarios pueden estar permanente conectados a la Red.

En este entorno y con las limitaciones espaciales de las pantallas actuales de dispositivos como teléfonos móviles, smartphones, PDAs, netbooks u otros cobra gran importancia el estudio e investigación de métodos para plegar y desplegar información e interacción en áreas espacialmente muy reducidas.

Para superar estas limitaciones las interfaces están dejando de ser rígidas y estáticas para presentar las opciones ad-hoc en función de la acción deseada por el usuario en cada momento mediante diversos sistemas. Algunas interfaces significativas en este sentido son la barra de herramientas de Photoshop, Ribbon de Office, Search Command de Office Labs o Ubiquity de Mozilla Labs.

Se propone la extrapolación de estas interfaces para un rediseño de la actual home de Google y se señala la oportunidad de utilizar los box de búsqueda como el punto de partida y base para el desarrollo de nuevos sistemas operativos ubicuos, multimodales y multidispositivos.

PALABRAS CLAVE:

Plegado de información e interacción, interfaces orgánicas, sistemas operativos ubicuos, multimodalidad, multidispositivos, Web de las cosas, box de búsqueda

de “La Alquimia de la Multitudes” de Francis Pisani y Dominique Piotet, editorial Paidós, p. 214.

de Enrique Dans, “El Alfabeto con A de Anticuado”.

Subyacentes a ambas reflexiones hay una potente e interesante idea que está cambiando el modelo de interacción de las interfaces estáticas con las que interactuamos hasta la fecha.

Un cajetín o box de búsqueda es una caja negra:

“…el problema es que cuando el usuario se encuentra ante un box de búsqueda está ante una cerradura en la que no sabe muy bien que es lo que tiene que hacer. No recibe ningún tipo de ayuda que le posibilite articular convertir su deseo de información en demanda, intuye lo que necesita pero no sabe lo que busca. Es una caja negra… dime lo que quieras… le está diciendo el sistema. Y el usuario por supuesto, se lo dice… escribe… y si el sistema no responde, como es el caso de tantas y tantas veces, y la búsqueda fracasa, y el sistema no retroalimenta el proceso termina en fracaso y el usuario frustado abandona el intento, a menos que en ello le vaya la vida o tenga una necesidad realmente importante de satisfacer su demanda…

…el usuario no piensa como un motor de búsqueda, el usuario piensa como una persona, y cuanto más le ayudemos a delimitar su deseo de información (paso a paso, definiendo lo que quiere como sucede en el proceso de búsqueda de, por ejemplo Idealista ¿por qué no usan un proceso similar las agencias de viaje? Seguro que triunfarían) mejor…

…cuando el usuario se encuentra ante un cajetín de búsqueda se encuentra ante una caja negra.”

Y la base de dicho cambio radica en torno a dos conceptos fundamentales:

1. De interfaces estáticas se está pasando a interfaces orgánicas, dinámicas o contextuales.
2. Un buscador no sólo es la puerta de entrada de todas las interacciones sociales, un buscador, es en general, la puerta de entrada o punto para lanzar interacción.

En la evolución de la informática se está pasado de una compleja y rígida modelización de la interacción hombre-máquina que poco tenía que ver con los modelos naturales dinámicos, flexibles y asociativos de la mente humana y que se basaba en la interacción con el sistema mediante comandos cerrados (interfaces de línea de comandos y lenguajes artificiales de interacción como por ejemplo MS-DOS) a un nuevo modelo de interacción que tiene como paradigma la interfaz líquida o contextual, visual en cuanto a icónica y gráfica, y que aporta feedback, que se construye ad-hoc en cada momento en base a la necesidad interactiva del usuario expresada mediante un comando-verbo explícito con la interfaz…

Diseñar una interfaz, diseñar información y diseñar interacción supone un proceso constante por parte del diseñador para encontrar medios que permitan superar las limitaciones espaciales físicas e interactivas de la superficie en la que el usuario percibe la información y/o ejecuta la interacción. O dicho de otro modo, medios o modos para plegar y desplegar información y/o interacción.

El espacio físico de la pantalla o de la superficie es el que es y no hay más. Presentar cualquier otro tipo de información en la misma que no sea la inicialmente mostrada implica la sustitución de una información por otra, de forma permanente (hacemos clic en un hiperenlace y “nos vamos”/se sustituye la información - a una nueva pantalla/aparece nueva información) o temporal, utilizando capas, menús desplegables o paneles o áreas retraibles y desplegables bajo acción del usuario. Y lo mismo sucede con la interacción. Posibilitar otro tipo de interacción más allá de la que permitan los elementos presentes en la pantalla en cada momento no es posible a no ser que estemos en entornos multimodales o hápticos (que podamos interactuar con la voz o el tacto). Es necesario antes desplegarlos y presentarlos al usuario y en su caso, ofrecer una retroalimentación o ayuda sobre cómo usarlos.

Por citar un ejemplo con el paso del tiempo la interfaz de Photoshop se ha hecho más líquida. Se ha pasado de los menús de archivo y de la barra de herramientas estática a la definición y adición de un área dinámica, la barra de opciones, en la que en función de la herramienta seleccionada por el usuario en la primera se presentan unas subherramientas u opciones determinadas en la segunda. Así se pliega y despliega información e interacción.

En el caso de Office, Ribbon juega un papel similar sustituyendo o enriqueciendo los, hasta la versión 2003, comandos puramente textuales de los menús, con iconos gráficos acompañados o no de su correspondiente etiqueta.

Ribbon de Microsoft Office

La interfaz comienza a hacerse líquida.

Evoluciona del estatismo al dinamismo, de una modelización de la interacción reducida, rígida y centrada en el recuerdo (asociación de un comando textual con una acción) a un modelo más flexible y dinámico, cognitivamente hablando menos costoso en esfuerzo mental para el usuario, centrado en el reconocimiento (asociación de iconos a las acciones)…

…y en el momento actual y último estadio de evolución hasta ahora, a desaparecer, diluirse o hacerse invisible y dinámica siendo sustituida por:

1. un punto de entrada de interacción, un cajetín o box de búsqueda,
2. un área espacial dinámica en la que presentar los iconos asociados a las funcionalidades que se correspondan con los términos introducidos en el box. Interfaz visual para facilitar el reconocimiento frente al recuerdo y reducir la carga cognitiva del usuario.
3. en su caso, un área de ayuda o sistema de retroalimentación dinámico y constante que a) guía al usuario paso a paso y b) ayude a completar si es oportuno, la instrucción operativa para ejecutar la acción deseada

Este el nuevo paradigma de interacción que subyace en los desarrollos de algunas interfaces que se están desarrollando actualmente como por ejemplo Ubiquity o Search Command de Office Labs.

y más genéricamente:

En base a esta idea Google puede rediseñarse como:

• un box de búsqueda en el que introducir las búsquedas / sentencias / o términos que se correspondan con las acciones o necesidades de interacción expresadas en lenguaje natural,
• un área líquida en la que se le presenten dinámicamente al usuario en función de los términos que introduzca, los iconos visuales asociados a las funcionalidades pertinentes con sus correspondientes rótulos textuales descriptivos de cada uno. Seleccionando uno se va construyendo la instrucción de interacción y se lanza la misma desde el box pulsando retorno o haciendo clic en un botón de ejecución
• un área de ayuda opcional en la que se le proporcione un feedback constante para desarrollar la interacción con éxito.

lo que gráficamente puede plasmarse en un prototipo inicial como el siguiente:

1. El usuario se loga en Google, a partir de ese momento sus preferencias, datos, búsquedas, documentos, contactos y programas estarán acesibles desde la interfaz o a través del box de búsqueda. Si no se loga puede hacerlo más adelante, en el momento de la llamada a la acción, o el buscador puede actuar como lanzador de los programas oportunos del sistema operativo si tiene permiso para ello.

2. Comienza a escribir una búsqueda o expresa su necesidad de interacción en lenguaje natural.

3. En el área de interacción se le presentan junto a iconos o imágenes fotorealistas representativas, las acciones que puede ejectuar relacionadas con la cadena introducida.

4. El área de resultados se le presentan sugerencias de búsquedas coincidentes con las cadena introducida.

5. Adicionalmente se puede habilitar si es necesario una tercera área en la parte inferior para ofrecer mensajes de ayuda o proporcionar feedack sobre elproceso de interacción que va a realizar.

6. El usuario pulsa sobre el icono de la acción que corresponda y la acción se refleja en el box de búsqueda que actúa como una línea de comandos.

7. A continuación el sistema le muestra los contactos de su agenda, si el usuario no encuentra el deseado puede ir escribiendo el nombre en el box de búsqueda y las miniaturas de los contactos variarán conforme a la raíz introducida.

8. Por último, pulsa retorno para ejectuar la acción, se lanza Gmail y se presenta su interfaz con la dirección del contacto escogido ya seleccionada.

Si lo deseas, puedes descargar estos prototipos en PDF:

Y quien dice Google, dice cualquier gran buscador, Microsoft Live Search, Yahoo, Apple.com, etc. En definitiva, cualquier interfaz en la que exista un box desde el que se puedan ejectuar búsquedas o cualquier otro tipo de interacción en base a comandos expresados en lenguaje natural, la base de cualquier futuro sistema operativo ubicuo, multimodal y multidispositivo por su extrema sencillez y extraordinaria capacidad para plegar y desplegar información en un área mínima de espacio.

Nota: Para visualizar la interacción y la cinestesia propuesta (transiciones entre acciones) se recomienda ver el PDF con la última versión de Adobe Reader y utilizar los botones de avance de página (AvPage) - retroceso de página (Re-Page)

REFERENCIAS BIBLIOGRÁFICAS:

1. Pisani, Francis; Piotet, Dominique. La Alquimia de las Multitudes. Madrid: Paidos 2009
2. Dans, Enrique. El Alfabeto con A de Anticuado [en línea]. El blog de Enrique Dans. < http://www.enriquedans.com/2008/03/alfabeto-con-a-de-anticuado.html > [Consulta: 7 de mar. 2009]
3. Tosete Herranz, Francisco. Findability y los cajetines de búsqueda [en línea]. Tentándole (Interacción). < http://tentandole.blogsome.com/2006/10/13/findability-y-los-cajetines-de-busqueda/ > [Consulta: 7 de mar. 2009]
4. Ribbon (Computing) [en línea]. Wikipedia. < http://en.wikipedia.org/wiki/Ribbon_(computing) > [Consulta: 7 de mar. 2009]
5. Introducing Ubiquity [en línea]. Mozilla Labs. < http://labs.mozilla.com/2008/08/introducing-ubiquity/ > [Consulta: 7 de mar. 2009]
6. Search Commands [en línea]. Office Labs. < http://www.officelabs.com/projects/searchcommands/Pages/default.aspx > [Consulta: 7 de mar. 2009]
7. Norman, Don. UI Breakthrough-Command Line Interfaces [en línea]. jnd.org. < http://www.jnd.org/dn.mss/ui_breakthroughcomma.html > [Consulta: 7 mar. 2009]

En el lenguaje visual uno de los recursos con el que se puede jugar para crear atención y que se puede aprovechar para alterar el mensaje transmitido al usuario es la elipsis.

Por tal se entiende la eliminación explícita de algún elemento de la imagen que transforma su significado.

Revisando mis feeds he ido a dar con un post de Infografistas.com que comenta un mapa elaborado por Jonas Dagson sobre un mapa de “Save the children” en el que se muestran los países en los que está prohibido azotar a los niños. Tan sólo 24 en todo el mundo.

Este mapa es un estupendo ejemplo de aplicación de la elipsis. El problema en este caso particular no es qué información mostrar, sino qué información no mostrar. Borrando tinta el significado del mensaje se transmite al usuario de una manera extraordinariamente clara y directa:

La carga semántica del mensaje es alterada para realzar lo que se quiere transmitir. En lugar de mostrar todos los países (mapamundi completo) y colorear aquellos en los que está prohibido azotar a los niños, lo cual puede transmitir una carga semántica negativa (todos estos países son distintos de la “normalidad o generalidad”), es decir, en lugar de mostrar todo el contexto, se suprime dicho contexto a propósito para lograr potenciar la singularidad. Se borran todos los países en los que sí se puede azotar a los niños sin temor a ser multado o castigado y se muestran tan sólo aquellos que tiene legislación que lo prohíbe reforzando el mensaje de denuncia en pro de los derechos infantiles y mostrando la “soledad” de dichos países.

No obstante el diseño puede ser mejorado con muy muy poco esfuerzo. Y es que en este caso se está aplicando la metáfora del mapamundi demasiado a rajatabla ya que aproximadamente el 85% de la tinta del gráfico no transmite significado. Y puesto que no transmite significado es ruido visual destinado a embellecer el diseño.

Si se hace uso de la elipsis como figura de retórica visual lo mejor es hacerlo de manera completa y aprovechar el espacio en blanco como potente separador visual de cualquier otro elemento y creador de un contexto muy particular: la nada y en medio de ella, la singularidad.

En el gráfico rediseñado se borra todo aquello que no transmite significado dejando sólo lo que sí lo tiene. Exactamente el recurso que utiliza intensivamente Tufte a lo largo de sus libros cuando habla constamente de “borrar tinta” para hacer emerger la información y el conocimiento implícito en ella a través del diseño visual.

Un gráfico brillante el de Jonas Dagson. Para compararlos mejor podéis descargaros ambas imágenes en una sola más grande, a través del enlace de abajo, abrirla en el navegador y utilizar F11 para verla a pantalla completa:

Contrapuesto al mismo, la portada de El País Semanal de hoy ofrece otro bello ejemplo de uso de la elipsis como figura retórica visual.

“En busca del oro negro: El elixir que mueve el mundo” es el título del artículo cuya fotografía encabeza la portada. Sobre un fondo de color negro dos manos de color carne brillantes unidas, sostienen en sus palmas el preciado elemento del siglo XXI.

El negro es el color que nos envuelve al caer la noche, que nos priva de la visión, de la luz, el color de la muerte, que nos acaricia, el color que nos rodea en el cine eliminando cualquier otro estímulo externo, diluyendo el exterior y provocando una experiencia inmersiva que nos sumerge en la película… el color de Coliris…

o en este caso, el del fondo de la imagen de la portada de El País.

El negro del petróleo en el hueco de las palmas y el fondo igualmente negro elegido a propósito conforma la elipsis potenciando el mensaje transmitido y dotándole de una fuerte carga connotativa: Las manos surgen como figura contra el fondo negro “agujereadas” por el petróleo que queremos beber, que nos da… ¿la muerte? en contraposición al translucido del agua que nos aporta la vida y que tomamos cuando bebemos de una fuente, un manantial o el grifo. En la imagen el petróleo que queremos retener gotea por el agujero de las manos inevitablemente y se nos escapa sin que podamos hacer nada para evitarlo dejando nuestras manos aceitosas.

Igual que el mapa anterior, una bella imagen en la que se utiliza la elipsis, recurso potente al alcance de cualquier diseñador gráfico que con un poco de creatividad puede ser usado para crear fuertes puntos focales de atención.