tentándote.com

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?

Pues un 28 de abril como este, pero de hace 4 años publiqué mi primer post profesional en mi anterior blog.

Es extraordinario echar un vistazo retrospectivo a todo lo que ha pasado desde entonces. La crónica de la historia de la experiencia de usuario que podéis ver en el histórico de posts:

• La creación de la filial española de la UPA
• La noticia de la posible compra de Microsoft por parte de Yahoo (en qué ha quedado finalmente)
• El lanzamiento de Firefox 2.0 “el modelo de una persona, un ordenador, una aplicación ofimática está caduco. Mucho mejor las sinergias que se pueden derivar de un trabajo en red compartido y distribuido”.
• El lanzamiento de Revoluz, el primer proyecto de Eduardo Manchón así como la entrevista de cuando lanzaron Panoramio.
• Los comienzos de la crisis hipotecaria y George W. Bush como si no fuera la cosa con él y predicando que aquí no pasa nada.
• Las predicciones sobre la Web 0.5 hace 3 años :-P
• La toma de conciencia de Mozilla de que el futuro es móvil.
• El lanzamiento de Chrome y la idea de Google de convertir el navegador en un sistema operativo.

Lo dicho, toda una memoria histórica de la evolución de la experiencia de usuario en los últimos cuatro años. Cuando tenga más tiempo hago una selección de los posts que más me gustan y que tratan estrictamente de ux y…

alguna sorpresa más, permaneced conectados ;-)

Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador.

Una captura de la página de de Apple para la descarga de Safari 4.0:

Fijaros cómo se utilliza el color azul degradado para el botón de la descarga y el naranja en el rectángulo superior de la página para crear un punto focal de atención. Al igual que podemos establecer jerarquías de información durante el diseño de un componente con sus correspondientes elementos, podemos establecer jerarquías de información basadas en colores.

En este diseño creo que el uso del color no es óptimo y se puede mejorar. Como me comentaba un compañero el otro día, Fernando, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul. Generalizando más, también para las descargas y las llamadas a la acción.

Fijaros en la diferencia entre la pantalla de arriba y la de abajo con el código de color del botón y del rectángulo de la esquina invertido:

Habría que testarlo pero apuesto a que este segundo tendría un ratio de número de clics mayor que con el actual botón azul. La jerarquía de color es óptima (el más cálido y llamativo es el elemento más importante en el que se quiere crear el punto focal de atención -el botón de la descarga-) y el azul para el otro elemento que crea un punto focal de atención secundario en la página tanto por su color característico frente al gris y al blanco que lo rodea, como por su forma triangular que rompe con todas las líneas rectas y bordes redondeados del diseño.

AOL, por ejemplo, también usa el naranja-calabaza para el botón de buscar del buscador de su home:

Botón de buscar del buscador principal en la home de AOL

Curiosamente en la pantalla de logado del webmail invierten el patrón y centran la atención en el botón de registrarse y crear cuenta frente al de logarse:

Botón de logado de color azul en AOL y naranja para el de registrarse y crear nueva cuenta

Yahoo España y Yahoo internacional siguen el mismo patrón de colores para los botones del buscador y de acción:

Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario

En Amazon.com usan el naranja como color para el botón de “Mostrar todos los departamentos” y el botón para lanzar la búsqueda con el rótulo “Go” que además lo hacen circular para convertirlo en un punto focal de atención por su forma (el círculo es un elemento que añade una fuerte tensión visual e interés a cualquier diseño):

Botones de color naranja de "Mostrar todos los departamentos" y ejecutar búsqueda de Amazon

En lugar del naranja-calabaza, Firefox utiliza un color verde para el botón de descarga, también admisible. Originalmente el verde que utilizaban era muy oscuro y con el paso del tiempo se ha ido aclarando mucho. Además incorporan la palabra “Free” al rótulo principal con lo que han conseguido, como comenta Yusef (no encuentro el enlace, si localizo la presentación donde lo ví lo pongo) incrementar el número de descargas del navegador.

En este caso particular es posible que la elección del color verde para el botón sea plenamente consciente e intencionada para potenciar el logotipo de Firefox y no robarle protagonismo. Los colores naranja, calabaza y amarillo otorgan gran predominancia al logotipo junto al hecho de que sea redondo frente al resto de elementos de líneas rectangulares (con excepción de las palomas, no entiendo el motivo de que figuren ahí al igual que el ¿altavoz? ¿biberón? de la cañería) convierténdolo en un punto focal de atención muy fuerte. En la página creo que hay demasiado ruido por el uso de la imagen de fondo lo que va en detrimento de la usabilidad de la tarea principal a la que está enfocada la página -la descarga del navegador- si la quitasen o planteasen otro diseño mucho más limpio como el de Apple posiblemente obtendrían un mayor número de descargas:

Botón verde de descarga de Firefox

El uso de los colores es un aspecto crítico para las webs.

Es necesario conocer los fundamentos básicos de la teoría del color para poder juzgar de manera mínimamente objetiva y con razones y argumentos de peso por qué funcionan unos diseños y otros no. De nuevo, queda pendiente publicar un post (otro) sobre colores y usabilidad. El tema es realmente fascinante y mucho más complejo de lo que uno podría pensar a priori, y lo más llamativo, es un aspecto al que prácticamente hasta hace muy poco no se le ha comenzado a prestar atención más allá de la pura faceta estética o emocional cuando en realidad, es un aspecto fundamental para la usabilidad de cualquier interfaz.

Cuando desde la Fundación Mozilla se afirma que no están interesados en desarrollar o convertir Firefox en un Sistema Operativo están siendo literalmente sinceros…

…porque no están desarrollando un Sistema Operativo. Lo que están desarrollando es una Interfaz Humana.

O lo que es lo mismo están evolucionando el concepto de los actuales sistemas operativos que están tendiendo a converger en la nube, a ser multidispositivos y multimodales.

Intento explicarlo de forma breve.

Me estoy terminando de leer “The Humane Interface: New directions for designing interactive systems” de Jef Raskin, el padre de Aza, jefe de Experiencia de Usuario de Mozilla Labs. El título es literal y lo dice todo acerca de lo que están haciendo los ingenieros de la Fundación Mozilla:

“La Interfaz Humana: Nuevas direcciones para diseñar sistemas interactivos”

Han transcurrido 34 años desde que apareciera la primera versión de la interfaz gráfica de Macintosh que fue desarrollada por Steve Jobs y Jef Raskin, y 34 desde la aparición de la primera versión de Windows.

Y aún a pesar de que han transcurrido tres décadas, los sistemas operativos siguen siendo tan duros, tan extraños y ajenos para los usuarios como un transbordador espacial.

Un sistema operativo no está centrado en las personas, en los humanos, lo está sobre todo en las máquinas y en un modelo de interacción artificial y extraño a cómo pensamos y funcionamos. El Diseño de Interacción está centrado literalmente en la Interfaz Gráfica de Usuario (GUI) cuando debería estar centrado en el usuario, en la persona, en lo que quiere hacer, en dar respuesta a sus necesidades, sus objetivos y sus tareas.

Sí, los actuales Sistemas Operativos lo hacen, pero están anclados en un modelo conceptual que, para más pecado, está centrado en el paradigma de la metáfora del escritorio (desktop) local y en un modelo de interacción basado en un periférico, el ratón que va siendo hora de que sea superado. En cuanto a los periféricos de entrada Apple acaba de dar el primer tímido paso para ir más allá de la tremenda limitación que supone interactuar con una interfaz virtual a través de un dispositivo tan extremadamente limitado como el ratón. Una herramienta que no sólo NO amplifica las capacidades humanas (la función de nuestras manos) sino que además las está limitando tremendamente y por ende anclando el diseño, la evolución de las nuevas interfaces humanas y el Diseño de Interacción.

Hay que dar otro paso. El ecosistema social y tecnológico está preparado. Tenemos la tecnología hardware y software necesaria para llevar a buen puerto tal empresa y comenzar a hacer que los ordenadores sean menos máquinas y más humanos y que la interacción que mantenemos con ellos se parezca más a las de las personas y menos a las de los robots basadas en la asimilación de conductas y patrones de interacción “artificiales” inventados como metáforas del mundo real por los Diseñadores de Interacción.

El objetivo de la Fundación Mozilla es ambicioso. Está desarrollando la primera Interfaz Humana. Es una apuesta ganadora porque no rompe con lo anterior y con lo que está funcionando actualmente, sino que no es ni más ni menos que  una nueva capa inteligente que permite un diálogo y una interacción más fluidas entre la persona y las interfaces gráficas de los actuales sistemas operativos (Windows, OS X, Ubuntu, Gnome, Android…) buscadores y World Wide Web.

Lo más interesante, además y aquí no sé si en la Fundación Mozilla son plenamente conscientes de esta circunstancia, es que el día de mañana si quisieran, dicha interfaz podría ser independiente incluso del navegador utilizado por el usuario: Firefox, Internet Explorer, Chrome, Opera o cualquier otro…

…ya que lo único que hace falta es una línea de texto, un campo input en el que introducir texto u órdenes ya sea mediante el teclado físico o virtual o mediante la voz y un área en la que apareciese la interfaz ad-hoc pertinente con la que interaccionar o dicho de otra forma, menos críptica y más tangible: Ubiquity o evolucionar como están evolucionando las actuales barras de navegación de los navegadores hacia barras de interacción con un lenguaje o formas más humanos.

La de Mozilla es una apuesta ganadora porque además va a fusionar otra interfaz todavía más revolucionaria de una forma totalmente transparente y natural para el usuario: la interfaz de Google. Imita la exitosa estrategia de neg0cio del buscador basada en la Larga Cola y los modelos freemiun con suma brillantez y lógica naturalidad evolutiva desde un punto de vista tecnológico.

Al nuevo modelo de interacción que ofrece Ubiquity -abierto a su desarrollo y evolución por parte de la comunidad de programadores y con la iniciativa de JetPack, abierto también a usuarios sin conocimiento de programación- se da una tremenda y potente solución a algo que ha sido el talón de aquiles de la moderna Biblioteconomía y Documentación desde sus orígenes hace cien años y algo crítico para las personas y su actividad diaria: la Findability o cualidad de poder navegar por un sistema de información digital y recuperar los documentos o la información puntual que necesiten en cualquier momento.

En el contexto tecnológico en el que nos encontramos, este “sistema de información digital” es la World Wide Web, y al centrar el desarrollo tecnológico en ella, el Ordenador Personal -Personal Computer- se desvanece surgiendo la Identidad Digital -Digital Identity- o Espacio Personal -Personal Space- centralizada en esa Interfaz Humana “navegador”, que son precisamente los ejes en los que está trabajando Mozilla.

En Firefox se va a fusionar Ubiquity, Google ¿Bing? Wikipedia, etc, etc… y se va ha hacer totalmente transparente el sistema operativo que corra por debajo. No interesa la herramienta tecnológica, interesa el servicio y la funcionalidad que presta.

Al integrar Google en la nueva Interfaz Humana, Mozilla se asegura a futuro la percepción de su principal fuente de ingresos incorporando automáticamente todas las mejoras que desarrolle el Buscador, mientras que ellos se centran en evolucionar la capa crítica en cuanto a la interacción con los usuarios y la Experiencia de Usuario se refiere.

Y por supuesto, al desarrollar Firefox como proyecto de código abierto, multiplataforma y multidispositivo creando y dinamizando una comunidad social y de usuarios se asegura su éxito a futuro.

Es un modelo de negocio ganador. Y lo más paradójico es que es bueno para todas las partes implicadas en el ecosistema tecnológico: Google, Microsoft, Apple… todos ganan con esta nueva Interfaz Humana por dos razones fundamentales:

• porque la base que sostiene sus modelo de negocio -los usuarios- van a seguir necesitando, al menos de momento, los actuales sistemas operativos comercializados,
• y porque el tiempo que los usuarios van a dedicar tanto en su trabajo como en su ocio, se va a incrementar y perpetuar sea la dirección que sea en la que evolucionen sus herramientas tecnológicas.

Todo está convergiendo en la World Wide Web y en la nube.

Después de treinta años por fin estamos superando el paradigma del Sistema Operativo, del Ordenador Personal y de sus periféricos tradicionales.

Por fin se está desarrollando la Interfaz Humana.

Os recomiendo que os leáis “The Humane Interface: New directions for designing interactive systems” de Jef Raskin. Es una nueva concepción de Sistema Operativo que creo que está tomando una dirección insospechada a albur del actual desarrollo tecnológico.

En cuanto a la gestión de identidades en Firefox podéis echar un vistazo a la última maqueta publicada por Alex Faaborg sobre ello o a la de la navegación por los bookmarks y etiquetas. Tengo muchas ganas de ver la nueva interfaz de Firefox 3.7.

Post actualizado:

La manifestación es a las 18:00h en la Plaza de España.

Entrevista a Ricardo, patrón del Alakrana:

Desde el Alakrana: “Si dentro de tres días no hay movimiento de traer a los piratas de España, empiezan a matarnos de tres en tres”

Si en tres días no se extraditan a los piratas encarcelados en España empiezan a morir marineros.

Extradición de los piratas ya. 36 marineros están en una situación crítica. Hoy, sábado a las 18.00 horas manifestación en Vigo por la liberación de los tripulantes del Alakrana. Todavía no sé el lugar, a ver si me puedo enterar. Si eres vigués o de los alrededores, acude.

Por favor, posteálo en tu blog y exige la liberación de los tripulantes del Alakrana ya.

Lo siento pero en este post los comentarios están cerrados.

Quién le haya tocado rediseñar alguna vez un buscador y haya hecho un benchmarking de diferentes buscadores en un período relativamente dilatado de tiempo se habrá dado cuenta de que, debajo de su apariencia estática, sus interfaces son extremadamente mutables.

Las experimentaciones son continuas.

De las características que se han añadido a la home de Google en el último año y medio me gustan especialmente las autosugerencias. Son un gran avance y dan un juego extraordinario en tanto que permiten disponer de un área de interacción líquida cuyos elementos pueden ser redefinidos en función de la acción que se invoque desde el box de búsqueda.

En los últimos día me ha llamado la atención algunas novedades que se pueden ver en la versión internacional y que se pueden comparar (no sé durante cuanto tiempo estarán disponibles o si serán una característica permanente) con la española:

Autosugerencias en Google España. No se resalta la cadena de búsqueda complementaria a la introducida

Autosugerencias en Google.com La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

El nuevo rediseño tiene algunas diferencias importantes frente al anterior:

• Se descarga cognitivamente la interfaz suprimiendo todos aquellos elementos no estrictamente informativos. Desaparecen los resultados de búsqueda alienados a la derecha, en color verde, que al usuario no le aportan objetivamente nada.
• Se suprime el enlace de cerrar. Ahora, las autosugerencias se cierran haciendo clic sobre cualquier parte de la interfaz que no esté dentro de su área.
• El color azul cuando el cursor se posiciona encima de una de las sugerencias o a su altura, es mucho más claro y menos saturado que anteriormente.
• Se incorporan los botones de buscar rotulados como “Google Search” su producto, el buscador, y el botón de “Voy a tener suerte” su marca. En Mac y en el contexto de este rediseño, cobra pleno sentido la nueva apariencia de los botones abandonando la propia del sistema operativo (con los bordes redondeados). Adquieren bordes rectos en línea con los de la caja que los envuelve.

No obstante, quizá, de todos los cambios que introducen me llama especialmente la atención uno último:

Hasta ahora en las autosugerencias normalmente se resaltaba la raíz introducida por el usuario en el box de búsqueda.

Autosugerencias de Amazon. Hasta ahora se resaltaba la cadena introducida por el usuario en el box

En Google, en el presente rediseño, por el contrario, se resalta la cadena complementaria a la introducida.

Autosugerencias en Google.com La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

Resaltando en negrita la cadena textual complementaria, se persigue centrar la atención en la parte que desambigua y que es la que le interesa al usuario.

Significativo y más usable.

Por otro lado hay que tener en cuenta otros dos aspectos:

1. Los colores definen capas informativas que se encuentran en distintos niveles.
2. Los tamaños y los cuerpos de las fuentes también.

En el presente rediseño y centrándonos en el área de las autosugerencias, la parte de las cadenas que no está en negrita constituye una capa informativa y la parte en negrita otra. Observad arriba las capturas de pantalla de Google España y Google.com. En este último, el texto en negrita parece “flotar” en un nivel inferior. Parece que hay un escalón lo que da además sensación de movimiento ¡¡!!

¿Por qué?

Cuando no hay diferenciación de colores sino de pesos en la fuente, la negrita otorga una mayor cantidad de color, en este caso de negro, a las letras y por tanto aparecen como más lejanas. En la escala cromática los colores cálidos son los que percibimos como más próximos o cercanos. Los colores fríos como más lejanos.

Es interesante señalar un curioso efecto psicológico que se está dando. Mientras que el cuerpo de la fuente en negrita es mayor y por ende lo percibimos como más cercano (percibimos como más próximo lo de mayor tamaño) el código de color transmite justo lo contrario, mayor lejanía. Se está produciendo un efecto disruptivo a nivel cognitivo.

Curioso.

Yahoo Search utiliza los colores y tamaños de fuente de una manera mucho más radical para separar la información por capas:

Yahoo Search. Autosugerencias

• En Yahoo Search el fondo de los autosugerencias es lo más lejano, luego percibimos como más cercano la parte de la cadena que se corresponde con la escrita en el box de búsqueda, que es un poco más clara que el fondo de las mismas, y por último, percibimos como más próxima la parte de la cadena textual que se encuentra en blanco (la complementaria a la introducida en el box).
• La fuente que utiliza dentro del box de búsqueda es de mayor tamaño que la fuente del texto en las autosugerencias.
• Ambos textos, tanto del box como de las autosugerencias están en negrita.
• En el texto dentro de las autosugerencias el escalón y la percepción de lejanía y cercanía de las capas informativas se produce por el color, no por el cuerpo ya que son de igual tamaño.
• Desde un punto de vista cognitivo es más compleja de establecer la conexión entre la cadena introducida en el box de búsqueda y la de las autosugerencias por:
  1. la utilización de diferentes colores para ambas (una en negro, y la otra, en azul navy) y
  2. la alineación de cadenas textuales no es directa en todos los casos. Puede haber sugerencias de búsqueda que comiencen con una cadena distinta a la introducida en el box de búsqueda por el usuario (en la imagen de la captura, la cuarta sugerencia por ejemplo).

Creo que es mejor el diseño de Google a pesar del efecto apuntado ya que:

• Conecta mejor la información del box y del área de las autosugerencias utilizando un único color análogo, el negro, frente a los tres de Yahoo Search.
• Utiliza menos colores lo cual significa que el usuario tiene que hacer un menor esfuerzo cognitivo para interpretar la información que está visualizando.

Por último, un experimento interesante en línea con el nuevo rediseño de Google. Aun cuando la conexión entre la cadena introducida en el box de búsqueda por el usuario y las inferiores es directa por tener la misma alineación y el mismo fin y comienzo:

Google. Alineación de las cadenas complementarias en el área de las autosugerencias con el fin de la introducida en el box de búsqueda

aplicando la misma filosofía que la que se ha seguido para poner en negrita la cadena de búsqueda complementaria a la introducida en el box –> centrar la atención en ella, creo que sería interesante testar qué efecto podría producir poner en negrita la cadena dentro de box de búsqueda:

Con ello se lograría que ambas cadenas se percibiesen como un todo estableciéndose una conexión aun más fuerte y mejorando la usabilidad desde un punto de vista cognitivo ya que se percibirían exactamente igual que dos piezas de un puzle que encajan la una en la otra. Ello empujaría al usuario a llevar a cabo la siguiente acción lógica para completar con éxito la búsqueda, hacer clic en una sugerencia para “juntar” ambas cadenas:

Google. Experimento. Cadenas en el box de búsqueda y en las autosugerencias en negrita

El único “pero” de esta propuesta es que al poner en negrita la cadena del box búsqueda habría que otorgar un tracking negativo a las palabras de la misma (habría que disminuir el espaciado entre letras) para que ocupasen igual espacio que el texto sin negrita de las cadenas en el área de las autosugerencias. Una auténtica lástima porque asignar un tracking negativo supone juntar artificialmente las letras y por ende disminuir su escaneabilidad y legibilidad.