tentándote.com

Post actualizado – 28/12/2010 (Abajo del todo)

ANALÍSIS DE CALENDARIOS

Una de las cosas que me llama particularmente la atención desde hace ya unos años y cuyas tendencias me gusta observar para ver cómo evolucionan, es el diseño, tanto desde un punto de vista gráfico como de interacción, de los calendarios de las páginas de compañías áreas, agencias de venta de billetes de vuelos, webs de aeropuertos, hoteles, alquiler de coches, transportes públicos o privados o cualesquiera otras de comercio electrónico que por una u otra razón de acuerdo a su negocio incluyan en su home calendarios para acotar el tiempo de estancia, viaje, desplazamiento o actividad similar del usuario.

Por citar tan sólo algunos a título de ejemplo de los miles que pueden encontrarse en la Web y tratar de extraer algunos patrones más o menos generales a día de hoy en cuanto a su diseño, pueden citarse los siguientes:

Calendario de BestWestern.com

El componente del calendario “Encontrar un hotel” de BestWestern.com tiene como elementos interesantes:

• Se despliega cuando el usuario hace clic directamente en el campo de la fecha de entrada.
• Aparece alineado con la línea base del campo de fecha de entrada, con la esquina izquierda.
• No incluye ninguna sombra para crear un efecto de oclusión y traerlo a primer plano lo que resulta en un diseño completamente plano. Esto supone un menoscabo de su usabilidad dado que por su diseño gráfico y los colores elegidos cuesta distinguirlo visualmente del fondo.
• Presenta como valor por defecto la fecha del día actual.
• Junto a los campos de entrada de las fechas muestra un icono de calendario cuyo diseño es más o menos estándar a lo largo de la Web reconociéndose sin problemas como tal.
• En la esquina superior derecha incluye un botón de cerrar que por su diseño y color pasa prácticamente desapercibido.
• Debajo de la barra de cabecera presenta un listado horizontal de los 12 meses siguientes al actual pudiendo el usuario seleccionar aquel que desee. Su utilidad es interesante aunque el horizonte de 12 meses de cara a realizar una reserva en un hotel puede ser excesivo. Habría que testear y ver estadísticamente cuáles son los rangos de fechas más comúnmente utilizados por los usuarios para limitar los meses que aparecen en esta barra a ellos.
• Por defecto en el calendario se muestra el mes en curso y al lado, en horizontal, el mes siguiente, ambos con su correspondiente encabezado identificativo del nombre abreviado y resaltado en negrita.
• Debajo se muestran los días de la semana. Aparecen en mayúsculas y con una sóla letra para identificar el nombre de cada día.
• A continuación se muestran los días del mes comenzando desde el primero y dejando en blanco los espacios correspondientes a los días del mes anterior (lo mismo sucede con los últimos días del mes que tampoco se muestran).
• Los días aparecen recuadrados. Los que están por venir con un borde azul, y los que han pasado con un borde gris claro. La presencia del borde recuadrándolos supone una ayuda visual adicional para marcar el área dónde se puede hacer clic para seleccionarlo. Esto mejora el foco pero añade un ruido excesivo desde un punto de vista visual que menoscaba la escaneabilidad de los números y la usabilidad general del calendario. Demasiada “tinta” superflua.
• El día actual se destaca en rojo.
• El día seleccionado como fecha de entrada (por defecto el siguiente al actual) se destaca con una cama de color azul, en negrita y con un borde azul oscuro para resaltarlo de los demás.

Calendario de HalcónViajes.com

Del calendario de HalcónViajes.com se pueden citar las siguientes características:

• El tamaño es muy superior a lo que suele ser habitual en el diseño de este tipo de componente, quizá demasiado lo que impacta en la correcta escaneabilidad de los días.
• Sólo muestra el mes en curso lo que disminuye la usabilidad.
• Desde un punto de vista gráfico presenta un ruido visual excesivo mostrando explícitamente una cuadrícula gris en cuyos recuadros encajan los números. Su gran tamaño los hace más difíciles de leer.
• Los días del mes que ya han pasado hasta la fecha actual se presentan en un estado atenuado en color gris claro. El día actual se presenta destacado en una cama de color gris más oscuro. Los días disponibles para hacer la reserva se presentan en un crema suave. El día seleccionado seleccionado se muestra en un calabaza, color que también se usa para el hover del ratón a medida que se va desplazando por encima de los días del mes.
• Incluye una leyenda de los colores en la parte inferior.
• Permite cambiar de mes haciendo clic en el botón amarillo junto al nombre del mes actual que sirve como minicabecera del calendario. El diseño de esta cabecera no es óptimo ya que tal y como está resuelta gráficamente parece a priori un campo de entrada de texto en el que se puede escribir, cuando no lo es. La única forma de cambiar de mes es haciendo clic en las flechas a derecha e izquierda del nombre del mes.
• El botón de cerrar tiene una forma y diseño llamativo, circular con una X. Está situado en la parte superior, a mano derecha y a la misma altura que el encabezado general del componente.
• Al desplegarse el calendario se tapa por completo el módulo inferior para la selección de la reserva y se presenta una capa semitransparente que oculta la página web de debajo lo que centra la atención en el mismo y no en otros elementos de la interfaz.
• El calendario se cierra al seleccionar una fecha en el mes o mediante el botón de cerrar.

Calendario de Hoteles.com

El calendario de Hoteles.com es quizá uno de los más limpios e interesantes de los que aquí se han analizado. De él se pueden reseñar las siguientes características:

• Se despliega con un efecto de rápida animación hacia la derecha al hacer clic en cualquiera de los campos de fecha de llegada o salida lo que a priori transmite al usuario un feedback de rápidez y eficacia de su funcionamiento asi como de la página.
• Incluyen un icono de calendario al lado de dichos campo que cuando se pulsa despliega asimismo el calendario.
• Incluyen al lado de los dos campos de fecha de llegada y salida el número de noches correspondiente a las fechas que el usuario ha escogido. Un buen detalle diferenciador que no se ve en otros sitios.
• Su diseño es minimalista utilizando un número muy reducido de colores en la escala de blancos y grises lo que impacta de forma positiva en su usabilidad al ser fácilmente escaneables todos los elementos que lo componen.
• Utiliza una sombra para crear un efecto de oclusión lo que ayuda a diferenciarlo del fondo, centra la atención en él y lo trae a primer plano.
• Utilizan una flecha sólida en la parte superior izquierda como elemento de diseño que rompe la linealidad del componente y lo conecta al campo de entrada algo que no suele ser habitual pero que constituye un diseño elegante en línea con las tendencias que se pueden observar en las últimas versiones de determinados elementos de interfaz de Firefox o  del sistema operativo Leopard de Apple.
• La tipografía utilizada es muy clara, limpia y legible así como los cuerpos de letra usados.
• No utilizan ninguna letra capital sino que ponen todas en minúsculas lo que mejora la escaneabilidad de los textos y los iguala jerarquicamente. Sería interesante ver si convendría destacar los meses poniendo su primera letra en mayúsculas para crear un punto adicional de tensión visual.
• El botón azul con la flecha blanca de la derecha para mostrar otros meses tiene un buen diseño percibiéndose como un elemento sobre el que se puede hacer clic.
• Presenta el mes en curso y el mes siguiente, en horizontal uno al lado del otro y separados por una fuerte línea gris al medio.
• En cada mes sólo muestra los días correspondientes al mismo, no los de antes ni los de después dejando los espacios en blanco.
• Los días del mes que han transcurrido desde el primer día hasta la fecha actual se presentan atenuados en color gris claro y no son seleccionables.
• El día de la fecha seleccionada de llegada se muestra destacado en una cama de color gris claro con el día en color inverso (blanco) para un óptimo contraste.
• El día de la fecha de salida se muestra en un patrón de color inverso – recuadrado en gris y fondo blanco. El período seleccionado no termina de quedar del todo claro al no guardar el día de entrada y el de salida el mismo color (ver captura algo más abajo). Puede suponer un problema de usabilidad ¿Hasta qué día está seleccionado realmente? ¿Hasta el 14 ó el 15?
• Por defecto cuando se despliega el calendario aparece seleccionado el día siguiente al actual, tanto en el campo de entrada sin haber desplegado el calendario como al mostrarse el mismo.
• Para cerrar el calendario basta con hacer clic en cualquier parte de la interfaz que no sea el propio calendario.

Período de días selecionados en Hoteles.com. Existe un problema de usabilidad entre el uso de los calendarios, la forma de destacar
el día de entrada y el de salida y los campos superiores para especificar las mismas.

Calendario de Expedia.com

El diseño del calendario de Expedia.com está muy en la línea del de Hoteles.com y es igualmente un diseño limpio. Como características interesantes caben citar:

• En el campo de entrada no figura la fecha del día actual sino expresada en formato dd/mm/aa. Lo positivo de expresarla así es que no entra en conflicto mental con la fecha o día que el usuario tiene en la cabeza en un primer momento al observar el elemento. Si su objetivo fuera por ejemplo seleccionar el período del 15 de diciembre al 18 de enero y se encuentra a priori como fecha de entrada la del día actual necesita un tiempo para darse cuenta de por qué está ahí esa fecha que no es la que quiere y no otra. Poner la fecha en formato de día, mes, año – dd – mm – aa tiene la desventaja de que al no ser una fecha real requiere un  esfuerzo cognitivo para interpretar que se refiere a una fecha y no a otra cosa, no obstante al ser una manera habitual de expresarla es preferible a priori que poner la fecha actual por defecto. No poner fecha tiene el inconveniente de cara a accesibilidad  de que los lectores de pantalla para invidentes se encontrarían con un campo vacío y sin ninguna indicación de cuál sería el formato que tendrían que usar para introducirla.
• No utilizan ningún icono de calendario junto a los campos de fecha de salida y vuelta. Con la fecha en formato dd/mm/aa y el rótulo de Salida / Vuelta encima de cada campo es suficiente indicio de qué tipo de dato se está pidiendo en el mismo.
• El calendario se despliega debajo del campo de entrada de fecha correspondiente, pegado al mismo, alineado en la esquina inferior izquierda.
• No tiene una sombra debajo pero solucionan el problema de la superposición de capas y su diferenciación del fondo mediante un borde de un píxel de un azul más saturado que el resto de azules de los demás elementos lo que lo singulariza y lo destaca frente a ellos.
• Tiene una cabecera muy clara y fácilmente distinguible que funciona como agrupadora de toda la información inferior. Dicha cabecera incluye el nombre del mes en curso y del siguiente mes, asi como una flecha a mano derecha que permite avanzar de mes a medida que se pulsa.
• El botón para avanzar de mes tiene un buen diseño percibiéndose como tal.
• Resuelven la doble cabecera de los nombres de los meses y los días de la semana poniendo estos últimos debajo de la cabecera superior pero en el mismo color que el de fondo de la cabecera con el nombre de los meses. Asimismo ponen las abreviaturas de los días de la semana en mayúsculas. Ello tiene dos efectos a) vincula semánticamente a través del código de color cabecera principal con el nombre de los meses y cabecera secundaria con las abreviaturas de los días y b) potencia estos últimos respecto al resto de elementos del calendario.
• El diseño es minimalista y no utilizan ningún tipo de cuadrícula ni enmarcado en los números de los días. No obstante emplean el recurso de ofrecer un recuadro de color beige claro amplio encuadrando el número del día a medida que el cursor se desplaza por encima de ellos lo que constituye una potente ayuda y feedback visual adicional junto al cambio de cursor en forma de mano, para ofrecer un feedback al usuario del área que es clickable.
• Utilizan un código de color para los números del calendario muy similar al de BestWestern.com. a) Para los días transcurridos del mes desde el primero hasta el actual usan un gris claro que los hace aparecer como atenuados o no seleccionables (cuando el cursor se posiciona sobre ellos no hay un efecto hover de recuadrado). b) El día actual lo ponen en negrita y en color rojo lo que lo hace destacar respecto a los demás. c) El resto de días del mes va en color negro y negrita. Quizá sería interesante ver una prueba de diseño de los números sin negrita para ver cómo quedan. d) El día seleccionado se muestra con una cama de color gris cuadrada de fondo y el día en negrita y negro para señalarlo como activo.

Calendario de ChoiceHotels.com

ChoiceHotels.com plantea un diseño del buscador diferente a lo que suele ser habitual (echarle un vistazo) que llama la atención. En lugar de ser un gran módulo vertical lo plantean en horizontal todo a lo largo de la pantalla lo que resulta en una menor usabilidad dado que a la distancia habitual a la que el usuario suele estar sentado respecto al monitor (en torno a aproximadamente a 60 centímetros – 1 metro) no se puede abarcar todos sus elementos con la mirada. El área sobre la que se centra nuestra mirada y nuestra atención es menor, en torno a unos 10 – 15 centímetros lo que resulta en que, para comprobar que todos los datos introducidos en el buscador se corresponden con los que desea, el usuario debe realizar constantes barridos con la mirada de izquierda a derecha y viceversa impactando de forma severa en la usabilidad. En cuanto al diseño de los elementos propios del calendario caben reseñar las siguientes características:

• Incorporan tanto en el campo de fecha de entrada como de salida una indicación de cómo debe escribirse (en el formato estándar -mm/dd/aa-).
• Al hacer clic en cualquiera de los campos se despliega la capa con el calendario de forma inmediata.
• El calendario está alineado con la línea base del campo correspondiente, con la esquina inferior izquierda y pegado al mismo sin dejar ni un pixel de separación lo que refuerza la relación entre campo y calendario.
• Su fondo es totalmente blanco con un tenue borde gris que lo recuadra y lo realza respecto a la imagen de fondo. Este borde además produce un curioso efecto:

El color gris del borde del calendario es el mismo para toda la capa pero se percibe de forma diferente en la parte superior y en la parte inferior:

En la parte superior, en los trozos en los que la capa coincide con los campos de fecha de entrada, de salida, habitaciones, número de adultos, niños y categoría de hotel el calendario se percibe con un efecto de hundido debido a que se da una interesante ilusión óptica por el contraste simultáneo de dos tonos de gris, el más claro de la parte inferior de los campos y el más oscuro del borde de la capa del calendario.

Por el contrario en la parte inferior se produce el efecto inverso, el gris oscuro del borde junto al blanco de fondo aislan la capa del calendario respecto a la imagen de fondo haciéndolo aparecer como en relieve. Un efecto llamativo que ayuda a realzar su usabilidad.

• La capa de calendario está “conectada” al campo de fecha de entrada sin dejar un sólo pixel de separación entre campo y capa.
• Llama la atención el diseño de la cabecera de los meses en la que se utiliza la Ley de cierre de la Gestalt para “dibujar” un rectángulo imaginario que sirve como agrupador, que va desde las esquinas de las flechas de avanzar – retroceder de mes y que incluye los nombres de cada mes.
• Este diseño de la cabecera de los meses “al aire” deja fluir la mirada por los elementos del calendario aportando una sensación de ligereza. La negrita refuerza los nombres de los meses como puntos de atención focal que asimismo aparecen con una fuente tipográfica un punto mayor que la utilizada para los nombres abreviados de los días de la semana. Estos aparecen igualmente en negrita y tanto nombres de meses como días de la semana tienen la primera letra en mayúsculas lo que crea en cada uno de ellos un punto focal que disminuye la legibilidad.
• Cómo en los diseños de otros sitios, dejan en blanco los espacios correspondientes a los días que no se corresponden con los del mes, tanto al principio como al final.
• Recuadran todos los días con dos tonos de grises. Para los transcurridos desde el primer día del mes utilizan un gris claro que los hace aparecer como atenuados o no seleccionables.
• El día actual lo recuadran con un borde gris más oscuro que los demás y con una cama de color gris claro sutil que lo destaca.
• El día seleccionado se muestra con una cama de color beige y con el número en negro para un óptimo contraste. No se utiliza negrita y el borde va en un naranja más fuerte el color sólido de fondo y que lo hace aparecer como activo. Es una combinación óptima de colores.
• Llama la atención el hecho de que alinean los días al borde derecho del recuadro que los enmarca lo que crea una sensación de movimiento del componente hacia la derecha.

Calendario de Hotwire.com

El calendario de Hotwire.com aporta un diseño que se sale igualmente de lo habitual:

• Dejando de lado características ya analizadas en los anteriores calendarios (formato de fecha de entrada, huecos en blanco para los días de la semana de principios y finales de mes, días atenuados en gris claro para los transcurridos desde el inicio del mes hasta el día actual y que no son seleccionables, día actual resaltado -en este caso con un recuadro gris claro, días del mes en negrita para que destaquen más… etc, la principal característica es que presenta los meses en vertical, uno encima de otro, lo que mejora la legibilidad y escaneabilidad de los mismos.
• No obstante tiene el inconveniente de que cada mes lleva una cabecera muy marcada en gris con su nombre, y debajo las abreviaturas en negrita de los días de la semana, sin cama de color. Esto interrumpe y “parte” el flujo natural de lectura de los días de un mes a otro menoscabando la usabilidad.
• Muestra una leyenda en la parte inferior con el color verde que usan para marcar los días de la fecha de entrada y salida.

Calendario de Hotwire.com con las fechas de entrada y salida seleccionadas

• Otro problema es que sólo marcan los días correspondientes a estas fechas (entrada y salida) y no el período completo de estancia de la persona en el hotel.
• Para cerrar el calendario no incorporan ningún botón. Haciendo clic en cualquier parte de la interfaz fuera del mismo desaparece.

Uno de los inconvenientes que presentan los benchmarkings es que aunque pueden ayudar a innovar mediante el estudio de las característics de los diseños de los competidores pueden suponer asimismo un marco restrictivo de cara a  la innovación dado que los clientes en muchas ocasiones se ciñen a lo que hace la competencia para evolucionar sus sitios. Por ello es interesante investigar soluciones de diseño de otros ámbitos. En este caso concreto, uno de los diseños más interesantes de calendario que he visto lo tiene Google Analytics:

Calendario de Google Analytics

• Frente a todos los anteriores, Google Analytics presenta un único punto de interacción para desplegar el calendario (campo con las fecchas o flecha a mano derecha del mismo)  y para seleccionar tanto la fecha de inicio como la de final en el mismo sin necesidad de desplegar dos distintos, uno para la fecha y otro para la de salida, como sucede en todos los demás diseños.

• Presentan tres meses por defecto para la selección de las fechas.
• Tienen una doble cabecera compuesta por los nombres de los meses, que lleva una cama de color gris y el nombre del mes con la primera letra mayúscula. Además van sin negrita.
• A mano izquierda y derecha de esta cabecera muestran flechas que permiten mostrar los meses siguientes o los anteriores. Destaca el hecho de que, al igual que en el diseño de Hotwire.com, ponen las dos flechas desde el principio aunque en un primer momento no podemos ir más hacia el futuro que el mes actual. En este caso debería presentarse la flecha como deshabilitada para dar a entender que en ese punto no se puede interactuar con ella.
• Los meses están separados entre sí visualmente y a mano izquierda de cada uno de ellos aparecen medios círculos en las filas de cada semana. Haciendo clic en estos medios círculos se selecciona la semana entera. Aunque esta característica puede tener sentido en una herramienta como Analytics no interesa tanto en los calendarios de páginas de comercio electrónico dado que la diversidad de períodos no suele ceñirse a una semana concreta.
• Incorporan un enlace rotulado como “Cancelar” que tiene un funcionamiento que puede dar lugar a dudas. Por defecto las fechas que aparecen seleccionadas cuando se entra en una cuenta específica de Analytics van desde el día actual hasta justo un mes antes. Si el usuario hace otra selección se pierden dichas fechas. Al contrario de lo que podría pensarse al estar al lado del botón de “Aceptar” el enlace de “Cancelar” no cierra el calendario desplegado y cancela la selección de fechas realizada sino que borra la selección hecha por el usuario y pone la que el sistema da por defecto.
• Al contrario que el resto de calendarios en el de Google Analytics no se dejan espacios o huecos en blanco al inicio o final de los meses. Se ponen los días del siguiente mes o del anterior pero en un gris muy claro, como atenuados.
• Para seleccionar un período el patrón de interacción es el siguiente:
  • El usuario puede escribir directamente la fecha de inicio y la fecha de fin en los box de los campos rotulados como “intervalo” o hacer clic directamente en un día del calendario. Este primer clic marca la fecha de inicio y el segundo la fecha final.
  • Una vez marcada una fecha como de inicio todos los días anteriores a él se muestran en gris claro y no son seleccionables.
  • Cuando el usuario marca a continuación la fecha de fin el período completo seleccionado se muestra con una cama de color azul para resaltarlo de forma inequívoca de los demás.
  • En el período seleccionado utilizan dos tipos de azules, uno fuerte para marcar los días del mes seleccionado y otro más clarito para marcar aquellos que corresponden al mes siguiente. El diseño en este punto es confuso.

PROPUESTA DE DISEÑO DE CALENDARIO

En base a las características analizadas se plantea la siguiente propuesta de diseño para mejorar la usabilidad de los calendarios de páginas de comercio electrónico. Como ejemplo se tomará una página de reserva de hoteles:

1. El usuario accede al sitio web y observa el módulo para buscar hoteles y reservar habitaciones.
2. Hace clic en el campo de “Fecha de entrada – Fecha de salida” y se despliega el calendario.
   • Éste tiene una sombra para crear un efecto de oclusión que lo trae a primer plano y lo singulariza del fondo. Con ello se centra la atención en el calendario respecto al resto de elementos de la página y se mejora su usabilidad.
   • El campo de las fechas está vacío a priori dado que el funcionamiento que se desea en este punto es el de desplegar lo más rápidamente posible el calendario. Al aparecer vacío el usuario no tiene que pensar un segundo analizando qué puede significar un valor como dd/mm/aaaa.
   • Cuando se hace clic en el campo de fechas el calendario que se despliega se vincula a al mismo por medio de una flecha a mano izquierda que apunta al medio del box (ver paso 3)
   • El hecho de que exista un único punto para desplegar el calendario como sucede en Google Analytics es una mejora importante de usabilidad. Uno de los principales problemas que tiene el actual modelo de interacción que se tomar como un estándar a lo largo de la web para seleccionar las fechas es que el proceso de seleccionar un período se divide en dos partes: a) selección de la fecha de entrada y b) selección de la fecha de salida, cuando ambas deberían seleccionarse actuando sobre un único calendario tanto por economía de clics como para facilitar la correcta visualización del período seleccionado.
3. El calendario tiene en la esquina superior derecha un enlace y botón de cerrar por accesibilidad. A continuación y por defecto, el cursor se encuentra en el box del campo de “Fecha de entrada” que aparece bordeado de color naranja para indicar su estado activo.
   • Ahora sí, como valores por defecto tanto en el campo de fecha de entrada como en el de salida aparece la fecha en formato estándar pero sin seleccionar ningún día concreto: día, mes, año -dd/mm/aaaa-.
   • Para especificar el año se utilizan cuatro dígitos con el objetivo de distinguirlo de forma únivoca tanto de los días como de los meses aunque ello suponga dos pulsaciones más de teclado para introducir los datos. A la hora de maquetar el componente será necesario controlar correctamente el orden del foco del cursor al pulsar el tabulador para garantizar una usabilidad y accesibilidad óptimas.
   • El usuario puede optar por escribir las fechas directamente en los campos correspondientes  o seleccionar la fecha de entrada y de salida con el cursor del ratón haciendo clic sobre los días correspondientes.
   • Por defecto se presentan hasta 3 meses incluyendo el actual, no obstante habría que monitorizar cuál es el tiempo medio que los usuarios eligen como periódo para ver si se pueden mostrar tan sólo dos. Mostrar un mes menos simplifica el diseño y lo hace más fácil para el usuario.
   • Los meses se muestran en vertical, unos encima de otros, de forma similar a como se hace en Hotwire.com lo que supone asimismo una mejora importante de usabilidad ya que facilita el escaneado visual de los días, no interrumpe el flujo visual al separar en diferentes áreas los meses, suprime la necesidad de que haya espacios en blanco tanto al principio como al final de cada mes y mejora la densidad informativa del calendario.
   • Para distinguir dónde comienza y dónde finaliza cada mes se utiliza una línea gris clara punteada que marca  tanto el inicio como el final de cada mes. La línea quebrada en el primer día del mes supone un punto de ruptura visual actuando como foco de atención lo que ayuda a mejorar la escaneabilidad de la información. Los días de los 3 meses fluyen de forma natural unos detrás de otros sin interrupción visual alguna.
   • Estas líneas que separan los días correspondientes a cada mes se conectan a mano izquierda con el nombre de cada mes que va en un rectángulo sólido de color gris más fuerte, con los nombres de los meses en minúsculas y la primera letra en mayúscula para actuar como atractor visual sutil. Se ha hecho la prueba de centrar el rectángulo conforme al punto medio de la línea pero la conexión queda más clara alineando la parte inferior del rectángulo con dicha línea en la esquina inferior derecha.
   • Encima de los nombres de los meses, dos flechas permiten ir avanzando en el tiempo o retrocediendo para mostrar los meses anteriores o siguientes. A priori se muestra el mes actual y los dos siguientes. Dado que no tiene sentido retrocer más allá de la fecha actual para realizar una reserva, en un primer momento la flecha de ver meses anteriores se encuentra desactivada y aparece en un color más claro.
   • Los días transcurridos desde el primero del mes hasta el actual aparecen en un color gris más claro, atenuados y no son seleccionables.
   • El día actual no se resalta de ninguna forma. El cambio de color entre los días anteriores al actual y el día presente es suficiente para dar un feedback al usuario de cual es la fecha actual. No tiene sentido destacar la fecha actual ya que al usuario lo que le interesa es seleccionar los días en los que quiere hacer su reserva.
   • Cierra el componente un botón de “Aceptar” que sirve para confirmar las fechas seleccionadas o escritas en los campos correspondientes y cerrar el calendario. El color es naranja para transmitir acción y dar sentido de transición.
4. El usuario escribe la fecha de entrada en el campo superior correspondiente o selecciona directamente el día que desee haciendo clic sobre el mismo. El día se marca con una cama de color naranja, el mismo color que el campo activo y que el botón para establecer una relación semántica entre todos los elementos.
5. Una vez escrita la fecha de entrada el foco pasa al campo de fecha de salida que aparece resaltado, bordeado en naranja, para indicar su estado activo.
6. El usuario escribe la fecha de salida en el campo correspondiente o selecciona el día que desee en el calendario. La fecha se muestra en el campo y el período seleccionado se muestra de color naranja para marcar de forma clara e inequívoca los días escogidos. Como posible mejora se podría valorar la posibilidad de, al igual que realiza Hoteles.com mostrar el número de noches escogidas a la derecha aunque en principio es un dato secundario.
   • Para modificar las fechas se pueden escribir directamente en los campos superiores o, con el ratón. En este caso cuando ya hay un período seleccionado, para cambiar las fechas, al hacer clic en cualquier nuevo día, el período seleccionado desaparece y el día sobre el que se ha hecho clic pasa a ser el de fecha de entrada.
   • A continuación el usuario hace clic en otro día para la fecha de salida mostrándose el nuevo período resaltado.
   • También se pueden modificar las fechas de entrada y salida escribiéndolas directamente en los campos superiores.
7. El usuario pulsa sobre el botón de “Aceptar” y se muestran las fechas de entrada y salida en el campo del componente principal. Para modificarlas el usuario hace clic sobre ellas desplegando el calendario.

Esta propuesta está incompleta dado que le faltan los colores. Lo que aquí se presentan son tan sólo prototipos. El diseño gráfico es crítico y condiciona de manera crítica y fundamental la usabilidad así que si algún diseñador gráfico se anima a ponerle color aunque sea tan sólo a un par de pasos (el 5 y el 6 estarían majos) sería estupendo ;)

¿Conocéis algún calendario distinto de los analizados con algún patrón interesante?

ACTUALIZACIÓN (28/12/2010):

Una actualización del diseño del calendario de acuerdo a los comentarios del post de Álvaro y a las propuestas de más que HTML y RoninRojo:

1. En la gran pestaña superior de “Hoteles” se suprime la línea divisoria con el módulo inferior relacionándose mejor ambos elementos.
2. Se añade un icono de calendario en el campo de “Para las fechas… – Fecha de entrada – Fecha de salida” del formulario para que sirva como pista visual para indicar al usuario que se va a desplegar el mismo al hacer clic sobre el box.
3. Se deja únicamente el botón de cerrar y se suprime la palabra “Cerrar”.
4. La flecha en la parte inferior izquierda del calendario para avanzar de meses se pone en naranja para denotar estado activo mientras que la superior para ver meses anteriores en un primer momento permanece en gris, en un estado inactivo.
5. Se suprimen las camas de color de los meses. Se alarga la línea divisoria de los meses hacia la izquierda y se posiciona el nombre debajo de ella lo que delimita mejor dónde empieza y acaba cada mes.
6. Se añade un enlace de “Borrar” en la parte inferior del calendario cerca del botón de “Aceptar” para borrar la selección de los días hecha por el usuario si lo necesita.

Bueno, ya era algo que me empezaba a preocupar un poco ya que en las últimas nightly de Firefox no observaba ningún cambio, pero por lo que veo, la gente de @Mozilla como no podía ser de otra forma, en su cuidado obsesivo de los diseños al pixel, acaba de publicar una actualización de las maquetas de la interfaz de Firefox 4 para Mac de la próxima gran versión del navegador en la que empiezan a despejar las dudas.

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.