Ein umfassender Leitfaden zum Benachrichtigungsdesign

Periphere Nachrichten in digitalen Produkten, die zusammen als Benachrichtigungen bezeichnet werden, sollten niemals die Benutzererfahrung beeinträchtigen. Stattdessen müssen sie zu einer Erfahrung beitragen, die den Menschen hilft, ein Ziel zu erreichen. Wenn Sie sich frühzeitig im Produktdesignprozess mit dem Benachrichtigungsdesign befassen, erzielen Sie bessere Ergebnisse.

Stellen Sie sich eine Gruppe von Architekten vor, die ein dreistöckiges Haus entwerfen und monatelang an den Entwürfen arbeiten. Es ist beeindruckend! Es ist wunderschön! Aber gerade als sie kurz davor sind, das Diagramm fertigzustellen, ruft einer von ihnen: „ Warte! Wie kommen die Menschen vom ersten in den dritten Stock? „Sie haben die Treppe vergessen!

Ebenso neigen Produktdesigner dazu, an kleine, aber entscheidende UX-Verbesserungen zuletzt zu denken. Wie bei leeren Zuständen neigen Designer dazu, das Design von Benachrichtigungen – Warnungen, Fehlermeldungen, Bestätigungen, Ankündigungen und Bestätigungen – bis zum Ende aufzuheben. Das Problem kann plötzlich ans Licht kommen, wenn ein Entwickler fragt: „ Wie gehen wir mit Fehlern um? ” Da es sich um einen nachträglichen Einfall handelt, produziert dieser anheftende Ansatz häufig schlampige „Frankendesigns“, die der UX schaden.

Um ein solches Szenario zu vermeiden, empfiehlt es sich, einen integrierten Ansatz für das Benachrichtigungsdesign zu verwenden, um die Benutzerfreundlichkeit zu verbessern . Auch wenn Designer möglicherweise nicht alle Informationen zur Hand haben, hilft das Entwerfen eines umfassenden Benachrichtigungsrahmens während des Produktdesignlebenszyklus dabei, das Produkt für unvorhergesehene Anwendungsfälle vorzubereiten.

Wenn Sie mit dem Design von Benachrichtigungen beginnen, ist das wesentliche Designprinzip zu beachten, dass sie Personen bei der Ausführung von Aufgaben unterstützen (nicht behindern) müssen . Es ist unerlässlich, Produktprototypen frühzeitig zu testen und die Anwendungsfälle zu skizzieren, in denen peripheres Messaging für die Unterstützung von Interaktionen von Wert wäre . Die beste Art, mit Benutzern zu kommunizieren, variiert jedoch und hängt von mehreren Schlüsselfaktoren ab:

• Die Art der übermittelten Informationen
• Die Dringlichkeit der Informationen – ob sie sofort eingesehen werden müssen
• Ob aufgrund der Informationen eine Benutzeraktion erforderlich ist

Abgesehen von Stil und Verhalten von Benachrichtigungen muss ihr Ton durch UX-Kopie festgelegt werden. Alle Copy-on-Benachrichtigungen müssen klar, prägnant und nützlich sein. Ein gut gestaltetes Benachrichtigungssystem ist auch auf Barrierefreiheit ausgelegt und bietet die Flexibilität, verschiedene Sprachen zu berücksichtigen.

Die für Benachrichtigungen verwendete Terminologie ist in der Regel ähnlich, variiert jedoch leicht von Team zu Team und von Projekt zu Projekt. Es obliegt dem Designer, die Terminologie des Benachrichtigungs-Frameworks zu bestimmen – was heißt was – sowie alle über die Gründe für ihre Verwendung zu synchronisieren: das Was, Wo und Wie .

Bessere Benutzerfreundlichkeit durch besseres Benachrichtigungsdesign

Benachrichtigungen erfüllen eine wesentliche Funktion in der Produktbenutzbarkeit. „ Visibility of system status “ ist die Nummer eins auf der Liste der „10 Usability Heuristics for User Interface Design“ der Nielsen Norman Group. Die Regel besagt, dass „ das System die Benutzer durch angemessenes Feedback innerhalb einer angemessenen Zeit immer über das Geschehen auf dem Laufenden halten sollte. ”

Ein Benachrichtigungssystem ist so sehr Teil der UX eines digitalen Produkts, dass sich das Produkt ohne es so anfühlen würde, als ob etwas ausgelassen wurde. Wenn es keine „Sichtbarkeit des Systemstatus“ und kein Feedback gibt, ist es so, als würde man ein Auto ohne Armaturenbrett fahren.

Das Armaturenbrett eines Autos ist voll von Anzeigen, Symbolen und Lichtern, die dazu dienen, Einblick in das Betriebssystem des Autos zu geben und eine sichere und zuverlässige Bedienbarkeit zu gewährleisten. Wenn wir fahren, halten uns eine Reihe von Anzeigen und Benachrichtigungen über Motortemperatur, Batteriezustand, Öldruck, Lichter, Bremsen, Airbags usw. auf dem Laufenden. Wenn wir abbiegen wollen, gibt es ein Blinklicht für den Blinker und ein Klickgeräusch, die uns beide Rückmeldung geben. Wir haben auch eine Kraftstofftankanzeige, die anzeigt, wenn der Kraftstofftank niedrig ist.

Genauso funktioniert es mit einem digitalen Produkt. Die Sichtbarkeit des Systemstatus und des Feedbacks ist grundlegend, wenn es um Benutzerfreundlichkeit geht, und Benutzerfreundlichkeit ist die Grundlage für großartige Benutzererlebnisse.

Einrichtung eines hilfreichen Benachrichtigungs-Frameworks

Um ein Benachrichtigungs-Framework gut zu gestalten, kann es hilfreich sein, Benachrichtigungen in Bezug auf die „Signalstärke“ zu betrachten. Welche peripheren Botschaften brauchen mehr oder weniger Aufmerksamkeit? Interaktionen, die potenziell destruktiv sein können, benötigen beispielsweise „lautere“ Benachrichtigungen, und nicht-destruktive Interaktionen benötigen „leisere“.

Das Versenden der richtigen Menge an Benachrichtigungen ist ein Balanceakt , und es zu übertreiben, ist voller Gefahren. Das Produkt kann viele negative Rückmeldungen erhalten oder die Menschen im schlimmsten Fall so weit entfremden, dass sie es aufgeben. Designer müssen daher die UX sorgfältig prüfen und nur Nachrichten mit einem klar definierten Zweck senden. Es ist auch eine gute Idee, Benutzern die Flexibilität zu geben, alle oder zumindest einige der Benachrichtigungen zu deaktivieren.

Der anfängliche Ansatz für das Benachrichtigungsdesign erfordert eine Klassifizierung auf drei Ebenen: hohe, mittlere und geringe Aufmerksamkeit , dh „Schweregrade“. Anschließend müssen Benachrichtigungstypen durch spezifische Attribute auf diesen drei Ebenen weiter definiert werden, unabhängig davon, ob es sich um Warnungen, Warnungen, Bestätigungen, Fehler, Erfolgsmeldungen oder Statusanzeigen handelt.

Nachdem die Benachrichtigungsattribute identifiziert wurden, ist es an der Zeit, eine Taxonomie der verschiedenen Benachrichtigungen zu erstellen, aus denen das Framework besteht. Die folgende Liste ist keineswegs vollständig – die Arten von Benachrichtigungen unterscheiden sich je nach Produkt, Anwendungsfällen und anderen Variablen. ( Bitte beachten Sie : Wie bereits erwähnt, verwenden verschiedene Teams eine Vielzahl von Terminologien. Beispielsweise nennen wir eine „Bestätigung“ eine Benachrichtigung, die die Zustimmung des Benutzers erfordert, um mit einer destruktiven Interaktion fortzufahren. Einige Teams verwenden „Bestätigung“ möglicherweise als Begriff für eine Erfolgsmeldung.)

Hohe Aufmerksamkeit

• Warnungen (sofortige Aufmerksamkeit erforderlich)
• Fehler (sofortiges Handeln erforderlich)
• Ausnahmen (Systemanomalien, etwas hat nicht funktioniert)
• Bestätigungen (potenziell destruktive Aktionen, die eine Benutzerbestätigung erfordern, um fortzufahren)

Mittlere Aufmerksamkeit

• Warnungen (kein sofortiges Handeln erforderlich)
• Bestätigungen (Feedback zu Benutzeraktionen)
• Erfolgsmeldungen

Geringe Aufmerksamkeit

• Informationsnachrichten (auch bekannt als passive Benachrichtigungen, etwas kann angezeigt werden)
• Abzeichen (normalerweise auf Symbolen, die etwas Neues seit der letzten Interaktion bedeuten)
• Statusanzeigen (Systemfeedback)

Entwerfen einer großartigen Benachrichtigungs-UX

Um ein Produkt mit großartiger UX zu entwerfen, müssen Designer eine Liste aller Anwendungsfälle erstellen, in denen Benachrichtigungen hilfreich sein können. Es wird empfohlen, diesen Prozess in Zusammenarbeit mit einem Entwickler durchzuführen, da dieser in den meisten Fällen unparteiisch und in der Lage ist, bei der Fehlerbehebung von Grenzfällen zu helfen, die der Designer möglicherweise nicht berücksichtigt hat.

Designer sollten sich auch alle Interaktionen während der Benutzertests notieren, bei denen Benachrichtigungen einen Wert zur Verbesserung der UX bieten können.

Sobald Sie mit der Liste ausgestattet sind, besteht der nächste Schritt darin, die Benachrichtigungen basierend auf der gewünschten Aufmerksamkeitsstufe und den gewünschten Attributen zu kategorisieren. Da Benachrichtigungen nicht aufdringlich sein sollten , muss dies wiederum sorgfältig erfolgen. Einige der Fragen, die Sie sich während dieses Prozesses stellen sollten, sind:

• Was würde die Benachrichtigung auslösen?
• Welche Art von Feedback wird kommuniziert?
• Wo würde die Benachrichtigung erscheinen und wie?
• Welche Benachrichtigung würde eine sofortige Interaktion erfordern?
• Ist die Benachrichtigung dauerhaft oder nicht dauerhaft?

Als Nächstes müssen Farbcodierung und Symbole festgelegt und in ein Designsystem (oder einen Styleguide) eingefügt werden. Beim Durchlaufen dieses Prozesses müssen Designer jede Instanz berücksichtigen, in der eine Benachrichtigung erscheinen würde, und sicherstellen, dass sie auf allen Hintergründen korrekt gerendert wird.

Auch die Platzierung der Benachrichtigungen ist entscheidend. Auf die Gefahr hin, das Offensichtliche zu sagen, sollten Benachrichtigungen oben oder unten oder in der Nähe der Ecken der Benutzeroberfläche angezeigt werden, um ein Verdecken der Benutzeroberfläche zu vermeiden. Wenn das Design reaktionsschnell ist, müssen Designer außerdem das Erscheinungsbild von Benachrichtigungen mit verschiedenen Ansichtsfenstern testen. Dies ist besonders wichtig, wenn bei responsiven mobilen Formularen möglicherweise Fehlermeldungen angezeigt werden.

Das Entwerfen eines Benachrichtigungsframeworks ist nicht einfach. Viele kleine Details, die in verschiedenen Szenarien auftreten, müssen berücksichtigt werden. Über die Zugänglichkeit und Lesbarkeit hinaus muss die zukünftige Lokalisierung berücksichtigt werden. Ein Benachrichtigungssystem, das auf Englisch perfekt aussieht, kann auf einer deutschen oder japanischen Plattform völlig auseinanderfallen.

Weitere Fragen zur Definition des Verhaltens von Benachrichtigungen :

• Wenn ein Alarm oder eine Warnung dauerhaft bleiben soll, wie stellen Designer dann sicher, dass die Benutzer immer noch darauf zugreifen können, nachdem sie vom Anfangsbildschirm wegnavigiert sind?
• Müsste ein Warnsymbol mit einem Abzeichen integriert werden, wo ein Archiv von Benachrichtigungen angezeigt werden könnte?
• Wenn eine Benachrichtigung nicht dauerhaft ist, wie lange dauert es, bis sie verschwindet, und sollte es eine Option geben, sie zu schließen, bevor sie ausgeblendet wird?

Bei mobilen Apps müssen nicht nur In-App-Benachrichtigungen, sondern auch Push-Benachrichtigungen (Systemebene, außerhalb der App) sorgfältig gestaltet werden. Es handelt sich meistens um Unterbrechungen, daher ist es wichtig, sich die Kopie der Benachrichtigung anzusehen und zu wissen, wie und wann Sie um Erlaubnis bitten müssen, sie zu senden. Wenn sie zu oft verwendet werden, können sie Menschen davon abhalten, die App zu verwenden. Zu viele unnötige Benachrichtigungen können Benutzer frustrieren, die dann möglicherweise Benachrichtigungen stumm schalten oder die App ganz nicht mehr verwenden.

Designer sollten auch umsetzbare Benachrichtigungen in Betracht ziehen, die es den Menschen ermöglichen, produktiv zu sein, ohne eine App zu öffnen. Benutzer in die Lage zu versetzen, kleine Aufgaben zu erledigen, ohne in eine App zu gehen, kann ein leistungsstarkes Werkzeug zur Verbesserung der UX sein.

Für mobile Push-Benachrichtigungen besteht die bewährte UX-Methode darin, Benachrichtigungen jeglicher Art zu verzögern (Anfrage nach dem Zugriff auf den Standort einer Person, Senden von Push-Benachrichtigungen usw.), bis die Benutzer die Gelegenheit hatten, die App ein wenig zu erkunden.

Best Practices für Benachrichtigungen für großartige UX

Die Beachtung der folgenden Best Practices stellt sicher, dass die Menschen Benachrichtigungen als Mehrwert und nicht als Unterbrechungen wahrnehmen, wodurch die Benutzererfahrung verbessert wird. Bevor Sie ein Benachrichtigungssystem entwerfen und in ein Designsystem einfügen, sollten Sie diese grundlegenden Best Practices berücksichtigen:

• Klassifizieren Sie Benachrichtigungen nach den drei zuvor besprochenen Aufmerksamkeitsstufen. Definieren Sie dann die Taxonomie der verschiedenen Formen von Benachrichtigungen innerhalb dieser drei Ebenen.
• Geben Sie beim Erstellen eines Styleguides für das Benachrichtigungssystem die maximale Zeichenlänge für die Benachrichtigung in allen Sprachen an, in denen sie veröffentlicht wird.
• Achten Sie besonders auf Anpassungsfähigkeit und Flexibilität, um unterschiedliche Inhaltstypen und Textlängen zu berücksichtigen.
• Schaffen Sie ein einheitliches Farbschema für die drei Aufmerksamkeitsebenen sowie eine einheitliche Ikonografie.
• Erstellen Sie prägnante, leicht lesbare Benachrichtigungen mit nützlichen Informationen.
• Überlegen Sie genau, was Sie senden und wann Sie es senden. Verzögern Sie auf Mobilgeräten das Senden von Benachrichtigungen über frisch heruntergeladene Apps, um Personen nicht zu verärgern. Untersuchen Sie den Kontext und die Anwendungsfälle genau.
• Zeigen Sie lieber weniger Benachrichtigungen an, unabhängig davon, ob es sich um Warnungen oder Warnungen oder andere Statusaktualisierungen mit hoher bis mittlerer Aufmerksamkeit handelt. Fügen Sie sie stattdessen in eine Liste ein, auf die Personen zugreifen können, wenn sie sie sehen möchten (gekennzeichnet durch ein Symbol in der Benutzeroberfläche).
• Betrachten Sie ein System mit der Option, Benachrichtigungen als „nicht mehr anzeigen“ zu markieren.
• Nicht dauerhafte Bestätigungen wie „Snackriegel“ sollten nach mindestens vier Sekunden und höchstens acht Sekunden vom Bildschirm verschwinden, mit der Option, sie früher zu schließen und gegebenenfalls „rückgängig“ zu machen.
• Berücksichtigen Sie für Benachrichtigungen mit hoher Aufmerksamkeit auf Mobilgeräten nach Möglichkeit akustisches und haptisches Feedback.
• Stellen Sie für die Lesbarkeit der Benachrichtigungen und zwischen dem Hintergrund, auf dem die Benachrichtigungen angezeigt werden, einen angemessenen Kontrast sicher. Beachten Sie, dass sich bei flüssigen, responsiven Designs der Hintergrund unter der Benachrichtigung verschieben kann.

Best Practices für Fehlermeldungen

• Fehlermeldungen sollten einfach und direkt sein, vorzugsweise umsetzbar, in einer Sprache geschrieben, die leicht zu lesen und schnell zu verstehen ist.
• Vermeiden Sie obskure Codes und Abkürzungen wie „ Erhaltener Antworterfolg ist falsch. ”
• Geben Sie kurze, klare Beschreibungen des Problems statt „ ein Fehler ist aufgetreten. ”
• Vermeiden Sie es, anderen die Schuld zu geben oder ihnen zu sagen, dass sie etwas falsch gemacht haben – zum Beispiel, indem Sie sagen, dass es sich um einen „ illegalen Befehl“ handelt. ”
• Stellen Sie im Kontext konstruktive Fehlermeldungen bereit, damit die Leute das Problem beheben können.
• Vermeiden Sie es, einen Fehler anzuzeigen, indem Sie das Feld einfach rot färben. Es macht es nicht für Menschen mit Behinderungen zugänglich. Es ist immer am besten, andere visuelle Hinweise einzubeziehen, die der Farbenblinde sehen kann.
• Verwenden Sie die Inline-Validierung für Eingabefelder in Formularen.
• Fehlermeldungen sollten nicht verschwinden, bis die Leute das Problem behoben haben.

Zusammenfassung

Benachrichtigungen tragen zu einer Erfahrung bei, die Menschen dabei hilft, ein Ziel zu erreichen, und sollten wie jede andere digitale Produktkomponente behandelt werden. Benachrichtigungen können jedoch in beide Richtungen geschnitten werden. Wenn sie gut gehandhabt werden, können sie die UX steigern und das Engagement unterstützen, aber wenn sie schlecht ausgeführt werden, laufen sie Gefahr, lästig zu werden. Die richtige Balance zu finden, ist entscheidend.

Benachrichtigungen sollten nicht als nachträglicher Einfall behandelt werden. Um sie richtig zu machen, müssen sich Designer frühzeitig mit Anwendungsfällen befassen, die verschiedenen Formen während des Produktdesign-Lebenszyklus definieren und sie ausgiebig testen.

Eine kurze Zusammenfassung zur richtigen Gestaltung von Benachrichtigungen:

• Beginnen Sie frühzeitig mit dem Design von Benachrichtigungen, nicht nachträglich.
• Klassifizieren Sie Benachrichtigungen nach den drei Aufmerksamkeitsstufen: hoch, mittel und niedrig.
• Farbcodieren, Symbole zuweisen und Platzierungen festlegen.
• Kategorisieren Sie sie nach Typ: persistent oder nicht persistent, Popup, Banner, Dialog usw.
• Integrieren Sie sie in ein Designsystem.

Es ist wichtig zu verstehen, wann und wie Benachrichtigungen verwendet werden, um eine hervorragende Benutzerfreundlichkeit zu bieten und Konsistenz in der Produktmitteilung aufzubauen. Durch sorgfältige Bewertung der peripheren Botschaften, die im richtigen Moment gezeigt werden müssen, können Designer die Effizienz eines Produkts steigern und seine UX verbessern.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Wie man aus der Ferne arbeitet, wenn es darauf ankommt
• So gestalten Sie den Übergang zur Remote-Arbeit mit Leichtigkeit
• Best Practices und Fehler beim Design mobiler Apps
• Der ultimative Leitfaden für das Design von E-Commerce-Websites
• Der Chat-Crash – Wenn ein Chatbot ausfällt