Minimale sinnvolle Tastengröße auf dem iPhone

69

Ich entwerfe eine iPhone-App, die einen ziemlich großen Satz abgerundeter Rect-Tasten auf dem Bildschirm enthält. Was ist Ihrer Meinung nach angesichts der fingerbasierten Touchscreen-Benutzeroberfläche die kleinste sinnvolle Tastengröße? Ich muss so viele wie möglich in das Ansichtsfenster einfügen, ohne die Benutzerfreundlichkeit zu stark zu beeinträchtigen. Vielleicht gibt es eine von Apple empfohlene Mindestgröße? Im Moment ist es 33x33 und es sah auf einem Simulator in Ordnung aus, aber ich habe letzte Nacht mit der App auf einem echten Telefon gespielt, und es war umständlich - die Tasten fühlten sich zu klein an.

iphone  user-interface  usability  uibutton 
— Seva Alekseyev
quelle
2
Das mag snarky klingen, aber haben Sie eine andere Benutzeroberfläche in Betracht gezogen? Es gibt nur sehr wenige Situationen, in denen ein Bildschirm voller Schaltflächen jederzeit verfügbar sein muss.
— Alex Feinman
1
Dies mag sich als snarky herausstellen, aber ja, das habe ich :) Dieses Schaltflächenblatt (nicht unbedingt Schaltflächen, auf anderen Plattformen sind es anklickbare Bilder) ist das definierende Merkmal der App. Es gibt alle Arten von Optionen zum Reduzieren / Hervorheben / Filtern für die Navigation, aber die Standardansicht ist ja ziemlich groß - 10 Spalten mit einer durchschnittlichen Länge von 63. Auf PC / Web sind es drei Seiten mit vertikalem Bildlauf. Auf WinMobile sind es 9 Seiten. Auf dem iPhone - noch zu bestimmen ...
— Seva Alekseyev
Diese Frage scheint nicht zum Thema zu gehören, da sie zur UX Stackexchange-Site @ ux.stackexchange.com gehört
— kumarharsh

Antworten:

108

Apple sagt, dass der durchschnittliche Fingertipp 44x44 (von WWDC) ist. Es wird empfohlen, dass alle Tabellenzeilen mindestens diese Höhe haben. Es ist üblich, dass Symbole 32 x 32 angezeigt werden, aber eine Auffüllung haben, um den berührbaren Bereich 44 x 44 zu machen. Natürlich können Leute auf 1x1 tippen, wenn sie sehr vorsichtig sind, aber warum sollten die Leute sich mehr anstrengen, als sie brauchen, um Ihre App zu nutzen?

— coneybeare
quelle
76
Und natürlich verletzt Apple dies mit der ärgerlichen App Store-Anwendung kostenlos / installieren Schaltfläche ...
— Aaron
Vielen Dank. Das Scrollen wird ein Kill sein. Unter Windows Mobile kam ich mit 24x24-Tasten davon, wegen der ganzen Stilus-Sache ... :) Andererseits, wer weiß, wie viele Kunden ich damit verloren habe.
— Seva Alekseyev
3
Wenn Sie davon sprechen, dass der Fingertipp "44x44" ist, ist dies in Punkten richtig?
— Mark Norgren
2
Zum Zeitpunkt dieser Veröffentlichung war es die Nicht-Retina-Anzeige und in Bezug auf Pixel auf dem Gerät. Mit der Netzhaut würde sie sich nun auf 88 Pixel verdoppeln.
— Coneybeare
15
Denken Sie nicht an Pixel, wenn Sie über die Benutzeroberfläche sprechen, sondern an Punkte. Die Antwort ist immer noch 44x44 Punkte, egal ob Netzhaut oder nicht.
— Jonny
54

Neuere wissenschaftliche Forschungen haben ergeben, dass:

[A] Eine Zielgröße von 9,2 mm für diskrete Aufgaben [dh Einzelziel-Zeigeaufgaben] und Ziele von 9,6 mm für serielle Aufgaben sollten für die Verwendung mit einem Daumen auf Touchscreen-basierten Handhelds ausreichend groß sein, ohne die Leistung und Präferenz zu beeinträchtigen.

Zitiert aus einer Zielgrößenstudie für die einhändige Verwendung von Daumen auf kleinen Touchscreen-Geräten (Parhi, Karlson & Bederson 2006). Andere Quellen stimmen dieser "Regel nahe 0,4 Zoll" zu (z. B. Entwerfen gestischer Schnittstellen (Saffer 2008, S. 42)).

Angesichts der Pixeldichte des iPhones von 163 PPI (6,417 Pixel / mm) sollten Sie für jedes Ziel vorzugsweise eine Diagonale von nicht weniger als 59 Pixel wählen .

(Bitte beachten Sie, dass dies nur für die Verwendung mit einem Daumen überprüft wird .)

— Jensgramm
quelle
2
+1 für die Erwähnung der tatsächlichen Dimension und nicht der Pixel ^^ (obwohl ich denke, dass Iphones bisher vielleicht identische Bildschirme verwenden?)
— Oskar Duveborn
@Oskar Duveborn Die Pixeldichte ist der wichtige Teil. Der Rest ist nur Arithmetik :)
— Jensgramm
Fantastisch. Dies ist ein guter Bezugspunkt für die Entwicklung der Touchscreen-Benutzeroberfläche im Allgemeinen. Vielen Dank! + 1'ed
— Dev Kanchen
8
Übrigens, wenn Sie 9,6 mm als ideal betrachten (anstelle von 9,2), ergibt sich eine Mindestgröße von 61,6 px Diagonale, was wiederum einem Quadrat von 44 px entspricht - genau das, was Apple empfiehlt! Wieder einmal (kam nach 2 Jahren auf einer nicht verwandten Suche hierher!) Gute Recherche.
— Dev Kanchen
Ich dachte nur, ich würde hinzufügen, dass für einen quadratischen Knopf eine Diagonale von 59 Pixel knapp 42 x 42 Seiten hat. Dies ist im Vergleich zu Äpfeln empfehlen 44.
— Narco
5

Apple ist diesbezüglich nicht konsequent und es gibt keine strengen Regeln.

Sie empfehlen, in den UI-Richtlinien Ziele in Fingerspitzengröße anzugeben und anschließend zu sagen, dass die Taschenrechner-Schaltflächen 44 x 44 sind.

In diesem Dokument heißt es auch, dass Bilder für Symbolleisten- und Navigationssymbole 20 x 20 und für Registerkartensymbole 30 x 30 sein sollten.

Ich denke, Sie müssen einfach Ihre Anwendung testen und sicherstellen, dass es einfach ist, die Tasten zu drücken - selbst wenn Sie ziemlich große Hände haben ...

-t

— Tim
quelle
2
"Auch in diesem Dokument heißt es, dass Bilder für Symbolleisten- und Navigationssymbole 20 x 20 und für Registerkartensymbole 30 x 30 sein sollten." -Die Symbole, ja, aber die Hitbox erstreckt sich um das Symbol.
— Maciej Swic
2

Ich hätte schwören können, dass das Minimum 37 Pixel betrug, aber ich finde heute 44. In jedem Fall scheint 33 klein zu sein.

(Beachten Sie, dass Bilder kleiner sein können, da sie häufig Teil eines größeren rechteckigen Bereichs sind.)

(Wenn andere Pixel größer sind, kommen Sie möglicherweise mit weniger Pixeln auf anderen Geräten davon.)

— David Dunham
quelle
8
Ich hätte für mein Leben schwören können, dass es 42 war, da es die Antwort auf die ultimative Frage des Lebens, des Universums und alles ist.
— Der WebMacheter
2

In der Praxis war es uns beim Erstellen einer benutzerdefinierten webbasierten Geräte-Benutzeroberfläche auf frühen Touchscreens wichtig, für einen unserer Betatester zu entwerfen, der als "meine fetten Finger" bezeichnet wird. Und er hatte Recht: Es ist einfach, elegante, feine Steuerelemente zu entwerfen, die für eine erhebliche Anzahl von Benutzern fehleranfällig oder unbrauchbar sind. In diesem Projekt war die genaue Größe anwendungsabhängig, aber dieser Tester stellte fest, dass 40 x 40 verwendbar sind (doppelt so groß wie bei HD- / Retina-Displays), und alles andere erhöhte die Anzahl der Fehler und Irrtümer (und die Frustration). und als Bonus empfanden Menschen mit schlanken Fingern das Gefühl, sie könnten sich schneller bewegen und mussten nicht so präzise sein, wodurch sich das Ganze glatter anfühlte, weniger subjektive Reibung, mehr Raum zum Atmen. Der Trick besteht darin, Steuerelemente dieser Größe nicht klobig oder anmaßend erscheinen zu lassen. eine Lösung ist oben erwähnt,

— Marlin Ouverson
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.