≡En resumen
- Una pantalla táctil une visualización y entrada: tocas directamente lo que ves.
- Las capacitivas detectan la conductividad del dedo y permiten multitáctil; las resistivas detectan presión y funcionan con guantes o punzón.
- En pantallas táctiles no existe el «hover», así que ninguna información importante puede depender de pasar el ratón por encima.
- WCAG 2.2 exige objetivos de al menos 24 × 24 px CSS; Apple recomienda 44 × 44 pt y Android, 48 × 48 dp.
- Diseñar para el tacto implica pensar en el pulgar, en gestos visibles y en espacio entre controles.
01 ¿Qué es una touchscreen o pantalla táctil?
La pantalla táctil es hoy la forma más común de manejar una interfaz gráfica de usuario: está en móviles, tabletas, relojes, coches, cajeros, quioscos de autoservicio, terminales de punto de venta y paneles industriales.
| Año | Hito |
|---|---|
| 1965 | E. A. Johnson, en el Reino Unido, publica la descripción de una pantalla táctil capacitiva |
| Años setenta | G. Samuel Hurst desarrolla la tecnología resistiva, que comercializa Elographics |
| 1982 | El Input Research Group de la Universidad de Toronto crea uno de los primeros sistemas multitáctiles, basado en cámara |
| 2007 | Llegan al mercado los primeros móviles con pantalla capacitiva multitáctil sin teclado, como el iPhone y el LG Prada |
| 2023 | WCAG 2.2 añade el criterio 2.5.8 sobre tamaño mínimo de los objetivos táctiles y de puntero |
02 Tipos de pantallas táctiles
| Tecnología | Cómo detecta el toque | Ventajas | Usos típicos |
|---|---|---|---|
| Capacitiva proyectada | Mide el cambio del campo eléctrico que provoca un objeto conductor, como el dedo | Multitáctil, precisa, muy luminosa | Móviles, tabletas, portátiles, coches |
| Resistiva | Dos capas conductoras entran en contacto al presionar y se mide el voltaje | Barata; funciona con guantes o punzón | Industria, sanidad, terminales antiguos |
| Infrarroja | Una rejilla de haces de luz se interrumpe al tocar | Escala a pantallas muy grandes | Pizarras digitales, quioscos |
| Onda acústica superficial | El toque absorbe ondas de ultrasonido que recorren el vidrio | Imagen muy nítida | Quioscos y cajeros de interior |
| Óptica | Cámaras o sensores detectan el dedo sobre la superficie | Muy grandes superficies | Mesas interactivas, instalaciones |
Casi todos los móviles actuales usan pantallas capacitivas proyectadas. Las resistivas siguen teniendo sentido donde se trabaja con guantes, suciedad o punzones, como en fábricas, almacenes o ciertos equipos médicos.
03 Pantalla capacitiva vs. resistiva: diferencias
| Aspecto | Capacitiva | Resistiva |
|---|---|---|
| Qué detecta | La conductividad del dedo o de un lápiz especial | La presión de cualquier objeto |
| Multitáctil | Sí: pellizcar, girar, varios dedos | Normalmente no, o muy limitado |
| Con guantes normales | No suele funcionar (salvo guantes táctiles o modo de alta sensibilidad) | Sí |
| Sensibilidad | Responde a un roce | Hay que presionar |
| Calidad de imagen | Alta, vidrio único | Algo menor, por las capas añadidas |
| Coste y resistencia | Más cara; vidrio que puede romperse | Más barata; capa superior que se raya |
04 Gestos táctiles y lo que cambia frente al ratón
| Gesto | Qué hace el usuario | Uso habitual |
|---|---|---|
| Tocar (tap) | Un toque breve | Activar un botón o un enlace |
| Doble toque | Dos toques rápidos | Ampliar una zona, dar «me gusta» |
| Mantener pulsado | Toque largo | Menú contextual, seleccionar, reordenar |
| Deslizar (swipe) | Arrastrar el dedo rápido | Pasar fotos, archivar, volver atrás |
| Pellizcar (pinch) | Juntar o separar dos dedos | Ampliar o reducir |
| Arrastrar | Mover un elemento con el dedo | Reordenar, mover mapas |
No hay «hover»
En una pantalla táctil no existe pasar el ratón por encima: menús, tooltips o precios que solo aparecen al pasar el cursor quedan ocultos.
El dedo tapa lo que toca
Es menos preciso que un puntero y oculta lo que hay debajo, así que la respuesta visual debe verse alrededor del dedo.
Los gestos son invisibles
Un gesto que nadie te enseña no existe. Ofrece siempre una alternativa visible, como un botón.
El pulgar manda
En móvil, las acciones principales deben quedar donde llega el pulgar, normalmente en la parte inferior.
05 Tamaño mínimo de los botones táctiles: WCAG, Apple y Android
| Fuente | Tamaño | Carácter |
|---|---|---|
| WCAG 2.2, criterio 2.5.8 (nivel AA) | 24 × 24 px CSS | Mínimo exigible, con excepciones por espaciado, enlaces en línea o controles del navegador |
| WCAG 2.2, criterio 2.5.5 (nivel AAA) | 44 × 44 px CSS | Nivel reforzado |
| Apple, Human Interface Guidelines (iOS, iPadOS) | 44 × 44 pt por defecto; 28 × 28 pt como mínimo | Recomendación de plataforma |
| Android (Google) | 48 × 48 dp | Recomendación; los componentes Material lo aplican por defecto |
Cumplir estos tamaños no es solo buena práctica: la accesibilidad es obligatoria para muchas webs y apps de empresas desde 2025, como explicamos en la guía sobre qué exige la ley europea de accesibilidad.
06 Cómo diseñar y desarrollar para pantallas táctiles
- ✓Diseña primero para el móvil y amplía después, siguiendo el enfoque mobile first.
- ✓Haz que todos los botones y enlaces midan al menos 44-48 px de alto en móvil, con separación suficiente.
- ✓Coloca las acciones principales al alcance del pulgar y deja las destructivas lejos de las frecuentes.
- ✓No dependas del hover: todo lo que aparece al pasar el ratón debe poder abrirse con un toque.
- ✓Da respuesta inmediata al toque: cambio de color, animación breve o vibración.
- ✓Acompaña cada gesto con una alternativa visible y accesible con lector de pantalla.
- ✓En CSS, usa la consulta de medios «pointer: coarse» para ampliar controles cuando el dispositivo principal es táctil.
- ✓Prueba en dispositivos reales, con una mano y en movimiento, no solo en el simulador del navegador.
Una web táctil también tiene que adaptarse al tamaño de cada pantalla: lo cubre el diseño responsive, y el orden de prioridades lo marca el enfoque mobile first. Si estás creando un producto digital, el diseño UX para apps define tamaños, gestos y flujos antes de programar, y el desarrollo de aplicaciones móviles los lleva a iOS y Android respetando las guías de cada plataforma.
07 Ventajas y desventajas de las pantallas táctiles
Ventaja: interacción directa
Tocas lo que ves, sin aprender a usar un ratón. Por eso niños y personas mayores se adaptan rápido.
Ventaja: interfaz flexible
La misma pantalla se convierte en teclado, mando o formulario según la app.
Ventaja: dispositivos compactos
Sin teclado físico, la pantalla ocupa casi toda la superficie del aparato.
Desventaja: menos precisión
El dedo es grueso; los objetivos pequeños provocan errores.
Desventaja: sin respuesta física
No notas las teclas; escribir sin mirar es más difícil, salvo con vibración.
Desventaja: huellas y fatiga
Se ensucia, y en pantallas verticales grandes cansa el brazo.
Preguntas frecuentes sobre Touchscreen
Es una pantalla táctil: una pantalla que detecta el contacto del dedo o de un lápiz y lo interpreta como una orden, sin necesidad de ratón ni teclado.
La capacitiva detecta la conductividad del dedo, es muy sensible y permite multitáctil. La resistiva detecta la presión, funciona con guantes o punzón y suele admitir un solo punto de contacto.
Casi todos los móviles y tabletas actuales usan pantallas capacitivas proyectadas, que permiten gestos con varios dedos.
WCAG 2.2 exige al menos 24 × 24 píxeles CSS en el nivel AA. Apple recomienda 44 × 44 puntos en iOS y Google, 48 × 48 dp en Android.
Porque las pantallas capacitivas necesitan un material conductor, como la piel. Los guantes normales aíslan; los guantes táctiles llevan fibras conductoras en las yemas.
Es la capacidad de una pantalla de detectar varios puntos de contacto a la vez, lo que permite gestos como pellizcar para ampliar o girar con dos dedos.
Con diseño responsive, botones de tamaño suficiente y bien separados, acciones al alcance del pulgar, sin depender del hover y probando en dispositivos reales.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗