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

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

4. 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á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.
Consejo principal
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.

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

6. 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

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.
Consejo principal
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—.
Consejo principal
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.
Consejo principal
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. Consejo principal
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
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.

11. FUNCIÓN DE BÚSQUEDA
en EL SITIO WEB
11

12. 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

13. Consejo principal
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
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.

14. Consejo principal
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
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.

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.
Consejo principal
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.
Consejo principal
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. 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

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.
Consejo principal
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.
Consejo principal
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.
Consejo principal
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.
Consejo principal
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.
Ejemplo del sitio web para móviles de Macy’s.
23
Consejo principal
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.

24. CUMPLIMENTACIÓN
DE FORMULARIOS
24

25. 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

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.
Consejo principal
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.
Consejo principal
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.
Consejo principal
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.
Consejo principal
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.
Consejo principal
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. 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

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.
Consejo principal
Tu 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.

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—.
Consejo principal
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. 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.
Consejo principal
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.

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—.
Consejo principal
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—.
Consejo principal
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.
Consejo principal
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».
Consejo principal
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. 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
ASPECTOS TÉCNICOS FUNDAMENTALES

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