Tipps für die Gestaltung von Touchscreen-Buttons

Maße für Touchscreen-Buttons

Im Artikel „Touch Target Sizes“ von Luke W findest du hilfreiche Richtlinien für die Gestaltung optimierter Touchscreen-Buttons. Die dort aufgeführten Button-Maße wurden aus verschiedenen Quellen zusammen getragen (die Quellen wie z.B. die iPhone Human Interface Guidelines werden im Artikel mit verlinkt).

Die Richtlinien und Tipps sind wirklich hilfreich, z.B. wenn du an einem responsive Webdesign arbeitest. Denn Buttons für die Bedienung mit dem Finger zu gestalten, ist noch einmal eine ganz andere Aufgabe, als Buttons für die Bedienung mit der Maus.

Schließlich müssen Button-Größen an die Größe einer Fingerspitze angepasst werden. Und auch die Abstände zwischen einzelnen Buttons sollten großzügig bemessen werden, so dass man sich nicht ausversehen vertippen kann. Die Angaben von Apple für einen standardmäßigen Touchscreen-Button sind z.B. 44x44pt. Das wirkt im ersten Moment sehr groß, als Trick kann man aber auch nur die anwählbare Fläche in diesem Maß wählen und den wirklich sichtbaren Button kleiner gestalten.

5 Kommentare zu “Tipps für die Gestaltung von Touchscreen-Buttons

  1. Ein interessanter Trick. Vor allem dürfte er beim Anwender das Gefühl steigern, dass er die Steuerung wirklich unter Kontrolle hat, wenn durch die unsichtbare Fläche der Klick auch dann noch erkannt wird, wenn der Finger geringfügig daneben läge. Kenne das Problem von meinem Handy nur zu gut. Die Tasten auf dem Display sind winzig und viel zu oft drücke ich zwei, drei gar viermal eh die Schaltfläche richtig getroffen wurde. Und natürlich tippe ich bei kleinen Buttons automatisch viel vorsichtiger und genauer, als bei den größeren Exemplaren.

  2. Danke für diesen sehr informativen Beitrag

  3. Find ich klasse!.. praktische Sache, da ich das Problem nur zu gut kenne das man nicht die richtigen Buttons trifft! Wobei das ja auch nicht immer so anwendbar ist, zum Beispiel bei einen Menü wo die Buttons nebeneinander liegen.

    Grüße, Vincent

  4. Toller Beitrag – die Buttons werden immer wichtiger und wichtiger, deswegen find ich es gut, das Ihr auch diese zukunftsweisenden Sachen schon jetzt einfach präsentiert und nicht erst dann, wenn es schon Standard ist. Weiter so…

  5. Großartiger Artikel.

    Dennoch, ohne jetzt Deinen Artikel zu kritisieren: Dort steht 44x44px und nicht pt :) Das ist größtentechnisch ja schon ein „kleiner“ Unterschied.

    Trotzdem: Vielen Dank für den Artikel! Werde ihn lesen und verinnerlichen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *