Effizient
Nutzende kommen schnell zu ihrem Ziel: Wir berücksichtigen das Leseverhalten der Nutzer und strukturieren unsere Informationen entsprechend. Wir sorgen dafür, dass die Aussagen der Texte einfach und verständlich sind.
Inhalt
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
Informationsstruktur
- Titel: Es geht um die Lohndeklaration
- Body: Nutzende sollen per Ende Jahr jeweils die definitiven Lohnsummen deklarieren.
- Microcopy: Was brauchen Nutzende, um die Lohnsummen zu deklarieren? Vorbereitungen, die wir hier vorneweg nehmen können.
- Weiterführender Link: Wenn die Informationen unter 2 nicht reichen, können Nutzende nachlesen.
- Tooltip: Hinweis zur Bearbeitungsfrist ist keine Instruktion. Es ist aber eine Information, die im Kontext mit den Bearbeitungsmöglichkeiten für Nutzende, relevant sein könnte.
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.
- Titel: Es geht um die Kontaktangaben
- Stepper: Microcopy zur besseren Orientierung. Wie stehen die Kontaktangaben im Kontext zum ganzen Prozess.
- Body: Kontextualisiert die Formularfelder. Was sollen Nutzende? Die Kontaktperson angeben.
- Placeholder: Microcopy ergänzt und reduziert die Instruktionen im Body. Zwei Möglichkeiten: Mit Beispielen “Hans” arbeiten oder Instruktionen “Wählen Sie eine Option”.
- Weiterführender Link: Für Interessierte oder wenn die Informationen unter 2 nicht reichen, können Nutzende nachlesen.
Wichtig: Mut zur Lücke! Allgemein gilt 1 “Aufgabe” pro Screen. Weitere Informationen oder Limitationen können später präsentiert werden.
Ansprechpersonen
Tina Tanner
UX/UI-Designerin
Giovanni Laportosa
UX/UI-Designer