Termina este blog

Desde hace ya bastante tiempo tenía la idea de dejar de escribir en el blog. Los pocos post publicados en el último año así lo atestiguan.

Y es que la vida, el día a día cotidiano, poco a poco reclama mayor tiempo y atención.

Han sido 8 años posteando sobre Diseño de Interacción y UX. El objetivo del blog siempre ha sido el disfrutar escribiendo, aprender, compartir lo que descubría por ahí leyendo, compartir las reflexiones y los problemas de diseño cotidianos que iban surgiendo en los diferentes proyectos y las posibles soluciones que se me ocurrían, en definitiva, compartir las inquietudes de este, nuestro trabajo de Experiencia de Usuario y la metodología que iba descubriendo cada día para afrontarlo.

Ahora toca centrarse en otros proyectos y prioridades así que, sin más, termina este blog. Buenos prototipos y nos vemos en los saraos UX.

--

 

Anillos y teclados para la interacción gestual

Vía TicBeat descubro los vídeos de Nod, un anillo que permite que nuestro dedo índice se convierta en un “puntero ratón” y Type-Hover-Swype un prototipo de teclado táctil de Microsoft que permite realizar gestos sobre la propia superficie del teclado para interactuar con la interfaz.


NOD. Anillo de control gestual


Type-Hover-Swipe. Prototipo de teclado gestual de Microsoft

 

Poco a poco van apareciendo periféricos que apuestan por potenciar la interacción gestual frente al ratón en portátiles y ordenadores de sobremesa. Todo ello, pese a las dudas y limitaciones que suscitan. Y es que Windows 8 está aquí, ha venido para quedarse y necesita de nuevos periféricos para interactuar con él.

--

 

Menú de navegación multinivel para sitios responsive

Navegando me encuentro con este interesante artículo sobre sistemas de navegación responsive para dispositivos táctiles de Luke Wroblewski.

Del artículo me gusta el planteamiento que realiza de la navegación en la parte inferior de la pantalla (muy acertadamente pienso) ya que es una zona que se alcanza fácilmente con los dedos cuando se sostiene un dispositivo táctil.

No obstante el patrón que más me ha llamado la atención es el de la navegación inferior multinivel ya que aporta una buena solución para uno de los problemas comunes que se dan cuando se diseña un menú de navegación para smartphones y sitios responsive.

En los smartphones, si tenemos un sitio con más de un nivel de profundidad, los elementos del menú de navegación, dependiendo de su diseño, deben desempeñar a la vez una doble función:

  • Ser agrupadores: lo que se significa que al hacer clic sobre el elemento de nivel superior se ha de desplegar un menú con los elementos hijos.
  • Desencadenar una acción: cargar la página web a la que está asociada el elemento de nivel superior.

El problema en los smartphones surge cuando al tocar el elemento del menú de navegación de primer nivel, se despliega el menú con los elementos hijos.

  • Si el menú ocupa todo el ancho y el alto de pantalla (como suele ser habitual) y no se colapsa, el usuario no recibe feedback de que por debajo se ha cargado la página web asociada al elemento de primer nivel.
  • Si por el contrario el menú se colapsa para darle ese feedback, tiene que volver a hacer clic para desplegarlo y ver los elementos hijos de segundo nivel.

No es lo más óptimo que se diga.

¿Cómo soluciona este patrón el problema?

Dividiendo en dos el área del elemento del menú y haciendo que cada una de ellas ejecute una acción diferente. De esta forma:

  • Una parte es un control que al tocarlo despliega la secciones de segundo nivel sin ocultar el menú de navegación ni cargar página alguna por debajo –> (A)
  • Mientras que la otra carga la página asociada y oculta el menú de navegación al pulsarse sobre ella (echar un vistazo a la imagen de abajo –> (B))

 

 

Una solución ingeniosa.

También se pueden buscar otras.

Una de ellas sería plantear un menú lateral que se desplegase desde la izquierda y desplazase todo el contenido de la página hacia la derecha dejando tan sólo visible una banda lateral. Al hacer clic sobre el item del menú de navegación de primer nivel (A) se cargaría la página sin colapsarse el menú, y se desplegaría el de segundo nivel. El usuario recibiría un feedback visual ya que vería cargarse la página asociada en la banda de la derecha (B). Para ver la página completa tendría que colapsar el menú.

Otro planteamiento podría ser una mezcla de ambos. En un menú lateral plantear items de menú con la doble función. Al hacer clic sobre el área de la izquierda del elemento de navegación (A)  se cargaría la página y el menú colapsaría, mientras que haciendo clic sobre el control de la derecha se desplegaría el menú de segundo nivel (B).

Soluciones varias a gusto del diseñador de interacción.

Como curiosidad, este patrón deriva de uno presente en las aplicaciones de escritorio:

En Visio, por ejemplo, nos encontramos con “botones” (nótense las comillas) que presentan este doble funcionamiento:

  • Por un lado, al hacer clic sobre la parte derecha del “botón” se despliega el menú asociado con todas las opciones de relleno.
  • Mientras que al hacer clic sobre el icono del cubo de pintura de la izquierda teniendo una forma seleccionada en el área de trabajo, se rellena dicha forma con el color que tenga el cubo.

En iOS también se usa este patrón aunque con un diseño visual muy curioso:

 

  • Mientras que tocar sobre el nombre del contacto, a la izquierda, desencadena la acción de llamar…
  • …tocar sobre el icono azul redondo con la flecha, de la derecha, da paso a la pantalla o ficha con la información de detalle del contacto.

Lo dicho, muy curioso el diseño visual que plantea la gente de Apple en iOS para esta pantalla.

No dejéis de leer el artículo entero de Wroblewski que merece la pena echar un rato leyéndolo.

--

 

Switch to our mobile site