25 buenas prácticas de diseño en un sitio móvil

Muchas empresas descuidan su sitio móvil pensando que basta con que este se visualice correctamente. Sin embargo, hay muchos comportamientos que son distintos en estos dispositivos y que deben ser considerados en el diseño para ofrecer una buena experiencia a los usuarios.

Las últimas mediciones indican que los usuarios de móviles ya superan a los de desktop en América Latina, por lo que se trata de un tema importante.

Google y AnswerLab estudiaron cómo los usuarios interactúan con distintos sitios móviles para determinar las mejores prácticas. En cada plataforma se le pidió a los participantes que completaran una tarea orientada a una conversión, compartiendo sus pensamientos y evaluando su experiencia.

Como resultado de esta investigación se definieron 25 principios de diseño que se agruparon en cinco secciones:

• Página de inicio y navegación.
• Búsquedas en el sitio.
• Comercio y conversiones.
• Entradas de formularios.
• Usabilidad y adaptación.

En esta nota resumimos las buenas prácticas que definen a un buen sitio móvil.

Página de inicio y navegación en un sitio móvil

El home debe presentar los contenidos más importantes y la navegación debe estar adaptada a las características de estos dispositivos.

• Llamados a la acción al centro y al frente: Los llamados clave deben aparecer en un lugar visible para que los usuarios puedan completar las tareas con facilidad. Ten en cuenta que la posición óptima en móviles no es igual que en desktop.
• Menú cortos y amigables: En móviles los usuarios no tienen paciencia para revisar listas largas de opciones. Busca formas de presentar la menor cantidad de elementos en el menú.
• Facilidad para volver a la página de inicio: El logo siempre debe llevar a la página de inicio. Los participantes del estudio se mostraron frustrados cuando esto no era así.
• Promociones que no distraigan: Si opacan a los contenidos, harán más difícil para los usuarios completar las tareas.

Búsquedas en el sitio

Cuando los usuarios necesitan información específica, normalmente usan las opciones de búsqueda, por lo que es importante que estén optimizadas.

• Barras de búsqueda visibles: Los participantes respondieron mejor a las barras en la parte superior de la página.
• Resultados de búsqueda relevantes: Los usuarios solo ven los primeros resultados, por lo que debes asegurarte de que estos sean relevantes. Puedes ayudarlos corrigiendo errores de tipeo o autocompletando palabras.
• Filtros para mejorar la usabilidad de búsquedas: Algunos participantes abandonaron los sitios que no permitían filtrar resultados. Ayuda a los usuarios indicando cuántos elementos verán en cada opción.
• Herramientas para guiar a los usuarios en la búsqueda: En los sitios que tienen muchos grupos de usuarios distintos es útil dividir las respuestas haciendo algunas preguntas.

Comercio y conversiones

Realizar compras desde una pantalla pequeña puede ser muy complejo si el diseño no está adaptado adecuadamente.

• Espacio para explorar antes de comprar: Si exiges que los usuarios se registren antes de poder ver toda la información de los productos, las conversiones disminuirán.
• Compras como invitado: Incluso cuando iban a comprar, muchos participantes no quisieron registrarse para realizar la transacción. Esto ocurre especialmente cuando no se explican los beneficios de crear una cuenta.
• Campos pre-rellenados con datos existentes: Para los usuarios registrados no se deberían volver a pedir los datos que ya entregaron. En el caso de usuarios nuevos se puede usar third-party cookies para rellenar los campos.
• Ayuda telefónica para tareas complejas: Cuando los formularios son complicados y la información es sensible, los usuarios agradecen tener la opción de hablar con una persona.
• Conversiones a través de dispositivos: Muchos usuarios prefieren realizar las transacciones desde su computador de escritorio. Para ayudarlos se puede ofrecer opciones para guardar o compartir información entre dispositivos.

Entradas en formularios

Es importante ayudar lo más posible a los usuarios para que completen los formularios desde pantallas táctiles, esto impulsará las conversiones.

• Información en cada campo: Los textos de ejemplo o ayuda en los campos de los formularios orientan a los usuarios y facilitan las tareas.
• Métodos simples para realizar tareas: Es más fácil seleccionar elementos grandes y fáciles de identificar en pantallas táctiles. Los menú de cascada tradicionales también ayudan a facilitar estas interacciones.
• Calendarios para la selección de fechas: Los usuarios muchas veces no recuerdan las fechas exactas, los calendarios resuelven este problema.
• Etiquetas y validación en tiempo real: Las etiquetas en formularios deben estar visibles cuando el usuario está ingresando la información. Una vez que es ingresada, es útil saber si hay un error antes de pasar a otro campo.
• Formularios eficientes: Asegura que no existan acciones repetidas o campos innecesarios. Si está dividido en varias partes, debes indicar en una barra de progreso cuánto falta para terminar.

Usabilidad y adaptación

Un sitio móvil debe estar pensado para estos dispositivos desde todos los ámbitos, incluidos los contenidos y todas las secciones.

• Sitio completo optimizado para móviles: En el estudio, los sitios que mezclaban páginas optimizadas para móviles con páginas sin adaptar fueron más difíciles de usar para los usuarios.
• Tamaños apropiados: Los participantes se mostraron frustrados cuando tenían que agrandar o achicar las páginas para ver los contenidos.
• Imágenes con buena resolución: En el caso de los productos es diferente, los usuarios quieren poder ampliar las imágenes para ver bien los detalles de lo que están comprando.
• Orientación de pantalla definida: Si tu sitio se ve mejor en una orientación en particular, avísale a los usuarios para que puedan tener la mejor experiencia.
• Una sola ventana en el navegador: Cambiar de ventanas en un teléfono puede ser complicado, evita este problema.
• Sin opción de “Sitio completo”: Los usuarios que vieron la opción “sitio completo”, asumieron que la versión móvil estaba reducida y prefirieron ir al sitio para desktop.
• Razones para pedir la ubicación del usuario: Siempre se debe informar por qué es útil compartir la ubicación, así el usuario estará más dispuesto a entregar esta información.

Además de seguir estos consejos, recuerda que un buen diseño solo funcionará bien si el rendimiento técnico del sitio es apropiado. Antes de aprobar un sitio, realiza varias pruebas en distintos dispositivos y navegadores para identificar posibles problemas.

Finalmente, asegúrate de implementar códigos de seguimiento diferenciados en tu sitio móvil, así podrás evaluar su rendimiento y realizar optimizaciones en el futuro.