tentándote.com

Interacción con la Web mediante Kinect:

Vía: Alt1040

Bola extra:

Justo después de publicar la entrada acabo de encontrar éste otro vídeo de cómo se puede controlar Windows 7 con Kinect:

Vía: Microsiervos

Pranav Mistri es quizá uno de los investigadores que más están haciendo por humanizar y revolucionar el modelo de interacción actual que mantenemos con los ordenadores y dispositivos tecnológicos.

Después de trabajar en su proyecto del Sexto Sentido, ahora, Mistri, acaba de anunciar uno nuevo, el ratón invisible:

De momento el periférico que nos sirve de “dedo digital” se diluye y desaparece quedando sólo lo que tiene que quedar para llevar a cabo una interacción natural: nuestra mano.

La pregunta es: ¿Cuando sucederá lo mismo con el ordenador? ¿Para qué necesitamos un pesado monitor o un pesado equipo portátil, o neetbok, o tablet cuando el día de mañana podremos tener proyectores holográficos que hagan las veces de los mismos y que podamos llevar en un bolsillo?

Esa es la nueva visión de futuro, a mi entender, en la que debería comenzar a trabajarse. Y no creo ni que esté desvariando ni que sea ciencia ficción ¿o acaso no existen ya prototipos de televisiones en 3D?

Pros de la propuesta de Mistri de hacer invisible el ratón: pues eso mismo, el más importante, interactuamos contra el dispositivo con nuestra mano.

Contras: habrá que ver cómo impacta en el uso del ordenador si algún día Mistri lo comercializa dado que, desde un punto de vista ergonómico y para preveer posibles enfermedades profesionales como la del metacarpio, el diseño de algunos ratones es el óptimo para las jornadas laborales cotidianas.

En cualquier caso seguimos atados por el paradigma del cursor único para interactuar con la interficie cuando tenemos 10 dedos y dos palmas, dos brazos, un pecho, dos piernas y una cabeza que podrían hacer lo mismo (¿para cuando una aplicación de Kinect profesional más allá de los videojuegos?). Me encantaría trabajar en proyectos de innovación en este campo. A buen seguro que sería excitante conceptualizar lo que serían los próximos sistemas operativos: los sistemas de interfaz humana (literalmente) :-)

Sea como sea, la visión de futuro que Microsoft preconizaba en su serie “Envisioning” comienza a hacerse realidad tan sólo año y medio después de que lanzaran los vídeos:

• En el minuto 1.20 podéis observar cómo cualquier superficie transparente se convierte en una potencial interficie sobre la que proyectar la interfaz.
• En el minuto 1.30 vemos la interacción gestual con la mano.

Lo dicho, el próximo paso de la visión: conceptualizar cómo podemos interactuar con objetos holográficos. De momento, algunos ya están trabajando experimentalmente en ello desde hace tiempo:

…y un gadget que para nosotros se ha vuelto tan cotidiano e imprescindible como ese que nos acompaña permanentemente en el bolsillo, el móvil, todavía tiene que dar muchas sorpresas dado que además de miniordenador, puede ser perfectamente un proyector, y al incorporar cámara puede detectar el movimiento de nuestras manos y por ende, podríamos interactuar con objetos holográficos que proyectase.

Las posibilidades son excitantes en cuanto a lo que a Interacción se refiere y las nuevas fronteras de la tecnología, como siempre, sorprendentes.

¿Acaso podía ser de otra forma? :-)

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