{
 "id": 36975,
 "slug": "2020-06-24_gedanken-zum-design-von-touchscreen-benutzeroberflachen",
 "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": "de",
 "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": "Gedanken zum Design von Touchscreen-Benutzeroberflächen",
 "subtitle": "Intuitive, natürliche Oberflächen gestalten",
 "summary": "In den letzten Wochen habe ich an einer neuen App rund um die persönliche Gesundheit gearbeitet. Die größte Herausforderung ist eine intuitive, natürliche Oberfläche, die auf kleinen Touchscreen-Geräten gut funktioniert. Aber was macht eine Touchscreen-Oberfläche eigentlich gut? Lies weiter für ein paar bewährte Grundsätze.",
 "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": "de",
  "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": "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": "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": "Alte UI-Muster auf einem modernen Touchscreen-Gerät nachzubauen, wird dir keine Usability-Preise einbringen... (obwohl, wer vermisst Clippy nicht?)",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/37433282f380.webp",
   "description": "Elemente auf dem Bildschirm direkt zu bedienen fühlt sich natürlich an, eine Maus wäre hier überflüssig",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/1c0b65647905.webp",
   "description": "Die großen Ja/Nein-Tasten verringern die Fehlergefahr, weil sie keine pixelgenaue Zeigerführung brauchen",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/9022cd4a6bb1.webp",
   "description": "Kontextabhängige Tastaturen sind der bessere Weg zur Texteingabe. Es ergibt keinen Sinn, eine komplette QWERTZ-Tastatur zu zeigen, wenn nur eine Zahl gefragt ist.",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/9e15010dbbdf.webp",
   "description": "Die Tasten Zurück / Ausblenden / Speichern liegen in Daumennähe: Sie sind gut erreichbar und verdecken dabei nicht den Bildschirminhalt",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-5.jpg"
  },
  {
   "url": "https://willem.com/global/images/8b0744e3bebc.webp",
   "description": "Menüs, die auf Hover-Effekten beruhen, funktionieren auf Touchscreens NICHT",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-6.jpg"
  },
  {
   "url": "https://willem.com/global/images/840381231d21.webp",
   "description": "Snake '97: Macht Spaß, aber das UI-Design ist wohl schlecht",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-7.jpg"
  },
  {
   "url": "https://willem.com/global/images/c673e319ed77.webp",
   "description": "Vögel zu katapultieren macht Spaß dank der natürlichen Interaktion, die den Kern von Angry Birds bildet",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36975_images-8.jpg"
  }
 ],
 "text": "Das Erbe von Maus und Tastatur\nKlassische PC-Anwendungen wurden vor allem für ganz bestimmte Eingabegeräte entworfen und entwickelt, etwa Tastatur und Maus. Viele Konventionen, bewährte Verfahren und Designmuster stammen aus dieser Zeit. Das ist in Ordnung, solange du eine App für klassische PCs baust. Aber heutzutage nutzt deine Zielgruppe mit großer Wahrscheinlichkeit moderne Touchscreen-Geräte. Es wäre ein Fehler, die alte Oberfläche auf modernen Touchscreen-Geräten einfach nachzubauen!\nNatürliche Interaktion\nModerne Touchscreen-Geräte machen Interaktion natürlicher, weil sie Eingabegeräte wie die Maus überflüssig machen. Das Gerät ist die Eingabetaste: Elemente auf dem Bildschirm lassen sich per Touch und Gesten direkt und unmittelbar bedienen.\nEntrümpeln und Elemente richtig dimensionieren\nEin Finger ist viel größer als ein spitzer Mauszeiger. Deshalb musst du die Größe von Bedienelementen anders planen. Interaktive Elemente sollten groß genug sein, um sie zu treffen, und genug Abstand zueinander haben. Liegen die Ziele zu nah beieinander, steigt die Gefahr von Fehlern.\nTexteingaben optimieren\nJe nachdem, was du baust, brauchst du früher oder später eine Text- oder Zahleneingabe. Der einfache (und falsche) Weg ist, einfach eine komplette virtuelle Tastatur einzublenden. Statt die Vergangenheit (die physische Tastatur) virtuell nachzubauen, solltest du die Gelegenheit nutzen und neu überlegen, was du den Nutzer eigentlich fragst. Je nach diesem Eingabekontext zeigst du dann eine minimale Tastatur, die nur die passenden Tasten anbietet.\nPositionen neu denken\nKlassische PC-Anwendungen haben ihre Symbolleisten oft oben im Fenster. Auf einem Touchscreen würden die Hände dann den Rest des Bildschirms verdecken. Neben dem sichtbaren Inhalt solltest du auch die Ergonomie bedenken, also wie man das Gerät in der Hand hält. Oft genutzte Schaltflächen gehören am besten dorthin, wo die Finger ohnehin liegen.\nVergiss Hover-Effekte und Tooltips\nVergiss Bedienelemente wie Menüs, die auf Hover-Effekte angewiesen sind. Die meisten Touchscreens erkennen keine Finger, die über dem Glas schweben. Genauso wenig kannst du dich darauf verlassen, dass Tooltips die Funktionen deiner Oberfläche erklären. Eine Touchscreen-Oberfläche sollte auf den ersten Blick verständlich sein.\nSei kreativ\nDas Design für Touch-Bedienung solltest du vor allem als kreative Aufgabe sehen. Statt das Alte nachzubauen, denk lieber an all die Möglichkeiten, die das Neue bietet.\nAls ich das Snake_97_Spiel (https://snake97.com) für Touchscreen-Geräte gebaut habe, habe ich den alten Eingabemechanismus mit_viel_Liebe_zum_Detail (https://willem.com/en/2018-02-21_updating-snake-97/) nachgebildet. Ich finde das lustig, aber als UI-Design ist es wohl schlecht, weil es alle Möglichkeiten der neuen Technik ignoriert. Kein Wunder also, dass Spiele wie Angry Birds so erfolgreich sind: Sie nutzen die natürliche Interaktion per Touch voll aus.\nFazit\nEin einflussreicher Professor hat mich einmal gefragt: \"Aber macht es Spaß, Willem?\" Diese Frage solltest du dir beim Design für Touch wirklich stellen. Wenn du sie mit \"JA!\" beantworten kannst, bist du auf dem richtigen Weg.\nStatt alte Dinge nachzubauen, solltest du Interaktion neu denken. Sicher, nicht alles Alte ist schlecht. Aber es wäre ein Fehler, das Gute zu ignorieren, das moderne Technik möglich macht!",
 "word_count": 467,
 "markdown_url": "https://agents.willem.com/de/posts/2020-06-24_gedanken-zum-design-von-touchscreen-benutzeroberflachen/post.md"
}