Componentes de interfaz de usuario de Hoteles.com
Pues el caso es que estaba navegando un rato y he ido a parar a la página de Hoteles.com. Curioseando he visto algunos componentes de la interfaz y patrones de diseño e interacción que me han llamado la atención.
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í.
- Festo y el diseño orgánico
- Percepción psicológica del color
- Cell
- El coste de un escaño (o el efecto de la Ley d'Hont en el Parlamento Español)
- Interfaces digitales flexibles para mejorar la interacción con los dispositivos
