---
title: "Algunas reflexiones sobre el diseño de interfaces de usuario de pantalla táctil"
date: 2020-06-24
language: es
topics: ["creating", "creativity", "design", "game", "howto", "iOS", "iPad", "smartphone", "snake"]
source_url: https://willem.com/es/2020-06-24_algunas-reflexiones-sobre-el-diseno-de-interfaces-de-usuario-de-pantalla-tactil/
---
# Algunas reflexiones sobre el diseño de interfaces de usuario de pantalla táctil

*Cómo crear interfaces naturales e intuitivas*

> Estas últimas semanas he estado trabajando en una nueva app de salud personal. El gran reto es dar con una interfaz intuitiva y natural que funcione bien en dispositivos pequeños con pantalla táctil. Pero, ¿qué hace buena a una interfaz táctil? Sigue leyendo para conocer algunas buenas prácticas.

## La herencia del ratón y el teclado

Las interfaces de las aplicaciones de PC tradicionales se diseñaron y desarrollaron pensando sobre todo en dispositivos de entrada concretos, como el teclado y el ratón. Muchas convenciones, buenas prácticas y patrones de diseño vienen de ese pasado. Eso está muy bien si diseñas una app para PC tradicionales, pero lo más probable es que tu público use hoy dispositivos modernos con pantalla táctil. ¡Sería un error recrear la vieja interfaz en ellos!

![Recrear viejos patrones de interfaz en un dispositivo táctil moderno no te va a dar ningún premio de usabilidad... (aunque, ¿quién no echa de menos a Clippy?)](https://willem.com/global/images/9710101b75bf.webp)

## Interacciones naturales

Los dispositivos táctiles modernos hacen que las interacciones sean más naturales, porque eliminan la necesidad de dispositivos de entrada como el ratón. El dispositivo *es* el botón de entrada: los elementos de la pantalla se manipulan con facilidad, de forma directa e inmediata, con el tacto y los gestos.

![Manipular directamente los elementos de la pantalla resulta natural: aquí un ratón sobraría](https://willem.com/global/images/37433282f380.webp)

## Despeja la pantalla y da a los elementos el tamaño adecuado

Un dedo es mucho más grande que un puntero de ratón, así que hay que plantearse de otra manera el tamaño de los elementos de la interfaz. Los elementos interactivos deben ser lo bastante grandes para tocarlos, con márgenes generosos entre ellos. Si los botones están demasiado juntos, aumenta la probabilidad de error.

![Los botones grandes de 'sí/no' reducen el riesgo de error, porque no exigen la precisión de píxel de un puntero de ratón](https://willem.com/global/images/1c0b65647905.webp)

## Optimiza la entrada de texto

Según lo que estés construyendo, es probable que en algún momento necesites alguna entrada de texto o de números. La forma fácil (y equivocada) de hacerlo es mostrar sin más un teclado virtual completo. En lugar de hacer una recreación virtual del pasado (el teclado físico), aprovecha para replantearte *qué* le estás pidiendo al usuario. Según ese *contexto de entrada*, muestra un teclado mínimo que ofrezca solo las teclas relevantes.

![Los teclados contextuales son una forma mejor de introducir texto. No tiene sentido mostrar un teclado QWERTY completo si solo pides un número](https://willem.com/global/images/9022cd4a6bb1.webp)

## Replantéate las posiciones

Las aplicaciones de PC tradicionales suelen poner las barras de herramientas en la parte superior de la ventana. Copiar eso en un dispositivo táctil haría que las manos taparan el resto de la pantalla. Además de mantener visible el contenido, conviene pensar en la ergonomía al sujetar el dispositivo. Los botones que más se usan deberían ir cerca de la posición natural de los dedos.

![Los botones Atrás / Ocultar / Guardar están junto al pulgar: quedan al alcance y alcanzarlos no tapa el contenido de la pantalla](https://willem.com/global/images/9e15010dbbdf.webp)

## Olvídate de pasar el cursor por encima y de las descripciones emergentes

Olvídate de los elementos de interfaz, como los menús de navegación, que dependen de pasar el cursor por encima. La mayoría de las pantallas táctiles no detectan los dedos que flotan sobre el cristal. Tampoco puedes confiar en las descripciones emergentes para explicar cómo funciona tu interfaz. Una interfaz táctil tiene que estar clara para el usuario a primera vista.

![Los menús de navegación que dependen de pasar el cursor por encima NO van a funcionar en pantallas táctiles](https://willem.com/global/images/8b0744e3bebc.webp)

## Sé creativo

Diseñar para la interacción táctil es algo que, por encima de todo, debes abordar de forma creativa. En lugar de recrear *lo viejo*, piensa en todas las posibilidades que ofrece *lo nuevo*.

![Snake '97: es divertido, pero su diseño de interfaz es, discutiblemente, malo](https://willem.com/global/images/840381231d21.webp)

Cuando creé el Snake_97_game (https://snake97.com) para dispositivos táctiles, recreé el viejo mecanismo de control con painstaking_attention_to_detail (https://willem.com/en/2018-02-21_updating-snake-97/). Aunque a mí me parece divertido, se puede decir que es un mal diseño de interfaz, porque ignora por completo las posibilidades de la nueva tecnología. No es de extrañar que juegos como Angry Birds tengan tanto éxito: aprovechan *al máximo* la interacción natural que hace posible el tacto.

![Lanzar pájaros con un tirachinas es divertido por la interacción natural que es la clave de Angry Birds](https://willem.com/global/images/c673e319ed77.webp)

## Conclusión

Un profesor muy influyente me preguntó una vez: "Pero, ¿es *divertido*, Willem?". Cuando diseñes para el tacto, plantéate de verdad esa pregunta. Si respondes *"¡SÍ!"*, vas por buen camino.

Hay que reimaginar la interacción en lugar de recrear cosas viejas. Claro, no todo lo viejo es malo; ¡pero sería un error ignorar todo lo bueno que permite la tecnología moderna!