Principios básicos del diseño de sitios web móbiles

PRINCIPIOS BÁSICOS DEL DISEÑO DE SITIOS WEB MÓVILES:CAUTIVA A LOS USUARIOS Y GENERA CONVERSIONES

INTRODUCCIÓN 03

METODOLOGÍA 04

PÁGINA DE INICIO Y NAVEGACIÓN EN EL SITIO WEB 05

BÚSQUEDA EN EL SITIO WEB 11

COMERCIO ELECTRÓNICO Y CONVERSIONES 17

CUMPLIMENTACIÓN DE FORMULARIOS 24

USABILIDAD Y FACTORES DE FORMA 31

ASPECTOS TÉCNICOS FUNDAMENTALES 40

ÍNDICE

INTRODUCCIÓNLos consumidores recurren cada vez más a la web móvil para buscar y descubrir contenidos, lo que significa que para las empresas resulta más importante que nunca tener una presencia móvil eficaz. Y, entonces, ¿qué características debe reunir un buen sitio web móviles?

Con el propósito de responder esa pregunta, Google y AnswerLab han realizado un estudio de investigación en el que han analizado la forma en la que un grupo heterogéneo de usuarios interactuaba con una serie de sitios web móviles.

03

Nuestro objetivo: determinar las mejores prácticas para el diseño de sitios web para móviles.

METODOLOGÍA

04

El estudio se llevó a acabo mediante sesiones presenciales de usabilidad de 119 horas con participantes de Chicago y San Francisco.

Se pidió a los participantes que realizaran una serie de tareas clave en sus propios teléfonos. Se incluyó a usuarios tanto de Android como de iOS.

Para cada sitio web, pedimos a los participantes que completaran una tarea que generara una conversión, como efectuar una compra, realizar una reserva o buscar información sobre planes o precios. Los participantes comentaban en voz alta sus impresiones mientras realizaban las tareas y, después, valoraban su experiencia en cada sitio.

Los investigadores también proporcionaron una valoración en función de la experiencia con el sitio, así como del mayor o menor éxito en la finalización de la tarea, y realizaron un registro de los errores o problemas de los sitios conforme a su gravedad.

Los resultados revelaron 25 principios básicos para el diseño de sitios web móviles, que nosotros hemos agrupado en cinco apartados:

• Páginadeinicioynavegaciónenelsitioweb• Funcióndebúsquedaenelsitio• Comercioelectrónicoyconversiones• Cumplimentacióndeformularios• Usabilidadyfactoresdeforma

En cada uno de los principios, proporcionamos información obtenida en nuestro estudio, la idea principal para el diseño de tu sitio web y una imagen ilustrativa de uno de los mejores sitios.

Consejo principalEl aspecto común de todos los apartados es que los usuarios de móviles suelen centrarse en la consecución de objetivos —esperan obtener lo que necesitan de un sitio de forma fácil e inmediata y conforme ellos quieran—. Garantiza el éxito de tu sitio web mediante un diseño que tenga en cuenta el contexto y las necesidades de los usuarios sin sacrificar la riqueza del contenido.

PÁGINA DE INICIO Y NAVEGACIÓN EN EL SITIO WEB

05

La página de inicio para ordenador sirve a la vez de página de bienvenida, centro de mensajería y espacio promocional; sin embargo, la de un sitio móvil debería centrarse en conectar a los usuarios con el contenido que están buscando. En este apartado, exploramos los principios básicos para construir una página de inicio móviles que proporcione a los usuarios lo que buscan y de forma rápida.

1 SITÚA LAS LLAMADAS A LA ACCIÓN EN PRIMER PLANO

2 UTILIZA MENÚS BREVES Y CONCISOS

3 HAZ QUE SEA FÁCIL VOLVER A LA PÁGINA DE INICIO

4 EVITA QUE LAS PROMOCIONES ACAPAREN TODA LA ATENCIÓN

06

PÁGINA DE INICIO Y NAVEGACIÓN EN EL SITIO WEB

PRINCIPIOS BÁSICOS

1. SITÚA LAS LLAMADAS A LA ACCIÓN EN PRIMER PLANOEs fácil que un elemento de menú pase desapercibido para los usuarios de móvil, por eso debes colocar tus principales llamadas a la acción donde los usuarios puedan verlas. Para los participantes del estudio, resultó muy sencillo completar tareas en sitios que mostraban claramente las llamadas a la acción básicas en el área principal y las tareas secundarias en menús o en la parte inferior. Las llamadas a la acción de tu sitio móvil probablemente serán distintas a las que uses en la versión para escritorio, así que ponte en la piel de los usuarios a la hora de determinar su ubicación.

Ejemplo del sitio web para móviles de Progressive.

Consejo principalSitúa las llamadas a la acción que sean primordiales en el lugar más prominente de tu sitio web.

07

2. UTILIZA MENÚS BREVES Y CONCISOSUn menú extenso puede funcionarte bien en la versión de escritorio de tu sitio web, pero los usuarios de móvil no van a tener la paciencia de recorrer una larga lista de opciones para encontrar lo que quieren. Plantéate cómo puedes mostrar el menor número posible de elementos en un menú —por ejemplo, uno de los grandes almacenes más importantes depuró las categorías de producto de su sitio móvil, mostrando a los participantes del estudió un listado más corto y mejor definido que en la versión de escritorio—.

Ejemplo del sitio web para móviles de Macy’s.

Consejo principalUn menú más corto con categorías bien diferenciadas facilita la navegación para los usuarios de móvil.

08

3. HAZ QUE SEA FÁCIL VOLVER A LA PÁGINA DE INICIOCuando los usuarios de móvil navegan por tu sitio, quieren que haya una forma sencilla de volver a la página de inicio. En el estudio, por lo general los participantes esperaban poder volver a la página de inicio tocando el logotipo en la parte superior de la página, y les resultaba frustrante intentarlo y que no funcionara.

Ejemplo del sitio web móvil 1800 Flowers.

Consejo principalUtiliza tu logotipo como un botón de navegación para volver a la página de inicio.

En el caso de la publicidad de aplicaciones, los participantes preferían banners fáciles de descartar, en vez de anuncios intersticiales grandes.

Pantalla ilustrativa únicamente a título de ejemplo.

Consejo principalAsegúrate de que las promociones no interfieran con la navegación y de que sean claramente diferenciables de las llamadas a la acción.

10

4. EVITA QUE LAS PROMOCIONES ACAPAREN TODA LA ATENCIÓNLas promociones y los anuncios pueden eclipsar el contenido que tienen al lado y dificultar la realización de tareas a los usuarios. Los participantes que visitaron el sitio móvil de una empresa determinada se vieron distraídos por un banner promocional y no se percataron de los botones de navegación que había debajo, lo que dificultó que obtuvieran más información sobre los servicios ofrecidos por la empresa.

FUNCIÓN DE BÚSQUEDA EN EL SITIO WEB

11

La búsqueda dentro del sitio resulta crucial para ayudar a los usuarios de móvil a encontrar lo que están buscando con urgencia. Este apartado brinda una serie de consejos para maximizar el valor de la función de búsqueda de tu sitio.

5 SITÚA LA FUNCIÓN DE BÚSQUEDA DE FORMA VISIBLE

6 ASEGÚRATE DE QUE LOS RESULTADOS DE BÚSQUEDA SEAN RELEVANTES

7 IMPLEMENTA FILTROS PARA MEJORAR LA USABILIDAD DE LA FUNCIÓN DE BÚSQUEDA

8 GUÍA A LOS USUARIOS PARA QUE OBTENGAN MEJORES RESULTADOS DE BÚSQUEDA

12

FUNCIÓN DE BÚSQUEDA EN EL SITIO WEB

PRINCIPIOS BÁSICOS

Ejemplo del sitio web para móviles de The Home Depot.

Consejo principalSitúa la función de búsqueda de tu sitio cerca de la parte superior de la página de inicio con un campo de texto libre.

13

5. SITÚA LA FUNCIÓN DE BÚSQUEDA DE FORMA VISIBLELos usuarios que buscan una información concreta suelen utilizar la función de búsqueda —por lo que esa función debería ser una de las primeras cosas que los usuarios de móvil ven en tu sitio—. En el estudio, los participantes respondieron mejor a cuadros de búsqueda fácilmente identificables y con texto libre situados en la parte superior de la página.

Consejo principalAsegúrate de que la función de búsqueda de tu sitio proporciona primero los resultados más relevantes e implementa funcionalidades de búsqueda inteligente como las de autocompletar y corregir automáticamente errores ortográficos.

Ejemplo del sitio web para móviles de The Home Depot.14

6. ASEGÚRATE DE QUE LOS RESULTADOS DE BÚSQUEDA SEAN RELEVANTESLos participantes no se molestaron en pasar varias páginas de resultados de búsqueda. Por el contrario, valoraron la función de búsqueda de un sitio en función de los resultados que proporcionaba en primer lugar, por lo que debes asegurarte de que los resultados de búsqueda incluidos en la primera página son los más relevantes. Hazle la vida más fácil a los usuarios de pantallas pequeñas con funcionalidades de búsqueda inteligente como las de autocompletar y corregir automáticamente errores ortográficos.

7. IMPLEMENTA FILTROS PARA MEJORAR LA USABILIDAD DE LA FUNCIÓN DE BÚSQUEDALos participantes utilizaron los filtros para disminuir los resultados de búsqueda, e incluso abandonaron los sitios que no los podían reducir. Sin embargo, también debes asegurarte de que los usuarios no puedan emplear los filtros hasta el punto de generar búsquedas nulas —como en el caso del sitio de un concesionario que permitía a los participantes especificar configuraciones que no existían en la realidad—. Ayuda a los usuarios a evitar problemas indicándoles los resultados que se van a generar si aplican un filtro concreto.

Consejo principalOfrece filtros para ayudar a los usuarios a conseguir lo que necesitan de tu sitio web, pero asegúrate de que no pueden filtrar una búsqueda hasta el punto de no generar ningún resultado.


15

8. GUÍA A LOS USUARIOS PARA QUE OBTENGAN MEJORES RESULTADOS DE BÚSQUEDAEn el caso de sitios web dirigidos a distintos segmentos de clientes, puede resultar útil plantear a los usuarios unas cuantas preguntas antes de que realicen una búsqueda para asegurar que los resultados que obtengan corresponden a los segmentos de contenido más relevantes para ellos. Por ejemplo, una importante empresa de venta de calzado, al inicio de las búsquedas en móviles, pedía a los participantes que seleccionaran el número de pie que estaban buscando y si era para hombre o mujer.


Consejo principalSi tu oferta puede restringirse fácilmente por segmento, la realización de unas cuantas preguntas al principio ayuda a asegurar que los usuarios obtienen resultados relevantes para ellos.

16

COMERCIO ELECTRÓNICO Y CONVERSIONES

17

La experiencia del cliente cada vez es más compleja y los usuarios esperan hacer su conversión a su manera. En este apartado, vamos a ver cómo generar conversiones dando el control a los usuarios.

9 PERMITE QUE LOS USUARIOS EXPLOREN ANTES DE REGISTRARSE

10 PERMITE QUE LOS USUARIOS REALICEN COMPRAS COMO INVITADOS

11 UTILIZA LA INFORMACIÓN EXISTENTE PARA MAYOR COMODIDAD

12 UTILIZA UN BOTÓN DE LLAMADA PARA LAS TAREAS COMPLEJAS

13 FACILITA QUE LA CONVERSIÓN PUEDA FINALIZARSE EN OTRO DISPOSITIVO

18

COMERCIO ELECTRÓNICO Y CONVERSIONES

PRINCIPIOS BÁSICOS

9. PERMITE QUE LOS USUARIOS EXPLOREN ANTES DE REGISTRARSELa inclusión de una página de registro demasiado pronto en la experiencia del sitio puede resultar contraproducente para generar conversiones. En el estudio, los participantes se mostraron descontentos con los sitios que les exigían registrarse para poder continuar —sobre todo si se trataba del sitio de una marca que desconocían—. Antes de proporcionar su información personal, los participantes querían echar un vistazo al contenido y hacerse una idea de lo que ofrecía el sitio.

Consejo principalPermite que los usuarios utilicen tu sitio sin tener que registrarse y obtener una cuenta.


19

10. PERMITE QUE LOS USUARIOS REALICEN COMPRAS COMO INVITADOSLos participantes no siempre querían crear una cuenta con el vendedor, aunque estuvieran realizando una compra. Los participantes comentaron que la opción de finalizar la compra como invitado resultaba “cómoda”, “sencilla” y “fácil [y] rápida”. Se mostraron descontentos con un sitio que les exigía registrarse para efectuar la compra, sobre todo porque el sitio no explicaba cuál era la ventaja de registrarse.


Consejo principalOfrece la opción de realizar una compra como invitado y fomenta los registros señalando las ventajas concretas que tiene.

20

11. UTILIZA LA INFORMACIÓN EXISTENTE PARA MAYOR COMODIDADEn el caso de tus usuarios registrados, recuerda y rellena automáticamente sus preferencias. En el caso de nuevos usuarios, ofrece un servicio de pago de un tercero que ya puedan estar utilizando. Varias de las tiendas online utilizadas en el estudio ofrecían la opción de servicios de pago de terceros, lo que facilitaba el proceso de compra para los usuarios de esos servicios y permitía al sitio rellenar automáticamente la información de envío.

Consejo principalAprovecha la información que ya tienes y/o utiliza servicios de pago de terceros para hacer que las conversiones sean lo más sencillas posible.

Ejemplo del sitio web para móviles de Delta.

21

12. UTILIZA UN BOTÓN DE LLAMADA PARA LAS TAREAS COMPLEJASProporciona un botón de llamada en las partes del proceso de conversión que requieran la introducción de información compleja o delicada.

Los participantes agradecieron la opción de poder llamar a una empresa de servicios financieros para completar una acción por teléfono en lugar de tener que rellenar complicados formularios en su dispositivo móvil.

Consejo principalProporcionar un botón de llamada bien visible puede evitar que los usuarios se salgan del proceso de venta cuando necesitan aportar información compleja.


22

13. FACILITA QUE LA CONVERSIÓN PUEDA FINALIZARSE EN OTRO DISPOSITIVOAlgunos participantes se mostraron reticentes a realizar la conversión en su dispositivo móvil. Proporciona una forma sencilla de guardar o compartir información en distintos dispositivos para mantener a los usuarios en tu proceso de venta. Por ejemplo, un sitio de búsqueda de empleo permitía a los participantes enviarse las ofertas de empleo a su correo electrónico para enviar la solicitud más tarde.


23

Consejo principalLos usuarios de móvil pueden estar buscando información para efectuar la conversión más tarde: ofréceles una forma sencilla de retomar su visita desde otro dispositivo a través de la opción de compartir de las redes sociales, el correo electrónico o la función de guardar el carrito de compra.

CUMPLIMENTACIÓN DE FORMULARIOS

24

La experiencia de conversión de tu usuario debería ser lo más perfecta posible, con independencia de que se trate de la realización de una compra, la obtención de un presupuesto o la incorporación a una lista de correo. Este apartado aborda cómo reducir la fricción en la fase final mediante un proceso optimizado de cumplimentación de formularios.

14 OPTIMIZA LA INTRODUCCIÓN DE INFORMACIÓN

15 ELIGE EL MÉTODO PARA INTRODUCIR INFORMACIÓN MÁS SENCILLO PARA CADA TAREA

16 PROPORCIONA UN CALENDARIO CUANDO HAYA QUE SELECCIONAR FECHAS

17 MINIMIZA LOS ERRORES DE LOS FORMULARIOS MEDIANTE ETIQUETAS Y LA VALIDACIÓN EN TIEMPO REAL

18 MINIMIZA LOS ERRORES DE LOS FORMULARIOS MEDIANTE ETIQUETAS Y LA VALIDACIÓN EN TIEMPO REAL

25

CUMPLIMENTACIÓN DE FORMULARIOS

PRINCIPIOS BÁSICOS

14. OPTIMIZA LA INTRODUCCIÓN DE INFORMACIÓNLos participantes mostraron su satisfacción con los sitios que ofrecían automáticamente teclados numéricos para introducir valores como códigos postales o fechas de nacimiento. También les gustaron los formularios que avanzaban automáticamente de un campo a otro conforme iban introduciendo la información. Por el contrario, encontraron frustrante tener que seleccionar repetidamente pequeños campos con el dedo y cambiar el teclado de su teléfono a la opción numérica.


Consejo principalOfrece a los usuarios un teclado numérico para los campos que requieran la introducción de números y pásales automáticamente al siguiente campo conforme vayan introduciendo la información.

26

15. ELIGE EL MÉTODO PARA INTRODUCIR INFORMACIÓN MÁS SENCILLO PARA CADA TAREACuando los participantes tenían que elegir entre opciones limitadas, les resultaba más fácil seleccionar un icono grande de activación/desactivación que introducir texto o elegir de un menú desplegable. Para seleccionar una opción entre varias, un menú desplegable convencional resultaba la forma más sencilla de hacerlo. Elige el método para introducir información que resulte más simple para una tarea y asegúrate siempre de que los elementos seleccionables sean grandes y fácilmente identificables.

Consejo principalPlantéate si un botón de activación/desactivación o un menú desplegable es la mejor opción para cada entrada de datos de tus formularios para móviles; y asegúrate siempre de que resulten fáciles de seleccionar para los usuarios.


27

16. PROPORCIONA UN CALENDARIO CUANDO HAYA QUE SELECCIONAR FECHASLos participantes no siempre recordaban las fechas exactas de «el próximo fin de semana» al reservar un vuelo. Ofrece un calendario cuando haya que seleccionar fechas para que los usuarios no tengan que abandonar tu sitio para consultar su aplicación de calendario. Evita posibles confusiones proporcionando etiquetas claras para la selección de fechas de inicio y finalización.

Consejo principalMantén a los usuarios en tu sitio ofreciéndoles la selección de fechas mediante un calendario con instrucciones claras.


28

17. MINIMIZA LOS ERRORES DE LOS FORMULARIOS MEDIANTE ETIQUETAS Y LA VALIDACIÓN EN TIEMPO REALEtiqueta tus formularios con claridad y asegúrate de que las etiquetas sigan visibles cuando los usuarios estén introduciendo la información —un participante introdujo por error la dirección de su domicilio en el campo de dirección de correo electrónico porque solo se veía la palabra «dirección»—. Del mismo modo, la colocación de las etiquetas dentro de los campos también causó problemas en los casos en los que desaparecían al empezar a introducir la información, porque dejaba a los participantes sin ninguna referencia. Una vez introducida la información, valídala para detectar errores en tiempo real antes de enviar el formulario y evitar así que los usuarios tengan que enviarlo de nuevo.

Consejo principalUtiliza etiquetas claramente visibles para que los usuarios sepan lo que necesitas; y valida la información para detectar errores en tiempo real permitiendo así que sepan si hay algún problema antes de que envíen el formulario.

Ejemplo del sitio web para móviles 1800 Flowers.29

18. DISEÑA FORMULARIOS EFICACESAsegúrate de que tus formularios no tienen acciones repetidas, ni incluyen más campos de los necesarios, y aprovecha las ventajas de la función de autocompletar. En los formularios compuestos por varios apartados, incluye una barra de progreso en la parte superior que permita saber a los usuarios lo que viene a continuación. Los participantes se sintieron cohibidos por un formulario con varias partes que incluía un paso inicial muy complejo, pero se sintieron mucho más cómodos con otro formulario más sencillo que tenía etiquetados con claridad cada uno de los apartados que seguían. Los participantes también valoraron positivamente los formularios compuestos por varios apartados que rellenaban automáticamente la información que ellos ya habían introducido, como su nombre y su código postal.

Consejo principalMinimiza el número de campos de tus formularios y rellena automáticamente la información siempre que sea posible. Utiliza barras de progreso etiquetadas con claridad para ayudar a los usuarios a cumplimentar un formulario compuesto por varios apartados.


30

USABILIDAD Y FACTORES DE FORMA

31

Los usuarios de móvil se percatarán y disfrutarán de las pequeñas cosas que hagas para mejorar su experiencia. Este apartado expone cómo diseñar todo tu sitio web para adaptarlo a los factores de forma de los móviles y a las necesidades específicas de los usuarios.

19 OPTIMIZA TODO TU SITIO MÓVIL

20 EVITA QUE LOS USUARIOS TENGAN QUE HACER ZOOM

21 OFRECE IMÁGENES DE PRODUCTO AMPLIABLES

22 INDICA A LOS USUARIOS LA ORIENTACIÓN DE PANTALLA MÁS ADECUADA

23 MANTÉN A TU USUARIO EN UNA SOLA PANTALLA DE NAVEGACIÓN

24 EVITA LA DENOMINACIÓN “SITIO WEB COMPLETO”

25 EXPLICA CON CLARIDAD POR QUÉ NECESITAS LA UBICACIÓN DEL USUARIO

32

USABILIDAD Y FACTORES DE FORMA

PRINCIPIOS BÁSICOS

19. OPTIMIZA TODO TU SITIO PARA MÓVILESComo era de esperar, a los participantes les resultó mucho más fácil navegar por sitios optimizados para móviles que tratar de navegar por los sitios para equipos de escritorio desde sus dispositivos móviles. Los participantes encontraron más difícil de navegar por los sitios que mezclaban páginas optimizadas para móviles y páginas para versiones de escritorio que los que eran enteramente para equipos de escritorio.

Consejo principalTu sitio es más fácil de utilizar si todas sus páginas están diseñadas para dispositivos móviles.

33

Ejemplo del sitio web para móviles de J Crew.

20. EVITA QUE LOS USUARIOS TENGAN QUE HACER ZOOMLos participantes encontraron frustrante tener que hacer zoom para aumentar o disminuir el tamaño del contenido y, en algunas ocasiones, les impidió percatarse de mensajes y llamadas a la acción importantes. Diseña tu sitio web para móviles de forma que los usuarios nunca necesiten cambiar el tamaño. Algunos sitios para móviles incluso desactivan en sus pantallas la función de hacer zoom con los dedos —pero si tu sitio está diseñado correctamente, los usuarios nunca notarán que ya no la tienen—.

Consejo principalLos usuarios pueden perderse llamadas a la acción si tienen que hacer zoom en un sitio. Diseña tu sitio de forma que nunca necesiten hacerlo.

Ejemplo del sitio web para móviles 1800 Flowers.

34

35

21. OFRECE IMÁGENES DE PRODUCTO AMPLIABLESLos clientes quieren ver lo que están comprando. En las tiendas online, los participantes esperaban poder ver un primer plano de los productos en alta resolución para poder observar mejor los detalles, y les resultaba frustrante cuando no podían hacerlo.

Consejo principalIncluye primeros planos de alta calidad de las imágenes clave como las fotos de productos.

Ejemplo del sitio web para móviles de J Crew.

22. INDICA A LOS USUARIOS LA ORIENTACIÓN DE PANTALLA MÁS ADECUADA Los participantes del estudio solían quedarse en la misma orientación de pantalla hasta que algo les hacía cambiarla, como, por ejemplo, tratar de leer la letra pequeña o ver un vídeo. Diseña tu sitio tanto para la orientación horizontal como la vertical, o aconseja a los usuarios que cambien a la que sea más óptima —pero asegúrate de que tus llamadas a la acción puedan completarse aunque ignoren tu sugerencia—.


Consejo principalIndica a tus usuarios si tu sitio funciona mejor en una orientación determinada, pero asegúrate de que las llamadas a la acción importantes se pueden completar en cualquier orientación.

36

23. MANTÉN A TU USUARIO EN UNA SOLA PANTALLA DE NAVEGACIÓN Cambiar de una ventana a otra en un smartphone puede ser problemático y aumenta el riesgo de que los usuarios no encuentren la forma de volver a tu sitio. Intenta mantener a los usuarios en un solo lugar evitando llamadas a la acción que abran una nueva ventana. A veces, los participantes también abrieron nuevas ventanas para buscar cupones —plantéate ofrecerlos en tu sitio para evitar que los usuarios busquen en otro lugar—.


Consejo principalAsegúrate de que tus llamadas a la acción permanecen en la misma ventana de navegación y añade funcionalidades a tu sitio que den respuesta a los motivos por los que los consumidores puedan cambiar de ventana.

37

24. EVITA LA DENOMINACIÓN “SITIO WEB COMPLETO” Cuando los participantes veían una opción para «sitio web completo» y otra para «sitio web para móviles», asumían que esta última era una versión resumida y elegían el sitio web completo. Un participante prefirió la versión para escritorio del sitio porque contenía «muchísima más información» —aunque tanto la versión para móviles como la de escritorio tenían el mismo contenido—. La utilización de términos como «versión de escritorio», en vez de «versión completa», puede ayudar a evitar ese tipo de percepciones.

Ejemplo del sitio web para móviles de The Home Depot.

Consejo principalFacilita el cambio de una experiencia del sitio a otra, pero utiliza etiquetas como «versión de escritorio», en vez de «versión completa», para dejar claro que ambos sitios ofrecen una experiencia completa.

25. EXPLICA CON CLARIDAD POR QUÉ NECESITAS LA UBICACIÓN DEL USUARIO Los usuarios siempre deberían saber por qué les estás pidiendo su ubicación. A los participantes les confundió que, al intentar reservar un hotel en otra ciudad, un sitio de viajes detectó su ubicación y les ofrecía hoteles en la misma ciudad en la que estaban en vez de en la otra. Deja los campos de ubicación vacíos por defecto y permite que sean los usuarios los que elijan rellenarlos automáticamente mediante una llamada a la acción del tipo «Buscar alrededor de mi ubicación».

Consejo principalDeja siempre claro por qué necesitas la ubicación del usuario y cómo esa información va a influir en su experiencia.


39

ASPECTOS TÉCNICOS FUNDAMENTALES

40

Un gran diseño supone solo una parte del éxito de un sitio web para móviles, también es importante hacer bien la parte técnica. A continuación brindamos unos cuantos consejos para salvar los escollos más habituales.

ASEGÚRATE DE QUE TUS ANUNCIOS PARA MÓVILES ESTÁN CONFIGURADOS PARA DIRIGIR A LOS USUARIOS A LA VERSIÓN PARA MÓVILES DEL SITIOUna configuración incorrecta puede suponer que tus anuncios para dispositivos móviles dirijan a la versión de escritorio del sitio.

MINIMIZA LAS DESCARGAS PARA GARANTIZAR UNA EXPERIENCIA ÁGILConsolida y precarga tu contenido web para móviles de forma que las descargas sean menos numerosas pero de mayor tamaño.

REALIZA PRUEBAS EN VARIOS DISPOSITIVOSPrueba tu sitio en numerosos navegadores y dispositivos para garantizar el máximo rendimiento.

ASEGÚRATE DE QUE EL CONTENIDO DE TUS PÁGINAS SE CARGA EN UN ORDEN LÓGICOContempla tu página desde el punto de vista de un usuario para identificar los posibles problemas de forma proactiva.

IMPLEMENTA ANALYTICS Y EL SEGUIMIENTO DE CONVERSIONES EN EL SITIO WEB MÓVILAsegúrate de que se haga un seguimiento tanto de las conversiones en la versión para móviles como de las conversiones en la versión para escritorio.

41

ASPECTOS TÉCNICOS FUNDAMENTALES

Principios básicos del diseño de sitios web móbiles

Mobile

Transcript of Principios básicos del diseño de sitios web móbiles