Die Einstellungsseite wird bei Webprojekten oft ausgelassen. Es ist jedoch eine der wesentlichen Vorlagen beim Erstellen eines Dienstes.
Erst letzten Monat habe ich einen Kunden darauf hingewiesen, wie wichtig es ist, diese Seite so zu gestalten, dass der Benutzer die Anwendung an seine Bedürfnisse und Verwendung anpassen kann. Aber auch die Bedeutung für das Projektteam, die Funktionalitäten zu bestimmen, die in diese Seite aufgenommen werden sollen, und alle damit verbundenen Verwaltungsregeln.
Die Einstellungsseite kann verschiedene Arten von Funktionen gruppieren: Kontoinformationen, Benachrichtigungen, Bildformat, Offline-Modus, Speicher, Version, Trennung usw. Jeder Dienst bietet die erforderlichen Einstellungen in Abhängigkeit von den Funktionen des Tools. Und die Liste könnte lang sein!
Der Benutzer wird daher häufig auf diese Seite verwiesen. Die UX und die UI müssen ebenso wie das Tool selbst berücksichtigt werden, um den Kurs und die angezeigten Inhalte zu optimieren.
In diesem Artikel teile ich mit Ihnen 6 Tipps zum Nachdenken (oder Umdenken) über diese wichtige Seite für Ihre Benutzer.
#1 Schnellzugriff
Ich sehe es zu oft, um es nicht zuerst zu erwähnen, aber obwohl die Funktionalität vom Projektteam als zweitrangig angesehen wird, hat der Zugriff auf diese Seite Priorität.
Oft wird es ausgeblendet, weil die Teams glauben, dass es zu viel Platz in der Benutzeroberfläche einnimmt. Aber wie ich Ihnen in der Einleitung gesagt habe, sind Einstellungen für Benutzer wichtig.
Denken Sie also daran, den Zugriff auf Parameter auf der ersten Ebene Ihrer Benutzeroberfläche zu platzieren.
Bitte beachten Sie, ich sage nicht, dass es sich unbedingt auf der ersten Ebene Ihrer Hauptnavigation befinden muss.
Aber zum Beispiel hat der Benutzer in der Spotify-Anwendung Zugriff auf die Einstellungen auf der ersten Ebene der Anwendung: auf der Startseite oben rechts auf dem Bildschirm.
Spotify-App auf iOS
Wir finden diese Funktionalität oft hier, aber auch in der Navigation oder zum Beispiel in einer Profilseite.
#2 Gruppenelemente
Wie ich bereits erwähnt habe, kann die Liste der verfügbaren Parameter lang sein! Es ist daher notwendig, über eine Priorisierung der Inhalte nachzudenken.
Es empfiehlt sich, Elemente nach Kategorien zu gruppieren. Somit wird der Benutzer in der Lage sein, sich leichter zu lokalisieren und den Bildschirm zu scrollen, indem er die Informationen scannt.
Dies ist eine Praxis, die wir auch bei Spotify sehen. Jede Kategorie ist auf der ersten Ebene verfügbar, dann gibt es auf der zweiten Ebene die Unterkategorien.
Spotify-App auf iOS
Es ist auch möglich, Inhalte nach Abschnitten mit Titeln und Untertiteln innerhalb einer Seite zu priorisieren, wie z. B. bei Netflix:
Netflix-App auf iOS
Das Ziel hier ist es, die Einstiegspunkte so zu organisieren, dass der Benutzer schnell zu dem navigiert, wonach er sucht.
Die erste Ebene kann auch als Zusammenfassung verwendet werden, um auf einen Blick zu visualisieren, was im Tool verfügbar ist.
#3 Einfache Etiketten
Denken Sie daran, die verwendeten Begriffe zu vereinfachen und bei der Wortwahl prägnant zu sein.
Einige von ihnen mögen offensichtlich erscheinen, sind es aber für unerfahrene Benutzer auf dem Gebiet neuer Technologien viel weniger. Es ist daher notwendig, das lexikalische Feld an Ihre Benutzer anzupassen, um sie nicht zu verlieren.
Außerdem könnten sie Zweifel darüber haben, was sie in ihren Einstellungen aktivieren oder ändern, wenn sie den Wortlaut nicht verstehen, was ihre Erfahrung verschlechtern könnte.
Ein weiterer wichtiger Punkt ist, klar und prägnant zu sein. Es ist besser, lange Sätze auf der Ebene der Etiketten zu vermeiden, die die Benutzeroberfläche belasten und die Lesezeit verlängern könnten.
Eine gute Praxis, um die Labels zu begleiten und die Bedeutung der letzteren zu unterstützen, die wir insbesondere am Beispiel von Netflix sehen, ist beispielsweise die Verwendung der Symbole für jede Kategorie.
#4 Beschreibungen hinzufügen
Eine andere Möglichkeit, ein Etikett zu beschreiben (und zu vermeiden, dass es zu lang wird), besteht darin, eine Beschreibung hinzuzufügen, die Folgendes kann:
- beschreiben die Funktionalität,
- Warnung vor dem Rückkopplungseffekt,
- informieren den Benutzer über den aktuellen Status. Auch hier muss die Beschreibung prägnant und klar sein, mit einem Lexikon, das an Ihre Benutzer angepasst ist.
Ich nehme mein Beispiel von Spotify, wo die Anwendung eine Erläuterung der Funktionalität bietet, die für einige Benutzer verwirrend sein könnte:
Spotify-App auf iOS
#5 Aktuelle Auswahl anzeigen
Ein Plus in Ihren Schnittstellen ist die Anzeige der aktuellen Auswahl für den Benutzer neben der Bezeichnung des Parameters.
Beispielsweise hat der Benutzer bei der Sprachauswahl unbedingt einen aktiven Parameter: Wenn seine Benutzeroberfläche auf Französisch ist, kann es sinnvoll sein, sie auf der ersten Ebene neben der Schaltfläche zum Ändern der Sprache anzuzeigen.
Im Beispiel von Netflix ermöglicht die Anwendung dem Benutzer, zwischen zwei Arten von Videoqualität (Standard und Optimal) zu wählen. Hier befindet sich die „Standard“-Aktivauswahl auf der ersten Ebene und das Pfeilsymbol begleitet den Benutzer, wenn er seine Parameter ändern möchte.
Netflix-App auf iOS
#6 Verwenden Sie die richtige Komponente
Wie wir in den Beispielen in diesem Artikel sehen können, ob Spotify oder Netflix, rufen die Funktionalitäten unterschiedliche Komponenten auf (Eingänge, Toggles (auch Switches genannt), Listen mit Radio-Buttons oder Checkboxen etc.).
Je nach Aktion des Benutzers ist es interessant, die verwendete Komponente anzupassen, zum Beispiel:
- Das Textfeld: speziell für Account-Identifikationsfelder.
- Der Toggle wird oft für den sofortigen Effekt der Wahl zwischen 2 Optionen (ein/aus) verwendet.
- Die Liste, um dem Benutzer die Wahl zwischen mehreren möglichen Optionen zu geben.
Der CTA zum Abmelden oder zum Zurücksetzen einer Funktion.
Alle diese Aktionen können auch eine Bestätigung durch den Benutzer erfordern. Vergessen Sie nicht, Modale zu erstellen, um dem Benutzer die Wahl zu bestätigen, indem Sie die Auswirkungen erklären und ihm die möglichen Warnungen oder Rückmeldungen von der Validierung nach einer Aktion (Validierung, Registrierung, getätigte Zahlung usw.)
Ich teile hier einen Artikel, den ich kürzlich über die Erstellung von Modalen veröffentlicht habe. Vielleicht finden Sie interessante Ideen zur Integration für Ihre Parameterschnittstellen oder in Ihre Anwendung!
# Schlussfolgern
Die Einstellungsseite ist ein Bildschirm, der bei der Gestaltung Ihrer Benutzeroberfläche zu erwarten ist, obwohl er nicht direkt mit der Hauptfunktionalität Ihrer Anwendung oder Ihrer Website zusammenhängt.
Dies ist die Seite, die die Einstellungen der verschiedenen Funktionen und den Zugriff auf die Verbindungs- und Trennungsfunktionen zentralisiert (sofern die Authentifizierung auf Ihrem Produkt möglich ist).
Für bestimmte Anwendungen ist es auch der Ort für die Verwaltung sogenannter „Premium“-Konten und damit des gesamten finanziellen Aspekts des Dienstes.
Auf der Einstellungsseite können Sie den Benutzer auch über Empfehlungen informieren, die Ihre Benutzerdatenbank erweitern könnten!
Denken Sie auch daran, diesen Bereich zu verwenden, um Ihren Benutzern Informationen über die Updates bereitzustellen, die für die Anwendung bereitgestellt werden. Dadurch wird diese Seite interaktiv und hebt das volle Potenzial Ihres Tools hervor!
Bildquelle: https://undraw.co/illustrations
Alexa CUELLAR UX-UI-Designer @UX-Republic
