La guía de Zappos para diseño web para móviles

A principio de mes encontramos una entrada muy interesante en el blog Crazy Egg sobre el diseño web para móviles y su aplicación por parte de Zappos.

Podéis acceder al artículo (en inglés) aquí: «The Zappos Guide to Mobile Website Design«.

Zappos es una tienda online de zapatos y muchos artículos más relacionados que se diferencian de la competencia por tener una atención al cliente exquisita. Es de las pocas tiendas online que consigue perfectamente que sus clientes perciban que hay personas detrás de la web.

Siguiendo el lema que está tratando de impulsar Google: «Your customers are already mobile. Are you?«, no hay nada más frustrante para un usuario que acceder a una web a través de su tablet o smartphone y solo encontrar problemas. Zappos es un perfecto ejemplo de un sitio web para móviles que sigue todas las mejores prácticas en este tipo de webs.

Lección 1: Incluir un buscador.
Todo el mundo lo quiere. Zappos da la posibilidad de búsqueda desde el primer momento que se accede y si alguien conoce el producto que quiere, lo teclea y lo compra. Así de sencillo.

Lección 2: Menos imágenes, más velocidad.
La web móvil debería de tener la menor cantidad de imágenes posible. Imágenes irrelevantes y ornamentales reducen la velocidad de carga y dificultan la navegación móvil.
Zappos reduce sus imágenes a las de los productos.

Lección 3: Diseño en una columna.
Ayuda a ver la web en dispositivos móviles con pantallas más pequeñas. Eso si, la columna tiene que ocupar todo el ancho de la pantalla.

Lección 4: Contenido adaptado al usuario.
Las necesidades del usuario son las que mandan. Todo lo que no sea crítico y necesario para el usuario se puede omitir.

Lección 5: Sacar el máximo rendimiento de una pantalla pequeña.
Hay algunas cosas que los usuarios no van a hacer nunca en una pantalla pequeña, como reservar un vuelo. Es mejor reservar estas tareas donde hay múltiples pasos y navegación compleja para realizarlas desde un ordenador.
Zappos permite comprar productos, su objetivo de negocio, dejando otras tareas de lado (darse de alta en el blog / newsletter).

Lección 6: Usar botones grandes y enlaces.
Estos dos componentes son de vital importancia para la usabilidad de un sitio web móvil. Generalmente los enlaces tienen que tener 32px para acomodarse a la huella dactilar de una persona. Los botones deben tener un tamaño acorde. Nunca hay que reducir una web diseñada para verse en un ordenador a una pantalla pequeña, ya que su usabilidad es terrible.

Lección 7: Una estructura de la información sencilla.
En sitios web con mucha información podemos perdernos en la misma. Limitando las opciones permite a los usuarios móviles encontrar aquello que es relevante para ellos.

Lección 8: Permitir acceder a la web completa.
Siempre hay que incluir una opción para visitar la web completa (y viceversa). Normalmente se colocará en el pié y permite al usuario elegir su experiencia de navegación.

Lección 9: Redireccionar tráfico según el dispositivo.
Si un usuario accede a la web con un iPhone se le debería de redirigir automáticamente a la web móvil.
Zappos aún le da otra vuelta, ofreciendo webs optimizadas para distintos dispositivos móviles.

Lección 10: Proveer «otra» información de contacto.
Los usuarios móviles quieren encontrar un número de teléfono o dirección lo más rápidamente posible; por lo que hay que proporcionársela.
 ¿Ya tienes preparada tu página web para dispositivos móviles? Si no es así, ¿a qué esperas? Puedes empezar con nuestra entrada sobre «Consejos para adaptar una web al iPhone«.