• Facebook
  • Google+
  • Twitter
  • XING
19.07.2015

4 iOS Regeln, die Sie brechen sollten

Seitensteuerung (Punkte), Die Submit-Funktion oben, und die Plus (+) und Move Icons sind 4 iOS Design-Pattern, die während dem Testen zu Usability-Problemen führten.

© tashatuvango

 

by Aurora Bedford, Raluca Budiu, Kara Pernice und Amy Schade (deutsche Übersetzung) - 19.07.2015

 

Grosse Software-Unternehmen (wie Apple, Microsoft und Google beispielsweise) erstellen Design-Richtlinien, um Nutzer und Designer zu unterstützen.

  • Einerseits haben Designer und Entwickler einen Startvorteil bei der Erstellung von Nutzeroberflächen – damit sie nicht komplett neue Elemente gestalten oder testen müssen.
  • Andererseits profitieren Nutzer von einem konsistenten Erscheinungsbild aller Apps, die in einem Betriebssystem laufen. Natürlich nur, falls sich alle Designer an diese Richtlinien halten.

Das Befolgen von Styleguides ist immer empfehlenswert. Es gibt allerdings einige Situationen, in denen das „offizielle“ Design in der Praxis nicht funktioniert. Dennoch wurden diese Regeln aus bisher unbekannten Gründen in den Styleguide mit aufgenommen.

Nachfolgend finden Sie 4 iOS Design-Pattern, die Apple in seinen Apps häufig verwendet und die von unzähligen Designern in ihren Designs aufgenommen werden. Einige sind – obwohl wir immer wieder Usability-Probleme feststellten - Teil der iOS Human-Interface-Guidelines. Ja, die Apple-Götter würden uns dafür wahrscheinlich am liebsten vom Blitz treffen lassen, aber wir raten von folgenden Design-Pattern ab, da sie sich in den Usability-Tests als unbrauchbar erwiesen haben:

1. Seitensteuerung: Punkte, die Seiten repräsentieren

2. Button zum Absenden von Formularen im oberen Bereich

3. Plus (+) Symbol

4. Move-Symbol

 

1. Seitensteuerung: Punkte, die Seiten repräsentieren

Viele iOS-Nutzer kennen die Seitensteuerung. Die iOS Seitensteuerung ist eine horizontale Linie, die aus Punkten besteht, welche geöffnete Ansichten oder Seiten repräsentieren. Die aktuell ausgewählte Seite wird durch einen ausgefüllten Punkt erkennbar gemacht, während die anderen Seiten durch transparente Punkte repräsentiert werden.

Screenshot IOS Home

Die iOS Startseite verwendet Punkte (zur Seitensteuerung), um die aktuelle Ansicht und die Anzahl der zusätzlich zur Verfügung stehenden Ansichten (d.h. zusätzliche Seiten mit Apps) darzustellen. Obwohl es sich um eines der bekanntesten und gängigsten Beispiele für die Punkte handelt, ist es auch einer der wenigen Fälle, in denen sie tolerierbar sind und relativ gut funktionieren - Nutzer wissen nämlich, dass es mehrere Bildschirme voller Symbole gibt, die man durch Wischen aufrufen kann, um die gewünschte App zu finden. (Die gesamte Nutzeroberfläche ist mit ihrer Platzierung der Symbole nicht ideal, die Seiten-Punkte sind aber nicht das Problem.)

 

Einige Apps und Websites verwenden dieses Element in ihren Nutzeroberflächen, um Nutzer darüber informieren, dass sie durch mehrere Seiten mit Inhalten wischen können, während es andere Websites in einem bestimmten Bereich der Seite verwenden, um ein Inhalts-Karussell anzuzeigen. Es ist ein beliebtes Muster im mobilen Webdesign und dem App-Design, wird allerdings auch häufig von Nutzern übersehen. In Usability-Tests sind die Punkte häufig zu unauffällig, um Nutzer klar darüber zu informieren, dass eine andere Inhaltsansicht zur Verfügung steht. Ausserdem sollten sie nie für wichtige Funktionen verwendet werden, wie die Navigation zwischen Funktionen oder als einzige Methode für den Zugriff auf Informationen.

In der iOS App „Stock Market HD Stocks & Shares“ gibt es nur eine offensichtliche Möglichkeit, zwischen den Ansichten Watchlist, Wishlist, Sold und My Holdings hin und her zu navigieren: Sie müssen die Punkte im unteren Bereich der Seite bemerken und wischen, um die zusätzlichen Funktionen zu erreichen.

 

Obwohl Designer und Entwickler selbst wählen können, welche Farbe sie ihren Punkten geben, ist es schwierig, ein kleines, unauffälliges und transparentes Designelement auf einer Seite auffällig darzustellen. Viele Designer verwenden die Punkte auf aufdringlichen Bildern, was ein unauffälliges Design noch weiter im Hintergrund verschwinden lässt. Falls Sie Punkte verwenden, sorgen Sie doch bitte dafür, dass diese von den Nutzern bemerkt werden. Farbkontraste oder ein einfarbiger Hintergrund würden auf jeden Fall helfen.

Screenshot Zapoos App

Die Zappos iOS App verwendet Punkte, um auf mehrere Inhaltsansichten in der oberen Hälfte der Seite hinzuweisen. Die Punkte sind auf dem Hintergrund mit den Schuhen in der ersten Abbildung kaum zu sehen und verschwinden in der zweiten Abbildung komplett im Hintergrundbild mit dem Liegestuhl.

 

Einige Websites und Apps nehmen sich innerhalb der bestehenden iOS-Richtlinien Freiheiten heraus und verwenden Quadrate bzw. andere Formen oder verändern die Positionierung der Punkte auf der Seite. Nutzer haben sogar dann Probleme damit, die Punkte zu finden, wenn sie die Designregeln einhalten, die in den iOS-Richtlinien beschrieben werden. Die Elemente zu ändern und somit von diesen Standards abzuweichen, macht es noch schwieriger, sie zu finden und zu verstehen. Falls Sie Punkte verwenden, zentrieren Sie sie und platzieren Sie sie direkt unter dem Element, das sie steuern.

Screenshot: Fab App

Die Fab App für Android leiht sich die iOS-inspirierten Punkte aus, platziert diese allerdings an der rechten Seite des Karussells, anstatt sie zu zentrieren.

 

Auch wenn Nutzer die Punkte bemerken, bleibt ein ausschlaggebendes Usability-Problem bestehen. Die Punkte ermöglichen nur einen sequentiellen Zugriff auf Inhalte und geben keinen Hinweis darauf, wovon die Inhalte handeln. Auch wenn die Punkte Objekte in einem Carousel oder separate Seiten in einem Kartenstapel repräsentieren, treten die gleichen Usability-Sorgen auf. Vor allem Carousels, bei denen Symbole verwendet werden, um Inhalte darzustellen, schränken die Kontrolle der UX ein. Nutzer wissen nicht, was als nächstes kommt, deshalb können sie auch nicht zu den für sie relevanten Inhalten navigieren.

Stattdessen empfehlen wir:

  • Überlegen Sie, ob Inhalte überhaupt per Wischen aufgerufen werden müssen. Es könnte besser sein, über die Navigation oder Textlinks auf Inhalte zuzugreifen.
  • Schneiden Sie Inhalte (Texte oder Bilder) ab, um visuell darauf hinzuweisen, dass Nutzer wischen können, um weitere Informationen zu erhalten.

Screenshot: iOS App Store

Der iOS App Store vermeidet die Verwendung von Punkten und setzt stattdessen abgeschnittene Elemente ein, die Nutzern zeigen, dass die Navigations-Karusselle bewegt werden können.

 

2. Buttons zum Absenden von Formularen (oder ähnlichem) im oberen Bereich

In iOS wird der Fertig-Button häufig in einer Navigationsleiste im oberen Bereich der Seite angezeigt. Manchmal wird auch der Absenden-Button (egal, ob er mit Absenden oder anders, zum Beispiel mit Bestellung aufgeben, bezeichnet wurde) im oberen Bereich des Formulars platziert. Dieses Muster wird auch in einigen Android Apps verwendet.

Screenshot: Calendar for iOS

Kalender für iOS (links): Der Button Hinzufügen, der das Formular absendet, wurde in der Navigationsleiste in der rechten oberen Ecke platziert. Todoist (eine To-Do-Listen App) für Android (rechts) leiht sich das iOS Muster aus und platziert den Absenden-Button (das Häkchen) in der oberen rechten Ecke. (Beachten Sie, dass auch die Formularfelder gegen zahlreiche unserer Richtlinien verstossen: die Bezeichnungen befinden sich im Feld und können Sie erraten, was GMT-8:00 bedeutet?)

 

Auch was iOS Apps betrifft, raten wir von diesem Muster ab - aus dem einfachen Grund, weil es dem natürlichen „oben nach unten“ Workflow der Seite widerspricht. Wenn Nutzer ein Formular ausfüllen, tun sie das normalerweise von oben nach unten. Nachdem sie das Ende des Formulars erreicht haben, erwarten sie einen Absenden-Button neben dem letzten ausgefüllten Feld. Wenn sie ihn dort nicht finden, werden Nutzer verwirrt und beginnen zu suchen, ohne zu wissen, was sie jetzt tun sollen.

Im unten stehenden Beispiel (Pinkberry und Nordstrom) muss auf die Buttons Anmelden und Bestellung aufgeben geklickt werden, nachdem der Nutzer das Formular ausgefüllt hat. Die Platzierung dieser Buttons im oberen Bereich der Seite widerspricht dem natürlichen Fluss des Ausfüllens eines Formulars: sobald der Nutzer alle Formularfelder komplettiert hat, befindet er sich am unteren Ende der Seite und kann nicht mehr fortfahren. Auch auf einem kleinen mobilen Bildschirm verschwendet das Suchen und Finden des passenden Absenden-Buttons unnötige Energie, die anderweitig genutzt werden könnte, wenn sich der Button im unteren Bereich der Seite - unter dem letzten Formularfeld - befinden würde, wie es bei den meisten Formularen auf Desktop-Computern der Fall ist.

(Die allgemein akzeptierte Design-Richtlinie für jede grafische Nutzeroberfläche - mobil oder nicht - ist die Nähe zwischen Handlung und Objekte - und nicht, den Aktionsbutton so weit wie möglich von den Daten, mit denen er in Verbindung steht, entfernt zu platzieren.) 

Screenshots: Pinkberry auf iPhone (Links) und Nordstrom auf iPhone (Rechts)

Der Arbeitsbereich in Pinkberry für iPhone (links) und Nordstrom für iPhone (rechts) ist von den Absenden-Buttons (mit dem Text Anmelden bzw. Bestellung aufgeben) getrennt, da sich diese im oberen Bereich des Bildschirms befinden.

 

Einer der Vorteile des Absenden-Buttons im Header der Seite ist, dass dieser Header in iOS Apps ein Sticky ist und Nutzer den Button daher jederzeit ganz einfach erreichen können - egal, ob sie alle Formularfelder ausgefüllt und das Ende der Liste erreicht haben oder nicht. (Bei der Kalender App wäre es angemessen, anzunehmen, dass Nutzer nicht alle Felder ausfüllen werden - bei einem Login-Formular ist das sicher nicht der Fall). Falls es Ihnen wichtig ist, dass der Button jederzeit zur Verfügung steht, überlegen Sie, stattdessen einen Absenden-Button als Sticky im unteren Bereich der Seite zu platzieren, wie es die Hotel Tonight App macht. Ja, Sie werden etwas Platz am Bildschirm opfern müssen, Sie erhalten allerdings einen besseren, nutzbareren Interaktionsfluss. 

Hotel Tonight: Der Button Bezahlen im unteren Bereich der Seite ist immer vorhanden und kann jederzeit erreicht werden. Das ermöglicht es Nutzern, mit der Seite zu interagieren und dennoch Zugriff auf den Zahlungsbutton zu haben, welcher an einer vorhersehbaren und logischen Stelle platziert wurde.

Stattdessen empfehlen wir:

Zeigen Sie den Absenden-Button (oder ein Äquivalent) unter den Formularfeldern und nicht im oberen Bereich der Seite an.

3. Plus (+) Symbol

In vielen mobilen Apps wird das Plus-Symbol verwendet, um eine Vielzahl von Funktionen zu repräsentieren. Wenn es in der oberen Navigationsleiste platziert wird, bedeutet es meistens „Hinzufügen“. Wird es allerdings in einer Tabelle oder Liste angezeigt, kann das Symbol entweder bedeuten, dass ein Objekt zu dieser Liste oder Gruppe hinzugefügt wird, oder dass das Listenobjekt geöffnet wird, um detailliertere Informationen anzuzeigen. Wenn mehrere Interpretationen existieren, wird es für Nutzer schwierig, die Bedeutung eines Symbols zu verstehen.

Screenshot: Plus Icon (in der oberen rechten Ecke)

Wenn es sich in der oberen Navigationsleiste befindet, fügt ein Plus-Symbol (in der oberen rechten Ecke) normalerweise ein neues Objekt hinzu, wie es in der MyFitnessPal App der Fall ist, in der auf diese Weise ein Freund hinzugefügt wird.

 

Die Usability des Plus-Symbols hängt stark davon ab, wo sich das Symbol auf der Nutzeroberfläche befindet. Wenn es sich an einer gängigen Stelle, wie der Navigationsleiste befindet, wird seine Bedeutung normalerweise richtig verstanden, solange das Hinzufügen neuer Objekte für die Art von Inhalten, die am Bildschirm angezeigt werden, Sinn macht. Wenn das Plus-Symbol allerdings im Hauptinhalt einer Nutzeroberfläche erscheint, kann es mehrere Bedeutungen haben, was den Nutzer verwirrt.

Eine frühere Version der App Any.do zeigte das Plus-Symbol zum Beispiel neben dem Namen bestehender To-Do-Listen an. In diesem Kontext war es unklar, ob das Plus-Symbol die Liste öffnet, um die enthaltenen Objekte zu sehen, oder ob es der entsprechenden Liste einen neuen Termin (To-Do) hinzufügt. Die aktuelle Version der App löst diese Unklarheit, indem das Plus in die Navigationsleiste verschoben wurde: es wird jetzt allerdings verwendet, um eine komplett neue To-Do-Liste hinzuzufügen.

 

Screenshot: Any.do iOS. Links die alte Version, Rechts die neue Version des Plus-Icons.

In einer früheren Version der Any.do iOS App (links) war die Bedeutung des Plus-Symbols unklar, da es entweder das Öffnen der Liste oder das Hinzufügen eines Objekts zur Liste zur Folge hatte. In der aktuellen Version (rechts) ist das Plus-Symbol Teil der oberen Navigationsleiste und wird jetzt verwendet, um eine komplett neue To-Do-Liste hinzuzufügen.

 

Das Plus-Symbol zu verwenden, um Aktionen auszulösen, ist vor allem ein Problem, wenn der Nutzer die Auswirkungen fehlinterpretiert. Da das Plus-Symbol im Internet und in mobilen Apps häufig verwendet wird, um Listen aufzuklappen- neben dem Pfeil und dem Caret-Zeichen - erwarten sich Nutzer meist nicht, dass dasselbe Plus-Symbol eine sofortige Handlung zur Folge hat. In der mobilen LinkedIn App wird ein Plus-Symbol in einem Kreis abhängig von seiner Positionierung verwendet, um einen Unternehmen zu folgen oder einer Gruppe beizutreten. In Usability-Tests waren mehrere Nutzer überrascht, dass sie versehentlich Gruppen beigetreten waren, über die sie eigentlich nur weitere Informationen einholen wollten.

Screenshot: Linked In

Die LinkedIn App verwendet dasselbe Plus-Symbol innerhalb der App für verschiedene Funktionen. Auf dem Startbildschirm, der oben zu sehen ist, kann das Plus-Zeichen angetippt werden, um einem Unternehmen zu folgen (ohne zu bestätigen, ob der Nutzer dies tatsächlich beabsichtigt). Bei der Suche in der App kann das Plus-Symbol auch verwendet werden, um schnell Gruppen beizutreten. Zum Glück fehlt das fragwürdige Symbol in den Suchresultaten für Personen oder Jobs, da dies einige interessante Konsequenzen haben könnte.

 

Vermeiden Sie es, das Plus-Symbol nach dem Zufallsprinzip in einer App zu platzieren, da es je nach Kontext innerhalb der Nutzeroberfläche auf mehrere verschiedene Arten interpretiert werden kann.

Stattdessen empfehlen wir:

  • Obwohl die Navigationsleiste ein relativ sicherer Ort ist, muss das + Symbol in anderen Bereichen eines Designs mit Hilfe von Nutzern getestet werden, um sicherzustellen, dass es richtig verstanden wird.
  • Die einzige Möglichkeit, das Problem komplett zu vermeiden, ist es, auf das Symbol zu verzichten und einen Pfeil oder ein Caret-Zeichen für erweiterbare Listen zu verwenden. Bei Buttons, die Handlungen auslösen, welche mit einem Listenobjekt in Verbindung stehen, können Sie sich für bezeichnende Texte entscheiden.

4. Move-Symbol

Screenshot: Move-Icon

Move-Symbol

Wie viele Symbole auf mobilen Geräten, verrät das Move-Symbol seine Funktion nicht auf den ersten Blick. Der erste Eindruck ist wahrscheinlich nicht, dass dieses Symbol Listenobjekte verschiebt. Die 3 horizontalen Linien des Move-Symbols sind eine kleine, symbolische Repräsentation einer Liste. Wenn dieses Symbol in einer Zeile einer Liste erscheint, müssen Nutzer lange darauf tippen und das Objekt danach an die gewünschte Stelle in der Liste ziehen. Dieses Muster hat allerdings einige Usability-Probleme zur Folge.

Wenn Objekte einer Liste verschoben werden können, erwarten sich Nutzer, direkt auf das Objekt (Wort, Symbol etc.) zu tippen und es nach Wunsch verschieben zu können. Sie erwarten sich nicht, dass sie stattdessen auf ein kleines, schwer zu entzifferndes Symbol tippen und dieses an die gewünschte Stelle ziehen müssen. Das Symbol ist wesentlich kleiner und daher schwieriger zu treffen, das das Listenobjekt selbst. Dadurch erhöhen sich die Interaktionskosten und Nutzer müssen härter arbeiten, um das richtige Symbol anzutippen und zu ziehen. Ausserdem erwarten Nutzer, dass alle Elemente in einer Zeile mit derselben Handlung verbunden wurden: anders ausgedrückt glauben sie, dass es dieselbe Auswirkung haben sollte, das Objekt und das Symbol zu ziehen.

Scrrenshot: Yahoo! Finance.

YAHOO! Finance befolgt die Empfehlung von Apples iOS, um Objekte einer Liste zu verschieben. Tippen Sie auf das aus 3 horizontalen Linien bestehende Symbol auf der rechten Seite (links) und ziehen Sie das ausgewählte Objekt an die gewünschte Stelle. Die Add zeigt den Schattentext des Objekts an, während es bewegt wird (Mitte) und die Änderung ausgeführt wird (rechts). Die Listenobjekte selbst wären wesentlich grössere Tippziele, sie können aber nicht angetippt und gezogen werden.

 

Ausserdem hat ein Objekt, das dem im iOS Styleguide empfohlenen Symbol täuschend ähnlich sieht, im mobilen Internet und an anderen Stellen eine komplett andere Bedeutung. Das „Hamburger“ Symbol sieht dem Move-Symbol zum Verwechseln ähnlich.

Screenshot: Links Move-Icon, Rechts Hamburger-Icon

Links sehen sie ein Move-Symbol,
auf der rechten Seite befindet sich das Hamburger-Menü.

 

Es kann für Nutzer befremdlich und verwirrend sein, ein und dasselbe Symbol - oder was als identisches Symbol wahrgenommen wird - zu verwenden, um verschiedene Handlungen durchzuführen. Falls das Hamburger-Menü noch beliebter wird, werden immer mehr Nutzer lernen, dass drei horizontale Linien ein Menü öffnen (auch wenn sie diese Funktion dennoch häufiger übersehen könnten, als uns lieb ist). Doch das Move-Symbol hat eine andere Funktion. Dieses Missverständnis verhindert, dass sich Nutzer an die Funktion von Symbolen erinnern, nachdem sie sie einmal verwendet haben.

Stattdessen empfehlen wir:

  • Ermöglichen Sie es, auf Objekte zu tippen und diese zu ziehen, ohne dafür auf ein bestimmtes Symbol tippen zu müssen.
  • Statt nur das Hamburger-Symbol zu verwenden, um ein Menü zu kennzeichnen, sollten Sie auch das Wort Menü anzeigen, um klarzustellen, dass ein Menü geöffnet wird. Sie können auch nur das Wort Menü verwenden.

Schlussfolgerung

Von gut erforschten Design-Pattern abzuweichen, ist normalerweise nicht empfehlenswert. Es ist besser, die wahrscheinlich beste Vorgehensweise zu befolgen, da Konsistenz und Wissen, das von anderen iOS Apps übernommen wird, die Nutzererwartungen prägen. Dennoch können Usability-Tests der Richtlinien oder Styleguides zeigen, wie gut die Richtlinie in Ihrem eigenen Design funktioniert. Bei der Beobachtung von Menschen, die diese Designs verwendeten, erlebten wir genügend wiederkehrende Probleme, um von diesen 4 Mustern abraten zu können.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen