Es frustrante para los usuarios.
Intentan acceder a un sitio web en un dispositivo móvil y no encuentran más que problemas.
Los teléfonos inteligentes y las tabletas no van a desaparecer y las empresas inteligentes como Zappos se mantienen a la vanguardia.
Zappos ha sido un minorista en línea líder desde hace años, y su sitio web móvil ofrece diez excelentes ideas sobre las mejores prácticas de diseño móvil.
Lección 1: Proporcione claramente una función de búsqueda
Ellos lo quieren. Y lo quieren ahora mismo.
Observe cómo Zappos brinda capacidad de búsqueda, al frente y al centro. Si sabe el producto que desea, simplemente escríbalo y compre.
Lección 2: Menos imágenes, tiempo de carga más rápido
Esto no es una novedad para aquellos en la comunidad de diseño web.
Trate de tener la menor cantidad de imágenes posible. Las imágenes irrelevantes y ornamentales ralentizan y complican la experiencia móvil.
A medida que evolucionan los dispositivos móviles, aumentarán las oportunidades de usar imágenes.
Por ahora, haz lo que hace Zappos. Las imágenes utilizadas en el sitio móvil de Zappos están restringidas a imágenes de productos que los clientes necesitan para tomar decisiones de compra.
Lección 3: Diseño de una columna
Esto ayuda a acomodar el tamaño de pantalla más pequeño en los dispositivos móviles. La columna también debe ser lo más ancha posible.
Zappos hace un uso excelente del tamaño de pantalla limitado con una sola columna ancha que contiene la información más relevante.
Lección 4: El cliente primero
Se han abordado más las necesidades del visitante que las necesidades de la empresa. Si no es crítico para el visitante del sitio, considere eliminarlo.
Observe la falta de anuncios publicitarios en el sitio de Zappos, lo que ayuda en la usabilidad y le habla al cliente en movimiento que tiene un objetivo específico en mente cuando visita el sitio.
Lección 5: Aproveche al máximo los bienes raíces de la pantalla pequeña
Hay algunas cosas que los usuarios nunca disfrutarán haciendo en una pantalla más pequeña, como reservar un vuelo o declarar sus impuestos. Por lo general, es mejor guardar estas tareas para un escritorio donde los procesos de varios pasos y las estructuras de navegación complejas no sean un problema.
Zappos permite a los clientes móviles comprar productos, lo cual es un objetivo comercial central, dejando otros elementos para la versión de escritorio. Las funciones como el contenido del blog y la suscripción a boletines no se incluyen en la versión móvil.
Lección 6: Usar enlaces y botones grandes
Estos dos componentes no deben pasarse por alto en la usabilidad de su sitio móvil. En general, los enlaces deben tener alrededor de 32 px para adaptarse a la punta del dedo humano. Los botones deben tener el tamaño correspondiente. No es raro que una empresa simplemente reduzca su sitio existente para adaptarse a la pantalla más pequeña, creando una experiencia de usuario terrible.
Observe cuán gruesos y anchos son los botones y la navegación en el sitio web móvil de Zappos.
Lección 7: Una arquitectura de información simple
Para sitios web con mucho contenido, es fácil perderse en la información. Al limitar las opciones, esto permite a los usuarios móviles navegar por lo que es relevante para ellos y descartar el resto.
Zappos no intenta hacer demasiado con el sitio web. Si desea leer el «Historial de la empresa» de Zappos, puede hacerlo, pero no en su sitio web móvil.
Lección 8: Ofrecer una opción de sitio web completo
Incluya un enlace, preferiblemente en el pie de página, que permita al usuario visitar el sitio web completo, y viceversa. Si lo hace, les da el control total de su experiencia de navegación y se ocupa de cualquier problema que surja de ella.
Zappos deja en claro que puede cambiar a la versión completa del sitio web y que la versión completa no está optimizada para el iPhone.
Lección 9: Enrutar el tráfico según el agente o dispositivo de navegación del visitante
Si un dispositivo móvil visita «yoursitename.com» desde un iPhone, los usuarios pueden ser redirigidos automáticamente a «mobile.yoursite.com», por ejemplo.
Zappos lo lleva un paso más allá. Detecta el tipo de dispositivo que se está utilizando y redirige a una versión de la página que está optimizada para ese dispositivo. En mi caso, “iphone.zappos.com”.
Lección 10: Proporcione «otra» información de contacto
Es posible que los usuarios deseen encontrar un número de teléfono o una dirección y desconectarse de su dispositivo móvil lo antes posible. Proporcione esa información.
Zappos facilita comunicarse (y realizar un pedido) por teléfono en el pie de página del sitio web móvil.
Pruébalo
Para asegurarse de que su sitio listo para dispositivos móviles resista los rigores de la experiencia de navegación móvil, asegúrese de probarlo en múltiples dispositivos y plataformas, ya que es la única manera de asegurarse de que el sitio cumpla con las demandas de la navegación móvil.
La prevalencia de la navegación móvil no va a desaparecer pronto.
¿Cuáles son algunas otras mejores prácticas para usar que no abordé aquí? ¡No dudes en dejar el tuyo en los comentarios!