Me encanta el rediseño del logotipo de Spanair:

Dicen que es un avión cruzando el mundo aunque los propios empleados de la aerolínea comentan lo que ven, una sonrisa:

Algunos sostienen que se parece al logotipo de Sony Ericsson:

Aunque  yo me decanto más por el de Pepsi:

Parecido que otros asimismo establecen y sumarizan comentando de donde deriva el de Spanair:

Derivacion del logotipo de Spanair. De izquierda a derecha: Logotipo de Boeing + logotipo de Pepsi + logotipo de Expedia

Y es que el círculo es uno de los recursos más poderosos que como diseñadores tenemos a nuestro alcance para focalizar y atraer nuestra atención ya que en la naturaleza, pocas formas hay puramente circulares que podamos percibir cotidianamente, salvo aquella por excelencia de la que dependemos, nuestro astro rey:

…y que sirven junto a una correcta elección de los colores y estudio de las formas para construir marcas potentes que en momentos decisivos transmitan confianza y llamen a la acción para empujar al cambio:

Desde luego que toques de diseño emocional incorpora el logotipo de Spanair, ya que además de la sonrisa tiene un cierto toque retro que nos recuerda a algunos grandes iconos de nuestra juventud (y que marcaron en su momento todo un hito tecnológico):

Parecido que emerge y se hace evidente si invertimos sus colores utilizando alguna herramienta como Photoshop:

(Fijaros en el logotipo original en el detalle de cómo acentúan con un sutil degradado a naranjas más fuertes en donde estaría el comienzo de la boca y a claros en la versión negativa del logotipo)

Y es que aunque nuestra mente consciente no lo perciba, nuestro subconsciente es muy bueno detectando los patrones y mensajes que se ocultan detrás de las formas, recurso extraordinariamente potente que bien utilizado puede dar mucho juego y en cuyos principios se sustenta aquello que llamamos Arte (si no os habéis dado una vuelta por él, os recomiendo visitar el Museo Thyssen Bornemisza, y si no vivís en Madrid, echarle un vistazo a su exposición virtual de arte moderno).

Usados consciente e intencionadamente estos recursos de diseño  nos permiten hacer cosas realmente interesantes:

¿Qué valores quieres transmitir Google con sus terminales Android en contraposición al elitismo de los iPhones?

¿Es un androide rebelde? ¿Enfadado? …

¿y qué valores transmiten si invertimos los colores de la imagen y los espacios positivos pasan a ser negativos y los negativos positivos?

El efecto que provoca es el opuesto, amigabilidad, cercanía, calidez incluso un cierto aire de sumisión, observación, expectación…  ¿curiosidad?

El círculo es un poderoso atractor de la atención. Los bordes redondeados transmiten calidez y cercanía (de ahí que nos gusten tanto a los Diseñadores de Interacción y gráficos y que les gusten tan poco a los maquetadores por el trabajo que les dan hasta que llegue CSS3).

Si quieres crear un punto focal de atención en tu web usa los círculos

Si quieres que tu marca sea interesante, usa los círculos

Combinándolos con otros recursos semióticos de Diseño de Información (proporciones aúreas, superposición de elementos circulares en capas para crear movimiento, linealidad en torno a ejes espaciales en 3 dimensiones…) los resultados pueden ser francamente espectaculares ayudando a crear marcas tan potentes a nivel mundial como la de Pepsi.

Briefing creativo de cómo se gestó el diseño del logotipo de Pepsi (PDF) (vía blog de Alex Faaborg)

Rediseñando el logotipo de Firefox (vía blog de Alex Faaborg)

Simplicidad, armonía, equilibrio, calidez, cercanía, complicidad, ritmo, dinamismo, movimiento, credibilidad…

…en resumen y concluyendo, me encanta el logotipo y la nueva marca de Spanair.

Enhorabuena.



Confieso que tenía franca curiosidad por ver cómo resolvían el tema en cuanto al diseño gráfico de los laterales de la barra de tabs. Mirar una captura de la nightly de hoy (16 de junio de 2010) de Firefox 4 para Windows 7 en la que los bordes por donde aparecen y desaparecen las tabs aparecen planos y sin una línea que los remarque:

Echarle un vistazo ahora a la maqueta del diseño gráfico de la interfaz que han publicado para Mac, concretamente a los puntos que marcan las flechas amarillas, los laterales de la “barra de tabs” por las que aparecen y desaparecen éstas (nota: a pesar de que se ven mal las imágenes en el blog porque aparecen por debajo del texto de la columna derecha, no he querido reducirlas para que se aprecien correctamente los detalles. Para ver bien cada imagen lo único que tenéis que hacer es posicionaros encima de ella, dar botón derecho del ratón y seleccionar la opción “Ver imagen” para verla a pantalla completa en el navegador sin que os moleste la barra lateral del blog):

Os pongo a continuación la maqueta sin las flechas amarillas para que podáis apreciar mejor el diseño gráfico de los bordes de la barra por los que aparecen y desaparecen las tabs:

Fijaros en cómo jerarquizan los elementos de la interfaz de mayor a menor importancia situándolos en diferentes capas de profundidad mediante el uso de las sombras para crear un efecto de oclusión (unos elementos delante de otros). Concretamente pueden distinguirse 4 capas de información o de elementos de la interfaz:

1. La capa de color amarilla: Tab activa que contiene los principales elementos de la interfaz del navegador:
   • Los botones de adelante y atrás para realizar las correspondientes operaciones a través del historial de páginas visualizadas.
   • La barra de navegación o “barra maravillosa” junto a los botones de recargar/parar que ahora han fusionado en uno, situados al final.
   • El box de búsqueda para ejecutar consultas contra los buscadores, que inexplicablemente, versión tras versión, siguen sin fusionarlo con la barra de navegación mientras que en Chrome ya sólo tenemos una única barra de navegación en la interfaz principal. ¿Las causas? ¿? supongo que será cuestión de dinero o que tengan especificado por contrato con los buscadores el hecho de que siga separada o no lo sé pero desde luego, debería tender a desaparecer y fusionarse con la barra de navegación principal en aras de mejorar la usabilidad y simplificar la interfaz principal. El referente en este aspecto es, como comento, Chrome.
   • El botón de los marcadores que posicionan en último lugar, a la derecha, otorgándole gran importancia de acuerdo al estudio que hicieron del uso de los menús y que se sumariza en el mapa de calor que generaron a partir de los datos obtenidos de los usuarios que tenían instalada su herramienta de testeo remoto Test Pilot (para más información, no dejéis de leer el post de Alex Faaborg al respecto). En el mapa de calor podéis observar cómo el menú bookmark y sus opciones son las más usadas (se indican mediante el color rojo). ¿Por qué posicionándolo en ese lugar le están otorgando una relevancia especial, en mi opinión por varias razones:
     • La mitad derecha de la pantalla es aquella en la que para los diestros, normalmente se suele encontrar con mayor frecuencia posicionado el cursor del ratón. Esta afirmación está basada en mi mera percepción por lo que debéis tomarla con pinzas (como todo lo que digo, por supuesto) hasta que no haya estudios formales que la corroboren.
     • Por tanto, es más rápidamente alcanzable por el cursor del ratón al tener que recorrer el mismo por término medio una distancia menor desde la posición original en la que se encuentre.
     • Está posicionado al final de la barra muy cerca del borde derecho de la pantalla. Cualquier cosa que esté situada cerca de los bordes de la pantalla va a poder ser alcanzada con mucha mayor rapidez por el cursor del ratón ya que el borde actúa como guía visual, límite, barrera y freno del cursor en su desplazamiento. El movimiento tiene que ser menos preciso y por tanto se ejecuta con mayor rapidez hasta alcanzar el objetivo -el botón del marcador-.
     • Esta situado en el lugar en el que termina el escaneado visual de la parte superior de la interfaz -la cabecera global del navegador- lo que significa un refuerzo cognitivo de su posición en nuestra memoria de corto plazo.
2. La capa de color rojo correspondiente al botón de la home, situada en segundo plano por detrás de la amarilla. Contiene el botón para volver a nuestra Home Tab o página que tengamos configurada por defecto en las preferencias. Se aprecia que está en una capa diferente de la amarilla por el borde inferior contínuo, negro, que lo separa de la misma (o la parte correspondiente del borde superior de la capa amarilla).
3. La capa marrón en la que están situados los controles de cerrar, minimizar y maximizar. El título de la tab activa centrado, los controles de desplazar a izquierda y derecha la barra de tabs, el control de nueva tab (el “+” situado a la derecha) y el control que despliega el menú con la lista de los títulos de las tabs abiertas en la barra de tabs. Todos estos controles están agrupados en la misma capa y aquí viene lo interesante porque… ¿cómo han resuelto el problema de la jerarquización de la capa de la barra de tabs respecto a las demás a través del diseño gráfico…¿?…pues aplicando una sombra en el lateral de la barra de tabs (lo que marcaba en la maqueta superior con las flechas amarillas). Ello crea el efecto de un bolsillo de un pantalón o de una página en la que con un cúter hiciéramos un corte y por el mismo pasásemos una tira de papel que pudierámos deslizar a uno u otro lado según nos conveniese. Vamos, exactamente el mismo efecto que aplicaba el equipo de UX de Monster para crear puntos focales de atención en su página, y concretamente, en cuanto a cómo diseñaban las tabs que daban acceso a los apartados de “Información personal”, “Experiencia”, “Formación”, y “Objetivos profesionales” (podéis leerlo bajando por el post, como al quinto pantallazo aproximadamente).Una solución de diseño gráfico la del equipo de UX de Firefox francamente inteligente.
4. La capa gris de la barra de tabs propiamente dicha que, con su diseño gráfico, se “introduce” y emerge de la capa marrón.
   

Por concluir, la jerarquización de los elementos de una interfaz no sólo se consigue mediante un buen uso de los colores (y remito nuevamente al post de Monster en el que hablaba de ello). Otro gran recurso además, que tenemos a nuestro alcance son las sombras que ayudan a crear un efecto de oclusión o superposición de los elementos de la interfaz y por ende, de capas de información.

Me encanta Firefox. En su equipo de diseño se respira y se vive la Experiencia de Usuario en mayúsculas. Y lo mejor, es que hay mucho de su trabajo cotidiano que hacen público para uso, disfrute y aprendizaje, de todos.

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?

El primero es la concepción y funcionamiento del buscador de la home. Me gusta cómo lo han planteado. Permiten búsquedas en base a cuatro criterios principales:

• Nombre de ciudad
• Punto de referencia
• Nombre de hotel
• Dirección de hotel

La faceta de “Punto de referencia” no es común ni habitual. Cuando menos me resulta curiosa y una buena idea si tu necesidad de información como consumidor no está predefinida y es más bien exploratoria. Si sabes la ciudad a la que quieres ir, el hecho de que te sugieran lugares con encanto o especiales de la misma se me antoja un valor añadido. Una forma de facetar la información que detrás tiene una reflexión pausada y una definición de un modelo mental de usuario que no suele ser muy habitual que se dé en los diseños de las webs.

Dicha faceta se ve bastante bien en la categorización que hacen en las autosugerencias. La forma en que están diseñadas comienza a ser un patrón de interacción estándar que se está imponiendo desde hace unos meses a ahora.

Facetas de información en las autosugerencias del buscador de Hoteles.com. Se observan cuatro tipos de facetas: Ciudades/Zonas, Puntos de referencia, Aeropuertos y Hoteles. Obsérvese la inconsistencia entre lo declarado encima del box y las facetas ofrecidas, las de "Zonas" y "Aeropuertos" no aparecen descritas encima del box de búsqueda

La idea es, cargar la inteligencia y el trabajo pesado de desarrollo en el background tecnológico y devanarse un poco los sesos pensando en las maneras en que podemos facetar nuestros contenidos para ayudar a los usuarios en sus búsquedas de información. Va siendo hora de comenzar a hacer un poco de trabajo de valor añadido en cuanto a la findability se refiere, definiendo unas buenas taxonomías de contenido y comenzando a enriquecer un área espacial interesantísima, la de las autosugerencias que se despliegan al introducir en el box una cadena o unos caracteres de texto, más allá del mero hecho de ofrecer como viene siendo común, las habituales palabras clave o ocurrencias coincidentes.

Otro componente que me gusta bastante y por lo que veo, que es más bien un estándar en las webs de hoteles, es el calendario:

Diseño del calendario desplegable en el buscador de Hoteles.com

Me gusta el diseño gráfico. El alto contraste con el fondo lo que focaliza la atención en el mismo. La adicción de una sombra para crear un efecto de oclusión y traerlo a primer plano respecto al resto de elementos de la interfaz, el hecho de mostrar dos meses en lugar de uno algo, que no termino de entender cómo no se establece ya de una vez y se generaliza como un estándar en todas las webs de reserva de hoteles, venta de billetes, etc. Dos meses considero que es lo mínimo que se debería plantear en un calendario de este tipo y creo que sería más que interesante y habría que medir el impacto en la venta de billetes o reservas, el hecho de mostrar incluso tres meses en lugar de dos.

Si queréis ver más diseños de calendarios podéis hacerlo en el album de calendarios que tengo en mi página de Flickr.

Tres pequeños detalles más en el calendario:

• Dado que no distinguen gráficamente con una tipografía superior el nombre de cada mes, pondría al menos la primera letra en mayúscula lo que ya sería suficiente para ofrecer una tensión visual elevada junto a su posición encima de las abreviaturas de los días. Tal y como está, cuesta distinguir el nombre del mes, lo que reduce la usabilidad. Curiosamente en el diseño de la versión estadounidense sí se observa que ponen en mayúscula el nombre de cada mes, fijaros en la diferencia entre utilizarla y no, aunque también se ve que siguiendo el mismo criterio, ponen también en mayúsculas la primera de la abreviatura de cada día lo que disminuye la legibilidad de los mismos e impacta asimismo en la usabilidad :-P

Diseño del calendario de la web estadounidense Hoteles.com. Llama la atención como frente a la española, ponen la primera letra del nombre del mes en mayúscula lo que redunda en una mejor escaneabilidad, focaliza sutilmente la atención en el nombre y mejora la usabilidad del calendario. No obstante, ponen igualmente en mayúscula la primera letra de la abreviatura de cada día lo cual supone una merma de esta.

• Me encanta la forma en que se ve el componente en Mac, con la flecha apuntando al box de texto resaltado en azul en lugar de la típica capa alineada con el borde izquierdo del campo de texto. Mucho más clara de esta forma y menos equívoca la relación que se establece entre el calendario y el campo. Fijaros por ejemplo en el calendario de Xpedia:

Calendario de Xpedia.com. la capa de los meses se alinea con el borde izquierdo del campo de introducción de la fecha lo cual suele ser un estándar común. El problema es que los únicos elementos que el usuario tiene para relacionar dicha capa con el primer campo, y no con el segundo, son el foco azul de la fecha cuyo efecto se pierde por ser el color predominante de fondo en la web, y el hecho de estar exactamente alineada con el borde izquierdo del campo. El diseño del calendario en Hoteles.com con la flecha apuntando el campo y la ligera separación respecto a la parte inferior del mismo es mejor desde un punto de vista de usabilidad ya que la relación que se establece es inmediata e inequívoca.

• No incluyen un botón de cerrar en la capa. ¿Mejora o empeora la usabilidad del componente éste hecho? Por un lado se observa que la capa permanece abierta hasta que el usuario hace clic en un día seleccionándolo momento en el que se cierra, o hace clic en cualquier otra parte fuera de la misma, hecho que igualmente la cierra. El único “pero” es que si el usuario se ha equivocado de día tiene que volver a pulsar sobre el campo para abrirla.
  Si se incluye un punto de interacción o botón de cerrar el usuario se verá más movido a desplazar el cursor hacia dicho botón para ocultar la capa con el consiguiente coste de tiempo y esfuerzo para llevar el puntero del cursor a dicho elemento y hacer clic en el mismo.
  ¿Lo incluimos entonces o lo quitamos? Google Maps por ejemplo incluye el botón de cerrar en los bocadillos aunque este desaparece igualmente si el usuario hace clic en cualquier otro punto del mapa que no sea el bocadillo abierto. El buscador de Google en su último rediseño de las autosugerencias elimino el enlace de cerrar que estaba en la parte inferior derecha. ¿Lo quitamos o lo dejamos? Particularmente yo sería de la opinión de quitarlo, el diseño queda mucho más limpio y el comportamiento es perfectamente predecible en cuanto el usuario lo utilice un par de veces.

Me gusta también el diseño visual del elemento de número de habitaciones. Un diseño gráfico muy limpio y muy visual. Eso sí, se les junta el “Mayores de 18″ con el otro rango de edad “0-17″ años lo que parece que es mayor de 180 años :-) En el diseño americano es mucho más claro –> “Ages 18+” y “0-17″:

Diseño visual del elemento para agregar habitaciones y especificar el número de ocupantes de las mismas

Por último me llaman la atención los filtros que hay mano derecha en la página de resultados:

Concretamente:

• Me resulta curiosísimo el diseño del deslizador para especificar el rango de precios de las habitaciones del hotel. Es la primera vez que veo uno así, demasiado recargado pero tiene algún detalle majo como el uso de líneas verticales más largas y otras más cortas para establecer cinco subrangos de precios.
• Me gusta mucho cómo han planteado el tema de las estrellas del hotel (toda vez que utilizar las estrellas fuera de un contexto específico como este y para otra cosa que no sean los favoritos puede dar lugar a un problema de usabilidad como apuntaba Diego Cano en otro caso en el que también hablábamos de deslizadores y estrellas en una web de viajes.
• Me encanta el detalle de la inclusión de la taza del desayuno en el filtro de “Servicios o comidas incluidas”, buenísimo.

Hay más cosas pero de momento, lo dejo ahí.

A veces los mensajes son más claros, explícitos y directos. Otras más simplones (aburrido y manido recurso del sexo, sexo y más sexo)…

Con el cartel de la nueva serie que emite Calle 13, Nurse Jackie, que adorna estos días las marquesinas de los autobuses madrileños no se han comido mucho la cabeza que se diga…

El mensaje es claro, directo y contundente. “Rebelde”, que podría decirse, si lo interpretamos con condescendiente ingenuidad. Y si no somos tan ingenuos, con cualesquiera otros significados que le deséis dar…

…en dos palabras: explícito y obvio…

Y el caso es que la primera vez que lo ví, algo extraño me hizo cosquillas en el cogote y no sabía exactamente qué era…

…por lo que a la noche siguiente, cuando volví a pasar por delante de la marquesina ya me fijé con un poco más de atención a ver si averiguaba qué era lo que no me cuadraba…

¿?

…y es que las jeringuillas se sujetan entre los dedos índice y corazón, y el émbolo se presiona con el dedo pulgar…

y no entre el corazón y el anular…

En fin, que tan sólo hay que sustituir la jeringuilla por lo que debería ir en su lugar, un bonito dedo corazón, para captar el mensaje principal.

Lo que efectivamente quieran transmitir los publicistas y el cómo, a la luz del mensaje de texto de debajo, ya lo dejo a la imaginación de cada uno ;-)

Lo dicho, que mire usté que son ocurrentes estos del marketing oye.

El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. A continuación se muestra tal cual aparece nada más acceder a Google Docs, sin haber hecho clic en el control:

En lugar de utilizar el clásico checkbox incluido en la cabecera de tabla alineado con los checkbox inferiores que permite, activándolo o desactivándolo, seleccionar todos los elementos de una sola vez en lugar de hacerlo uno por uno (ver estados de interacción a continuación en AOL Mail y el Explorador de Windows Vista):

en Google Docs, al hacer clic sobre el mismo aparece un menú desplegable con dos opciones:

• Seleccionar todos los elementos (nº elementos)
• No seleccionar ninguno

que permiten realizar las mismas opciones pero explicitándolas haciendo que sea más predecible el funcionamiento del componente.

Una cosa que no termina de convencerme es que, en el diseño del control, estén o no estén los elementos inferiores seleccionados, el checkbox aparece siempe como seleccionado.

También me llama mucho la atención el uso del color que se hace en el gestor de Google Docs. Tal ycomo está ahora mismo, por defecto, todos los elementos del listado aparecen con un color de fondo que es un azul muy claro que indica un estado inactivo:

Cuando se seleccionan uno o varios elementos el color de fondo cambia a uno más claro indicando el estado activo:

Es justo el patrón contrario que se ha seguido hasta ahora en todos los sistemas operativos Windows, Mac, Linux y aplicaciones web (ver por ejemplo la captura del explorador de Windows Vista más arriba para observarlo), color claro para estado sin seleccionar, color más oscuro para elementos seleccionados.

El otro control de interfaz que me ha llamado la atención es el que aparece en la paleta de colores de Spreadsheet de Google Docs. Concretamente el diseño del recuadro de color cuando se ha seleccionado en la paleta. A continuación el aspecto que tiene en Spreadsheet de Google Docs:

Además de resaltar sutilmente con un borde que da aspecto de botón hundido el color seleccionado, le ponen una marca de check al mismo para distinguirlo claramente.

El mismo control en Excel con un color seleccionado (recuadro sombreado en rojo):

¿Qué os parecen los controles? ¿Opiniones sobre los distintos estados de interacción / diseños gráficos?

Y para ello, la World Wide Web es la mejor escuela para aprender si eres Diseñador de Interacción:

Navega, navega y navega. Y sobre todo navega con ojo crítico.

Es lo más importante y lo mejor que puedes hacer para aprender modelos de interacción y aplicarlos en tu trabajo cotidiano. Es difícil encontrar sitios con patrones de interacción novedosos y buenos pero es estimulante cuando encuentras alguno que merece la pena.

Viendo algunos de los portales de empleo en España me da la impresión de que no han evolucionado gran cosa en los últimos años. El diseño y las tecnologías de las que disponemos actualmente han avanzado mucho y va siendo hora de que hagan un rediseño profundo de sus interfaces y modelos de interacción. Con el actual contexto económico, si no está ya en camino no debería tardar mucho en llegar, pero tan sólo es una impresión.

Uno de los que he visto, que la verdad, desde la última vez que lo utilicé hace hace ya algunos años a ahora, ha cambiado mucho y para bien, es Monster.es.

En concreto el otro día me estaba fijando en el uso que hacen de los colores.

Ésta es una captura de parte de la pantalla del perfil de un candidato:

Por deformación profesional como Diseñador de Información tiendo a ser bastante Tufteano. Me gustan determinadas escuelas y determinados maestros. Y en la medida de lo posible tiendo más a borrar tinta que a utilizarla en exceso en los prototipos, aunque reconozco que todo ha de ser en su justa medida.

A veces es pertinente, útil, conveniente y necesario añadir tinta y, más concrectamente, elementos que actúen como agrupadores de contenidos.

En cuanto a ello, en Monster.es me gusta mucho el uso que hacen del color para modularizar los componentes de la página y particularmente, en el ejemplo de la captura, los correspondientes al del nombre del candidato y los de “Hechos destacados de tu carrera profesional”, “Habilidades”, “Afiliaciones profesionales”, “Méritos y premios” y el resto que están por debajo y que no aparecen aquí.

Tengo pendiente escribir un post en el que hable un poco más en profundidad sobre el color y los colores y de su importancia en cuanto a lo que a la usabilidad de las interfaces se refiere.

El tema es auténticamente fascinante y lejos de lo que pueda parecer, de todo menos fácil y baladí.

La verdad, por muchísimas razones es muy muy díficil hacer verdaderamente un uso 100% correcto de los colores. Incluso me planteo sí, desde un punto de vista del Diseño Emocional verdaderamente hay que ser un “talibán” en cuanto a la hora de aplicar dichas convenciones dado que, antes del nivel del procesamiento reflexivo (o racional) tenemos otros dos previos: el visceral, el más rápido a partir de las percepciones obtenidas por nuestros sentidos del entorno y los objetos con los que interactuamos, y el conductual que constituye el nivel intermedio entre el reflexivo y el visceral, y que es aquel en el que llevamos a cabo casi todo nuestro comportamiento.

Ambos también intervienen en el proceso de percepción y lo condicionan desde un punto de vista emocional por lo que las recomendaciones sobre uso del color pueden decir una cosa, pero el estómago puede decir otra.

Con independencia de esta reflexión, tener un mínimo de conocimiento sobre la teoría del color y la percepción visual humana es fundamental y hay un buen número de guías que se podrían aplicar para mejorar la usabilidad de las interfaces.

Centrándonos en Monster.es y en la citada página de “Mi Perfil” de un candidato, fijaros en el uso que hacen de los colores:

He conservado el tamaño original de la imagen porque se aprecia mucho mejor que reduciéndola y quería que se viera bien aunque desborde el tamaño de la maquetación del cuerpo central del blog.

Fijaros en los efectos que se consiguen con el tratamiento de los colores que ha hecho el diseñador de Monster.es.

• El gran módulo central parece flotar al estar rodeado de blanco. En la página completa de “Mi Perfil” en el portal, a la derecha límita con un módulo vertical de “Consejos rápidos” que en esta captura no aparece. A su vez, a la derecha de éste sólo hay espacio blanco hasta el ascensor del navegador y el borde de la pantalla. A la izquierda de este gran módulo central, igualmente, sólo hay espacio en blanco hasta el mismo borde de la pantalla.
• Los colores claros parecen acercarse, los oscuros alejarse. O dicho más correctamente. Los colores claros se perciben como más expansivos y crecen mientras que los oscuros parece que se contraen y provocan un efecto de inmersión. La pregunta buena y que muy poca gente de todo lo que he leído se hace es ¿por qué? Una posible respuesta en base a lo que entiendo (ya que no soy ni físico ni psicólogo) quizá llegue en ese post sobre los colores.
• Quedémonos con una idea:

Los colores nos permiten establecer capas de información.

Lo dice Tufte en su extraordinario “Envisioning Information”, lo explica bastante más científicamente Colin Ware en su obra “Information Visualization” y se infiere de un cuadro apasionante que se pinta leyendo acerca de la teoría del color.

En la captura de arriba podemos distinguir las siguientes capas de información:

• El color blanco del fondo y de los módulos de “Francisco Tosete Herranz” y del de “Hechos destacados de tu carrera profesional” conforma la capa de información que se percibe como más próxima o cercana.
• Las cabeceras verdes de ambos módulos constituyen otra capa de información que se sitúa ligeramente más atrás que la capa blanca. El hecho de que las cabeceras estén unidas al área blanca inferior mediante un borde de un píxel de grosor de color gris, y a la consistencia en el código de color de los módulos (mismos elementos constitutivos con los mismos códigos de color) hacen que los relacionemos semánticamente y que como tal, insconcientemente los percibamos.
• Los rótulos de color naranja se perciben a su vez como más cercanos que el verde del fondo de las cabeceras.
• El color negro del texto constituye la capa más lejana de información. Su uso contra el blanco (máximo contraste) hace que aparezca como si el texto estuviera troquelado en una hoja de papel y detrás viéramos una capa negra.
• El color morado que se utiliza de forma consistente para identificar los enlaces hipertextuales con excepción del rótulo del pequeño módulo de arriba a la derecha “Datos de contacto” conforma otra capa de información más lejana que la del fondo azul de todo el módulo central.
• En las pestañas se produce un curioso efecto psicológico:

• Literalmente se perciben como si fueran el bolsillo de un pantalón por la sombra que tiene detrás la pestaña activa y la línea que sirve de base para las inactivas. Esta sombra crea un fuerte efecto de oclusión en la primera pestaña haciendo que aparezca como más cercana respecto a las demás. Este efecto se refuerza por el color de relleno de azul más oscuro de las pestañas inactivas que hace que se perciban como situadas en un plano inferior. Es como si tuviéramos una hoja de papel metida en ese bolsilo, que sobresaliese ligeramente y en la que estuvieran pintadas las pestañas inactivas.
• Hay otro efecto curioso que realza la usabilidad de las pestañas. Mientras que el color de la pestaña activa es plano y no invita a hacer clic sobre ella, el degradado en las pestañas inactivas, más claro en la mitad superior y más oscuro en la mitad inferior hace que se perciban como botones ofreciendo una affordance o pista visual que nos invita a interactuar sobre las mismas. Por último, la sensación de “bolsillo del pantalón” se refuerza por el hecho de que la línea horizontal en torno a la que se alinean las pestañas no llega hasta los mismos bordes exteriores del componente marcando una separación de zonas. En su lugar dejan un espacio desde su inicio hasta su margen conectando las zonas de encima y de debajo de la línea, y permitiendo que el flujo visual fluya por todo el componente (mirar la captura superior para apreciarlo mejor). De esta forma, el color azul homogéneo de fondo y la ausencia de líneas de separación entre módulos funciona como agrupador de todos los componentes interiores.
• El efecto de aplicar una sombra detrás para crear el efecto de oclusión se utiliza de manera recursiva en otros componentes como el de “Datos de contacto”, el de logado de color negro: “Hola Francisco”, o el de “Consejos rápidos”:

• Eso sí, dicha sombra no se aplica de manera homogénea en ellos. En el de “Datos de contacto” aparece a ambos lados del mismo, la fuente de luz es cenital desde la parte inferior. En los módulos de “Hola Francisco” y el de “Consejos rápidos” la fuente de luz es cenital desde la parte superior lo que provoca que la sombra se vea en la parte inferior y ofrezca ese efecto cómo si estuviéramos tirando del componente hacia nosotros abombándolo. Por último, en el pequeño botón de ayuda de color azul de la cabecera del módulo inferior debajo de las pestañas, la sombra se proyecta sobre el lado inferior derecho del botón lo que implica que la fuente de luz se encuentra en la superior izquierda.

Como conclusión, lo dicho un poco más arriba: es muy muy difícil hacer un uso verdaderamente correcto de los colores aunque se deba tender a ello. El diseño gráfico es un aspecto fundamental y crítico que impacta en la usabilidad de las interfaces y es conveniente tener un mínimo conocimiento de la teoría del color. También es fundamental que pueda existir una comunicación fluida entre diseñadores de interacción y diseñadores gráficos.

En cuanto al uso de capas de información en los prototipos apuntar algo interesante:

Para crearlas y comunicarlas de manera efectiva a los diseñadores gráficos lo mejor es utilizar escalas monocromáticas (preferiblemente grises aunque también se puede utilizar cualquier otro color) y jugar con la luminancia -brillo-  estableciendo buenos contrastes entre la capa de información de fondo y la de primer plano, o entre las de los diferentes planos entre sí.

Por ejemplo, en los siguientes prototipos:

• El usuario hace clic (a) sobre el enlace de editar para corregir alguno de sus datos personales.
• Como resultado se entra en el modo de edición (b) y los campos se vuelven editables. El usuario tiene un triple feedback de que está editando por 3 outputs:
  • al lado del rótulo de cabecera “Registrarse en ACME Aerospace” el enlace de editar desaparece y cambia al rótulo “editando datos”,
  • los textos aparecen dentro de campos inputs lo que ya de por sí es un indicio suficientemente significativo de que se ha cambiado de modo no editable a editable y,
  • alineamos el enlace de “cancelar” y el botón de “Guardar cambios” a mano derecha, en línea con el borde derecho del último campo del formulario lo que es indicio suficiente para que, gracias a las Leyes de la Gestalt, percibamos que actúan sobre todo ese grupo de campos haciendo predecible saber qué sucederá al pulsar sobre el botón de guardar.
• Este sería un ejemplo de uso de mínimo de tinta bastante tufteano. Posibles variaciones implican, por ejemplo, que agreguemos una línea horizontal por encima del enlace de “Cancelar” y el botón de “Guardar cambios” de la misma longitud que el cuerpo de campos para reforzar que ambos elementos actúan sobre todo el grupo (c). Aunque no se aprecia en la imagen porque ha sido reducida, la línea no es sólida sino de puntos, lo que indica permeabilidad. Al permitir fluir la vista entre los puntos conecta de manera elegante lo situado por encima y debajo de la misma.
• Si deseamos hacer más explícita la agrupación de campos y el hecho de que el enlace de “cancelar” y el botón de “guardar cambios” actúan sobre todos los campos del componente podemos utilizar otro tipo de agrupador: un borde gris que los encierre a todos bajo los cuáles situemos el citado enlace y botón (d). Lo interesante es que aquí ya estamos estableciendo capas de información aunque en este caso tengan el mismo peso al tener igual color de fondo.
• Si queremos establecer una jerarquía de información más explícita y marcada entre ambas capas podemos aplicar a la del grupo de campos que se están editando un color de fondo gris más oscuro. Esto hace que todo el grupo aparezca como “hundido” y en un segundo plano respecto al primero, que es el de color blanco. Logramos así realzar el hecho que nos encontramos en otro modo distinto al de visualización inicial de los datos, el de edición, y conseguimos además acentuar la sensación de inmersión en los campos centrando mejor la atención (e).
• Por último, si añadimos un borde de color gris ligeramente más oscuro que el del fondo interior (f)  realzamos toda la forma respecto a la capa de información blanca envolvente. La pregunta que cabe hacerse otra vez es ¿por qué? y la respuesta, de nuevo, posiblemente llegue en ese post sobre los colores.

El uso de los colores es un componente fundamental de la usabilidad de las interfaces y no puede ni deber ser obviado. Hay que actuar sobre ellos.

En el caso de los prototipos, a la hora de establecer capas de información lo mejor es utilizar una escala de color monocromática, preferiblemente grises, ya que son los más adecuados para, desde un punto de vista del sistema visual humano, poder juzgar las diferencias en las variaciones de color que indican la jerarquía y la importancia de las distintas capas.

Fijaros en los siguientes ejemplos como se distinguen perfectamente las capas de información y su profundidad. La disonancia cognitiva que se introduce cuando el color más oscuro es el primero de la “escalera” de colores y el más claro el último, la sensación de movimiento hacia arriba o abajo en la escalera en función de donde esté situado el color más claro y el más oscuro (o la que se produciría de avanzar y retroceder si la escalera estuviera situada horizontalmente) y cómo cuando se introducen un borde de 1 pixel negro cuesta más apreciar la jerarquía de información correctamente aunque tiene el efecto de potenciar el color de relleno interno de cada cuadrado.

Todos estos efectos y muchos más son los que cotidiana e inconscientemente percibimos una y otra vez cuando nos encontramos delante de una interfaz. Es buena cosa saber algo de ello y de cómo funcionan los colores de cara a mejorar su usabilidad y de crear determinadas sensaciones, estados psicológicos o efectos (como por ejemplo, el citado estatismo o movimiento de la página).

Y de nuevo, el equipo de UX y diseño gráfico de 11870.com lo ha vuelto a hacer y ¡los ROBOTS vuelven a la carga!

Esta es una captura del pie de hoy de su home:

No sé si vosotros hacíais recortables de pequeños. Yo sí. Y estas son justo el tipo de cosas que te traen a la memoria aquellas épocas y te hacen esbozar cuando menos una sonrisa. El tipo de cosas que humanizan una interfaz y un sitio frío. Y el tipo de cosas que pueden crear tendencia en cuanto a diseño de UX, look & feel y diseño emocional se refiere en los sitios web.

¡¡¡A imaginar diseñadores…!!! (Y a ser un poco más humanos directores/gestores/responsables de las webs, que de esto trata la cosa, de crear experiencias de usuario. Tus usuarios y tu cuenta de resultados lo agradecerán. ¿Acaso necesitas más razones para empezar a poner en práctica este tipo de iniciativas?

Y lo mejor de todo es que, aparte del pie… tienes un enlace bien majo para descargarte el recortable navideño del robot con su ZX Spectrum 48k :-)

Ante esto sólo puedo decir una cosa, de nuevo, enhorabuena a Esther, al equipo y al Director de UX. Buenísimo.

Pd. No me resisto a hacer una pequeñísima sugerencia, ya sé que el diseño es plano pero precisamente por eso y para resaltar aún más el enlace ¿habéis probado a ponerle una sombra debajo muy pequeña para crear un efecto de oclusión y potenciarlo como foco de atención? Podría quedar bien :-)

(*) Otros pies de página que acabo de ver y que me han llamado la atención:

Smashing Magazine - Pie de página

Foodspoting.com - Pie de página

En Boo.com me he encontrado un curioso filtro. En la home se puede observar junto al box de búsqueda por ciudad o nombre de hotel un deslizador que permite restringir los resultados a los hoteles de “n” estrellas. El uso del deslizador permite establecer un rango de las categorías de hoteles que nos gustaría consultar: entre ninguna y 3 estrellas, entre 2 y 5 estrellas..

Lograr el mismo comportamiento sin utilizar el deslizador y con controles “más estándares” es complicado y menos usable. Un posible diseño sería disponer de dos combos desplegables, uno rotulado como “hoteles desde…” y cuyos valores fueran desde ninguna estrella hasta 5, separando ambos combos la palabra “hasta” y otro combo rotulado como “hoteles hasta…” con valores que deberían variar en función de la selección que hiciera el usuario en el primer combo.

Muy complejo. Mejor el deslizador aunque habría que chequear su uso de cara a accesibilidad para asegurarnos de que no da ningún problema.

Por cierto, la forma en que se ha resuelto el diseño gráfico de las pestañas en ese módulo de búsqueda es francamente mala cuesta muchísimo percibirlas como tales y establecer la correcta asociación entre la pestaña que está activa y la parte inferior.

Cuando se ha hecho una búsqueda cualquiera me ha llamado también la forma en que han resuelto el sistema de navegación más allá de la propia home:

Boo.com Barra de navegadión con filtros (combos desplegables) en segundo nivel de navegación

En el segundo nivel de navegación, situados a la izquierda, los dos combos desplegables permiten escoger el país y la ciudad y en función de la selección realizada, el resto de opciones de segundo nivel de navegación que a su vez actúan como filtros, se actualizan. Algo similar al sistema de navegación de Idealista.com u 11870.com. Quizá, lo mejor de ello sea lo compacto que queda, y la fuerte jerarquía y relación horizontal que se establece. Normalmente los filtros solemos verlos en una columna situada a la derecha y cuyos elementos se jerarquizan de arriba a abajo. Esta es otra opción de navegación. Me gusta.

Cambiando de sitio, navegando he ido a dar con una consultora inglesa cuyo diseño del sitio me parece francamente majo: Clearleft.com

Un diseño muy limpio, una escala de colores muy cálida, cercana, verde lima, con todos los valores positivos que se le asocian. En la home dejan bien claro lo que hacen, sus fortalezas, lo que quieren y la forma de contacto todo por encima del pliegue de pantalla y haciendo scroll vertical, desplegando el resto de información importante en tres bloques adicionales “Web design & Consultancy”, “Clearleft news” y “What next” resaltados fuertemente gráficamente sobre un rectángulo de fondo marrón con un borde de 1px blanco que lo potencia respecto del fondo y que funciona como conector entre las camas de color de los cuatro bloques en los que está separada la home, el primero situado por encima del pliegue de pantalla y los tres restantes citados.

La retícula en tres columnas al 33% con sus medianiles y que rompen en el primer módulo (el pliegue de pantalla) en el que se entra al 100% de ancho  y el último “What next” en el que las columnas se distribuyen al 66% y 33% respectivamente dan fuerza, ritmo e interés al diseño.

Se utiliza una jerarquía tipográfica muy clara jugando con los tamaños y con los cuerpos en negrita para centrar la atención donde interesa. Se hace un uso muy comedido de la imagen y con excepción del tercer módulo, se cuida bastante la carga textual de cada bloque.

Home de la consultora de UX inglesa Clearleft.com

Me gusta el detalle de las pestañas superiores y como crean una fuerte tensión visual rompiendo la linealidad del bloque de la cabecera con las opciones de navegación, y la pestaña activa que conecta la cabecera con el módulo inferior al desbordar sus límites. Utilizan además una sombra creando un efecto de oclusión o 3D sutil, para resaltarla. Asimismo, me gusta también el efecto de hover en el que se establece claramente el estado de transición antes de hacer clic en la pestaña sobre la que se encuentra situado el cursor:

Estado de transición de las pestañas de la navegación principal. Cuando el cursor se posiciona encima de una (en este caso "What we do") se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada, y su cuerpo cambia de color a gris oscuro

Por último, como comentaba, se hace un buen uso de la imagen. En la captura, la página del equipo. Muy buen detalle el romper la linealidad recta del diseño alabeando ligeramente a izquierda y derecha las fotos de los miembros y superponiéndo las esquinas unas encima de otras como si las tuviéramos encima de una mesa y no enfrente de nosotros:

Equipo de trabajo de Clearleft.com

Por cierto, no tengo absolutamente nada que ver con ellos, ni les conozco ni pienso irme a trabajar a Inglaterra. Simplemente, me gusta el diseño de su site. Por estos lares también tenemos muy buenos ejemplos, y por latinoamérica también.

Si vendes consultoría de Experiencia de Usuario hay que predicar con el ejemplo. Si tu web tiene más de 4 años quizá sea hora de ir dándola una vuelta y actualizándola. Al fin y al cabo, la Web, es un organismo mutable y vivo, extremadamente dinámico. Y una de las mejores tarjetas de presentación de tu trabajo es el site de tu consultora. Yo no confiaría en alguién cuya imagen no refleja un mínimo de calidad, pero lo mismo es que soy un poco de Marte, quién sabe :-)

Y es que, según su particular visión y concepción “feliz” del mundo, Coca-Cola te desea una vez más, Feliz Navi$a$:

La foto está echa a una de las marquesinas de los autobuses del Ayuntamiento de Madrid en la que se ve el último anuncio de Coca-Cola. Perdonar la calidad de la imagen pero aparte de que, como comentaba en el anterior post, la cámara de mi HTC no es ninguna maravilla había un señor delante y no he podido coger una captura mejor. A ver si luego puedo hacerle unas cuantas más de la parte de abajo que alguna cosa más he visto en el cartel. Los creativos de Coca-Cola juegan mucho con las figuras y fondos y los espacios positivos y negativos de la imagen. Aunque no se aprecia muy bien en esta foto, a mano derecha de Papa Noel se ve la silueta de un padre sonriente que sostiene en alto en sus brazos a un niño mirando hacia Papa Noel.

Pues eso. Coca-Cola y su particular “mundo feliz”.

Para quien quiera ver a Papa Noel con su saco de “regalos” y todo lujo de detalles puede descargarse el $alvapantalla$ en la web de Coca-Cola.