El Hover en peligro. Aprende como solucionar este problema tactil

el-hover-en-peligro-por-lo-tactil
  • Ruben Carracedo Cano
  • Sin categoría
  • 27 / 05 / 2013
  • 0 Comments

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-hover-para-mostrar-menus

 

El efecto, “hover” es común en webs como Best BuyMarks 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.

el-hover-menu-facebook

 

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.

hover-muestra-informacion-adicional

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.

icono-share

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

Articulo original: http://www.desarrolloweb.com/articulos/hover.html

Compartid el artículo en vuestras redes sociales y no olvidéis comentar!!!

The following two tabs change content below.
Ruben Carracedo Cano

Ruben Carracedo Cano

Analista Programador at Adviqo Telelinea
Soy un profesional Web Multiplataforma con mucha curiosidad y ganas de seguir mejorando. Tecno-Friki entre otros vicios. Me encanta todo lo relacionado con la programación y el desarrollo de aplicaciones. En mis ratos libres investigo novedades tecnológicas, busco adaptar la tecnología para facilitar su uso cotidiano.
Ruben Carracedo Cano

Latest posts by Ruben Carracedo Cano (see all)

Deja un comentario