3+1 wissenswerte Dinge über iOS- und Android-Buttons.

Eigentlich hätte Design-Expertin Melinda Albert diese Woche ein mobilbranche.de-Seminar zu App Usability geleitet. Doch wegen der Corona-Krise mussten wir umdisponieren und planen nun stattdessen mit Melinda einen Online-Kurs für die mobilbranche.de-Community. Als Ausblick darauf verrät Melinda Albert in diesem Beitrag, wie Apps mit der richtigen Button-Gestaltung und -Platzierung ein optimales Nutzererlebnis bieten.

1. Eine Frage des Buttons: iOS vs. Android

Apple und Android unterscheiden sich in einigen markanten Merkmalen, die es Umsteigern zunächst schwer macht, sich auf die Eigenheiten des jeweiligen Systems einzulassen. Da wären beispielsweise die hauseigenen Buttons, die sich in Sachen Anordnung und Optik teilweise voneinander abgrenzen.

iOS-Buttons

1a) System Button, 1b) System Button mit Hintergrund, 2) Add Contact-Button und Info-Button

Apple mag es schlicht, soweit bekannt. Auch bei den i0S-Buttons beschränkt man sich aufs Wesentliche. Da wären zum einen die als Standard geltenden, sogenannten „System Buttons“. Erkennbar am kompakten Schriftzug oder Icon. Ein farblicher Hintergrund oder eine Umrandung sind möglich, gemäß Apple bei System-Buttons aber nur dann sinnvoll, wenn es sich dabei um kein interaktives Element handelt.

Android-Buttons

Google begegnet dem Thema Buttons in Android etwas verspielter und offeriert gleich fünf hauseigene Lösungen für die unterschiedlichsten Einsatzgebiete. Nach zunehmender Wichtigkeit geordnet, sind das die folgenden Buttons:

1) Text-Button, 2) Outlined Button, 3) Contained Button, 4a) Floating Action Button, 4b) Extended Floating Action Button, 5) Toggle-Buttons

Weniger wichtige Aktionen erhalten auf dem Bildschirm eine entsprechend geringe Aufmerksamkeit. Der Text-Button kommt etwas schnöde, aber eindeutig daher. Visuell auffälliger ist da schon der sogenannte Outlined-Button, dessen Rahmen eine Aktion ein wenig hervorhebt, aber noch nicht über die Wucht eines Contained Buttons verfügt. Mit farblichem Hintergrund und Schlagschatten ist dieser Android-Button ein prominenter Werber für Aktionen aller Art.

Floating Action Buttons (FABs) sind noch etwas stärker schattiert und nageln den Blick des Nutzers durch animiertes Erscheinen auf dem Bildschirm förmlich fest. Hinter ihm liegen die Kernfunktionen einer App. Behutsam eingesetzt können FABs seit einiger Zeit auch als „Extended FABs“ mit zusätzlichem Schriftzug verwendet werden.

Die kompakten Toggle-Buttons seien der Vollständigkeitshalber ebenfalls erwähnt. Sie enthalten Aktionen, die die Bedienung einer App erleichtern und kontextbezogene Funktionen auf dem Bildschirm abbilden.

Unter der Lupe: Take Away-Buttons

1) iOS System Button, 2) Android Text Button

Die System-Buttons von iOS und die Text-Buttons von Android scheinen sich auf den ersten Blick nicht großartig voneinander zu unterscheiden. Dennoch gibt es filigrane Unterschiede in der Optik und auch dem Einsatzzweck.

So nutzt Apple seine System-Buttons vorwiegend in Navigationsbars und fällt durch den einleitenden Großbuchstaben auf. Google setzt seine Text-Buttons dagegen häufig in Dialogen und Cards ein. Der Capslock-Effekt setzt auf Großbuchstaben und ist charakteristisch für Android Text-Buttons.

2. Heiße Sache: Buttons richtig platzieren

Legt man die Leserichtung auf Webseiten zugrunde müssten oben Links eigentlich die wichtigsten Bedienelemente und Navigationspunkte abgebildet sein. Das würde auf mobile Apps adaptiert aber bedeuten, dass Kernfunktionen bei einhändiger Nutzung zu weit entfernt und schlecht zu erreichen wären. In der mobilen Welt liegen wichtige Elemente und Call to Action-Buttons also im gut sichtbaren, leicht zu erreichenden unteren Teil des Smartphone-Bildschirms. Schauen wir uns im Folgenden die Bereiche für eine bestmögliche Button-Platzierung in einer App an.

App: Headspace

Headspace macht es richtig. Der prominente System-Button „Abspielen“ ist eindeutig, unfehlbar und am unteren Bildschirmrand platziert. Das macht ihn schnell und einfach mit dem Daumen erreichbar – für Rechts- und Linkshänder gleichermaßen.

Die grüne „Hotzone“ zeigt den bestmöglichen Bereich zur Platzierung elementarer Buttons

Basierend auf der Annahme, dass ein Großteil der Smartphone-Nutzer ihr Gerät mit der rechten Hand bedienen, zeigt die Hotzone, in welchem Bereich Buttons am komfortabelsten erreicht werden können. Dieser Bereich bietet sich beispielsweise für die Platzierung primärer Buttons wie etwa dem Call to Action-Button an.

Fraglich ist im folgenden Beispiel aber, warum wichtige Buttons wie etwa das „Bearbeiten“ einer Playlist ganz bewusst außerhalb der Hotzone liegen und in der Navigationsbar (iOS) beziehungsweise App Bar (Android) untergebracht werden. Mit dem Daumen lassen sich diese Buttons selbst bei kleinerer 4,7“-Bildschirmgröße nicht sehr gut erreichen.

Der „Bearbeiten“-Button ist schwierig zu erreichen. Warum?

 

iOS-Mediathek mit elementaren Funktionen weit außerhalb der Hotzone: Erst „Bearbeiten“, dann „Fertig“

Es gibt durchaus Gründe, wichtige Buttons außerhalb der Komfortzone des Nutzers zu platzieren. Allein auf weiter Flur ist ein Übersehen solch einer Funktion praktisch ausgeschlossen. Die Funktion erhält dadurch Gewicht und vermittelt in seiner isolierten Form eine gewisse Wichtigkeit. Außerdem wird gewährleistet, dass bestimmte Aktionen nicht versehentlich vom Nutzer betätigt werden. Um eine Playlist im Beispiel oben zu modifizieren, müsste der Nutzer schon zwei Mal in Folge versehentlich Buttons außerhalb der Hotzone betätigen.

Bei einem Blick in die „Headspace“-App weiter oben fällt allerdings auf, dass auch ein durchaus wichtiger „Zurück“-Button außerhalb der Hotzone platziert wurde, obwohl ein versehentliches Betätigen nicht weiter schlimm wäre. Warum? Ganz einfach: iOS wie auch Android haben eigene Bordmittel zur Verfügung gestellt, um die „Zurück“-Navigation zu ermöglichen. Bei Apple wird das über Wischgesten, bei Google über einen Hardware-Button realisiert. Kurzum: Der Zurück-Button in „Headspace“ ist theoretisch obsolet und entsprechend „unwichtig“ auf dem Bildschirm platziert.

Beispiel für die Kombination aus mehreren Buttons und der Hotzone

Meist müssen natürlich mehrere Buttons auf dem Bildschirm platziert und sinnvoll hierarchisch angeordnet werden. Gemäß der folgenden Google-Grafik bilden die weniger wichtigen Elemente eine breite, weniger attraktiv platzierte Grundlage. Darauf aufbauend werden Kernfunktionen nur sehr sparsam und – wenn möglich – innerhalb der Hotzone eingesetzt. Die Koch-App im Anschluss zeigt auf, wie das im konkreten Fall aussehen kann.

Relevante Buttons werden spärlich, aber in der Erscheinung und Platzierung effektiv eingesetzt (Quelle: https://material.io/components/buttons#hierarchy-and-placement)

 

1) Extended Floating Action Button 2) Contained-Button 3) Text-Button

Der Bildschirm dieser App verfügt über wenige Kernfunktionen, die allesamt problemlos innerhalb der Hotzone platziert werden können. Hier wird die Wichtigkeit der einzelnen Buttons lediglich durch ihr Erscheinungsbild hierarchisch geordnet. Der Extended FAB ist priorisiert, der Text-Button tertiär.

3. Buttons und deren Größe

In Sachen Button-Größe unterscheiden sich Android und iOS marginal. Wer eine App für beide Systeme konzipiert, sollte sich den kleinen aber feinen Unterschieden durchaus bewusst sein.

Google sieht die Mindestgröße von Buttons bei 48 x 48 dp (densitiy independent pixel). Das entspricht einer ungefähren Größe von 9 x 9 Millimetern und ist unabhängig von der tatsächlichen Bildschirmgröße eines Smartphones. Apple bemisst die Mindestgröße von Buttons mit 44 x 44 pt (Points), also nur unwesentlich kleiner. Gemeinsamkeit finden die beiden allerdings in der Ansicht, dass Elemente unterhalb der Mindestmaße ein Padding (sprich Außenabstand) erhalten, das Buttons entsprechend dem fehlenden Raum auf die vorgegebene Größe erweitert. Sehr kleine Buttons würden also nicht vergrößert, sondern lägen schlichtweg nicht so eng aneinander und wären damit schwer zu betätigen.

4. Der Button als Erscheinung in Apps

Traditionsreiche Firmen, die in den 2000ern den Sprung ins Web gewagt haben, liebäugeln in nächster Instanz vielleicht auch mit einer eigenen App. Farbgebung und Corporate Identity müssen dann ein weiteres Mal adaptiert werden und auch wenn es klare Regeln im Styleguide gäbe, müssen Buttons, die es auch im Web noch nicht gab, neu konzipiert werden. Abschließend geben wir Interessenten daher ein paar Mittel an die Hand, mit denen Buttons zu einer echten Erscheinung in der Firmen-App werden können.

Merkmale prägnanter Buttons

– Button-Hintergrund
– Farbe und Größe
– Button-Rahmen mit Farbgebung und ggf. abgerundeten Ecken
– Schriftart, Schrittgröße und Farbe des Schriftzuges
– Schattenwurf
– Abstand zu anderen Elementen Buttons bzw. Text zu Hintergrund
– Stilmittel: Mix aus harmonisierenden, unterschiedlichen Buttonarten
– Animation von Buttons als Eye-Catcher

Beispiele für gelungene Button-Integration

iOS-App: Sweat

 

iOS-App: Duolingo

 

iOS-App: Hotel Tonight

Über die Autorin:

Melinda Albert, Mobile App Designerin/Konzepterin aus Berlin und Autorin des Fachbuchs Besseres Mobile-App-Design. Optimale Usability für iOS und Android, entwirft und konzipiert seit 2010 erfolgreiche mobile Applikationen für iOS und Android. Mit ihrem Know-How konzipierte und designte sie die mobilen Apps von renommierten Unternehmen wie Immobilienscout24, Telekom AG, eBay Kleinanzeigen und Sparkasse Finanzportal. Ihr Motto: “Great design will not sell an inferior product, but it will enable a great product to achieve its maximum potential” (Thomas J. Watson)

Webinar-Tipp

So wird Ihre App zur Lieblings-App der Nutzer: Online-Kurs zu App Design & Usability

Im Bereich der mobilen Apps sehen sich Projekt-Manager, Gründer und Teams mit einer immerwährenden Frage konfrontiert: Wie wird meine App besser als die der Konkurrenz und womit lassen sich Nutzer begeistern und fesseln? Im Online-Kurs „So wird Ihre App zur Lieblings-App der Nutzer“ von mobilbranche.de wird die renommierte App-Designerin Melinda Albert Antworten auf diese Fragen geben. Der Online-Kurs besteht aus 5 Live-Modulen à 60 min, die vom 8. September bis 6. Oktober 2020 jeweils dienstags von 11-12 Uhr stattfinden.
Weitere Infos hier!

Diesen Artikel teilen

Schreibe einen Kommentar

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

Mobilbranche.de Newsletter

Hiermit akzeptiere ich die Datenschutzbestimmungen.