{
 "id": 36975,
 "slug": "2020-06-24_algunas-reflexiones-sobre-el-diseno-de-interfaces-de-usuario-de-pantalla-tactil",
 "url": "https://agents.willem.com/es/posts/2020-06-24_algunas-reflexiones-sobre-el-diseno-de-interfaces-de-usuario-de-pantalla-tactil/",
 "source_url": "https://willem.com/es/2020-06-24_algunas-reflexiones-sobre-el-diseno-de-interfaces-de-usuario-de-pantalla-tactil/",
 "language": "es",
 "date": "2020-06-24",
 "published": "2020-06-24T00:00:00+02:00",
 "created": "2025-06-26T22:09:57.709000+02:00",
 "updated": "2026-10-20T09:19:33.106000+02:00",
 "title": "Algunas reflexiones sobre el diseño de interfaces de usuario de pantalla táctil",
 "subtitle": "Cómo crear interfaces naturales e intuitivas",
 "summary": "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.",
 "topics": [
  "creating",
  "creativity",
  "design",
  "game",
  "howto",
  "iOS",
  "iPad",
  "smartphone",
  "snake"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "es",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Some thoughts on touch screen user interface design",
   "url": "https://agents.willem.com/en/posts/2020-06-24_some-thoughts-on-touch-screen-user-interface-design/",
   "source_url": "https://willem.com/en/2020-06-24_some-thoughts-on-touch-screen-user-interface-design/"
  },
  {
   "language": "nl",
   "title": "Enkele gedachten over touchscreen user interface design",
   "url": "https://agents.willem.com/nl/posts/2020-06-24_enkele-gedachten-over-touchscreen-user-interface-design/",
   "source_url": "https://willem.com/nl/2020-06-24_enkele-gedachten-over-touchscreen-user-interface-design/"
  },
  {
   "language": "de",
   "title": "Gedanken zum Design von Touchscreen-Benutzeroberflächen",
   "url": "https://agents.willem.com/de/posts/2020-06-24_gedanken-zum-design-von-touchscreen-benutzeroberflachen/",
   "source_url": "https://willem.com/de/2020-06-24_gedanken-zum-design-von-touchscreen-benutzeroberflachen/"
  },
  {
   "language": "fr",
   "title": "Quelques réflexions sur la conception d'interfaces pour écran tactile",
   "url": "https://agents.willem.com/fr/posts/2020-06-24_quelques-reflexions-sur-la-conception-d-interfaces-pour-ecran-tactile/",
   "source_url": "https://willem.com/fr/2020-06-24_quelques-reflexions-sur-la-conception-d-interfaces-pour-ecran-tactile/"
  },
  {
   "language": "it",
   "title": "Qualche riflessione sul design delle interfacce touch screen",
   "url": "https://agents.willem.com/it/posts/2020-06-24_qualche-riflessione-sul-design-delle-interfacce-touch-screen/",
   "source_url": "https://willem.com/it/2020-06-24_qualche-riflessione-sul-design-delle-interfacce-touch-screen/"
  },
  {
   "language": "pt",
   "title": "Algumas ideias sobre o design de interfaces para ecrãs táteis",
   "url": "https://agents.willem.com/pt/posts/2020-06-24_algumas-ideias-sobre-o-design-de-interfaces-para-ecras-tateis/",
   "source_url": "https://willem.com/pt/2020-06-24_algumas-ideias-sobre-o-design-de-interfaces-para-ecras-tateis/"
  },
  {
   "language": "pap",
   "title": "Algun pensamentu tokante desèño di interface pa touch screen",
   "url": "https://agents.willem.com/pap/posts/2020-06-24_algun-pensamentu-tokante-deseno-di-interface-pa-touch-screen/",
   "source_url": "https://willem.com/pap/2020-06-24_algun-pensamentu-tokante-deseno-di-interface-pa-touch-screen/"
  },
  {
   "language": "fy",
   "title": "Inkele tinzen oer ûntwerp fan touchscreen-ynterfaces",
   "url": "https://agents.willem.com/fy/posts/2020-06-24_inkele-tinzen-oer-untwerp-fan-touchscreen-ynterfaces/",
   "source_url": "https://willem.com/fy/2020-06-24_inkele-tinzen-oer-untwerp-fan-touchscreen-ynterfaces/"
  }
 ],
 "image": "https://willem.com/global/images/cc7c63278f76.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/9710101b75bf.webp",
   "description": "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?)",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/37433282f380.webp",
   "description": "Manipular directamente los elementos de la pantalla resulta natural: aquí un ratón sobraría",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/1c0b65647905.webp",
   "description": "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",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/9022cd4a6bb1.webp",
   "description": "Los teclados contextuales son una forma mejor de introducir texto. No tiene sentido mostrar un teclado QWERTY completo si solo pides un número",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/9e15010dbbdf.webp",
   "description": "Los botones Atrás / Ocultar / Guardar están junto al pulgar: quedan al alcance y alcanzarlos no tapa el contenido de la pantalla",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-5.jpg"
  },
  {
   "url": "https://willem.com/global/images/8b0744e3bebc.webp",
   "description": "Los menús de navegación que dependen de pasar el cursor por encima NO van a funcionar en pantallas táctiles",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-6.jpg"
  },
  {
   "url": "https://willem.com/global/images/840381231d21.webp",
   "description": "Snake '97: es divertido, pero su diseño de interfaz es, discutiblemente, malo",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-7.jpg"
  },
  {
   "url": "https://willem.com/global/images/c673e319ed77.webp",
   "description": "Lanzar pájaros con un tirachinas es divertido por la interacción natural que es la clave de Angry Birds",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-8.jpg"
  }
 ],
 "text": "La herencia del ratón y el teclado\nLas 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!\nInteracciones naturales\nLos 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.\nDespeja la pantalla y da a los elementos el tamaño adecuado\nUn 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.\nOptimiza la entrada de texto\nSegú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.\nReplantéate las posiciones\nLas 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.\nOlvídate de pasar el cursor por encima y de las descripciones emergentes\nOlví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.\nSé creativo\nDiseñ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.\nCuando 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.\nConclusión\nUn 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.\nHay 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!",
 "word_count": 571,
 "markdown_url": "https://agents.willem.com/es/posts/2020-06-24_algunas-reflexiones-sobre-el-diseno-de-interfaces-de-usuario-de-pantalla-tactil/post.md"
}