Gewusst wie: Design für Daumen in der Ära der großen Bildschirmen

Nach Jahren des Widerstands signalisiert Apple iPhone 6 Ankündigung letzte Woche offiziell der Dämmerung der Zeit riesige Bildschirme.

Und es wird zum Absturz ins Dasein in einem großen Weg. Am heutigen Montag verkündete Apple, dass sie über 4 Millionen Vorbestellungen für die Telefone der Eröffnungsabend der Vorbestellungen verkauft hatte. In nur einer Nacht verkauften sie fast die Hälfte der was sie das gesamte Eröffnungswochenende letztes Jahr für iPhone 5 s und 5 c verkauft.

So ist es uns wie die 3,5" und 4" Bildschirme von einst ihre unweigerlichen Niedergang sehr schnell starten werden. Das bedeutet, dass diejenigen von uns, die komfortablen Gebäude apps, ansprechende Websites und mobil-optimierte Web-Ansichten mit den alten wegen im Auge bekommen haben, einige lernen (mich eingeschlossen) zu tun haben.

Der Rückgang ist bereits in Bewegung. Adobes 2014 Mobile Benchmark-Bericht behauptet, dass mobiles Surfen unter Handys mit 4" Bildschirmen oder kleiner nach unten um 11 %.

Das bedeutet, dass lernen, wie man design für Daumen jetzt wichtiger denn je ist. Zum Glück hilft es, dass diese Handy-Display-Größen gehen praktisch universell zu sein. Eine oberflächliche Untersuchung der beliebtesten Android Bildschirmgrößen verweist auf eine Reihe von 5.1" und 5,7".

Apples Änderungen machen unser Leben einfacher, da kleinere Bildschirmgrößen absterben. Aber nur, wenn wir lernen, unsere Designs anzupassen.

Wenn dies nicht der Fall ist, die Zukunft wird für den Daumen ziemlich schmerzhaft sein.

Dies ist besonders wichtig für diejenigen von uns, die nur iOS apps aufgebaut haben. Alle diese Design Kompromisse, die wir dachten, wir mussten nie Sorgen sind plötzlich hier vor uns – in einer Lawine von Pre-Orders.

Entwerfen für Daumen?

Was bedeutet es für Design für Daumen? Es bedeutet, Schnittstellen, die am bequemsten zu hosten unsere Daumen natürliche, geschwungene Bogen zu bauen.

Aber das wird kompliziert. Unbewusst passen wir die Art und Weise halten wir unsere Telefone, bestimmte Steuerelemente in verschiedenen Bereichen des Bildschirms zu erreichen. Während jeden Tag Wette ich, dass Sie Ihren Griff zu dehnen, Sie am Telefon ersticken oder Winkel es in der Weise, dass schwierige Bereiche leichter zu erreichen.

Aber wir müssen irgendwo anfangen. Untersuchungen zeigen, dass die meisten von uns unsere Telefone in folgender Weise halten – mit der Unterseite des Daumens auf der unteren rechten Ecke verankert:

Diese Annahme stammt aus einer Studie, die mobile Experte Steve Hoober mit 1.333 Menschen Anfang letzten Jahres durchgeführt. Er entdeckte, dass Menschen ihre Telefone wie folgt statt:

• mit einer Hand: 49 %
• gewiegt: 36 %
• zwei übergeben: 15 %

Händigkeit Figuren waren auch lehrreich:

• rechten Daumen auf dem Bildschirm: 67 %
• Daumen der linken Hand auf dem Bildschirm: 33 %

Hober Notizen, LinkHandedness in der Bevölkerung Zahlen, sind rund 10 %. So dass die beobachtete höhere Rate der Linkshänder mit Menschen, die andere Dinge zur gleichen Zeit korreliert werden könnte – Rauchen, Fahrrad fahren, Kaffee trinken, Essen Currywurst usw..

Erstellt von Luke Wroblewski

Der Daumen-Zone

Der Daumen-Zone ist eine Heatmap Art. Es ist eine beste Schätzung für wie einfach es ist, unsere Daumen Bereiche auf einem Handy-Bildschirm tippen.

Wir verwenden Hober Forschung zum Erstellen einer Daumen-Zone-Karte darstellt, scheint der häufigste Anwendungsfall:

• Einhändige Nutzung
• rechten Daumen auf dem Bildschirm
• Daumen in der unteren rechten Ecke verankert

Hier ist der Daumen Zone Heatmap auf jedem iPhone-Display-Größe seit 2007 angewendet:

Hier ist ein direkter Vergleich von iPhone 6 und iPhone 6 Plus nebeneinander:

Sie werden feststellen, dass die "sichere" grüne Zone ungefähr gleich bleibt (mehr darüber, warum das iPhone 6 Plus unterscheidet sich in einer Sekunde). Und zwar deshalb, weil unsere Daumen nicht auf magische Weise mit der Bildschirmgröße skalieren lassen. Und das ist auch schade, weil ich Dhalsim in Street Fighter als Kind geliebt.

Aber was ändert, ist die schiere Menge an "Ow" Raum, der wird erschreckend deutlich mit dem iPhone 6 Plus.

Darüber hinaus werden Sie feststellen, wie ändert sich die Form der "Natürlichen" Zone für das iPhone 6 Plus. Und zwar deshalb, weil es eine andere Art des Griffs aufgrund seiner Größe, mit dem kleinen Finger Finger als Stabilisator erfordert. Es überraschte mich, wie unterschiedlich die Erfahrung war.

Ein Hinweis: mein Daumen erreicht man nicht vollständig auf dem Bildschirm des Telefons. Vielleicht haben Sie größere Hände als ich tun. So gelten die allgemeinen Geschäftsbedingungen bestimmt.

Würgen

Wir analysieren, wie die Daumen-Zonen ändern, wenn Sie Ihren Griff zu verlagern. Sie möglicherweise manchmal in einer Situation es einfacher ist, das Telefon mit dem Daumen Anker in der vertikalen Mitte zu erschließen.

Hier ist ein Beispiel dafür in Aktion für iPhone 6 und iPhone 6 Plus:

Hinweis wie das iPhone 6 Plus erhält tatsächlich natürliche Daumen Platz aufgrund seiner Bildschirmgröße. Zum Vergleich: das iPhone 6 läuft nur aus Immobilien.

Erreichbarkeit

Würgen möglicherweise nicht notwendig, aber mit iOS 8 "Erreichbarkeit" Funktion. (Das ist nimmt Apple die Möglichkeit, Menschen von ihrer Existenz zu erzählen). Durch Doppeltippen auf die home-Taste (nicht das gleiche wie ein "Klick" laufenden apps angezeigt), iOS schiebt den oberen Rand des Bildschirms nach unten greifen.

Hier ist eine Demo der Erreichbarkeit:

Und so sieht Erreichbarkeit mit der Daumen-Zone überlagert auf dem iPhone 6 Plus. Bemerkt nichts?

Ja, Apple Demo Bilder stellt die Daumen in genau der "Natürlichen" Zone.

Eine weitere Beobachtung auf Erreichbarkeit, wie John Gruber hervorhebt: "Erreichbarkeit auf 6 Plus bewegt Dinge weiter unten im Display, prozentual, als auf die 6 – es geht um einen typischen Daumen Länge von der Unterseite des Gerätes den oberen Rand des Displays ansteuern."

Hier ist, dass in Aktion:

Was alles?

Im großen und ganzen mobilen Bildschirmgrößen werden immer ähnlicher, und das ist eine gute Sache. Es bedeutet aber auch, dass wir nur Bildschirme im Bereich 5,5" einfach als skaliert-Up Version der ein kleineres Telefon behandeln dürfen. Griffe komplett ändern, und damit Ihre Schnittstelle müssen tun, auch.

Ich denke, Prototyping noch wichtiger werden. Also, wenn Sie auf diesen Zug sprang noch nicht, jetzt ist die Zeit. (PS: ich bin Xcode für Designer startet nächste Woche, die Designer lehrt, wie interaktive Prototypen in Xcode in weniger als einer Woche zu bauen. Es ist randvoll mit Videos und hat einen wirklich großen Pre-Launch-Rabatt läuft jetzt. Erhalten Sie auf der Liste wenn Sie überhaupt interessiert.)

Möchten Sie eine Kopie des Daumens Zone Diagramm habe, das ich für diese Screenshots gezeichnet? Sie haben Glück. Sie können sie als einzelne JPGs hier herunterladen. Hoffentlich hilft mit Ihrem aktuellen Projekt. Wenn Sie einen Wert aus ihm heraus bekommen, wäre ich Ihnen dankbar, wenn Sie es gemeinsam. Du kannst es jetzt mit einem Klick twittern.

Scott Hurff hat Web- und mobile-Produkte seit über 15 Jahren aufgebaut. Derzeit Head of Product bei Kleiner Perkins-backed Tappy, er lehrt Design Prototypen in Quartz Composer und Xcode und schreibt "Wie Produkt Designer arbeiten," ein Buch, das Ziel ist es zu verstehen, wie einige der weltweit talentiertesten Produkt-Designer ihre Arbeit tun.