hover-navigation

Navegación móvil a través de toques y gestos en lugar del mouse

La web móvil ha influido mucho en nuestros hábitos de cuándo, cómo y dónde usamos la World Wide Web. La forma de navegar por los sitios web es la que más ha cambiado. Hace unos años, el mouse tenía la responsabilidad principal de la navegación, y ahora, las tabletas y los teléfonos inteligentes se controlan a través de simples toques y gestos. Por lo tanto, los sitios web contemporáneos definitivamente deberían considerar los toques y los gestos cuando se trata de interfaces de usuario y navegación móvil.

El problema del vuelo estacionario

La navegación en un teléfono inteligente o tableta funciona bien sin prestar mucha atención a los toques y gestos. Los enlaces se abren mediante un toque en lugar de un clic, y el desplazamiento se realiza deslizando el dedo. Sin embargo, cuando se trata de efectos de desplazamiento, que son bastante populares en el diseño web, los dispositivos móviles ya te darán problemas.

Esto se debe a que un efecto de desplazamiento, usando la pseudoclase CSS «: hover», por ejemplo, simplemente no existe en dispositivos móviles y, por lo tanto, no se activará al llamar enlaces mediante un toque. Por lo tanto, al equipar enlaces con efectos de desplazamiento, el destino del enlace y el efecto de desplazamiento se procesan al mismo tiempo en los dispositivos móviles. En el mejor de los casos, el visitante verá el efecto de desplazamiento durante un corto período de tiempo, hasta que se acceda a la página a la que se hace referencia en el enlace.


Navegación a través del efecto Hover en Fotolia

Por supuesto, los desarrolladores web generalmente pueden renunciar a los efectos de desplazamiento para garantizar una interfaz de usuario homogénea en dispositivos móviles y de escritorio. O puede optar por adoptar un enfoque diferente para dispositivos móviles y de escritorio. Si el efecto de desplazamiento solo se usa como arte ornamental, debe dejarlo en los dispositivos móviles.

Cuando la información, como los textos, se muestra con un efecto de desplazamiento, debe encontrar una manera de mostrarlos sin el efecto de desplazamiento para dispositivos móviles.

Media Query y «puntero»

Es posible que CSS no le brinde una forma explícita de elegir entre controles a través del mouse y pantallas táctiles. Sin embargo, la designación de «puntero» le permite distinguir entre precisión de puntero alta y limitada. En los dispositivos táctiles, «puntero» distribuye el valor «grueso», que equivale a una precisión limitada. Para otros dispositivos, el valor «fino» se utiliza para una alta precisión.

@media (pointer: fine) {
  a:hover p {
    display: block;
  }
}

En el ejemplo, un párrafo dentro de un enlace solo se muestra mediante el desplazamiento del mouse cuando se usa un dispositivo con una alta precisión de puntero, ya que eso significa que se controla con un mouse. De esta manera, puede operar su sitio web según el concepto de control (mouse o táctil), sin usar JavaScript.

Los enlaces y botones requieren espacio

Además de los efectos de desplazamiento, hay otro aspecto que debe considerar al diseñar interfaces de usuario móviles: el tamaño y las distancias entre enlaces y botones.

navegación táctil


Ejemplo de menús con tamaño suficiente: Google+ y FontShop

Si bien el mouse le permite hacer clic en pequeños enlaces y botones con mucha precisión, el toque con el dedo no es tan preciso. Por lo tanto, debe asegurarse de que sus elementos sean lo suficientemente grandes en las vistas móviles. También es importante dejar suficiente espacio entre los elementos individuales. Todo esto evita que el visitante elija accidentalmente un enlace o botón incorrecto.

Si desea distinguir entre la vista de escritorio y la vista móvil, puede, una vez más, usar la designación de «puntero» para diseñar diferentes menús y formularios.

Hacer que el diseño de estos elementos dependa del ancho de pantalla de un dispositivo, como es común en los diseños web receptivos, no tiene mucho sentido. Después de todo, las tabletas también se manejan mediante toques y gestos y, por lo general, muestran la vista de escritorio.

Reaccionar a los gestos a través de JavaScript

De forma predeterminada, los enlaces y botones se activan con un simple toque en el móvil. Sin embargo, también puede reaccionar a los gestos utilizando eventos táctiles. Son similares a los conocidos eventos del ratón. Como tal, hay eventos que se activan al principio y al final de un toque, así como durante el movimiento en la pantalla.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.touches[0].pageX);
  console.log(e.touches[0].pageY);
}, false);

En el ejemplo visto arriba, el evento «touchmove» activa una función que escribe la posición del toque dentro de la ventana del navegador («pageX» y «pageY») en la consola. Todos los grifos se capturan como matrices usando «toques[]», por cierto. Por lo tanto, si hay dos dedos en la pantalla al mismo tiempo, ambos movimientos y sus posiciones estarán disponibles a través de «toques[0]»» Toca[1]”.

hammerjs_gesten


Gestos compatibles con Hammer-JS /

De esta manera, reacciona a los gestos de deslizamiento, así como a los de rotación y zoom. Como JavaScript no conoce ningún gesto, debe crear el uso de eventos táctiles, o mediante el uso de marcos adecuados como Hammer.JS, que conoce los gestos comunes, lo que le permite reaccionar ante ellos con acciones o funciones únicas.

Long-Tap es el «nuevo» Hover

Hammer.JS también se puede utilizar para crear los llamados taps largos. Aquí, el dedo permanece en la pantalla durante un rato. Las pulsaciones largas se utilizan a menudo para acceder a menús contextuales o desplegables.

Los toques largos tienen la ventaja de permitir dos acciones diferentes de un elemento, similar al efecto de desplazamiento. En dispositivos de escritorio, el mouse se usa a menudo para expandir un menú desplegable a través del efecto de desplazamiento, mientras que el clic llama elementos de menú individuales. En el dispositivo móvil, el toque largo le permite expandir un menú desplegable sin activar directamente un elemento del menú.

Por esa razón, el toque prolongado se puede utilizar como reemplazo del efecto de desplazamiento en dispositivos móviles. En cualquier caso, debe considerar si sus gestos y toques son intuitivos y si el usuario puede aplicarlos correctamente.

Conclusión

No es fácil transferir los conceptos de control comunes, como los conocemos, del mouse, a las pantallas táctiles y móviles. Sin embargo, muchos gestos se han establecido en los últimos años, como los gestos de deslizar y pellizcar, por ejemplo, que debe utilizar para la navegación de su sitio web.

El toque largo también se ha convertido en una alternativa común al efecto de desplazamiento. No obstante, siempre debe recordar que tanto el mouse como el tacto tienen diferencias que debe considerar.

(dpe)

#Navegación #móvil #través #toques #gestos #lugar #del #mouse

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.