Tu web puede verse ordenada en el ordenador y, aun así, frustrar en el móvil. El texto es demasiado pequeño, los botones están pegados unos a otros o la información importante queda justo debajo de un bloque enorme que estorba. Es algo muy habitual: la web es técnicamente adaptable (responsive), pero todavía no resulta agradable de usar en el teléfono.
Y es una lástima, porque en muchas webs la mayoría de las visitas llega ya desde el móvil. Si alguien tiene que hacer zoom, toca donde no quiere o se esfuerza demasiado para encontrar lo que busca, se rinde antes. En este artículo te explicamos cómo evitar la frustración de tus visitantes móviles y cuál es el diseño, el tamaño de texto y la estructura ideales para conseguirlo.
¿Por qué el móvil se vuelve molesto tan rápido?
Los visitantes móviles tienen menos espacio en pantalla, menos paciencia y, a menudo, un objetivo claro: leer rápido, tocar o ponerse en contacto. Google insiste desde hace tiempo en que las páginas aptas para móviles deben tener, entre otras cosas, un texto legible sin necesidad de hacer zoom y espacio suficiente entre los elementos táctiles.
La frustración rara vez nace de un único gran error, sino de varios pequeños obstáculos a la vez: un menú superior complicado, un muro de texto interminable, un formulario con demasiados campos o una llamada a la acción escondida al final de la página. Son justo las cosas que más pesan en el móvil.
El diseño móvil ideal de una página
Una buena página móvil es sencilla, lógica y tranquila. No todo lo que funciona en columnas en el ordenador funciona igual de bien una debajo de otra en el teléfono. Por eso conviene decidir de forma consciente el orden en móvil, en lugar de dejar que el diseño de escritorio se apile por sí solo.
La mejor estructura suele ser esta: primero un título claro, después una breve explicación, a continuación los beneficios más importantes y solo entonces los detalles adicionales. Así el visitante ve enseguida de qué trata la página y cuál es el siguiente paso. Esto encaja bien con una estructura de menú lógica para tu web.
Lo que suele funcionar bien en móvil
- un menú superior sencillo que no distraiga demasiado
- párrafos cortos de 2 a 4 frases
- espacio suficiente entre bloques
- una única llamada a la acción clara por sección
- la información importante en la parte superior de la página
Los negocios suelen querer mostrar demasiadas cosas a la vez en el móvil. Sin embargo, menos opciones y más foco normalmente se traducen en una experiencia más agradable y en mejor conversión.
¿Qué tamaño debe tener el texto en el móvil?
La legibilidad es quizá el factor más importante. Si el texto es demasiado pequeño, el usuario tiene que hacer zoom. Si las líneas están muy juntas, leer cansa. Las pautas de fuentes como Digital.gov y el W3C muestran que un texto legible y un interlineado suficiente son clave para que el móvil se use con comodidad.
En la práctica, el texto del cuerpo se lee cómodamente en móvil a partir de unos 16 píxeles. Los subtítulos pueden ser, por supuesto, más grandes, siempre que la diferencia sea clara y la estructura se vea tranquila. Deja además suficiente altura de línea para que el texto no se vea apretado.
¿No estás seguro de que tu contenido se lea bien? Entonces fíjate no solo en el tamaño de letra, sino también en el contraste, la longitud de los párrafos y los espacios. Igual que ocurre con los buenos principios de diseño, estos factores influyen mucho en lo fácil que resulta escanear tu página.
Botones, menús y formularios deben ser fáciles de usar
Lo que ves, también tienes que poder tocarlo con facilidad. Según el W3C, los objetivos táctiles deben ser lo bastante grandes: al menos 24 x 24 píxeles CSS. Muchas guías de plataformas recomiendan áreas aún mayores. En la práctica significa que no debería haber enlaces de texto pequeños pegados unos a otros ni botones diminutos en zonas saturadas.
Procura que los botones destaquen, tengan altura suficiente y cuenten con espacio a su alrededor. Esto vale también para elementos de menú, acordeones y filtros. Un menú móvil debe entenderse al instante, no parecer un acertijo.
Los formularios son una fuente conocida de frustración. Por eso, pide solo lo que de verdad necesitas. Un formulario de contacto con nombre, correo electrónico y mensaje suele funcionar mejor en móvil que una larga lista de campos adicionales. Si montas formularios de contacto en WordPress, también ayuda pensar bien en la facilidad de uso.
La velocidad y la sencillez mejoran el móvil al instante
El visitante móvil es aún más sensible a los retrasos. Las imágenes grandes, los scripts pesados y los efectos animados no solo ralentizan una página, también la hacen más cansada de usar. En el móvil, sobre todo, quieres que la web abra rápido y se sienta utilizable de inmediato.
Por eso conviene probar con regularidad la velocidad de tu web y comprobar si las decisiones visuales empeoran la experiencia sin necesidad. Lo que queda bonito en el ordenador puede estorbar por completo en el móvil.
Así evitas que tus visitantes móviles abandonen
Evitar la frustración en móvil, al final, es cuestión de claridad. Ofrece texto legible, espacio suficiente, elementos táctiles grandes y una estructura lógica. No dejes que los visitantes tengan que esforzarse para encontrar lo que buscan, adivinar o corregir lo que querían hacer.
Una pregunta habitual es por qué una web atrae visitas pero genera pocas solicitudes. La respuesta, sorprendentemente a menudo, está en el uso móvil. Si tu web se lee cómodamente y funciona con facilidad en el teléfono, aumentas al instante la probabilidad de que alguien haga clic, te contacte o se convierta en cliente. Por eso, en los planes de página web de Kantex, el uso en móvil forma parte del diseño desde el principio.
Los visitantes móviles abandonan antes cuando el texto es demasiado pequeño, cuesta tocar los botones o la información importante no se ve enseguida. En una pantalla pequeña, hasta las molestias menores llevan antes a salir de la web.
Para el texto del cuerpo, unos 16 píxeles en móvil suelen ser un buen punto de partida. Más importante aún es que el texto se pueda leer sin hacer zoom y tenga un interlineado suficiente.
Los botones y otros elementos táctiles deben ser lo bastante grandes para usarse con el dedo sin dificultad. El W3C indica al menos 24 x 24 píxeles CSS, pero en la práctica las áreas más grandes suelen resultar más cómodas.
Empieza con un título claro; después, una breve explicación, los beneficios más importantes y una llamada a la acción visible. Coloca la información crítica en la parte superior de la página y mantén la estructura sencilla y fácil de escanear.
Prueba tu web en varios teléfonos, usa tú mismo los menús y formularios y presta atención a la legibilidad, la velocidad y la facilidad para tocar. Para obtener más información, combínalo con los datos de herramientas como Google Analytics o Search Console.
