Controles de interfaz: deslizadores, filtros en navegación de segundo nivel y diseño de sitio

Algunos controles de interfaz y páginas web que me han llamado la atención navegando:

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

Boo.com Deslizador. Filtro de hoteles

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

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

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 se resalta ligeramente por debajo de las demás pero no tanto como la actual seleccionada

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

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

--

 

9 commentarios

  1. Me gusta lo del slider, pero aún me da miedo utilizar elementos tan complejos. Me parecen bien para especificar cantidades simples y continuas, pero no estoy tan seguro de que sean lo mejor para establecer rangos. Además en este caso puede confundir más aún, al utilizar como “label” un elemento (las estrellas de valoración) que ya de por sí tiene su propio código de interacción. Pero claro, como dice mi vecino, “la vida es para los valientes” :-)

    La web de ClearLeft me ha encantado. ¿Has visto el detalle de la página de contacto? Qué fino. Aunque esos campos de texto con sombra me ponen nervioso.

  2. Sí, quizá uno de los problemas sea que no es un elemento de interacción muy habitual y cuesta reconocer su funcionalidad. En cuanto a que las estrellas tienen ya casi su propio código de interacción en la Web no lo había pensado y tienes razón. Es curioso como patrones de interacción relativamente “universales” condicionan o impacta en la usabilidad de un web cuando se utilizan de forma diferente aún con su buena razón. En cuanto a los rangos es un problema bastante usual con los deslizadores aunque en este caso específico creo que no funciona mal dado que los posibles valores son muy finitos (6 nada más) y resulta muy fácil especificar el rango deseado. En otros webs en los que las cantidades son mayores puede resultar bastante más complicado seleccionar o fijar rangos de cantidades exactas dado que el control no es lo más óptimo ni rápido para ello. En esos casos creo que funcionaría mucho mejor dos input de texto directamente en los que el usuario escribiese las cantidades de los extremos del rango directamente, algo similar a lo que hace Kelkoo.com (en la columna de los filtros a mano derecha, en “Oscilación de precio”, los dos minicampos input).

    Dos cosas que veo en el componente actual de Boo.com son que habría que trabajar más el aspecto del diseño gráfico del componente para que quedase más claro que es un deslizador, y el rótulo, que por coherencia con el diseño actual quizá, debería ir arriba y no abajo como está puesto.

    Estaba mirando los deslizadores de Photosop, Idealista.com y de Kayak.com. Me ha picado el tema ¿Conocéis más webs donde se utilice este componente? Me gustaría ver más ejemplos de deslizadores.

    En cuanto a la web de Clearleft ¿maja verdad? No había visto lo del contacto, me gusta el efectillo que hace :-) y en cuanto a la sombra de los campos, sí, a mí tampoco termina de convencerme. Yo se la quitaría, directamente. Les está dando un tratamiento visual igual que al resto de imágenes de la web cuando es otro tipo de elemento de interacción. Visualmente queda muy bien pero el efecto que crea es como si fuera una pegatina blanca que se estuviera pegando sobre la interfaz o algo similar, sería mejor que tuviese una pinta más “estándar” de campo input de texto.

  3. Yo es que tengo una manía presecutoria con los efectos 3D, en general. Muchas veces se utilizan fatal, de manera que en un mismo plano tenemos dos tipos de sombras proyectados por fuentes de luz diferentes que me ponen nervioso.

    Mira la cabecera de Partigi, por ejemplo: la sombra proyectada por el logo es físicamente incompatible con las pestañas envolventes de la derecha. Aunque el resto de la web me gusta mucho.

    Pero vamos, que es una chorrada :-)

  4. Respecto al tema de los sliders: es todo un mundo. Son muy delicados, es necesario cuidar muchísimo la implementación.

    Mira esto:

    http://mrgan.tumblr.com/post/235455865/the-many-sliders-of-photoshop-cs4

    :-)

  5. Gracias por el recurso Diego, me lo voy a mirar con calma y voy a ver si encuentro más sitios que utilicen deslizadores en la Web. Agradecido :-)

  6. Tenéis otro buen ejemplo en el site de Audi Autocasión. Si haces una búsqueda de vehículos de ocasión como esta:
    http://www.audiautocasion.es/vehiculos_garantia_audi/A6/, tienes la posibilidad de filtrar resultados a partir de deslizadores que reducen el rango para cada variable. Quizás la apariencia y la estética no sea la adecuada pero va en la línea del ejemplo propuesto ;-)
    Saludos

  7. Buenísimo el ejemplo Sergio :-)

  8. [...] 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 [...]

  9. [...] Controles de interfaz: deslizadores, filtros en navegación de segundo nivel y diseño de sitio [...]

Pues... vamos a comentar algo!


(los comentarios están moderados, no te preocupes si tarda un poco en aparecer)

Switch to our mobile site