El Hover ha muerto, larga vida al Hover

  • Por
El Hover es un útil elemento UI para usuarios de escritorio, pero no funciona con dispositivos táctiles. ¿Qué podemos hacer para evitar su caída en desgracia?
 
En este artículo analizamos el presente y futuro de uno de los efectos CSS más socorridos habitualmente en el mundo del diseño web: el efecto "hover", aquel mediante el cual se produce un cambio al situar el ratón encima de un elemento.

Todo comenzó con una conversación de hace tres años, cuando salió el iPad.

El director de producción de una compañía de venta de productos online de Reino Unido dijo, “Por supuesto que resolveremos el problema de la página de selección de productos. Dependemos del “hover” a la hora de mostrar importantes detalles sobre el producto, los usuarios de iPad no los verán, así que tenemos que arreglarlo”.

Usar “hover”, un apunte visual para indicar una interacción posible o para mostrar información extra, había dejado de ser una manera de acercarse al usuario que ahora usaba iPad y otros dispositivos táctiles.

Lo que previamente había sido una herramienta fiable dentro de los recursos de interacción del diseñador de pronto había perdido su brillo.

“Hover” está muerto

Volvamos a 2013. Las ventas en dispositivos táctiles se han incrementado significativamente. De hecho, se espera que sobrepase el número de ventas de los ordenadores de escritorio y portátiles en 2014.

Windows 8 ha tomado la interfaz Metro del móvil. Mac OSX está cada vez tomando más detalles del sistema operativo móvil iOS. Ningún SO ha abrazado por completo lo táctil, pero ambos han empezado a moverse desde el “point & click” a un más grande “clic basado en objetivos y botones”.

Las interfaces de pantalla táctil están obteniendo mucha expectación. Haya guerrilla o no, hay un deseo de usar pantallas táctiles en los dispositivos.

Desplazándose a través de los menús, moviéndose entre opciones con las flechas del teclado o por control de voz, los televisores inteligentes, las consolas de videojuegos, las “Google Glasses” y otras aplicaciones de Internet no dependen de un puntero de ratón. “Hover” no tiene sitio en este mundo.

La tendencia es clara; el “point and click” está en declive, cliquear (sea con un dedo, aguja digital, atajo de teclado, control de voz) está en lo alto de la ola. Nosotros como diseñadores no podemos depender de que un puntero esté siendo usado. Por lo tanto, no podemos depender de la ubicuidad del “hover” en la web.

Usar “hover” para mostrar más información sobre un hipervínculo, sea para dar contexto o para activar un menú “drop down” en un escritorio, ha sido una buena práctica durante muchos años. Los dispositivos táctiles no controlan bien el “hover”.

Apple ha intentado aplicar hover en iOS. Puedes cliquear una vez para activar el “hover”, hacer clic de nuevo para activar el enlace, pero de algún modo no llega a transmitir buenas sensaciones. O en el caso de Android, que cliqueas y ves el comportamiento del “hover” como si el navegador estuviera cargando de nuevo la página enlazada.

El “Hover” también asume que estamos usando un ratón, usando :focus a lo largo del "hover” significa que podemos direccionar a los usuarios que no pueden, por razones de accesibilidad, usar un ratón.

Si estamos desarrollado una web con “responsive design”, el uso del “hover” se convierte en un anatema. Deberíamos desarrollar una experiencia que trabajara igual de bien en cualquier dispositivo. En cuanto a dispositivos, el diseño debe ser agnóstico.

Larga vida al hover

Ha sido una grapa para el diseño durante años. Usar “hover” para mostrar que un ítem es cliqueable, revelar rápidamente información útil y, por supuesto, la conducción a través de la navegación en los menús “drop down”.

Los ordenadores de escritorio, las interfaces no táctiles son todavía la mayor manera de acceder a la web al menos en los Estados Unidos y en Europa con un 87% de uso de la web en el escritorio.

El “Hover” puede ser usado por la vasta mayoría de audiencia que, en todos estos años, lo ha usado.

El enfoque estándar durante muchos años cuando se diseñaba un menú “drop down” ha sido mostrar las opciones usando el “hover” para apoyar la mímica con el comportamiento de los menús en Windows.

El efecto, “hover” es común en webs como Best Buy, Marks and Spencer y otras.

Podríamos cambiar el enfoque, activando el efecto “drop down” al darle de nuevo a clic en vez de ejecutando el “hover”, pero no es lo mismo, va contra la rápida capacidad de descubrimiento visual inherente al “hover”. Pides a un usuario que teste lo que ocurrirá cuando hga clic en una opción del menú que esté en el nivel superior y te dirá que espera que te lleve a la página que el título de ese panel del menú indicaba, no que sea mostrado el siguiente nivel del menú.

“Hover” también se usa para mostrar los controles posibles de un particular elemento. Por ejemplo, haciendo “hover” sobre el nombre de un link a un documento mostraría las opciones de renombrar o borrar, haciendo “hover” sobre una estrella perteneciente a un sistema de votación, mostraría cómo añadir tu voto. Mejor que bombardear al usuario con las mismas opciones para todos los ítems, usamos “hover” para eliminar el ruido visual. Estos patrones han sido usados durante años por los usuarios.

¿Por qué despojar a la mayoría de usuarios de un método interactivo tan útil y con frecuencia esperado?

¿Qué puede hacer el diseñador?

Ahora mismo estamos en una encrucijada. Lo que sea que hagamos estará mal, sea a corto o a largo plazo.

Un futuro sin usar “hover” causará pena a la mayoría de usuarios de hoy en día o causará pena a la cada vez mayor base de usuarios de dispositivos táctiles. Ofreciendo interacciones “hover” solo a aquellos que usen ordenadores de escritorio/portátiles es lo que podríamos considerar un ajuste progresivo.

Pero, ¿qué hay de esos dispositivos híbridos como el Microsoft Surface que ofrece ambos servicios, táctil y ratón/teclado? ¿Podemos de alguna manera saber qué método interactivo por parte del usuario está siendo usado?

Los sencillos “media queries” no son suficientes para saber qué interacción es posible. Hay una propuesta de identificar si un usuario puede usar hover o no puesta encima de la mesa por el W3C, pero ahora mismo en 2013 no podemos asegurarnos de que alguien esté usando un ratón o un dedo o la combinación de los dos.

Ethan Marcotte en su original artículo Responsive Design dice que “estamos diseñando para que el contenido sea visionado a lo largo de un gradiente de diferentes experiencias”.

Ofrecer estilos diferentes de interacción dependiendo del dispositivo recuerda a los días oscuros del navegador. Queremos que nuestros diseños sean agnósticos en cuanto a los dispositivos se refiere. Si construimos una web, queremos hacer lo mínimo que haga falta hacer para asegurar que funcione bien a través de todos los dispositivos. Podemos retocar diseños a diferentes tamaños para recordar después que eso de cambiar un estilo interactivo dependiendo del dispositivo parece más bien algo relacionado con una cierta manera de pensar ya pasada de moda.

Patrones de diseño alternativos

Nosotros, como diseñadores, necesitamos aproximarnos a diseños alternativos.

Brad Frost ha discutido sobre posibles patrones de navegación que podríamos usar en Responsive Design. Pero, como Frost dice, muchos de esos patrones no son solo complejos, sino además inéditas maneras de interactuar, requiriendo que los usuarios aprendan un nuevo mecanismo de hacer las cosas.

Cada opción sugerida se acomoda mejor a un diferente conjunto de ítems de menú y audiencia. Recomendar un único menú web como enfoque para el futuro no es posible. Un menú como el de Facebook, estilo “slide-in-from-the-left” funciona bien en el contexto de una web donde la atención primaria del usuario se encuentra en la cascada de posts en el centro de la pantalla. Navegar a otra página es una acción secundaria. Ese enfoque no funcionaría en una web de contenido rico en información, como por ejemplo un periódico, que requiere interacción con un menú para encontrar el artículo que está siendo buscado. Aunque la nueva proposición de rediseño del New York Time's reduce la atención en la navegación.

Un enfoque prudente sería elegir al menos dos alternativas que acomoden y conduzcan al usuario, eligiendo la que funcione mejor para la audiencia. La multivalencia o el test A|B podría también ser usado para elegir el mejor enfoque.

Como con la navegación web no hay un patrón sencillo que funcione con todas las situaciones, lo mejor es elegir 2 o 3, diseñarlas, probarlas y refinarlas.

Usar el “hover” para revelar controles no requiere de un cambio dramático de nuestro enfoque. Activando estos controles con un clic funcionaría en dispositivos táctiles, pero no es inmediatamente obvio el que un clic enseñaría más información que una simple consulta del usuario a una página diferente.

Necesitamos asegurarnos de que el elemento tiene algo que indica que una acción es posible. Cada elemento necesita su propia personalidad. Hemos hecho esto con links, subrayándolos o poniéndoles distintos colores, pero en cuanto a una base de revelado de información mediante clic, no hay nada parecido a un convenio.

Hay opciones, como por ejemplo usar un icono. Desarrollar un icono general con el mensaje de que “cliqueando aquí” existirá la oportunidad de que se muestre un gran número de opciones. Podríamos considerar usar iconos abstractos como por ejemplo un engranaje, pero igual no funcionaría demasiado bien. Podríamos intentar definir un icono que indicara que al cliquearlo se revelarían más acciones, pero necesitaríamos educar a nuestros usuarios sobre la función que se esconde tras el icono.

Se ha intentado esto con el icono Share This . Es icono está en muchos sitios, pero la compresión de su significado es todavía relativamente baja. HTML tiene la etiqueta que hemos podido usar para definir el significado de una cerrada abreviación o acrónimo. No ha sido usada lo suficiente esa línea subrayada y punteada que es extensamente comprendida por los usuarios.

Cualesquiera enfoques que usemos para indicar la opción clic-revelar-controles nos llevará un tiempo antes de que sea bastante comprendida. Como Brandon Harris de la Wikipedia dijo recientemente cuando estaba hablando sobre rediseño "¿Podemos permitirnos re-entrenar a billón y medio de usuarios?"

También necesitamos alternativas maneras de progresivo revelado de información. Tenemos que olvidarnos de que en el “hovering” el puntero del ratón sobre un link revelará los detalles. Menos mal que existen otros enfoques que nos ofrecen suficiente seguridad en cuanto a alternativas.

La alternativa a mostrar información expandida basándonos en un clic es usar distintas y diferentes perspectivas visuales, como el icono que indica una expansión. Cliquear y saltar de sección en sección es una opción que vemos en la web del framework Bootstrap como una alternativa. Podríamos también usar lo que hemos comentado del icono informativo, pero utilizar demasiado este recurso podría producirnos un ruido visual excesivo.

Puede que vivas tiempos interesantes

Como Tim Cook de Apple dijo el año pasado:

“En el último trimestre, solo dos años después de que se lanzara inicialmente el iPad, hemos vendido 67 millones. Y poniéndolo dentro de contexto, nos llevó 24 años vender esa cantidad de Macs, y cinco años la misma cantidad de iPods, y más o menos tres años la misma en iPhones.”

Lo que sea que esté ocurriendo está ocurriendo rápidamente. No podemos depender de los estilos de interacción usados en los últimos dos años a la hora de trabajar con un mundo cada vez más basado en lo táctil.”

Me encantaría que compartierais vuestras experiencias y pensamientos aquí. ¿Qué deberían hacer los diseñadores?

Joe Leech

Autor

OldMith

Desarrollador Web. jQuery. Responsive Design. Wordpress. Friki por naturaleza.

Compartir

Comentarios

JgMc

23/5/2013
Hover
Lastima por los dispositivos tactiles, si el hover muere también otros efectos hechos con el, como se menciona a los menus ddrop down, al lavalamp, las etiquetas que contengan la propiedad title, también le pasaría eso a algunos efectos con transiciones, mucho más. pff... diseñar ya no será lo mismo.

@jorgevargasvega

24/5/2013
Diseñar pensando en dispositivos
Interesante el tema. Particularmente estoy terminando el desarrollo de un sitio web orientado a clinica de salud. El cliente deseaba casi todo en menú con submenú. Pensando en que es un diseño responsive le sugerí que no es lo ideal crear hoy en día esos tipos de menú ya que visualmente es HORRIBLE desplegar un menú de un largo casi infinito. La información se requiere rápida, a solo algunos clics. En resumen lo quiso a su manera y es lo que estoy haciendo pero hace bastante tiempo vengo pensando en que ya no se puede usar submenus. Hace tiempo encontré este diseño http://famousthemes.com/my-mobile-page-v3/wordpress/ <br />
<br />
Pienso que es la forma en que deberemos comenzar a ver la web. El concepto Mobile First es uno de los caminos.<br />
Saludos cordiales a todos.

JHasmany

04/6/2013
La innovacion del S4
Al leer el articulo, me albergo varias dudas e inquietudes sobre el disenio, soy estudiante de Ingenieria Informatica y principiante en el mundo de la web, pensar en el redisenio, o buscar alternativas? Pero recordando comentarios de amigos y algunos comeciales, sobre la caracteristica de acercamiento del nuevo S4, de alguna manera podria ser utilizada como la nueva interaccion del hover claro que solo es una idea que se me vino a la mente, porque ello abarca muchos aspectos desde patentes, uso y demas, pero bueno como dice el articulo habra que buscar alguna manera de sobrellevar todo esto. Larga vida a Hover!!!

Rene

24/6/2013
Diseños mas apegados a la relidad
Creo que los dispositivos táctiles fueron hechos para hacernos sentir que estamos interactuando con objetos reales, todo en la pantalla deberíamos verla como objetos que tienen un efecto si presionamos, tocamos, arrastramos y aventamos los objetos simulan moverse como si fueran reales; y en la realidad no existe algo como el hover, cuando leemos el periódico no esperamos ver que se resalten los encabezados cuando pasamos la mirada o el dedo por encima. cuando escribimos en nuestro teclado no esperamos que se ilumine la tecla que está bajo la llema de nuestro dedo o cuando miramos un aparador no se resalta las cosas si las señalamos. No, hay otras formas de llamar la atención de algo, simplemente es el tiempo de diseñar algo mas orgánico mas real y ese es el reto para los diseñadores o programadores.

Iván Zabludovsky

02/7/2013
Sobre el "Hover", creo que se tiene algunas alternativas...
Si bien estamos acostumbrados a que al pasar el puntero sobre un menú este despliegue otros subniveles (&quot;hover&quot;), en los dispositivos &quot;Touch&quot; no es muy posible ya que no se cuenta para empezar con un puntero real que aparezca en pantalla, por eso una propuesta y creo que tal vez ya alguien la ha definido, es mostrar al usuario por medio de una franja de la punta de una flecha angosta al final de cada elemento de menú que contenga más subíndices o cualquier otro elemento de la página, esta flecha solo podrá ser activada si se arrastra hacia la dirección que indica la punta de flecha, descubriendo así las demás opciones, y por cada opción que se requiera mostrar más opciones, pues se le deberá colocar esta silueta de punta de flecha en dirección de donde quiere que el usuario arrastre dicha flecha, una vez mostrado el contenido, el usuario al hacer &quot;click&quot; en alguna de las opciones, se deberá cerrar en automático dichas opciones, ya que el usuario ha llegado a la opción requerida.<br />
<br />
El usuario al arrastrar dicha flecha, esta deberá cambiar al sentido contrario una vez que esté abierta, esto indicara al usuario que deberá desplazarla de regreso si quiere cerrar las opciones que el mismo ha mostrado, todo esto se basa en arrastre, el clickeo solo es para seleccionar la opción requerida y guardar así el elemento a su estado inicial que se arrastró previamente para mostrar sus opciones.<br />
<br />
Aunque con esto vemos que es muy diferente al &quot;hover&quot;, porque con el &quot;hover&quot; se obligaba en cierta manera al usuario de primera vista ver las opciones que se tenían con solo pasar el puntero por ciertos elementos de la página, ahora dependerá totalmente del usuario que interactúe con la información mostrada.<br />
<br />
Lo que he aprendido es que los usuarios son cada vez más diestros en esto de la manipulación de las paginas, así que no les tomara tiempo responder ante estas nuevas situaciones, ya que los vemos a diario con el manipular unos usuarios el sistema Windows y el sistema MAC Os que en varias situaciones son diferentes y no ha creado problemas de adaptación, sino al contrario buscar nuevas formas de manejar situaciones con diferentes enfoques de manipulación de contenido he información.<br />
<br />
Gracias....

film dhamaka

20/7/2016
film dhamaka
Thank u for this article
<a href="http://filmdhamaka.in"><b>Film Dhamaka</b></a>

Arturo

21/12/2016
Larga vida al hover
De casualidad llegue aquí y aunque el tema ya es viejo dejo un aporte; que no es de mi autoría, para aquellos que aún tienen la duda sobre el hover en dispositivos móviles:

<div onclick="return true" class="click">
...
</div>

El truco conciste en agregar onclick="return true" al elemento que se le dio hover en los estilos.

¡Larga vida al hover!