Effektiv
Nutzende können ihre Aufgabe ohne Hindernisse erledigen: Wir verwenden eine einfache Sprache und verstecken keine Informationen. Stattdessen unterstützt jedes Wort unsere Nutzer, dass sie ihr Ziel erreichen.
Inhalt
Nutzerzentrierte Sprache
Die Sprache der Nutzenden sprechen
Nutzende verstehen Texte eher, wenn die verwendete Sprache vertraut ist. Texte sollten maximal dem Leseniveau der Klasse 8 entsprechen.
Das heisst:
- keine Redewendungen oder Jargon verwenden
- Abkürzungen nur verwenden, wenn sie erklärt werden oder wenn der Platz im UI dies erfordert
- Aktiv und positiv formulieren – Passiv-Konstruktionen und «man»-Sätze vermeiden
- Texte im Präsens schreiben
- Verben statt Nomen verwenden
- Kompakte Sätze mit einfachen Begriffen statt langer Schachtelsätze
DO
Dies sind die obligatorischen Versicherungen der Berufsunfälle und Berufskrankheiten (BUV) und der Nichtbetriebsunfälle (NBUV).
In dieser Broschüre informieren wir, wie wir unsere Versicherungsprämien berechnen.
Wie erfassen Sie Ihre Lohndeklaration.
DON'T
Dies sind die obligatorischen BUV und NBUV.
In dieser Broschüre orientieren wir Sie transparent, wie unsere Versicherungsprämien berechnet werden.
Erfassung der Lohndeklaration.
Wie spricht die Suva mit Nutzenden
Designelemente
Links
Vier Richtlinien für Linktexte:
- Konkret
Kommunizieren, was Nutzende finden werden oder was geschehen wird. - Aufrichtig
Genaue Erwartungen wecken und sie erfüllen. - Aussagekräftig
Link-Labels müssen für sich alleine stehen können, da sie als visuelle Anker im Text funktionieren. Dies ist wichtig für Nutzende, die allgemeinen SEO und Barrierefreiheit. - Prägnant
So schnell wie möglich auf den Punkt kommen, jedes Wort sollte das Ziel unterstützen. Die ersten Worte helfen den Nutzenden, den CTA zu verstehen (Frontloading).
DO
Für Dokumente: Dokumententyp und Grösse angeben. Der Name soll im Download-Ordner Sinn ergeben. Datum hinzufügen, falls es mehrere Versionen gibt.
Explizit den Kontext benennen “online”.
DONT
Einzelne Worte wie “hier” vermeiden, die alleine nicht aussagekräftig sind.
Ohne Kontext. Besser: per Email kontaktieren
Funktionale Buttons
Funktionale CTAs sind Handlungsanweisungen. Mit dem Klicken eines CTA-Buttons erledigen Nutzende eine Aufgabe. Nutzende vervollständigen dabei mental diesen Satz: Ich will… (ein) “Formular abschicken”.
Pattern:
Objekt + handlungsbezogenes Verb
DO
Normale Gross- und Kleinschreibung für bessere Leserlichkeit
Optional die Handlung mit Ja/Nein oder spezifischen Beschreibungen präzisieren
Den Mehrwert für die Nutzenden hervorheben und nicht, was sie tun sollen.
Microcopy schafft mehr Sicherheit.
DONT
Nicht mit Wörtern wie “hier” oder “Button” auf Elemente im UI verweisen.
Kein Marketing-Jargon wie “jetzt” oder “definitiv”, der eine künstliche Dringlichkeit und Stress kreiert.
Zu kurz oder vage schreiben, wenn die Suva Nutzende konvertieren möchte.
Spezialfall Bestätigungs-Buttons
Bei wichtigen Entscheidungen wenden wir uns bei funktionalen Buttons direkt an die Nutzenden. Wir verwenden dabei den vollständigen mentalen Satz der Nutzenden: Ich will… (ein) “Formular abschicken”.
Pattern:
Ich + Verb
Navigationale CTAs
Navigationale CTAs (Call-to-Action) sind Wegweiser. Sie bieten Nutzenden über einen Link die Möglichkeit, ihre Journey – innerhalb oder ausserhalb der Website – fortzusetzen. Nutzende vervollständigen dabei mental diesen Satz: Ich gehe… “zum Bestellformular”.
Pattern:
“weiter”, “zurück” oder “Zum xyz”
DO
Transparent beschreiben, wenn der Kontext verlassen wird. “zur Aktivitätenübersicht” sagt, wohin der Klick führt.
Externe Links zusätzlich visuell kennzeichnen.
Kontext für zusätzliche Orientierung “Zurück (wohin) zur Startseite”
Don't
“Alle Aktivitäten anzeigen” lässt vermuten, dass hier ein Dropdown aufgeklappt wird.
Marketing und konversationale Buttons
Konversationale und Marketing CTAs sind der Wendepunkt in einem Flow. Sie entscheiden, ob Nutzenden das Ende des Sales-Funnels erreichen (Conversion). Nutzende vervollständigen dabei mental diesen Satz: Ich will “meinen Preis abholen”.
Pattern:
-
Umgangssprachlich und motivierend
-
Wir-Perspektive
-
“Los geht’s” oder “Gemeinsam entdecken”
Oft begleitet von Microcopy als Mental Relaxer
Modale
Ein Modal ist ein UI-Element, das sich über den Hauptscreen einer Anwendung legt. Der Hauptscreen ist deaktiviert, bleibt aber sichtbar. Nutzende müssen mit dem Modal interagieren, bevor sie zum Hauptscreen zurückkehren können.
Entscheidungsmodale
Stellen Nutzenden eine Frage oder bestätigen eine Handlung.
- Für Entscheidungen Titel als Frage formulieren
- Body mit allen Informationen, die für Entscheidung benötigt werden (z.B. Konsequenzen der Handlung)
- Parallelstruktur Titel und Button: Dasselbe Verb im Titel und die Hauptaktion des Buttons verwenden.
Informative Modale
Informieren Nutzende über einen Vorgang (System Feedback).
- Können die Rolle von Fehler- & Erfolgsmeldungen übernehmen.
DO
Titel als Frage, da wir Nutzende zu einer Entscheidung auffordern.
Der Body liefert Kontext und erklärt allfällige Konsequenzen (Informationen werden gespeichert).
Verb im Titel "unterbrechen", wird zusammen mit dem Objekt “Unfallmeldung” auch für die Button-Aktion verwendet.
DON'T
Unnötige oder komplizierte Informationen im Body liefern. Auf Infos beschränken, die Nutzende zur Entscheidung benötigen.
Titel als Statement in einem Entscheidungsmodale erhöht die kognitive Arbeit für Nutzende.
Unklare Button-Texte, die nicht “best practice” entsprechen, verunsichern Nutzende.
Formulare
Wir nutzen Placeholder kombiniert mit Labels in längeren Formularen.
Bestandteile eines Formulars:
- Eingabefeld: Das Label beschreibt, was in das Feld kommt
- Platzhalter: Dient ergänzend zum Eingabefeld als konkretes Beispiel. Oder fordert zur Handlung auf.
- Klarheit steht an erster Stelle. Keine lustigen Aussagen.
- Die Instruktionen sollen immer ausserhalb des Platzhalters stehen, da der Platzhaltertext mit dem Anwählen des Felds verschwindet
- Fehlermeldung: Hilfestellungen, wenn etwas nicht funktioniert.
- Immer konkret das Problem benennen
- In Formularen kurz und knapp bleiben.
- Positive Formulierungen wie “Die Nummer muss 9 Ziffern beinhalten” wählen. Keine negativen Formulierungen wie “Das Nummerformat ist nicht korrekt”.
DO
Der Platzhalter ergänzt als Beispiel den Feldtext
Keine Abkürzungen bei Feldtexten: “Sozialversicherungsnummer” ist besser als “SVNummer”.
Die Fehlermeldung weist konkret darauf hin, wie Nutzende den Fehler beheben können.
Die Fehlermeldung verwendet dieselbe Bezeichnung wie das Eingabefeld “Sozialversicherungsnummer”.
DON'T
Der Platzhalter liefert keine Zusatzinformationen und wiederholt den Feldtext.
Keine Abkürzungen im Feldtext “SV-Nummer”. Feldtext und Platzhalter sind inkonsistent.
Der Platzhalter liefert keine Zusatzinformationen und wiederholt den Feldtext.
Keine Abkürzungen im Feldtext “SV-Nummer”. Feldtext und Platzhalter sind inkonsistent.
Tooltips
- Von Nutzenden ausgelöst
Tooltips sind kleine, von Nutzenden ausgelöste Popups, die zusätzliche Informationen bereitstellen. Nutzende sollten nie Tooltips benötigen, um Aufgaben auf einer Website zu erledigen. - Höhere Interaction Cost
Informationen in Tooltips sind mit höherer Interaction Cost (Aufwand) für die Nutzenden verbunden. Nur wer gezielt nach mehr Informationen sucht, konsultiert einen externen Link oder ein Tooltip. - Zusätzlich in Formularen
Tooltips können in Formularen zusätzlich zu Labels und Placeholdern verwendet werden.
DO
Maximal 1-2 Sätze.
Zusatzinformationen, die Nutzende aber nicht für Ihre Aufgabe benötigen. Textfeld und Platzhalter informieren über das Format der Sozialversicherungsnummer, während das Tooltip Nutzenden hilft, Ihre Nummer zu finden.
DON’T
Mehr als 3 Sätze: Die Information, dass die Nummer von allen Versicherungen verwendet wird, ist nicht relevant.
Für Nutzende, die nicht mit der Nummer vertraut sind, muss deren Format schon auf den ersten Blick im UI ersichtlich sein.
Fehlermeldungen und Fehlerseiten
Eine Fehlermeldung informiert Nutzende, wenn etwas nicht so funktioniert hat, wie geplant. Je nach Ort im UI werden andere Arten der Fehlermeldungen verwendet.
Arten der Fehlermeldung
- Formularfelder
- Prozessschritte (z.B. als Toast-Messages, Messages)
- Fehlerseiten (Error 404)
- Systemfehler (Abstürze, Verbindungsprobleme, Wartung etc.)
Je nach Art der Fehlermeldung besteht diese aus Titel, Body und Button oder vereinfachten Kombination der Elemente.
Bestandteile einer Fehlermeldung
- Problem definieren: Was hat nicht funktioniert “Keine Internetverbindung”.
- Kontext liefern: Wie kam es dazu und wie können Nutzende das Problem beheben?
- Call to Action: Eine Handlung oder Vorschlag, wie Nutzende das Problem lösen können.
DO
Die Toastmessage gibt Nutzenden nach einer Interaktion Feedback, dass sie nicht wie gewünscht fortfahren können und zeigt die Lösung auf.
Die Meldung ist möglichst kurz (max. 3 Zeilen auf Desktop).
Kurze Nachricht, die alle nötigen Informationen liefert.
DON'T
Die Toastmessage weist Nutzende nicht aktiv darauf hin, was Sie machen müssen.
Der Text ist zu lang und wiederholt Informationen unnötig.
Keine technischen Wörter (“Systemfehler”, “Applikation”, “Wartungsarbeiten”...) verwenden.
Erfolgsmeldungen
Erfolgsmeldungen folgen auf einen Prozess, den Nutzende erfolgreich abschliessen.
Bestandteile einer Erfolgsmeldung
- Systemfeedback: Nutzende verstehen, dass sie den Prozess erfolgreich abgeschlossen haben.
- Nächste Schritte: Die nächsten optionalen und obligatorischen Handlungen sind klar ersichtlich.
- Positive Erfahrung: Da Nutzende ihre Aufgabe abgeschlossen haben, sind Erfolgsmeldungen ein guter Zeitpunkt, um die Marke Suva zu präsentieren.
Empty States (Leerzustände)
Empty States zeigen einen Leerzustand auf. Nutzende finden sie meist, wenn sie zum ersten Mal mit einem Produkt oder neuen Feature interagieren.
Bestandteile eines Empty States
- Ein klarer Leerzustand: Design und Text zeigen auf, was fehlt. Der Leerzustand unterscheidet sich deutlich vom “gefüllten” Zustand.
- Nächste Handlung aufzeigen: Wie können Nutzende den Leerzustand füllen und welche Vorteile bringt dies?
- Persönlichkeit zeigen: Da Leerzustände Nutzende nicht bei einer Aufgabe unterbrechen sind sie ideal, um spielerisch mit den Nutzenden den Dialog zu suchen und die Bindung an die Marke Suva zu stärken.
Ansprechpersonen
Tina Tanner
UX/UI-Designerin
Giovanni Laportosa
UX/UI-Designer