Navigationsschwierigkeiten in solchen Fällen sind nicht die Schuld der Nutzer*innen – sie treten auf, weil eine Seite nicht zu Erwartungen passt, die wir aus Erfahrung mit anderen Websites aufgebaut haben. Das macht sie weniger intuitiv und wir können uns bei der Navigation nicht auf unsere Erfahrung verlassen.

Die Macht der Gewohnheit sollte man nicht unterschätzen; sie hilft nicht nur beim Navigieren des allgemeinen Layouts einer Website oder App, sondern auch bei deren Inhalt. Wir erwarten einfach, dass bestimmte Elemente ein bestimmtes Aussehen haben und auf bestimmte Weise funktionieren. Wenn sie das nicht tun, fällt es uns schwerer, den Content zu nutzen.

Einige Publikationstools für Fachartikel bieten kaum Optionen zur Gestaltung des Inhalts, andere geben gleich eine breite Palette an Anpassungsmöglichkeiten an die Hand. In diesem Artikel geht es speziell um letztere. Wenn du im Publikationstool deiner Wahl selbst kontrollieren kannst, wie deine Inhalte dargestellt werden, haben wir hier ein paar Tipps, für Gestaltungsentscheidungen. Nutze die Macht der Gewohnheit, um deinen Content für deine Leser*innen besser nutzbar zu machen.

Warum Konventionen so wichtig sind

Mutige neue Ideen, wie du deinen Leser*innen Informationen vermitteln kannst, sind natürlich etwas Gutes. Es gibt aber auch gute Gründe dafür, gewisse Konventionen einzuhalten. Jakob Nielsen von den UX-Forschern NN/g fasst das in seinem Gesetz zur Internet User Experience, Jakob’s Law of Internet User Experience, perfekt zusammen:

„Users spend most of their time on other websites than your website. [Nutzer*innen verbringen nun einmal die meiste Zeit auf anderen Webseiten als deiner.]“

Egal, wie viel Zeit deine Leser*innen mit deinem Content verbringen, die gigantische Zahl anderer Seiten oder Anwendungen, die sie nutzen, wird immer überwiegen. Und dort bilden sich die Nutzer*innen ihr mentales Abbild davon, wie bestimmte Elemente aussehen und funktionieren sollten. Wenn du dich an ihren Gewohnheiten orientierst, hilfst du ihnen dabei, intuitiver durch deinen Content zu navigieren.

Werfen wir also einen Blick auf ein paar Konventionen, an die du dich halten kannst, um die Macht der Gewohnheit für deinen Content einzusetzen.

Symbole

Symbole eignen sich hervorragend als visuelle Abkürzungen oder Ergänzungen zum Text. Wenn du Symbole verwendest, kann es verlockend sein, alle möglichen Symbole für die verschiedensten Konzepte einzuführen. Versuche dabei aber, nicht von den typischen Assoziationen zwischen bestimmten Symbolen und Konzepten abzuweichen.

• Beschränke dich auf bekannte Symbole wie z. B. den Briefumschlag für E-Mails oder Nachrichten oder den Einkaufswagen für – nun ja, den Einkaufswagen. Vermeide Symbole, die sehr spezifisch für deinen Content sind, denn sie sind für deine Leser*innen nicht intuitiv.
• Wenn du dir unsicher bist, welches das eingängigste Symbol für ein Konzept ist, schau dir an, was andere Webinhalte am häufigsten verwenden.

Aber Achtung: Nicht jedes Symbol ist selbsterklärend und nicht jedes Konzept ist mit nur einem einzigen Symbol verbunden. Wäge in dem Fall genau ab, ob du nicht auch ohne ein Symbol auskommst, um keine Verwirrung auszulösen. Zusätzlich solltest du deine Symbole immer mit einem Label versehen oder das zugehörige Konzept auch im Text nennen.

Farben

Auch wenn ein firmenspezifisches Farbkonzept für eine elegante und einheitliche Optik sorgt, stehen einige Farben symbolisch für bestimmte Dinge und sollten nicht in anderen Kontexten verwendet werden:

• Rot und damit verwandte Farbtöne signalisieren Fehler. Deshalb solltest du diese Farben nicht für interaktive Elemente verwenden; diese sehen sonst aus, als würden sie nicht funktionieren. Aber auch andere Elemente können wie Warnungen oder falsche Informationen wirken, wenn du Rot dafür verwendest. Es ist also besser, diese Farbe nur für Warnungen, Fehler und Ähnliches vorzubehalten.
• Gelb ist ebenfalls eine Warnfarbe, wenn auch nicht ganz so extrem wie Rot. Verwende es am besten in Kontexten, die Vorsicht erfordern. Außerdem kannst du die Farbe nach dem Vorbild der Ampel verwenden, wenn etwas pausiert ist oder sich in einem Zwischenstatus befindet.
• Grün steht für aktive / verwendbare Elemente sowie für Empfehlungen, richtige Vorgehensweisen und andere positive Assoziationen. Reduziere die Verwendung deshalb auf diese Zwecke.
• Grau ist unauffälliger als Schwarz oder andere Farben. Es wird daher oft für inaktive oder weniger relevante Elemente verwendet. Verwende es also besser nicht für interaktive Elemente wie Links oder wichtige Texte wie Überschriften.

In unserem Artikel Das Auge leiten haben wir bereits betont, wie wichtig ein guter Farbkontrast ist. Das trifft sowohl auf den Kontrast zwischen Hintergrund und Text zu, als auch auf den Kontrast zwischen Textelementen, die sich unterscheiden sollen. Behalte das im Kopf, wenn du dich für Farben wie Gelb oder Hellgrau entscheidest.

Schriftarten

Deine zentralen Schriftarten sollten leicht lesbar sein und zum übergreifenden Design passen. An manchen Stellen will man aber vielleicht einige Elemente durch eine Schriftart hervorheben. Denk dabei daran, dass einige Schriftarten bestimmte Assoziationen mit sich bringen. Versuche, diese nicht außerhalb dieses Kontextes zu verwenden, damit deine Leser*innen sich auf die Macht der Gewohnheit verlassen können.

• Schreibmaschinenschrift beispielsweise erinnert an das frühe Computerzeitalter, aber auch an Programmiereditoren, weshalb wir sie zur Hervorhebung von Code empfehlen.
• Auch wenn sie etwas außerhalb der Komfortzone für Fachartikel liegen, können Handschriften für Entwürfe oder Ideen von Nutzer*innen verwendet werden, da sie an Notizzettel erinnern.
• Schreibschriften symbolisieren Eleganz und geben der Gestaltung einen altmodischen, romantischen Touch, weshalb sie für Fachartikel ungeeignet sind.

Schriftauszeichnung

Neben der Schriftart hat auch die Auszeichnung bestimmte Konnotationen:

• Fette Schrift ist vielseitig einsetzbar, wird jedoch meistens verwendet, um die Aufmerksamkeit der Leser*innen auf bestimmte Wörter zu lenken. Verwende diese Hervorhebung also nur für besonders wichtige Elemente.
• Kursiv wird üblicherweise für Titel von Veröffentlichungen oder Eigennamen (z.B. von Apps) verwendet. Außerdem wird es auch manchmal zur Hervorhebung wichtiger Wörter verwendet. Aufgrund dieser eher losen Definition und der Frage, ob es Sinn macht, zum Beispiel jeden Softwarenamen kursiv zu schreiben oder es ganz sein zu lassen, kann Kursivschrift etwas verwirrend sein. Überlege dir daher gut, ob die Verwendung von Kursivschrift für deine Leser*innen einen eindeutigen Mehrwert hat.
• Auch die Unterstreichung hat keine klar definierte Anwendung, aber außer einer allgemeinen Betonung kann sie, zusammen mit einer Akzentfarbe, auch Links hervorheben. Achte deshalb darauf, dass du Elemente, die keinen Link enthalten, nicht wie einen Link aussehen lässt. Deine Leser*innen könnten sonst denken, dass es sich um einen kaputten Link handelt.

Links

Wo wir beim Thema sind: Damit Links im Fließtext als solche erkennbar sind, sollten sie sich klar vom umliegenden Text abheben. Aber nicht alle Gestaltungsmöglichkeiten sagen so eindeutig: „Ich bin ein Link“ wie andere.

• Halte dich an die oben gegebenen Farbempfehlungen. Wenn dein Farbschema es erlaubt, sind Blau und verwandte Farben eine ideale Wahl, da Blau die traditionelle Farbe für Links ist.
• Wenn die Farbe allein nicht ausreicht, um den Link hervorzuheben, probiere es mit Unterstreichung oder Fettschrift.
• Um noch stärker zu verdeutlichen, dass ein Element interaktiv ist, stelle sicher, dass der Link und der Cursor ihr Aussehen ändern, wenn die Maus darüber bewegt wird (üblicherweise wird der Link in diesem Fall unterstrichen und der Cursor nimmt die Gestalt einer deutenden Hand an).
• Überlege dir außerdem, ob es deinen Leser*innen hilft, wenn sie sehen, welche Links sie bereits besucht haben – oft ist die Antwort ja. In diesem Fall sollten die bereits besuchten Links ihre Farbe ändern. (Bei blauen Links ist der Farbwechsel traditionell zu Violett.)

Schaltflächen

Die Erwartungen von Nutzer*innen an Schaltflächen sind ähnlich wie die an Links. Wenn du aussuchen kannst, wie Schaltflächen in deinem Inhalt aussehen, hier ein paar Tipps:

• Achte auch hier auf die Farbe. Rote Schaltflächen haben üblicherweise Funktionen wie Löschen, Stopp, etc. Grüne Schaltflächen stehen für Start oder Okay. Graue Schaltflächen werden als inaktiv wahrgenommen.
• Wie Links sollten auch Schaltflächen ihr Aussehen ändern, wenn die Maus darüber bewegt wird. Typischerweise wird die Farbe etwas dunkler (als ob die Schaltfläche heruntergedrückt würde). Andere Veränderungen der Farbe oder der Umrandung und Schattierung können ebenso funktionieren. Auch hier sollte die Maus sich zur deutenden Hand wandeln.

Mach dir nicht zu viele Gedanken – schau einfach, wie andere es machen

Wir haben jetzt nur einige der Elemente beschrieben, mit denen du deine Inhalte für Leser*innen intuitiver und vertrauter gestalten kannst. Je nach Inhalt und Publikationstool können das noch einige mehr sein.

Wenn du dich dabei erwischst, dass du schon viel zu lange über die Gestaltung eines bestimmten Elements nachgrübelst, unterbrich lieber: Wenn du dir zu viele Gedanken machst, kommt am Ende eine übermäßig individuelle Gestaltung heraus, die vielleicht perfekt zu deinem Inhalt passt, aber nicht mehr mit den Erwartungen übereinstimmt, die Nutzer*innen von anderen Seiten und Anwendungen mitbringen.

Betreibe stattdessen lieber etwas Recherche, wenn du dir unsicher bist, wie du ein Element am besten gestalten solltest. Sieh nach, ob es allgemeine Empfehlungen gibt, oder schau dir ein paar andere Seiten und Applikationen an, um zu sehen, wie dort damit umgegangen wird. So baust du schon beim ersten Besuch ein Gefühl der Vertrautheit für deine Leser*innen auf und kannst von der Macht der Gewohnheit profitieren.

Welche anderen Gestaltungsmöglichkeiten sind dir bei deinen Inhalten wichtig und was bietet dein Publikationstool noch so an? Wir sind neugierig, wie du es deinen Leser*innen mit vertrauter Gestaltung leichter machst.

Impressum: 
Datum: November 2021
Autor: Kris Schmidt
Kontakt: marketing@avato.net
www.avato-consulting.com
© 2021 avato consulting ag
All Rights Reserved.