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

Transcripción

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

2 ÍNDICE 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

3 INTRODUCCIÓN Los 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. Nuestro objetivo: determinar las mejores prácticas para el diseño de sitios web para móviles. 03

4 METODOLOGÍA 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ágina de inicio y navegación en el sitio web Función de búsqueda en el sitio Comercio electrónico y conversiones Cumplimentación de formularios Usabilidad y factores de forma 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. El 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. 04

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

6 PÁGINA DE INICIO Y NAVEGACIÓN EN EL SITIO WEB 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. PRINCIPIOS BÁSICOS 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

7 1. SITÚA LAS LLAMADAS A LA ACCIÓN EN PRIMER PLANO Es 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. Sitúa las llamadas a la acción que sean primordiales en el lugar más prominente de tu sitio web. Ejemplo del sitio web para móviles de Progressive. 07

8 2. UTILIZA MENÚS BREVES Y CONCISOS Un 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. Un menú más corto con categorías bien diferenciadas facilita la navegación para los usuarios de móvil. Ejemplo del sitio web para móviles de Macy s. 08

9 3. HAZ QUE SEA FÁCIL VOLVER A LA PÁGINA DE INICIO Cuando 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. Utiliza tu logotipo como un botón de navegación para volver a la página de inicio. Ejemplo del sitio web móvil 1800 Flowers.

10 4. EVITA QUE LAS PROMOCIONES ACAPAREN TODA LA ATENCIÓN Las 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. Asegúrate de que las promociones no interfieran con la navegación y de que sean claramente diferenciables de las llamadas a la acción. 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. 10

11 FUNCIÓN DE BÚSQUEDA EN EL SITIO WEB 11

12 FUNCIÓN DE BÚSQUEDA EN EL SITIO WEB 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. PRINCIPIOS BÁSICOS 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

13 5. SITÚA LA FUNCIÓN DE BÚSQUEDA DE FORMA VISIBLE Los 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. Sitú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. Ejemplo del sitio web para móviles de The Home Depot. 13

14 6. ASEGÚRATE DE QUE LOS RESULTADOS DE BÚSQUEDA SEAN RELEVANTES Los 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. Asegú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

15 7. IMPLEMENTA FILTROS PARA MEJORAR LA USABILIDAD DE LA FUNCIÓN DE BÚSQUEDA Los 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. Ofrece 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. Ejemplo del sitio web para móviles de Macy s. 15

16 8. GUÍA A LOS USUARIOS PARA QUE OBTENGAN MEJORES RESULTADOS DE BÚSQUEDA En 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. Si 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. Pantalla ilustrativa únicamente a título de ejemplo. 16

17 COMERCIO ELECTRÓNICO Y CONVERSIONES 17

18 COMERCIO ELECTRÓNICO Y CONVERSIONES 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. PRINCIPIOS BÁSICOS 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

19 9. PERMITE QUE LOS USUARIOS EXPLOREN ANTES DE REGISTRARSE La 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. Permite que los usuarios utilicen tu sitio sin tener que registrarse y obtener una cuenta. Pantalla ilustrativa únicamente a título de ejemplo. 19

20 10. PERMITE QUE LOS USUARIOS REALICEN COMPRAS COMO INVITADOS Los 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. Ofrece la opción de realizar una compra como invitado y fomenta los registros señalando las ventajas concretas que tiene. Ejemplo del sitio web para móviles de Macy s. 20

21 11. UTILIZA LA INFORMACIÓN EXISTENTE PARA MAYOR COMODIDAD En 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. Aprovecha 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

22 12. UTILIZA UN BOTÓN DE LLAMADA PARA LAS TAREAS COMPLEJAS Proporciona un botón de llamada en las partes del proceso de conversión que requieran la introducción de información compleja o delicada. Proporcionar un botón de llamada bien visible puede evitar que los usuarios se salgan del proceso de venta cuando necesitan aportar información compleja. 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. Ejemplo del sitio web para móviles de Progressive. 22

23 13. FACILITA QUE LA CONVERSIÓN PUEDA FINALIZARSE EN OTRO DISPOSITIVO Algunos 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. Los 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. Ejemplo del sitio web para móviles de Macy s. 23

24 CUMPLIMENTACIÓN DE FORMULARIOS 24

25 CUMPLIMENTACIÓN DE FORMULARIOS 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. PRINCIPIOS BÁSICOS 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

26 14. OPTIMIZA LA INTRODUCCIÓN DE INFORMACIÓN Los 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. Ofrece 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. Ejemplo del sitio web para móviles de Delta. 26

27 15. ELIGE EL MÉTODO PARA INTRODUCIR INFORMACIÓN MÁS SENCILLO PARA CADA TAREA Cuando 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. Planté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. Ejemplo del sitio web para móviles de Macy s. 27

28 16. PROPORCIONA UN CALENDARIO CUANDO HAYA QUE SELECCIONAR FECHAS Los 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. Mantén a los usuarios en tu sitio ofreciéndoles la selección de fechas mediante un calendario con instrucciones claras. Ejemplo del sitio web para móviles de Delta. 28

29 17. MINIMIZA LOS ERRORES DE LOS FORMULARIOS MEDIANTE ETIQUETAS Y LA VALIDACIÓN EN TIEMPO REAL Etiqueta 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. Utiliza 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

30 18. DISEÑA FORMULARIOS EFICACES Asegú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. Minimiza 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. Ejemplo del sitio web para móviles de Progressive. 30

31 USABILIDAD Y FACTORES DE FORMA 31

32 USABILIDAD Y FACTORES DE FORMA 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. PRINCIPIOS BÁSICOS 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

33 19. OPTIMIZA TODO TU SITIO PARA MÓVILES Como 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. Tu sitio es más fácil de utilizar si todas sus páginas están diseñadas para dispositivos móviles. Ejemplo del sitio web para móviles de J Crew. 33

34 20. EVITA QUE LOS USUARIOS TENGAN QUE HACER ZOOM Los 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. Los 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 AMPLIABLES Los 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. Incluye 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. 35

36 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. Indica 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. Pantalla ilustrativa únicamente a título de ejemplo. 36

37 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. Asegú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. Ejemplo del sitio web para móviles de Macy s. 37

38 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. Facilita 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. Ejemplo del sitio web para móviles de The Home Depot.

39 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». Deja siempre claro por qué necesitas la ubicación del usuario y cómo esa información va a influir en su experiencia. Pantalla ilustrativa únicamente a título de ejemplo. 39

40 ASPECTOS TÉCNICOS FUNDAMENTALES 40

41 ASPECTOS TÉCNICOS FUNDAMENTALES 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 SITIO Una 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 ÁGIL Consolida 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 DISPOSITIVOS Prueba 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ÓGICO Contempla 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ÓVIL Asegú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

42

43

44 Copyright 2014 Google. Todos los derechos reservados. Google y el logotipo de Google son marcas registradas de Google Inc.