≡En resumen
- En el móvil se usa el pulgar: las acciones frecuentes deben quedar a su alcance, en la parte baja y central.
- Los objetivos táctiles necesitan tamaño y separación: 24 px CSS es el mínimo exigible en WCAG 2.2.
- El teclado correcto, el autocompletado y pocos campos son la mitad de un buen formulario móvil.
- Google ya no tiene informe de usabilidad móvil en Search Console: se revisa con Lighthouse y con usuarios.
- Como Google indexa la versión móvil, lo que falta o falla en el móvil falla también para el SEO.
01 ¿Qué es la usabilidad móvil?
No es lo mismo que tener una web adaptada. Una web puede reorganizarse perfectamente en la pantalla del móvil y seguir siendo incómoda: botones diminutos, menús que dependen del ratón, formularios que abren el teclado equivocado. Los problemas del paso de un ancho de pantalla a otro los tratamos en usabilidad en diseños responsive; aquí nos centramos en lo que es exclusivo del teléfono: el dedo, el teclado virtual y el uso en la calle.
02 La zona del pulgar: cómo se sujeta realmente el móvil
49 %
de las interacciones táctiles observadas se hacían con una sola mano
Fuente: Steven Hoober, UXmatters, 2013
36 %
sujetando el móvil con una mano y tocando con el pulgar o el índice de la otra
Fuente: Steven Hoober, UXmatters, 2013
15 %
con las dos manos, tecleando con ambos pulgares
Fuente: Steven Hoober, UXmatters, 2013
Steven Hoober observó en 2013 a personas usando el móvil en la calle, aeropuertos y transporte público: 1.333 observaciones, de las que 780 incluían tocar la pantalla. La conclusión útil para el diseño es doble: el uso a una mano es el más frecuente y la gente cambia de agarre constantemente según lo que hace. No hay que diseñar para un solo agarre, sino para que las acciones frecuentes no obliguen a cambiarlo.
De ahí sale la idea de la zona del pulgar: con el móvil en una mano, el pulgar alcanza con comodidad la parte central e inferior de la pantalla y le cuesta llegar a las esquinas superiores. En los móviles grandes actuales la diferencia es todavía mayor.
03 Tamaño de botones y enlaces táctiles
Un dedo es mucho menos preciso que un cursor. Si dos enlaces están pegados, el usuario pulsa el que no quería, vuelve atrás y lo intenta otra vez. Las WCAG 2.2, publicadas por el W3C en octubre de 2023, incluyeron por primera vez un tamaño mínimo exigible en nivel AA. El detalle técnico de cada tecnología de pantalla está en nuestro término sobre pantallas táctiles.
| Referencia | Tamaño | Carácter |
|---|---|---|
| WCAG 2.2, criterio 2.5.8 (nivel AA) | 24 × 24 px CSS | Mínimo exigible; vale un objetivo más pequeño si tiene 24 px de separación libre alrededor |
| WCAG 2.2, criterio 2.5.5 (nivel AAA) | 44 × 44 px CSS | Nivel reforzado, recomendado para acciones importantes |
| Apple, Human Interface Guidelines | 44 × 44 pt | Recomendación para apps de iOS |
| Google, Material Design y Android | 48 × 48 dp | Recomendación para apps de Android |
04 Formularios y teclados en el móvil
Escribir en una pantalla táctil es lento y propenso a errores, así que cada carácter que el usuario no tenga que teclear es usabilidad ganada. HTML ofrece tres herramientas: el tipo de campo, que muestra el teclado adecuado y valida el formato; el atributo inputmode, que solo cambia el teclado; y el atributo autocomplete, que permite al navegador rellenar datos que ya conoce.
| Dato | Código recomendado | Qué consigue |
|---|---|---|
| type="email" autocomplete="email" | Teclado con @ y autocompletado del email | |
| Teléfono | type="tel" autocomplete="tel" | Teclado numérico de teléfono |
| Código postal | inputmode="numeric" autocomplete="postal-code" | Solo números, sin las flechas de un campo numérico |
| Código de verificación SMS | inputmode="numeric" autocomplete="one-time-code" | El sistema puede sugerir el código recibido |
| Importe con decimales | inputmode="decimal" | Teclado con separador decimal |
| Búsqueda | type="search" | Tecla de acción «Buscar» en el teclado |
- ✓Etiquetas visibles encima del campo, no dentro como placeholder.
- ✓Tamaño de letra de al menos 16 px en los campos: Safari en iPhone amplía la página al enfocar un campo con letra menor.
- ✓Nada de desplegables largos para datos que se escriben rápido, como el año de nacimiento.
- ✓Mensajes de error junto al campo y visibles sin cerrar el teclado.
- ✓Botón de envío a todo el ancho y con un texto que describa la acción.
05 Gestos, orientación y uso en movimiento
Gestos con alternativa
Deslizar, pellizcar o arrastrar deben tener un botón equivalente. Lo exigen los criterios 2.5.1 (gestos de puntero) y 2.5.7 (movimientos de arrastre) de WCAG.
Sin depender del hover
En el móvil no hay «pasar el ratón por encima»: menús y tooltips deben abrirse con un toque.
Ambas orientaciones
La web o la app no debe bloquearse en vertical u horizontal salvo que sea imprescindible (criterio 1.3.4).
Contexto de la calle
Sol directo, prisa, conexión irregular: contraste alto, mensajes cortos y páginas ligeras.
Interrupciones
Una llamada o una notificación cortan la tarea: conserva lo escrito en formularios y carritos.
06 Usabilidad móvil y SEO: indexación mobile-first
Google rastrea e indexa las webs con su rastreador de smartphone. Con la indexación mobile-first completada, lo que no está o no funciona en la versión móvil prácticamente no existe para el buscador: contenido oculto tras interacciones, textos recortados o datos estructurados solo en escritorio.
-
1
2014: informe de usabilidad móvil
Google estrena en Webmaster Tools, la actual Search Console, un informe que señala errores como texto pequeño o elementos táctiles muy juntos.
-
2
2015: webs aptas para móviles
Google empieza a tener en cuenta que una web esté optimizada para móviles al ordenar los resultados en el móvil.
-
3
2023: fin del informe
El 1 de diciembre de 2023 Google retira el informe de usabilidad móvil, la prueba de optimización para móviles y su API.
-
4
2024: todo mobile-first
Google completa la migración y rastrea todas las webs con Googlebot para smartphone.
07 Usabilidad móvil en webs y en apps
| Aspecto | Web móvil | App nativa |
|---|---|---|
| Guías de referencia | WCAG y buenas prácticas web | Human Interface Guidelines (iOS) y Material Design (Android) |
| Navegación | Menú de la web y botón atrás del navegador | Barra de pestañas inferior y gestos del sistema |
| Primer uso | Sin instalación: la primera pantalla debe resolver la búsqueda | Onboarding y permisos: cada pantalla extra pierde usuarios |
| Sin conexión | Normalmente no funciona | Puede guardar datos y funcionar sin red |
| Cómo se revisa | Lighthouse, PageSpeed Insights y test con usuarios | Test con usuarios, analítica de la app y reseñas de las tiendas |
En una app, la usabilidad móvil se decide en el prototipo, antes de programar: por eso un buen diseño UX para apps prueba la navegación con usuarios reales cuando cambiarla aún es barato. Si ya estás pensando en el desarrollo de aplicaciones móviles, la zona del pulgar y el tamaño de los objetivos táctiles deben estar en los requisitos desde el primer día. Y si tu caso es una web, repasa también los principios generales de usabilidad web.
Preguntas frecuentes sobre Usabilidad móvil
Es la facilidad con la que se usa una web o una app en el teléfono, teniendo en cuenta que se maneja con el dedo, en una pantalla pequeña, a menudo con una mano y en movimiento.
Google lo retiró el 1 de diciembre de 2023, junto con la prueba de optimización para móviles y su API. Hoy se usa Lighthouse, PageSpeed Insights y la revisión en móviles reales.
Al menos 24 × 24 px CSS para cumplir WCAG 2.2 en nivel AA, y 44 × 44 px CSS para el nivel AAA. Apple recomienda 44 × 44 pt en iOS y Google 48 × 48 dp en Android.
Es el área de la pantalla que el pulgar alcanza con comodidad cuando se usa el móvil con una mano, sobre todo la parte central e inferior. Ahí conviene colocar las acciones más frecuentes.
Recorre las tareas clave en un móvil real con una mano, pasa Lighthouse o PageSpeed Insights en modo móvil y observa a varias personas usando la web en su propio teléfono.
Sí, de forma indirecta y directa: Google indexa la versión móvil de las webs, usa señales de experiencia como los Core Web Vitals y puede penalizar los intersticiales intrusivos en móvil.
No. El diseño responsive adapta la maquetación al ancho de la pantalla; la usabilidad móvil comprueba si, además, se usa con comodidad con el dedo, el teclado virtual y en movimiento.
Fuentes consultadas
Sobre el autor
Raúl Aránega Segura
CEO y especialista SEO en appyweb
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y, ahora, en las respuestas de la IA.
Ver perfil en LinkedIn ↗