TECNOLOGÍA

25 Principios para el diseño de un sitio web móvil

16/12/2014

 

Por Alexandra Gutiérrez

A continuación te presentamos un resumen práctico que ilustra los 25 principos del diseño móvil.

 INICIO Y NAVEGACIÓN

1.Llamado a la acción

Ofrecer los “calls-to-action” en el cuerpo principal.

2.Mantener menús cortos

Un menú más corto con distintas categorías es más fácil para navegar.

3.Fácil regreso al Inicio

Usar el logo como botón de navegación para volver al Inicio.

4.No dejar que las promociones/publicidad roben show

Asegurar que las promociones no interfieran con la navegación y distinguir claramente de los “calls-to-action”. 

BÚSQUEDA EN EL SITIO

5.Buscador visible

Usar cajas de texto en la parte superior de la página.

6.Asegurar resultados relevantes

Asegurar que la primera página tenga los resultados más relevantes.

Búsqueda con autocompletar y corrector de ortografía.

7.Implementar filtros para mejorar usabilidad

Mencionar a los usuarios cuántos resultados recibirá con un filtro en particular.

No permitir a los usuarios filtrar para llevar a 0 resultados.

8.Guía de usuario para mejores resultados

Para sitios que atienden diversos segmentos de clientes, es de ayuda realizar preguntas iniciales a la búsqueda, así obtienen resultados más relevantes.   

COMERCIO Y CONVERSIONES

9.Dejar explorar al usuario antes de comprometerse

Permitir al usuario navegar en el sitio sin registrarse en una cuenta.

10.Permitir al usuario comprar como invitado

Ofrecer la opción de revisar/comprar como invitado.

Además motivar al registro mencionando los beneficios del registro.

11.Usar la info existente para maximizar

Tomar ventaja de la info que ya se tiene.

El uso de herramientas de terceros (pasarela de pagos) para hacer la conversión lo más fácil posible.

12.Usar botones “Click-to-call” para tareas complejas

Ofrecer un botón “Click-to-call” puede evitar que el usuario abandone el proceso cuando tiene que proporcionar info compleja. 

13.Facilitar la finalización de la conversión en otro dispositivo

Los usuarios pueden explorar el sitio para convertir luego. Ofrecer una manera sencilla para reanudar en otro dispositivo mediante compartir en redes, mail o guardar carrito.   

FORMULARIOS

14.Agilizar la entrada de info

Mostrar automáticamente el teclado numérico para la entrada de info como teléfonos, cédula, etc.

También mostrar info prediligenciada en los campos posibles.

15.Escoger el método de entrada

Toggle y/o dropdown menú son las opciones óptimas para ingresar info en un formulario móvil.

16.Proporcionar un calendario visual para seleccionar fechas

Ofrecer la selección de fechas a través de un calendario visual con instrucciones claras.

Prevenir confusiones mostrando etiquetas claras para seleccionar inicio y fin.

17.Minimizar los errores en el formulario con etiquetas y tiempos reales de validación

Usar etiquetas claramente visibles para informar al usuario que se requiere. Evitar usar etiquetas dentro de los campos, porque desaparecen cuando se ingresan lo datos, dejando al usuario sin guía.

Validar los errores en tiempo real y dar a conocer si hay algún inconveniente antes de enviar el formulario.

18.Diseñar formularios eficientes

Minimizar el número de campos del formulario.

Usar el autorelleno cuando sea posible.

Usar barras de progreso claramente etiquetadas para guiar al usuario en los formularios de partes múltiples. 

USABILIDAD

19.Optimizar todo el sitio para móvil

El sitio es más fácil de utilizar si todas las páginas están diseñadas para móvil.

20.No promover a los usaurios a “Pinch-to-zoom”

Diseñar el sitio para que no necesite usar el zoom. Evitando perder “calls-to-action”.

21.Usar imágnes de productos expandibles

Incluir detalles de alta calidad de imgs clave como fotos de producto.

22.Informar al usuario que orientación de pantalla funciona mejor

Comunicar al usuario si el sitio funciona mejor con determinada orientación (landscape o portrait).

Asegurar que los “calls-to-action” se lleven a cabo independiente de la orientación.

23.Mantener al usuario en una sóla ventana del navegador

Asegurar que los “calls-to-action” mantengan al usuario en la misma ventana del navegador.

Agregar funcionalidad al sitio con temas de interés o relacionados que eviten al usuario salir a consultar a otra ventana.

24.Evitar la etiqueta full site (Full site vs Mobile site)

Hacer fácil el cambio entre experiencias de sitios, pero usando etiquetas como “desktop, escritorio” en lugar de “full, competo”, para aclarar que ambos ofrecen una experiencia completa.

25.Aclarar por qué se necesita la ubicación del usuario

Siempre dejar claro porque necesita conocer la ubicación del usuario, y como la información influirá en su experiencia. 

 http://eiso.com.co/publicaciones/tecnologia/25-Principios-para-el-diseno-de-un-sitio-web-movil/