Haupt / Merkmal

Entwerfen für Berührungen

Großartige mobile Designs können sich nicht nur in winzige Bildschirme verwandeln: Sie machen Platz für Finger und Daumen und nehmen die eigensinnigen Klicks unserer ungeschickten Ziffern auf. Die Körperlichkeit von Handheld-Schnittstellen führt Designer über die Konventionen des visuellen und Informationsdesigns hinaus in das Gebiet des Industriedesigns. Bei Touchscreens steht echte Ergonomie auf dem Spiel. Es geht nicht nur darum, wie Ihre Pixel aussehen, sondern auch darum, wie sie sich in der Hand anfühlen.

01. Faustregel

Das Touchscreen-Design erfordert ein sorgfältiges Bewusstsein dafür, wo die Finger zufällig auf dem Gerät zur Ruhe kommen. Nehmen Sie zum Beispiel ein Telefon in eine Hand, und wenn Sie keinen Telefongriff mit verrückten Klauen einsetzen, tippen Sie immer mit dem Daumen weg. Für Telefone bedeutet das Entwerfen für Berührungen das Entwerfen für den Daumen.

Daumen sind wunderbar. Es sind unsere Daumen, zusammen mit unserer Zuneigung zu Promi-Klatsch, die uns von den Bestien trennen, aber sie haben eine begrenzte Reichweite und Flexibilität. Während ein Daumen es schaffen kann, den gesamten Bildschirm aller Telefone mit Ausnahme der übergroßen Telefone zu erfassen, befindet sich nur etwa ein Drittel des Bildschirms in einem wirklich mühelosen Bereich - am unteren Rand des Bildschirms auf der dem Daumen gegenüberliegenden Seite.

Platzieren Sie primäre Tap-Ziele in dieser mit dem Daumen klopfenden heißen Zone. Wenn Sie beispielsweise ein Telefon in der rechten Hand halten, fällt der Daumen auf natürliche Weise in einen Bogen in der unteren linken Ecke des Bildschirms:

Dies ist ein wichtiger Grund, warum Symbolleisten und Navigation normalerweise am unteren Rand der Telefonschnittstellen landen - das Gegenteil von dem, was wir für herkömmliche Bildschirmoberflächen gewohnt sind. Bei Konventionen für Desktop-Software werden Menüs oben auf dem Bildschirm oder im Fenster angezeigt, und Websites positionieren die primäre Navigation normalerweise oben auf den Seiten. Unsere begrenzte Daumenweite dreht diese Konvention jedoch um, und Navigations- und primäre Tippziele sinken auf den Grund.

Die Neigung des Daumens am unteren Bildschirmrand ist wichtiger als links gegen rechts. Es stellt sich heraus, dass die meisten von uns leicht zwischen der linken und der rechten Hand wechseln, wenn sie ihre Telefone benutzen. Rechtshänder bevorzugen oder wechseln häufig zu ihrer linken Hand (zum Beispiel beim Schreiben), und Linkshänder gehen ebenfalls oft mit ihrer rechten Hand. Während eine bescheidene Mehrheit der Benutzer etwas häufiger mit der rechten Hand geht als mit der linken, ist dies für Designer nicht stark genug, um sich darüber zu ärgern.

Die Faustregel für den unteren Bildschirmrand gilt jedoch unabhängig von der verwendeten Hand und gibt Ihnen Hinweise zum Organisieren der visuellen Hierarchie von Tippzielen. Häufig verwendete Tasten sollten sich zum einfachen Tippen am unteren Bildschirmrand befinden, während andere Bedienelemente aus dem Weg geräumt werden sollten. In iOS ist es beispielsweise üblich, Schaltflächen zum Bearbeiten oben rechts in einer einfachen Ansicht zu platzieren, die jedoch gerade so weit außerhalb der Reichweite liegen, dass versehentliche Änderungen weniger wahrscheinlich sind.

Das Versenken der primären Steuerelemente auf den unteren Bildschirmrand ist nicht nur eine Frage des Daumenkomforts, sondern auch der einfachen Tatsache, dass Finger den Bildschirm verdecken. Unten ist es am unwahrscheinlichsten, dass schwebende Hände Inhalte abdecken. Um den Inhalt übersichtlich zu halten, positionieren Sie ihn über den Steuerelementen Ihrer App. Dies ist ein bekanntes, vernünftiges Layout, das für die meisten physischen Geräte gilt: iPods, Taschenrechner, Mobiltelefone, Personenwaagen, wie Sie es nennen. Inhalt oben, Steuerelemente unten.

02. Ich, Roboter

Diese einfache Top / Bottom-Regel wird durch die Systemtasten von Android 'Ich muss es sein' kompliziert, die sich am unteren Rand von Android-Gadgets befinden. (Vor der Veröffentlichung von Android 3 'Honeycomb' waren dies immer physische Schaltflächen. Ab Android 4 'Ice Cream Sandwich' sind sie jetzt virtuelle Schaltflächen.) Diese systemweiten Schaltflächen gehören aus allen bisher beschriebenen Gründen zum unteren Bildschirmrand Sie führen auch einen verblüffenden Wettbewerb um app-spezifische Steuerelemente ein. Das Hinzufügen von Steuerelementen am unteren Bildschirmrand bedeutet, dass Symbolleisten übereinander gestapelt werden. Leider treten Tippfehler besonders häufig bei gestapelten Steuerelementen am unteren Bildschirmrand auf. In der stark frequentierten Zone, in der der Daumen dazu neigt, zu schweben und die Sicht zu verdecken, sind Tastenkollisionen unvermeidlich. Dieses Android-Startbildschirm-Layout lädt zum Beispiel zu Fehlern ein:

Das Stapeln von Steuerelementen in einer Touch-Oberfläche sollte immer vermieden werden, insbesondere am unteren Bildschirmrand. Leider bedeutet dies, dass Android-Apps ihre Steuerelemente oben auf dem Bildschirm haben sollten, um ein Überfüllen der Systemschaltflächen zu vermeiden. Es ist nicht ideal: Dadurch wird die Navigation außerhalb der Daumenzone platziert. Wenn Sie auf eine Schaltfläche tippen, bedeckt die Hand den gesamten Bildschirm. Aber es ist besser als die Alternative, die zu Fettfingerfehlern führt.

Für Android sollten App-Navigation und Steuerelemente nach oben schweben. Dies ist die Umkehrung der Konvention für das iPhone, bei der die Home-Taste nicht die gleiche Konkurrenz wie die Android-Tasten erzeugt. Vergleichen Sie die Foursquare-App für Android (links) und für das iPhone, um den resultierenden Unterschied festzustellen:

Das Web: eine App in einer App

Die Anti-Stacking-Richtlinie verursacht ähnliche Probleme für Websites auf Mobilgeräten. Websites und Web-Apps arbeiten natürlich innerhalb der Grenzen einer anderen App, des Browsers. Auf vielen mobilen Plattformen verfügt der Browser über eigene Schaltflächen und Steuerelemente, die ebenfalls zu UI-Konflikten für die Webnavigation führen können. Das bedeutet, dass Sie vermeiden sollten, die Navigation für Websites auf den unteren Bildschirmrand zu fixieren, da dadurch die Symbolleiste der Website über der des Browsers gestapelt würde. (Diese Richtlinie wird zweckmäßigerweise durch die Tatsache verstärkt, dass position: fixed in CSS in mobilen Browsern nicht gleichmäßig unterstützt wird, sodass es mühsam ist, eine Symbolleiste unten anzukleben.)

Im Gegensatz zu Android verschiebt die Lösung die Webnavigation nicht nach oben, sondern nach unten auf der gesamten Seite. Da Browser-Chrome in einigen mobilen Browsern bereits Immobilien frisst, sollten Sie als letztes den Inhalt noch weiter verdrängen, indem Sie den oberen Rand der Webseite mit Navigationsoptionen ersticken.

In seinem ausgezeichneten Buch Zuerst mobil , Luke Wroblewski schreibt: 'Zu viele mobile Web-Erlebnisse ... Beginnen Sie das Gespräch mit einer Liste von Navigationsoptionen anstelle von Inhalten. Zeit ist auf Mobilgeräten oft kostbar und Downloads können Geld kosten. Bringen Sie die Leute also so schnell wie möglich zu dem, wofür sie gekommen sind. '

Web-Erlebnisse sollten mit Inhalten führen und die primäre Navigation auf den unteren Bildschirmrand beschränken. Wroblewski setzt sich dafür für ein nützliches Designmuster ein, das Sie bei der Arbeit im sehen können Mobile Website von Ad Age Hier befindet sich die gesamte Navigation hinter einer Menüschaltfläche in einer Symbolleiste am oberen Bildschirmrand. Tippen Sie auf die Schaltfläche und der gesamte Bildschirm wird sofort mit Navigationsoptionen gefüllt. Das Menü wird sofort angezeigt und fühlt sich an, als wäre eine Überlagerung aufgetreten. In Wirklichkeit handelt es sich jedoch um einen Ankerlink zur Navigation am Ende der Seite.

Dieser Ansatz hat mehrere Vorteile, schreibt Wroblewski:

'Dieses Design verwendet eine minimale Anzahl von Navigationselementen (nur ein einziger Link oben), gibt den Menschen die Möglichkeit, sich zu drehen und zu erkunden, wenn sie am Ende des Inhalts angelangt sind, dupliziert nicht den Inhalt eines anderen Menüs und (am besten) von allen) benötigt nur eine einfache Ankerverbindung, um zu funktionieren. Das ist richtig: Sie müssen kein ausgefallenes JavaScript, keine Overlays oder separate Navigationsseiten verwalten - nur einen Anker, der auf den unteren Rand der Seite verweist. Das ist wie HTML 0. '

'Inhalt oben, Steuerelemente unten' scheint eine einfache Regel zu sein, aber wie Sie gesehen haben, hat dies für App-Designer unterschiedliche Ergebnisse, wenn das Betriebssystem oder der Browser diese Premium-Immobilie beanspruchen. Am Ende funktioniert es so:

Platzieren Sie auf dem iPhone die App-Steuerelemente unten auf dem Bildschirm
Platzieren Sie unter Android die App-Steuerelemente oben auf dem Bildschirm
Platzieren Sie für das Web die Navigation unten auf der Seite (im Gegensatz zum Bildschirm unten).

Diese Richtlinien gelten jedoch nur für Telefone. Was passiert bei größeren Touchscreens? Mit dem iPad ändern sich die Regeln noch einmal.

03. Tabletten, nimm deine Ecken

Die Faustregel gilt weiterhin für das iPad, außer dass die Daumenzone anders ist, weil wir sie anders halten. Der iPad-Griff hängt von Ihrer Haltung ab. Im Stehen müssen Sie mit zwei Händen wegklopfen. Wenn Sie an einem Tisch sitzen, stützen Sie ihn wahrscheinlich mit einer Hand und tippen mit der anderen. Wenn Sie auf einem Stuhl sitzen, neigen Sie dazu, ihn in Ihrem Schoß auszuruhen und mit der anderen Hand zu klopfen. Wenn Sie sich hinlegen oder zurücklehnen, legen Sie das Ding auf Ihren Bauch, stützen es mit einer Hand ab und klopfen mit der anderen.

Bei all diesen Griffen fallen die Finger an verschiedenen Stellen auf das Gerät, und jede Haltung führt dazu, dass das Gerät in unterschiedlichen Abständen gehalten wird. Wir neigen dazu, das iPad beispielsweise im Stehen am nächsten und im Liegen oder Liegen am weitesten zu halten.

So vielfältig diese iPad-Griffe auch sind, zwei Dinge gelten für alle. Erstens neigen wir dazu, iPads in der oberen Hälfte des Geräts zu halten, um die bestmögliche Hebelwirkung zu erzielen. Dies bedeutet, dass sich die Daumen im oberen Drittel des Bildschirms in der Nähe der Ecken niederlassen. Zweitens macht es der größere Bildschirm des iPad schwierig, das Ganze auf einen Blick zu erfassen, wie Sie es mit einem Telefon können. Wie beim Druckdesign konzentriert sich die visuelle Aufmerksamkeit des Publikums natürlich auf die Oberseite des Tablets, und die Informationshierarchie des Designs sollte dies widerspiegeln. Mit anderen Worten, auf dem iPad nehmen Augen und Finger natürlich die Oberseite des Geräts ein. (Manchmal ist der Boden überhaupt nicht sichtbar. In den faulsten und vielleicht häufigsten Positionen - im Liegen oder Liegen - verschwindet die untere Lünette in Decken, Pullovern und weichen Bäuchen.)

Im Gegensatz zu Telefonen sollten primäre Steuerelemente und Tasten normalerweise ganz oben in iPad-Apps stehen. Insbesondere sollten sie die oberen Ecken abstecken, in denen die Daumen normalerweise schweben, wenn Sie das iPad halten. Instapaper und Twitter für iPad zeigen eine gute Platzierung:

Platzieren Sie die Bedienelemente nicht oben in der Mitte Dies bedeutet jedoch, dass Ihre Hand den Inhalt abdeckt, wenn Sie diese Schaltflächen verwenden. Steuerelemente sollten niemals unmittelbar über den Inhalt hinausgehen, den sie beeinflussen möchten. Daher ist es ein nützliches Muster, sie in die Ecken zu schieben. Das Daily for iPad bietet beispielsweise oben in der Mitte einen Scrubber zum Durchsuchen der Seiten des Problems. Wenn Sie dies tun, deckt die Hand die Miniaturansichten ab, was die Verwendung des Dings erschwert.

04. Das Endergebnis

Der Fehltritt des Daily deckt eine Ausnahme von der Richtlinie in der oberen Ecke auf und zeigt eine Kategorie von Fällen auf, in denen die Kontrollen stattdessen nach unten gehen sollten. Wenn Steuerelemente Inhalte anzeigen oder beeinflussen, sollten sie immer unter oder neben diesem Inhalt angezeigt werden, niemals über. Die iPad-App des Sydney Morning Herald bietet beispielsweise eine neuartige Möglichkeit, alle Artikel der Tagesausgabe schnell zu scannen, indem Sie mit dem Finger über einen Index der Seitenindikatoren am unteren Bildschirmrand ziehen. Da dieses Steuerelement eine große Liste von Überschriften enthält, sollten Sie diese Steuerelemente am unteren Bildschirmrand platzieren. Wenn Sie sie oben platzieren, würde Ihre Hand die Liste abdecken, wenn Sie die Steuerelemente berühren.

Also ist es oben oder unten? Hier ist der Unterschied:

Die oberen Ecken des iPad eignen sich ideal für Navigationsschaltflächen und One-Tap-Tools für Aktionen wie Teilen, Favoriten oder Löschen.
Die Unterseite von iPad-Apps eignet sich am besten für Steuerelemente, mit denen Inhalte im obigen Bereich durchsucht oder in der Vorschau angezeigt werden.

Aus diesem Grund werden Seitenminiaturen für Bücher oder Zeitschriften am besten unten platziert. Wenn Sie eine App zum Erstellen von Karten entwerfen, die eine Palette von Orientierungspunkten zum Ziehen in die Karte enthält, sollte diese Palette nach unten verschoben werden, damit Sie mit Ihrer Karte interagieren können, ohne sie ständig mit Ihrem gesamten Arm zu bedecken.

05. Zu groß um zu scheitern

Wenn die Art und Weise, wie Sie das Gerät halten, den Ort der Steuerelemente bestimmt, entscheidet Ihre Fingergröße darüber, wie groß diese Steuerelemente sein sollen. Touch-Designer müssen Tap-Ziele zu groß machen, um zu scheitern, klobige Ziele, auf die Menschen tippen können, ohne die Aufmerksamkeit auf sich zu ziehen.

Wie groß ist groß genug, um Ziele zu erreichen? Wie groß ist eine Fingerspitze? Alle Plattformen bieten hier eine Anleitung, aber wie üblich ist Apple die Meinung mit den meisten Meinungen und besteht darauf, was ich für die beste Richtlinie für alle mobilen Plattformen halte: Stellen Sie die Tap-Ziele auf mindestens 44 Punkte oder etwa 1/4 'oder 7 mm. Für das Web funktioniert ein Minimum von 44 Pixel ebenfalls gut .

Für Designer, die an den Desktop gewöhnt sind, steuert dieses große Gefühl sowohl enorm als auch toylike, aber rollen Sie einfach mit. Riesige Tasten und gigantische Tippziele sind nicht nur leicht zu treffen, sondern auch für den gelegentlich abgelenkten mobilen Benutzer leicht zu erkennen.

In einer perfekten Welt wären alle Tap-Ziele mindestens 44x44. Wie in den meisten Fällen ist jedoch manchmal ein Kompromiss erforderlich. Sogar die Standardsteuerelemente des iPhones verfälschen von Zeit zu Zeit die 44-Pixel-Regel. In der Tastatur sind die Tasten beispielsweise 44 Punkte hoch, aber nur 30 Punkte breit. In der Querformatansicht sind die Tasten 44 Punkte breit, aber 38 Punkte hoch. Apple hat hier nicht viel Auswahl; Es ist wichtig, die vollständige QWERTZ-Tastatur in diese Ansicht aufzunehmen, aber nicht alle Tasten passen als 44 x 44-Tasten. Etwas muss geben.

Wenn der begrenzte Platz den Druck auf Tap-Ziele ausübt, funktioniert die Regel, die ich gefunden habe, am besten: Solange ein Tap-Ziel mindestens 44 Punkte hoch oder breit ist, können Sie die andere Dimension auf 30 Punkte drücken, wenn Sie wirklich müssen . Das bedeutet: Die praktische Mindestgröße für jedes Tap-Ziel beträgt 44 x 30.

06. Dräng mich nicht

Ihr treuer Autor verbrachte viele Jahre seiner fehlenden Jugend mit einer schlanken Casio-Taschenrechneruhr, die an seinem Handgelenk befestigt war, bevor er sie 1985 endgültig in den Ruhestand versetzte. Das Problem war nicht nur die winzige Kontrolle oder die dämpfende Wirkung auf meine Aussichten als Prom-King. Die Knöpfe waren zu nahe beieinander . Sie würden eine Fünf anstreben, aber eine Zwei oder eine Acht finden, wer weiß - es war mehr Glücksrad als Taschenrechner. Mit anderen Worten, die Tastengröße ist nicht der einzige bestimmende Faktor für die Genauigkeit des Abgriffs. Sie müssen auch den Abstand berücksichtigen.

Foto von Jon Rawlinson

Wenn Sie für kleine Bildschirme entwerfen, werden Sie unweigerlich versucht sein, diese Herausforderung zu bewältigen, indem Sie die Benutzeroberfläche überfüllen. »Ich werde diese nur ein wenig näher bringen. Ich werde dieser Symbolleiste nur noch eine Schaltfläche hinzufügen. ' Um einen beliebten Satz aus der Blütezeit der Taschenrechneruhr zu zitieren: 'Sag einfach nein.'

Je näher Sie die Tasten drücken, desto größer sollten diese Tasten sein. Betrachten Sie ein Paar VoIP-Anruf-Apps für iPhone, Skype und Call Global App. Beide schultern ihre Tastaturtasten eng zusammen, aber sie kompensieren dies, indem sie sie viel größer als das Minimum von 44 x 44 machen. Trotz ihrer Nähe bleiben die Tasten leicht zu drücken.

Wo sich die beiden Apps jedoch unterscheiden, finden Sie unten auf dem Bildschirm. Beide Apps stapeln Schaltflächen direkt über der Navigationsregisterleiste, was, wie oben erläutert, niemals ideal ist. Da diese Schaltflächen in Skype (links) so groß sind, wird das Problem verringert. In der Call Global App sind die Schaltflächen am oberen Rand der Registerkartenleiste jedoch zu dünn, und aufgrund ihrer Nähe sind Fehler wahrscheinlich. Obwohl sie technisch größer als das Minimum von 44 x 30 sind, verursachen der fehlende Abstand und das fehleranfällige Stapeln am unteren Bildschirmrand Probleme. Das Layout erfordert größere Schaltflächen oder großzügigere Abstände.

Das ist die wichtigste Lehre: Obwohl dies möglicherweise nicht intuitiv zu sein scheint, hängt der Erfolg von Benutzeroberflächen mit kleinen Bildschirmen von großen Elementen, klobigen Schaltflächen und luftigen Abständen ab. Die Bildschirme mögen winzig sein, aber unsere Finger (und oft auch unsere Aufmerksamkeitsspanne) sind es nicht. Design mit Blick auf fette Finger.

Josh Clark ist ein Interaktionsdesigner, der sich auf mobile Designstrategie und Benutzererfahrung spezialisiert hat. Er ist Autor von Tapworthy: Designing Great iPhone Apps. Joshs Outfit Global Moxie bietet Beratungsdienste und Schulungen an, um Medienunternehmen, Designagenturen und Kreativorganisationen bei der Erstellung von tapworthy mobilen Apps zu unterstützen.