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)

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.

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?

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 ;-)

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.

…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.

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.

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.