Die Grundsätze helfen dabei, die Benutzerfreundlichkeit und Effizienz von Informationssystemen in verschiedenen Bereichen zu verbessern:
Webdesign: Erstellen von klar strukturierten Websites, die leicht navigierbar sind und wichtige Informationen hervorheben. Softwareentwicklung: Design von Benutzeroberflächen, die intuitiv zu bedienen sind und Nutzer nicht überfordern. Marketing: Entwicklung von Werbematerialien, die klare Botschaften vermitteln und die Aufmerksamkeit der Zielgruppe auf das Wesentliche lenken.
Diese Regeln sind Teil der DIN EN ISO 9241 Norm und werden oft weniger beachtet als bekanntere Interaktionsprinzipien. Während sich Interaktionsprinzipien auf die Benutzerinteraktion konzentrieren, beschäftigen sich die Grundsätze der Informationsdarstellung damit, wie Inhalte präsentiert werden.
Der größte Zusammenhang besteht mit den Interaktionsprinzipien der Selbstbeschreibungsfähigkeit, Erwartungskonformität und Aufgabenangemessenheit.
Wobei wichtige Fragen sind:
Stellen die Informationen sicher, dass der Anwender versteht, worum es geht?
Sind die Informationen konsistent zu dem, was der Nutzer gelernt hat?
Ist die Menge der Informationen für die Aufgaben angemessen?
Informationen sollten leicht wahrgenommen und schnell gefunden werden können. Nutzer sollen die relevanten Informationen sofort erkennen, ohne suchen zu müssen. Nun haben wir Beispiele für die Entdeckbarkeit versammelt:
Hervorgehobene Navigationsleiste: Eine auffällige Navigationsleiste, die gut sichtbar und leicht zugänglich ist, hilft den Nutzern, sich schnell zu orientieren und die wichtigsten Bereiche der Website zu erreichen. Eindeutige Call-to-Action-Buttons: Große, farblich abgehobene Call-to-Action-Buttons, die deutlich machen, welche Aktionen die Nutzer als Nächstes ausführen sollen.
Wesentliche Informationen müssen ohne störende Elemente erkennbar sein. Aufmerksamkeit von wichtigen Inhalten soll nicht durch unnötige Details oder andere Elemente abgelenkt werden. Exemplarische Anwendungsfälle für Ablekungsfreiheit findet ihr hier:
Minimalistische Anmeldeformulare: Ein Registrierungsformular, das nur die notwendigsten Felder enthält, ohne zusätzliche Links oder Werbung, damit der Nutzer sich auf das Ausfüllen konzentrieren kann. Landing-Pages: Eine Landing-Page für eine Werbekampagne, die nur die wichtigsten Informationen und eine klare Call-to-Action enthält, ohne zusätzliche Navigationselemente oder Werbung.
Informationen sollen eindeutig voneinander unterscheidbar sein. Nutzer müssen verschiedene Informationen leicht voneinander trennen können. Die Bedeutung der Informationen sollte sofort klar sein, ohne dass der Nutzer nachdenken muss. Unterscheidbarkeit zeigt sich vor allem in folgenden Fällen:
Farbkodierte Kalender: Ein Kalender, der unterschiedliche Farben für verschiedene Arten von Terminen (z.B. Meetings in Blau, persönliche Ereignisse in Grün) verwendet, damit Nutzer auf einen Blick die Art des Termins erkennen können. Icons für Dokumenttypen: Ein Dateiverwaltungssystem, das verschiedene Icons für unterschiedliche Dateitypen verwendet (z.B. PDF, Word-Dokument, Bilddateien), um die Dateitypen leicht unterscheidbar zu machen. Unterschiedliche Schriftarten und -größen: Eine Präsentation, die verschiedene Schriftarten und -größen für Überschriften, Untertitel und Fließtext verwendet, um die Hierarchie und Struktur der Informationen deutlich zu machen.
Informationen müssen verständlich und klar interpretierbar sein. Überflüssige Informationen sollten entfernt werden, um die wichtigsten Daten hervorzuheben. Auch hier haben wir illustrative Beispiele parat:
Ampelsymbole bei Sicherheitswarnungen: Ein Ampelsymbolsystem, das grüne, gelbe und rote Lichter verwendet, um den Status von Sicherheitswarnungen klar und unmittelbar verständlich zu machen. Fehlermeldungen in Software: Eine Software, die bei Fehlern klare und verständliche Meldungen anzeigt, die dem Nutzer genau erklären, was schiefgelaufen ist und wie das Problem behoben werden kann.
Nur notwendige Informationen sollten dargestellt werden, um Überladung zu vermeiden. Überflüssige Informationen sollten entfernt werden, um die wichtigsten Daten hervorzuheben. Beispiele hierfür sind:
Buchungsseite für Ferienwohnungen: Wichtige Infos wie Personenanzahl, Zimmer, Größe und Ausstattung werden übersichtlich in einem Bereich zusammengefasst, damit der Nutzer schnell entscheiden kann. Zusammenklappbare FAQ-Sektion: Eine FAQ-Seite, die Fragen und Antworten in zusammenklappbaren Abschnitten darstellt, um den Nutzern die Möglichkeit zu geben, nur die für sie relevanten Informationen anzuzeigen.
Informationen sollten intern und extern konsistent dargestellt werden. Gleiche Informationen sollten immer auf die gleiche Weise dargestellt werden und auch gleich heißen. Auch diesbezüglich versorgen wir euch mit Beispielen:
Einheitliche Buttons Eine Anwendung, bei der alle Schaltflächen die gleiche Farbe, Form und Beschriftung haben, um die Benutzerführung zu vereinfachen und ein einheitliches Aussehen zu gewährleisten. Konsistente Terminologie: Eine Website, die durchgehend dieselben Begriffe und Bezeichnungen verwendet, zum Beispiel "Anmelden" statt "Login" oder "Sign In", um Verwirrung zu vermeiden. Wiederkehrende Layouts: Ein E-Learning-Portal, bei dem alle Kursseiten ein identisches Layout und Design haben, damit sich Nutzer leicht orientieren und die Inhalte effizienter aufnehmen können.
Im User Interface Design ist es entscheidend zu wissen, welche Informationen relevant und wichtig für den Anwender sind. Dies ermöglicht eine effektive Priorisierung, Gliederung und Gewichtung der Informationen.
Durch eine klare visuelle Hierarchie, mit gut erkennbaren Überschriften und ausreichend Weißraum, wird die Orientierung erleichtert. Nutzer sollen wichtige Informationen sofort finden und störende Elemente vermeiden können.
Ähnliche Elemente sollten gleich aussehen und sich gleich verhalten, um Verwirrung zu vermeiden. Unterschiedliche Informationen müssen klar voneinander getrennt und leicht zu erkennen sein.
Besonders wichtig ist, dass visuelle Elemente wie Icons eine klare Bedeutung haben. Die Bedeutung von Icons sollte sich sofort erschließen, besonders wenn sie ohne Text vorhanden sind. Farben mit semantischer Bedeutung, wie Rot für Fehler und Grün für Erfolg, sollten konsistent verwendet werden.
Die Reduktion auf das Wesentliche ist wichtig, da zu viele Informationen kognitiv belastend sind. Man muss wissen, was wichtig ist, um unnötige Informationen zu entfernen und die wichtigen hervorzuheben.
Bei der Darstellung von Informationen sollte immer mehr als nur die Farbe zur Hervorhebung verwendet werden, um die Barrierefreiheit zu gewährleisten. Menschen mit Farbsehschwächen oder anderen visuellen Beeinträchtigungen könnten farbcodierte Informationen sonst nicht wahrnehmen. Zusätzlich zu Farben können Formen, Symbole oder Textstile genutzt werden, um wichtige Inhalte hervorzuheben. Zum Beispiel kann eine Fehlermeldung nicht nur durch die Farbe Rot, sondern auch durch ein Warnsymbol und fettgedruckten Text gekennzeichnet werden, um sicherzustellen, dass alle Nutzer die Information erkennen und verstehen.
