UX Writing Guidelines
Work Tool Template
Inhalt
Einführung
Unsere Texte sind effizient, effektiv und empathisch.
1. Effizient:
Nutzende kommen schnell zu ihrem Ziel
2. Effektiv:
Nutzende können ihre Aufgabe ohne Hindernisse erledigen
3. Empathisch:
Nutzende fühlen sich verstanden und abgeholt
Prinzip 1: Effizient
Prinzip 1: Effizient | Nutzende kommen schnell zu ihrem Ziel
Nutzende kommen schnell zu ihrem Ziel
Inhalte strukturieren
Das Leseverhalten von Nutzenden online
Nutzende lesen auf dem Web nicht alles – sie scannen den Text nach Elementen, die sich auf ihre Bedürfnisse beziehen.
Die durchschnittliche Aufmerksamkeitsspanne von Nutzenden liegt beim Lesen auf Webseiten bei ca. 8 Sekunden.
Elemente zur Führung von Nutzenden:
- Titel
- Listen
- Textformatierung & Wortbild
- Microcopy Elemente
Informationen strukturieren
Mit Textelementen strukturieren
Titel, Textformatierung und Wortbild
- Eindeutige Titel
Titel gliedern einen Text und leiten die Augen der Nutzenden, damit sie direkt zu dem Abschnitt springen können, der für sie relevant ist. Die Augen der Nutzenden bleiben an den ersten 2 Worten hängen. - Das Wichtigste zuerst
Wir beginnen unseren Text mit der Kernaussage und fügen danach weniger wichtige Hintergrundinformationen hinzu. - Kurze Absätze
Absätze helfen, unseren Text zu gliedern. Es gilt die Faustregel: Sobald eine neue Sinneinheit (Unterthema) beginnt, wird ein neuer Absatz gesetzt. Ist ein Abschnitt noch immer lang, lockern wir ihn durch Zeilenumbrüche auf. - Nummern mit Zahlen schreiben
Die Augen der Nutzenden finden "3" statt "drei" einfacher in einem Text.
DO
Warum Titel so wichtig sind
Bei Web-Texten sind Untertitel für die Zugänglichkeit eines Inhaltes zentral. Untertitel helfen, den Umfang eines Dokuments zu erfassen und direkt zu dem Abschnitt zu springen, welchem das Interesse gilt.
Was im Titel steht
Deshalb muss der Inhalt eines Textes beim blossen Lesen der Titel verstanden werden. Der Fliesstext liefert nur noch weitere vertiefende Informationen. Dieses fürs Web typische Leseverhalten nennt man Querlesen.
Titelhierarchien beachten
Das Content Management System (CMS) unterstützt das Querlesen, indem es verschiedene Headline-Hierarchien zulässt. Von H1 (Headline 1) über H2, H3 bis Hn.
Titelhierarchie visuell unterstützen
Je tiefer in der Titel-Hierarchie, desto kleiner der Look and Feel des Titels und desto weniger wichtig der dazugehörige Inhalt. Noch bevor jemand mit Lesen beginnt, erkennt man dank visuellen Hilfsmitteln, wo die wichtigen Inhalte sind.
DON’T
Bei Web-Texten sind Untertitel für die Zugänglichkeit eines Inhaltes zentral.Titel helfen, den Umfang einer Seite zu erfassen und direkt zu dem Abschnitt zu springen, welchem das Interesse gilt. Deshalb muss der Inhalt eines Textes beim blossen Lesen der Titel verstanden werden. Je tiefer in der Titel-Hierarchie, desto kleiner der Look and Feel des Titels und desto weniger wichtig der dazugehörige Inhalt. Noch bevor jemand mit Lesen beginnt, erkennt die Person dank visuellen Hilfsmitteln, wo die wichtigen Inhalte sind.
Listen
Listen heben wichtige Inhalte, auch beim Querlesen, hervor. Das fördert ein effizientes Verständnis und unterstützt Lesende dabei, die Aussagen eines Textes schneller zu verstehen.
DO
Nummern für Anleitungen unterstützen die gewünschte Handlungsfolge, wenn Nutzende etwas Schritt für Schritt durchführen sollen.
Bulletpoints für Aufzählungen helfen, Inhalte schneller zu erfassen.
DON'T
Eine Abfolge von Schritten in einem Fliesstext verstecken.
Nie mehr als 7 Punkte pro Liste. Personen können nicht mehr Punkte im Gedächtnis behalten (Miller’s Law)
Inhaltsstruktur Beispiel
Prinzip 1: Effizient | Nutzende kommen schnell zu ihrem Ziel
Informationsstruktur
Level 3 Informationen sind mit höherer Interaction Cost verbunden: Nur für Nutzende, die gezielt nach mehr suchen. Klicken und in externem Tab weiterlesen oder Hovering über dem Tooltip für eine Antwort.
Wichtig: Mut zur Lücke! Allgemein gilt 1 “Aufgabe” pro Screen. Weitere Informationen oder Limitationen können später präsentiert werden.
Nutzende zentrierte Sprache
Prinzip 2: Effektiv | Nutzende können ihre Aufgabe ohne Hindernisse erledigen
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
Prinzip 2: Effektiv | Nutzende können ihre Aufgabe ohne Hindernisse erledigen
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).
DON'T
Die Toastmessage weist Nutzende nicht aktiv darauf hin, was Sie machen müssen.
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.
Tone & Voice
Prinzip 3: Empathisch | Nutzende fühlen sich verstanden & miteinbezogen
Wie äussert sich “Tone”?
Die Adjektive eines Tones verorten wir beim Schreiben auf 3 Dimensionen:
- Enthusiasmus: Mehr oder weniger optimistisch und motivierend, je nach Szenario.
- Detailliertheit: Mehr oder weniger ausführend und effizient.
- Distanz: Von professionell bis zu freundschaftlich
"Kompetent” ist nicht immer gleich kompetent. Kompetenz äussert sich anders, wenn…
etwas schiefgeht:
- Enthusiasmus: Gefasst/ruhig
- Detailliertheit: Direkter und ohne Umschweife zur Lösung des Problems
- Distanz: Professionelle Haltung, um nicht zu nahezutreten
“Kompetent” ist nicht immer gleich kompetent. Kompetenz äussert sich anders, wenn…
…wir jemanden von einem Pilotprojekt überzeugen wollen:
- Enthusiasmus: Enthusiastisch und mitreissend
- Detailliertheit: Informative und detailliertere Ausführungen zur Motivation
- Distanz: Persönlicher und emotionaler
Emotionen der Nutzenden antizipieren
Empathie ist der Schlüssel zu einer erfolgreichen User Experience. Die Suva geht auf die Reaktionen und Emotionen der Nutzenden in verschiedenen Szenarien ein.
Wenn Nutzende sich verstanden fühlen, behalten sie die Interaktion mit der Suva eher als positiv in Erinnerung. Wir fördern Loyalität.
Eine Tone Map zeigt auf, wie die Suva in verschiedenen Momenten einer User Journey spricht. Diese Voice und Tone Guidelines stellen eine einheitliche Stimme sicher.
Tone Beispiele
Prinzip 3: Empathisch | Nutzende fühlen sich verstanden & miteinbezogen
Gefährliche Situation
| Nutzende fühlen sich | Die Suva spricht |
|
|
|
|
|
|
|
Die Suva beruhigt Nutzende effizient und informiert sachlich über die Sachlage und den Ablauf.
Die Suva kommuniziert klar und liefert genügend Informationen, ohne auszuschweifen.
Die Suva berät Nutzende professionell, ohne den Nutzenden zu nahezutreten.
Ich weiss nicht, wo ich mich im Portal befinde
Die Suva ist freundlich und vermittelt geduldig die Informationen, die Nutzende benötigen, um sich zu orientieren.
Die Suva holt Nutzende auf ihrem Wissensstand ab und vermeidet Schuldzuweisungen.
Wir setzen nicht voraus, dass sie sich an etwas aus einem vorhergehenden Schritt aus ihrer Journey erinnern.
An einem Pilotprojekt teilnehmen
Die Suva spricht Nutzende persönlich an, bleibt aber partnerschaftlich.
Die Suva hat mehr erzählerischen Spielraum, um Nutzende zu motivieren. Sie liefert genügend Informationen und zeigt die Benefits für Nutzende auf.
Auf einen Job bewerben
Die Suva zeigt sich von ihrer besten Seite und zeigt ihre Persönlichkeit.
Es ist die Gelegenheit, Nutzenden all ihre Möglichkeiten aufzuzeigen und eine persönliche Bindung an die Suva als Marke zu schaffen.
Die Texte sind am ehesten “Marketing”-Texte und freier in ihren Inhalten.
Ansprechpersonen
Tina Tanner
UX/UI-Designerin
Giovanni Laportosa
UX/UI-Designer