comparte el articulo 

¿Cómo hacer que un sitio móvil se sienta como una app? Parte 3

Actualizado el 07/11/2013 < > 0 Comentarios

Resumen: Última parte de este artículo donde explicamos algunas técnicas para lograr en los sitios web móviles un rendimiento percibido similar al de las aplicaciones.

Crear animaciones de buen rendimiento

Una de las diferencias más notables entre el comportamiento de una página web móvil y una aplicación, es el uso de animaciones.

Las aplicaciones generalmente están diseñadas para sacar el máximo provecho al desempeño del hardware gráfico que compone a los dispositivos móviles modernos, beneficiándose por su aceleración, y permitiendo el uso de animaciones complejas con buen rendimiento. Por otro lado, para los sitios web generalmente se opta por utilizar animaciones basadas en JavaScript, las cuales generalmente tienden a ser lentas al mostrarse utilizando los recursos de un móvil.

Afortunadamente en la actualidad, gracias al apoyo de los navegadores móviles modernos, podemos hacer uso de animaciones basadas en CSS3 las cuales ofrecen un mejor rendimiento. Gracias a estas animaciones, podemos añadir una personalidad a nuestras páginas, simulando lo que las apps han venido haciendo por años.

Sin embargo, para que estas animaciones se sientan nativas, tenemos que asegurarnos de que no sean lentas o se desplieguen de manera distorsionada, algo que puede resultar bastante difícil. Los usuarios disfrutan las animaciones, pero debemos tener en mente que una animación con un mal rendimiento puede afectar en gran manera la experiencia del usuario.

Con el fin de lograr animaciones que parezcan nativas, tenemos que establecer ciertas características con las que la animación debe cumplir para generar esta sensación en el usuario.

El primero de estos puntos a cumplir, es que cada cuadro de la animación sólo debe tardar alrededor de 16ms en completarse, es decir 60 cuadros por segundo, la cual es la velocidad a la que funcionan todas las animaciones integradas en iOS. Es fundamental que las animaciones en nuestra página que tengan interacción directa con el usuario funcionen a esta velocidad.

Como segundo punto tenemos que el resto de la página debe responder en menos de 100ms. Ese número es la barrera mental que hace creer al usuario que todo lo que venga después es lento. Cualquier tiempo por debajo de los 100ms se siente esencialmente instantáneo para el usuario.

Si algo no esta listo en 100ms no debe de pasar los 1000ms, para estos procesos grandes los diseñadores tienden a utilizar animaciones de cargado, pero como ya hemos mencionado esto se debe de evitar para centrar la atención del usuario en ello. Como alternativa podemos utilizar animaciones, por ejemplo si el cargado de contenido tarda 250ms, en lugar de mostrar el icono de rueda indicando la carga, podemos agregar una animación de cortinilla, donde el contenedor se encoge para después volverse a desplegar ya con el contenido. Una leve animación como esta puede distraer la atención del usuario, y no crear la sensación de espera, lo que puede afectar su experiencia.

Por supuesto, las animaciones repetitivas que tardan mucho tiempo en completarse también pueden ser molestas, así que asegúrate de utilizar estas técnicas con moderación. Este es un buen consejo para el uso de la mayoría de las animaciones.

Aprovechar los gestos naturales

Una ventaja notoria que tienen las aplicaciones sobre las páginas web móviles, es su capacidad para aprovechar los gestos que parecen venir de forma natural de las personas que utilizan los dispositivos táctiles. Esto se debe a que los creadores de aplicaciones han reconocido el poder que tienen los gestos y están capitalizando rápidamente su uso.

Varias aplicaciones utilizan gestos sencillos que simplemente aprovechan el mayor distintivo de un dispositivo móvil, la capacidad de tocar directamente los objetos en la pantalla. La mayoría de los sitios web, sin embargo, sólo se basan en tocar los objetos. Los diseñadores evitan la aplicación de otros gestos, dejando en los usuarios una experiencia más pobre.

Es necesario que empecemos a pensar en desarrollos de sitios directamente para dispositivos móviles, si el dispositivo de un usuario permite el uso de gestos entonces ¿Por qué no utilizarlos para nuestro beneficio?

Desafortunadamente también existe un problema con el manejo de gestos, ya que muchos sistemas operativo móviles toman ciertos gestos como nativos y los secuestran, impidiendo que el navegador haga uso de ellos para aplicarlos en la página que se esta mostrando.

Por ejemplo, aplicaciones como Facebook han estado utilizando golpes en los bordes izquierdo y derecho de la pantalla para abrir la navegación. Sin embargo, en un sitio web, esta interacción está fuera de límites ya que navegadores como Chrome utilizan este gesto para cambiar entre pestañas y la nueva versión de Safari en iOS 7 lo usa para ir hacia adelante y hacia atrás a través del historial.

Es por esto que ciertos gestos están fuera de nuestro alcance para ser utilizados en las páginas, entonces ¿Cuáles pueden y deben utilizar? A continuación te presentaremos tres de los más recomendados.

Deslizar de lado a lado

A pesar de que los bordes no están incluidos, deslizar de lado a lado todavía se puede considerar un gran gesto. Sólo tienes que tener cuidado de no realizarlo demasiado cerca del borde de la pantalla.

Este gesto es el más utilizado para moverse a través de un conjunto de objetos, en funcionalidades como un carrusel de fotos o una lista de pestañas.

Tirar para refrescar (Pull to refresh)

Pull-to-refresh es otro gesto que la gente simplemente parece hacer de forma natural. Consiste simplemente en tirar, generalmente hacia abajo, el contenido para refrescar la pantalla. Afortunadamente exite un gran número de librerías de JavaScript que hacen fácil la integración de esta función en nuestros sitios.

Pulsación larga

Existe una propiedad llamada -webkit-touch-callout:none, la cual resulta muy útil para deshabilitar la funcionalidad nativa de este gesto en Safari, sin embargo si se desea desactivar para Android puede resultar en algo un poco más complejo.

El gesto de pulsación larga puede ser utilizado para acciones como recoger un objeto para después moverlo de lugar, por ejemplo, en una funcionalidad que nos permita reordenar artículos de una lista. También se puede utilizar mostrar más opciones, por ejemplo, las distintas formas de compartir un contenido.

Publicado el 14/10/2013, última actualización 07/11/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras