{
 "id": 36975,
 "slug": "2020-06-24_algumas-ideias-sobre-o-design-de-interfaces-para-ecras-tateis",
 "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": "pt",
 "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": "Algumas ideias sobre o design de interfaces para ecrãs táteis",
 "subtitle": "Criar interfaces intuitivas e naturais",
 "summary": "Nas últimas semanas tenho andado a trabalhar numa nova app de saúde pessoal. O principal desafio é encontrar uma interface intuitiva e natural, que funcione bem em dispositivos pequenos com ecrã tátil. Mas o que torna boa uma interface de ecrã tátil? Lê até ao fim para ver algumas boas práticas.",
 "topics": [
  "creating",
  "creativity",
  "design",
  "game",
  "howto",
  "iOS",
  "iPad",
  "smartphone",
  "snake"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell (pt_PT)",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "pt",
  "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": "es",
   "title": "Algunas reflexiones sobre el diseño de interfaces de usuario de pantalla táctil",
   "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": "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": "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": "Recriar padrões de UI antigos num dispositivo tátil moderno não te vai render nenhum prémio de usabilidade... (embora, quem não tem saudades do Clippy?) ",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/37433282f380.webp",
   "description": "Manipular diretamente os elementos no ecrã é natural: aqui, um rato seria redundante",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/1c0b65647905.webp",
   "description": "Os botões grandes de 'sim/não' reduzem a probabilidade de erro, pois não exigem a precisão de píxeis de um cursor de rato",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/9022cd4a6bb1.webp",
   "description": "Os teclados contextuais são uma melhor forma de permitir a introdução de texto. Não faz sentido mostrar um teclado QWERTY completo se só pedes um valor numérico.",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/9e15010dbbdf.webp",
   "description": "Os botões Voltar / Ocultar / Guardar ficam junto ao polegar: estão ao alcance e não tapam o conteúdo do ecrã",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-5.jpg"
  },
  {
   "url": "https://willem.com/global/images/8b0744e3bebc.webp",
   "description": "As estruturas de navegação que dependem do hover NÃO vão funcionar em ecrãs táteis",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-6.jpg"
  },
  {
   "url": "https://willem.com/global/images/840381231d21.webp",
   "description": "Snake '97: é divertido, mas o seu design de UI é, sem dúvida, mau",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-7.jpg"
  },
  {
   "url": "https://willem.com/global/images/c673e319ed77.webp",
   "description": "Lançar pássaros com uma catapulta é divertido graças à interação natural que é a chave do jogo Angry Birds",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-8.jpg"
  }
 ],
 "text": "A herança do rato e do teclado\nAs interfaces tradicionais das aplicações de PC foram pensadas e desenvolvidas, acima de tudo, para dispositivos de entrada distintos, como o teclado e o rato. Muitas convenções, boas práticas e padrões de design têm raízes nesse passado. Não há problema quando estás a criar uma app para PC tradicionais, mas é provável que o teu público use hoje dispositivos modernos com ecrã tátil. Seria um erro recriar a velha UI nesses dispositivos!\nInterações naturais\nOs dispositivos modernos com ecrã tátil permitem interações mais naturais, porque dispensam dispositivos de entrada como o rato. O dispositivo é o botão: os elementos no ecrã manipulam-se facilmente, de forma direta e imediata, com toque e gestos.\nMenos confusão e elementos com o tamanho certo\nUm dedo é muito maior do que um cursor de rato pontiagudo, e isso exige outra abordagem ao tamanho dos elementos da interface. Os elementos interativos devem ser grandes o suficiente para serem tocados, com margens generosas entre eles. Alvos demasiado próximos aumentam a probabilidade de erro.\nOtimiza a introdução de texto\nDependendo do que estás a construir, é provável que, a certa altura, precises de algum tipo de entrada de texto ou de números. A forma fácil (e errada) de o fazer é mostrar simplesmente um teclado virtual completo. Em vez de recriares uma recriação virtual do passado (o teclado físico), deves aproveitar a oportunidade para repensar o que estás a perguntar ao utilizador. Consoante este contexto de entrada, deves então mostrar um teclado mínimo, só com as teclas relevantes.\nRepensar as posições\nOnde as aplicações de PC tradicionais costumam ter as barras de ferramentas no topo das janelas, replicar isso num dispositivo tátil faria com que as mãos tapassem o resto do ecrã. Além de manteres o conteúdo do ecrã visível, deves também pensar na ergonomia de pegar no dispositivo. Os botões usados com mais frequência devem ficar, de preferência, perto da posição natural dos dedos.\nEsquece o hover e os tooltips\nEsquece os elementos de interface, como as estruturas de navegação, que dependem de passar o cursor por cima. A maioria dos ecrãs táteis não regista dedos a pairar sobre o vidro. Também não podes contar com tooltips para explicar as funcionalidades da tua interface. Uma UI tátil deve ser clara para o utilizador logo à primeira vista.\nSê criativo\nCriar para interação tátil é algo que deves encarar, acima de tudo, como um ato criativo. Em vez de recriares o antigo, deves pensar em todas as possibilidades que o novo oferece.\nQuando criei o jogo_Snake_97 (https://snake97.com) para dispositivos com ecrã tátil, recriei o velho mecanismo de entrada com uma atenção_minuciosa_ao_detalhe (https://willem.com/en/2018-02-21_updating-snake-97/). Acho isso divertido, mas é, sem dúvida, mau design de UI, porque ignora por completo as possibilidades da nova tecnologia. Não admira, por isso, que jogos como o Angry Birds tenham tanto sucesso: aproveitam por inteiro a interação natural que o toque permite.\nConclusão\nUm professor muito influente perguntou-me uma vez: \"Mas é divertido, Willem?\". Quando crias para toque, deves mesmo pensar nesta pergunta. Se responderes \"SIM!\", podes considerar-te no bom caminho.\nDeves reinventar a interação em vez de recriares coisas antigas. Claro que nem tudo o que é velho é mau; mas seria um erro ignorar o potencial que a tecnologia moderna nos dá!",
 "word_count": 547,
 "markdown_url": "https://agents.willem.com/pt/posts/2020-06-24_algumas-ideias-sobre-o-design-de-interfaces-para-ecras-tateis/post.md"
}