En los móviles con pantalla táctil no existe la interacción hover. Esta interacción, como todos sabréis, es lo que ocurre cuando pasamos el ratón por encima de un elemento. Normalmente aparece una capa, un tooltip con información adicional o secundaria. En las webs que accedemos con pantallas no táctiles a través de ordenadores o portátiles muchas veces es un contenido que no queremos mostrar en la pantalla principal por lo que usamos este recurso para que el usuario vea más información pasando el ratón por encima de los elementos de nuestra web. Esta técnica actualmente no es muy usada y sólo en caso particulares en los que debemos estudiar con detalle. Esta interacción la usa Twitter, Google adwords, Google Maps, aplicaciones webs con Gráficas…
Ejemplo de uso de hover en twitter
Ejemplo de hover en Google Maps
El problema de usar estas interacciones es que si tenemos un dispositivo táctil, como puede ser un móvil o tableta, esta funcionalidad no se verá.
Para ello se plantean unas soluciones de interacción para estos dispositivos táctiles:
- Poner la información en la pantalla. De esta forma no estamos ocultando información al usuario y se lo mostramos todo en la misma página.
- Hacer Tap sobre el icono o el contenido: Con simplemente pulsar con el dedo mostramos la capa con información.
- Hacer un swipe sobre el contenido para mostrar información. Yahoo Mail tiene esta funcionalidad.Este tipo de funcionalidad no es conocida por muchos usuarios por lo que se usa como atajo para los heavy users (ejemplo de twitter y yahoo) y se suele complementar con la siguiente solución.
Ejemplo de mostrar contenido con swipe en Yahoo Mail
- Ponerlo en pantallas separadas. Este es el caso de los iconos de retuit, favoritos y resto de acciones que hay en twitter. Los pone en la pantalla siguiente. Yahoo Mail también añade los iconos que ha añadido con la interacción de swipe en la página siguiente cuando accedes al detalle del correo.
Ejemplo de mostrar contenido en la otra pantalla
- No poner esta información: Como hemos dicho al principio esta información es secundaria o adicional habría que plantearse si realmente debe estar o no.
¿Qué soluciones de interacción soléis usar más?