Aber wie könnte es auch anders sein, denn die zugrunde liegenden neuronalen Netzwerke halten den Durchschnitt des Durchschnitts als korrekteste Lösung. Daran werden auch fortschrittlichere Modelle eine Weile nichts ändern.

Versteht mich bitte nicht falsch: Durchschnitt muss nicht unbedingt schlecht sein, denn niemand kann alles extrem gut – so dass ein durchschnittliches Ergebnis für viele okay bzw. sogar einen echten «Mehrwert» darstellt. Es sei denn, man beauftragt einen Spezialisten, von dem man Überdurchschnittliches erwarten kann.

Deswegen habe ich es als «professioneller» Designer auch nie als meine Aufgabe betrachtet, nur Durchschnittliches zu konzipieren, Klar, sicherlich hätte es manchmal gereicht, aber in der Regel beauftragen mich meine Kunden dafür, das ich etwas mache, was sie selbst nicht tun können, auch nicht mit KI. Insofern kann ich mich grad nicht so dafür begeistern, was da jetzt bei Claude als «Design» heraus purzelt – es ist für mich unbrauchbar.

Erfolgreich waren schon immer diejenigen, die nicht das anboten, was der Durchschnitt anbot, sondern diejenigen, die herausgefunden haben, was andere NICHT so gut können, und genau darin sehr, sehr gut geworden sind.

Doch zurück zum ursprünglichen Thema: Vielen genügt anscheinend eine durchschnittliche Lösung, why not.

Die meisten Menschen bewohnen ja auch eine durchschnittliche Wohnung und führen ein durchschnittliches Leben. So herrscht allerorts die Mittelmässigkeit und wird durch KI noch befeuert.

In all diesen Fällen, auch im Design, ist die KI lediglich ein Kanal, der die mittelmässige Ansichten und Daten unserer Welt zu neuen mittelmässigen Ansichten und Daten verarbeitet. Sie ist quasi ein Mittelmass-Verstärker.

Deep Learning funktioniert so, dass Daten, die wiederholt und sehr häufig vorkommen, als korrekt eingestuft werden. Auf genau diese Weise bewerten sie die Eingabedaten und begünstigen damit zwangsläufig durchschnittliche Ergebnisse.

Design lebt dagegen von Originalität, Polarität und manchmal auch von Einzigartigkeit.

Wie kann man neuronale Netzwerke so trainieren, dass sie nicht nur die statistisch häufigen Daten, sondern auch eigenständige und innovative Gestaltungsvorschläge berücksichtigen? Wie kann man Ihnen ein kreatives Beurteilungsvermögen geben?

Ich weiss es nicht, vielleicht kriegen wir es eines Tages mal hin. Aber ich frage mich allen Ernstes: wozu?

Denn wenn die KI gelegentlich etwas Grossartiges erzeugen würde, würden die meisten Anwender es ohnehin nicht bemerken – schon gar nicht zu schätzen wissen. In der Regel wollen die meisten Nutzer Mittelmässiges. Das ist das, was sie erwarten! Auf diese Weise pflanzt sich die Mittelmässigkeit fort.

Mittelmässigkeit pflanzt sich fort: Fünf zufällig ausgewählte Websites aus der Technologie-Branche – die zweite von rechts ist Apple. Durchschnittlicher gehts nimmer.

So ist es bei den meisten Websites. Es gibt vielleicht 5 % wirklich schlechte und 5 % sehr gute Websites, während 90 % aller Websites einfach durchschnittlich sind.

Doch die KI-Branche will uns weismachen, dass wir mit den richtigen Tools alles erreichen können – aus jedem Laien ein Profi wird. Jeden Monat wird ein neues Modell, ein neues Framework oder ein bahnbrechendes Update bereitgestellt, welches unsere Produktivität noch Mals steigern soll. Doch das Gegenteil ist der Fall.

Die Optimierung frisst sich selbst auf.

Wer bei dieser Geschwindigkeit immer Up-to-Date bleiben möchte, wird einfach keine Zeit haben, wirklich gute Lösungen zu finden.

Viele von uns verbringen mehr Zeit damit, immer wieder neue Tools auszuprobieren, uns in sie einzuarbeiten, Video-Tutorials anzuschauen sowie Newsletter, Posts und Artikel zu lesen, als tatsächlich produktiv zu arbeiten. Der Alltag bei vielen dieser «KI-Experten» sieht längst so aus: 50% Maintenance und 30% Administration, um in der verbleibenden 20% Zeit austauschbare, mittelmässige Lösungen zu produzieren.

Irgendwann werden wir erkennen, dass wir nicht das neueste Modell oder das beste Tool benötigen, um Grossartiges zu leisten. Es braucht viel häufiger die richtige Denkweise, eine Portion Leidenschaft und Energie – und vor allem Zeit. Allerdings wird uns diese systematisch genommen.

Die Hero-Area dieser Website ist ästhetisch, keine Frage. Doch laut WCAG Richtlinien ist diese nicht barrierefrei.

Als Designer, der sich für eine stärkere Inklusion einsetzt, hat mich das ein wenig verlegen und nachdenklich gemacht und mich dazu veranlasst, diesen Blogbeitrag zu schreiben. Darin möchte ich darauf eingehen, ob und wie stark uns Barrierefreiheit tatsächlich einschränkt und inwieweit barrierefreie Lösungen kreativ sein können.

Kreativität vs. Barrierefreiheit

In Gesprächen mit Menschen mit Behinderungen wurde mir schnell klar: Das Befolgen von Accessibility-Regeln macht noch keine gute barrierefreie Website. Das Problem ist eher, dass viele Designer:innen Barrierefreiheit vor allem als «Pflichterfüllung» und weniger als «Chance» für herausragendes Design betrachten. Das Ergebnis sind häufig eintönige User Interfaces, die weder Nutzer:innen mit noch ohne Behinderung wirklich begeistern. Dabei wünschen sich auch Menschen mit Behinderungen kreative Lösungen, Interaktion und spielerische Elemente – kurz: ein Erlebnis, das Spass macht.

Wahrnehmungsprinzipien und ihre Grenzen

Selbstverständlich stellt die Einhaltung essenzieller Wahrnehmungsprinzipien in Typografie, Komposition und visueller Hierarchie die Grundlage eines jeden guten Interface-Designs dar – ganz unabhängig davon, ob wir eine WCAG-Konformität anstreben oder nicht. Und ja, um eine möglichst hohe Barrierefreiheit zu erreichen, müssen wir weitere Kriterien beachten. Doch eines muss klar sein: Die korrekte Anwendung aller Richtlinien erstellt nicht automatisch eine gelungene barrierefreie Website, die ihre Nutzer begeistert.

Viel wichtiger ist es zu verstehen, was es bedeutet, motorisch behindert, blind oder gehörlos zu sein, und welche Hilfestellungen wirklich sinnvoll sind und welche nicht. Um dieses empathische Verständnis zu erlangen, sind Kontakte, Gespräche mit den eigentlichen Kernzielgruppen von Barrierefreiheits-Massnahmen, unabdingbar. Nur so können die tatsächlichen Bedürfnisse von Menschen mit Einschränkungen berücksichtigt werden. Tatsächlich werden Menschen mit Behinderungen aber kaum in Personas oder bei der Nutzerforschung berücksichtigt, wie meine Umfragen ergeben haben.

Ein Perspektivenwechsel ist nötig

Ich denke, um wirklich kreative und gleichzeitig barrierefreie Produkte zu konzipieren, müssen wir unsere häufig festgefahrenen Beurteilungskriterien und Denkweisen hinterfragen. Die Lösung liegt im sogenannten Reframing, einer wirkungsvollen Methode des Design Thinking. Beim «Reframing», im Deutschen “Neurahmung” oder “Umdeutung” wird ein Problem oder eine Sichtweise aus unterschiedlichen Perspektiven betrachtet. Es geht darum, den Rahmen, in dem eine Situation wahrgenommen wird, zu verändern, um eine neue und häufig viel positivere Sichtweise zu erlangen.

Statt zu fragen: Was dürfen wir nicht? fragen wir uns beim Reframing: Was können wir mit Hilfe der Barrierefreiheitsrichtlinien besser gestalten?

Welche innovativen Designs ergeben sich, wenn A11Y-Standards nicht als Problem, sondern als kreatives Feature – als Chance für neuartige, starke Designlösungen begreifen?

In dieser Hinsicht sollten wir einige unserer Denkweisen hinterfragen und gegebenenfalls einen Perspektivwechsel vollziehen.

Im Rahmen des Reframing-Prozesses können wir uns daher folgende Fragen stellen:

• Sehen wir Barrierefreiheit als Zusatz-Feature oder als integralen Bestandteil eines jeden Produkts an? Wie beeinflusst unsere Einstellung zu dieser Fragestellung unseren Ideenfindungs- und Kreationsprozess?
• Nehmen wir «Accessibility Constraints» als Chance wahr? Denn Beschränkungen sind häufig ein Katalysator für wirklich neuartige, unkonventionelle Lösungen (Vgl. https://hbr.org/2019/11/why-constraints-are-good-for-innovation).
• Verstehen wir, dass «Vereinfachung» in der Regel ein Qualitätsmerkmal und kein Verlust darstellt?
• Ist uns bewusst, dass nicht wir selbst die Nutzer sind und nicht unsere Bedürfnisse und Wünsche zählen, sondern die der Nutzer? Verstehen wir, dass ausschliesslich Empathie und Nutzerforschung (vor allem durch Einbeziehung von Randgruppen und extremen Nutzern) nutzerzentrierte und vielseitig einsetzbare Lösungen schaffen?
• Verstehen wir, dass Barrierefreiheit die grundsätzliche Usability eines jeden Produkts erhöht und auch Menschen ohne körperliche Behinderungen entgegenkommt, beispielsweise bei starken Umgebungsgeräuschen, Lichteinfall oder bei einer Nutzung in einem bewegten, mobilen Kontext?
• Ziehen wir die Möglichkeit in Betracht, barrierefreies Design als Branding-Merkmal einzusetzen? So könnten ein hoher Farbkontrast und die Verwendung von leichter Sprache als Elemente der Corporate Identity oder als Herausstellungsmerkmale eingesetzt werden.
• Möchten wir uns der Herausforderung der «Gamified Accessibility» stellen? Barrierefreiheit bedeutet nämlich nicht, Spassfreiheit oder nüchterne Sachlichkeit zu erzeugen. Menschen mit Behinderungen verstehen sehr wohl Spass, geniessen spielerische Elemente und möchten sehr gerne unterhalten werden.

Universal Design

Universal Design, ein Konzept, das von der North Carolina State University in den 1990er Jahren entwickelt wurde, basiert auf der Tatsache, dass Menschen sehr unterschiedlich sind und dass Design diese Heterogenität bestmöglich unterstützen sollte.

Die Universal Design Prinzipien sind weltweit anerkannt und bilden die Grundlage für viele kreative und inklusive Produkte. Hier ein kurzer Auszug aus den Prinzipien:

• Design sollte dazu beitragen, dass Dinge unterschiedlich genutzt werden können, auch anders als vorgesehen. Dabei sollten alle Elemente an die Vorlieben und Fähigkeiten ihrer Nutzer angepasst werden können. Auf diese Weise ermöglicht es eine personalisierte Nutzungserfahrung und eine hohe Barrierefreiheit.
• Design sollte Dinge möglichst verständlich und einfach bedienbar machen – unabhängig von der Erfahrung des Nutzers, seinem Wissen, seinen Sprach- oder seinen mentalen Fähigkeiten.

Meiner Meinung nach ist die Anwendung dieser Prinzipien viel wertvoller als die formale Befolgung der WCAG-Regeln. Letztere fokussieren sich extrem auf die Don’ts, aber weniger auf die Do’s. Aber genau die helfen uns, kreative Lösungen zu erarbeiten, die auch Aspekte wie den «Joy of Use» beinhalten.

Accessibility through Adaptability

Ein sehr wichtiger Aspekt, auf den die Universal-Design-Prinzipien besonders eingehen, ist die Anpassungsfähigkeit von Produkten. Anstatt eine einzige statische Lösung zu entwerfen, die auf möglichst viele unterschiedliche Bedürfnisse und Probleme eingeht und dabei in der Regel viele Kompromisse eingehen muss, wäre es meiner Meinung nach viel sinnvoller, ein flexibles Produkt zu entwickeln, das sich den individuellen Bedürfnissen und Problemen entsprechend anpassen lässt.

Im digitalen Bereich ist Adaptability sehr einfach zu realisieren, da hierfür Variablen eingesetzt werden können, die die gewählten Präferenzen persistent speichern. Leider wird diese Möglichkeit viel zu selten genutzt. Es ist sogar so, dass viele führende A11y-Mentoren ihr eher kritisch gegenüberstehen. Sie wünschen sich eine Lösung, die ohne vorherige Einstellungen auf möglichst alle Behinderungen eingeht.

Aus meiner Sicht ist das aber weder nutzerzentriert noch wird die Vielfalt möglicher Behinderungen berücksichtigt. Diese Forderung wirkt auf mich ziemlich tradiert und dogmatisch. Daher möchte ich allen, die sich noch nicht mit dem Aspekt einer adaptiven Barrierefreiheit beschäftigt haben, kurz erläutern, worum es bei dieser geht.

Accessibility bedeutet, dass Produkte und Dienstleistungen von möglichst allen Menschen genutzt werden können – ganz unabhängig von ihren körperlichen, sensorischen oder kognitiven Fähigkeiten.

Adaptability bedeutet, für Produkte oder Dienste Anpassungs- oder Änderungsmöglichkeiten anzubieten. Ein höhenverstellbares Lenkrad ist beispielsweise ein adaptives Element, da es sich an die individuelle Körpergrösse der Fahrer anpassen lässt. Auf diese Weise ermöglichet es eine optimale Nutzung.

Beide Begriffe hängen stark miteinander zusammen. Denn je adaptiver Produkte und Services sind, desto höher ist ihre Zugänglichkeit. Das liegt daran, dass sich durch eine hohe Anpassungsfähigkeit die mögliche Nutzbarkeit eines Produktes in Bezug auf die vielfältigen Bedürfnisse und Merkmale der Nutzer drastisch erhöht.

Heterogenität berücksichtigen oder «Es gibt keinen einzigen durchschnittlichen Benutzer»

Produkte die nur auf durchschnittliche oder «normale» Nutzer getrimmt sind, versagen in der Realität (Vgl. Einen durchschnittlichen Piloten gibt es nicht) und verschenken ein riesiges ökonomisches Potenzial (Vgl. Click-Away Studie, 2019)

Eine digitale Anwendung, deren Schriftgrösse oder Kontrastverhältnis sich individuell anpassen lässt, kommt nicht nur Menschen mit Sehbehinderung entgegen. Auch Menschen ohne Behinderung profitieren von adaptiver Accessibility, da sich der Nutzungskontext situativ ändern kann. Denn Geräusche, starker Lichteinfall oder Spiegelungen können uns alle bei der Nutzung digitaler Inhalte behindern.

Eine Website, bei der sich das Kontrastverhältnis oder das Sprachniveau per Knopfdruck ändern lässt, ist für viele, wenn nicht sogar für alle Menschen von Vorteil.

Adaptive Accessibility durch «User Preference Toggles»

Nicht jeder kennt alle medizinischen Fachwörter oder versteht juristisch verklausulierte Texte. Ich denke dabei an Menschen mit geringen Lesekompetenzen, ältere Menschen sowie Kinder und Jugendliche. Durch die Anpassung des Sprachniveaus, beispielsweise auf einem Online-Ratgeber für Medizin, können die Ziel- und Nutzergruppen um ein Vielfaches erweitert werden.

Technisch ist eine solche Lösung heutzutage nicht mehr sehr anspruchsvoll. Dennoch sieht man sie nicht allzu häufig. Woran liegt das wohl? Ich denke, es liegt zum Teil an fehlender Empathie und mangelndem Bewusstsein, aber auch an falsch verstandener Kreativität.

Preference-based Accessibility

Mit einem «präferenzbasiertem Design» können optimale Nutzererlebnisse für Menschen mit und ohne Behinderung ermöglicht werden, ohne dass wir unsere Kreativität einschränken müssen – ganz im Gegenteil.

Anstatt in Kategorien wie «barrierefrei» oder «kreativ» zu denken, sollten Designer:innen maximal nutzerzentriert für alle Menschen gestalten. Gute Barrierefreiheit schliesst daher eine kreative und ansprechende Gestaltung nicht aus, sondern fordert dazu auf, innovative Lösungen zu finden, die wirklich alle erreichen.

Assistive Technologien wie Screenreader oder Braille-Displays sind unbestritten essenziell und lassen sich auch nicht durch «Adaptive Accessibility» oder barrierefreies Design eliminieren. Aber je anpassungsfähiger wir unsere Produkte und Services von vornherein gestalten, desto weniger sind externe Hilfen nötig (Vgl. Application of universal design principles minimizes the need for assistive technology, 2022).

Wenn Barrierefreiheit durch die Anpassungsfähigkeit der verwendeten Systeme und nicht durch externe Hilfsmittel entsteht, fühlen sich alle besser. Zudem sparen wir dabei in der Regel auch Ressourcen.

Mögliche Anpassungen, die über eine Preference-based Accessibility vollzogen werden können

Mit User Preference Toggles integrierst Du feingranulare Schalter in Dein Interface, die auf unterschiedliche Nutzerbedürfnisse eingehen – wie zum Beispiel:

• Dark Mode: Spezielles Farbschema für die Nutzung in dunkler Umgebung
• High-Contrast-Mode: Aktivierung eines kontrastreichen Farbschemas, Typografie auf Bildern und Videos wird zusätzlich mit einer kontraststeigernden Farbfläche hinterlegt.
• Leichte Sprache: Umschaltung zu sprachlich vereinfachten Texten und Beschriftungen sowie einem einfacheren Layout und unverschnörkelten Schriften
• Einblendung von Transkripten: Blendet erweiterte Textinformationen bei auditiven oder audiovisuellen Medieninhalten ein
• Bilder mit geringerer Auflösung und starker Komprimierung: Davon können Nutzer mit langsamer Internetverbindung profitieren. Vor allem bei mobiler Nutzung oder bei Nutzung der Anwendung in sehr entlegenen Regionen kann dieses Feature die Nutzererfahrung deutlich steigern.

Was man nicht über «User Preference Toggles» steuern sollte

• Schriftgrössen: Das war früher sehr häufig zu sehen, ist heute jedoch völlig unnötig, da alle Browser diese Funktion von sich aus unterstützen.
• Grundsätzlicher Informationsgehalt sowie Aufbau und Reihenfolge von Elementen: Wenn man beispielsweise einen Link mit jemandem teilt, ist es wichtig, dass diese Person auch bei anderen Personalisierungseinstellungen die gleichen Inhalte wahrnimmt.
• Screenreader-Fähigkeit: Diese sollte immer gewährleistet bleiben und nicht abschaltbar sein.

Was spricht für eine Preference-based oder Adaptive Accessibility?

Mit «Adaptive Accessibility» kann jede:r die angebotenen Produkte so benutzen, wie er oder sie es am besten kann, ohne dass auf kreative oder anspruchsvolle Lösungen verzichtet werden muss. Folgende Vorteile ergeben sich:

• Feingranulare Kontrolle
  Nicht jede Person benötigt dieselben Hilfsmittel: Ein Screenreader hilft blinden Nutzern, während grosse Schrift Sehschwächen entgegenkommt. Adaptive Accessibility erlaubt, dass jede:r genau die Features aktiviert, die er oder sie wirklich braucht.
• Optimale Unterstützung von temporären oder situativen Behinderungen
  Auch «temporäre Behinderungen» zählen: eine laute Umgebung, starker Lichteinfall oder motorische Einschränkungen durch eine verletzte Hand. Adaptive Einstellungen lassen sich einschalten, genau dann, wenn man sie benötigt, aber beeinträchtigen keine Nutzer, die sie nicht benötigen.
• Inklusion ohne Segregation
  Wenn Nutzer:innen selbst entscheiden können, ob sie hochauflösende Bilder sehen, Texte in leichter Sprache lesen oder ein Design mit hohem Kontrast nutzen möchten, wirkt das Erlebnis persönlicher und komfortabler.
• WCAG-Verbundenheit
  Die WCAG selbst betont in der «Understanding Success Criterion 1.3.6», dass Personalisierung und Präferenzen Benutzer:innen mit unterschiedlichen Bedürfnissen helfen, sich passgenau zu orientieren und Symbole sowie Begriffe so zu laden, dass sie «vertraut» sind.

Was sollte man beachten, wenn man als Designer eine Adaptive oder Preference-based Accessibility anwenden möchte?

1. Selbstbestimmung gewährleisten
   Wir sollten uns davor hüten, bestimmte Inhalte oder Funktionen aufgrund von Personaliserungs-Einstellungen auszublenden. Assistive Hilfsmittel sind äußerst vielfältig. Von Vorlesefunktionen bis hin zur KI-Unterstützung ist dieser Bereich sehr breit aufgestellt. Wir können nicht exakt vorhersehen, wie Menschen mit Beeinträchtigungen Inhalte aufnehmen oder Funktionen bedienen. Daher sollten wir uns vor eigenmächtigen Entscheidungen hüten, die wie eine Bevormundung wirken könnten. Jeder Nutzer sollte möglichst selbstbestimmt entscheiden können, wie er ein Produkt oder einen Dienst benutzt.
2. Standards einhalten
   Assistive Technologien basieren auf Standards. Genau dafür sind die Richtlinien der WCAG da. Wenn wir diese als Rahmen für unsere Kreativität akzeptieren, gewährleisten wir, dass Screenreader und andere Tools ihre Arbeit korrekt ausführen können.
3. Stigmatisierung vermeiden
   Ich denke, es ist nicht zu viel verlangt, wenn Nutzer einen Klick auf einen Umschalt-Button tätigen müssen, um eine Website optimal nutzen zu können. Die Bedürfnisse aller Menschen sind zu vielfältig, als dass sie ohne Personalisierung optimal aufgefangen werden könnten. Der dadurch erreichte Nutzen für alle ist so hoch, dass wir dabei nicht von einem „Umweg” oder einer „Segregation” sprechen sollten. Allerdings sollten wir darauf achten, dass wir Menschen mit Behinderungen durch eine Layered oder Preference-based Accessibility nicht stigmatisieren. Ein möglichst hohes Mass an Barrierefreiheit sollte von Anfang an als Voreinstellung vorliegen. Und anstatt „Standard vs. A11y“ solltest Du im Interface einzelne funktionale Toggles anbieten (z.B. „Hoher Kontrast“, „Leichte Sprache“ usw.). So kann jeder Nutzer genau das auswählen, was er wirklich braucht, ohne sich „anders” oder „speziell” fühlen zu müssen.

Wie alle ein «maximales Erlebnis» bekommen!

• Design-Tokens für Varianten
  Definiere Farb-, Typografie- und Layout-Tokens so, dass sich mittels CSS-Variablen oder Theme-Switchern beliebige Stile (z. B. ein Dark-Mode oder ein High-Contrast-Thema) auf Knopfdruck ein- und ausschalten lassen.
• Accessibility first
  Leichte Sprache oder vereinfachte Labels lassen sich per Schalter einschalten. Aber noch besser ist es, wenn die Website standardmäßig in Leichter Sprache vorliegt und Zielgruppen, die komplexe Fachtermini bevorzugen, diese über einen Button aktivieren können. Platziere zudem die User-Preference-Toggles prominent im Header, möglichst am Anfang, sodass Screenreader-Nutzer sie umgehend auffinden.
• Alle Komponenten unterstützen verschiedene Nutzerrollen
  Ein komplexes Animations-Layer, das interaktive 3D-Kacheln für Maus-/Touch-User anbietet, sollte sich auch Screenreader-Nutzern erschließen lassen. Die Komponenten sollten sich automatisch über ARIA-Attribute und Nutzerpräferenzen an das Nutzungsverhalten oder die verwendeten Nutzeragenten anpassen.
• Inklusive Nutzerforschung betreiben
  Auf keinen Fall sollte man vergessen, Screenreader-Nutzer:innen zum Usability-Test einzuladen. Überhaupt sollte man frühzeitig Nutzer mit unterschiedlichen Behinderungen in die Nutzerforschung und das Testing integrieren, denn nur so kann man die Bedürfnisse dieser Nutzergruppe bestmöglich berücksichtigen.

Quellen und weitere Informationen

Why Constraints Are Good for Innovation:
https://hbr.org/2019/11/why-constraints-are-good-for-innovation

«Reframing» as creativity method:
https://www-infoq-com.translate.goog/articles/problem-reframing-method/
https://reframingstudio.com/reframing-method

Design less, but better:
https://www.nngroup.com/articles/aesthetic-minimalist-design/

https://pascaljb.medium.com/deconstructing-dieter-rams-ten-principles-for-good-design-8a09fd205ed9

How accessibility shapes digital product design:
https://uxdesign.cc/think-inside-the-box-how-accessibility-shapes-digital-product-design-f240f1bf8b41

Universal Design Principles:
https://universaldesign.ie/about-universal-design/the-7-principles
https://dac.berkeley.edu/services/campus-building-accessibility/universal-design-principles

Das klingt für einige eventuell ziemlich ungewöhnlich. Das liegt aber nur daran, dass sich viele von uns kaum Gedanken über die Wahrnehmungs- und Verarbeitungsprozesse machen, die ständig in uns ablaufen. Die wenigsten beschäftigt es, was in unserem Gehirn passiert, wenn wir beispielsweise eine neue Person kennenlernen, etwas lesen oder eine Website benutzen.

Die konstruierte Wirklichkeit

Zunächst einmal sollte man sich bewusst machen, dass nicht alle Informationen, die unsere Sinne aufnehmen, auch verarbeitet werden. Man schätzt dass wir etwa 11 Millionen Bits an Informationen pro Sekunde über unsere Sinne empfangen, jedoch können wir nur etwa 40 Bits an Informationen pro Sekunde verarbeiten*¹. Viele Informationen werden deswegen zunächst ein Mal «weggefiltert». Die Auswahl trifft unser Gehirn sehr schnell, ohne unser Bewusstsein mit einzubeziehen – man spricht hier von einer «präattentiven Verarbeitung».

Auch die verbleibenden Informationseinheiten, die für eine Weiterverarbeitung herangezogen werden, stehen uns nicht «bewusst» zur Verfügung. Sie werden erst Mal stark angepasst, bevor sie, angereichert mit Vorwissen und hypothetischen Annahmen, in unser Bewusstsein transportiert und dort weiterverarbeitet werden.

Was wir meinen objektiv wahrzunehmen, ist das Produkt eines hochkomplexen Verarbeitungsprozesses unseres Gehirns.

Ähnlich wie eine Anwendung wie ChatGPT uns eine recht einfache Benutzeroberfläche präsentiert, während im Hintergrund hochkomplexe Prozesse ablaufen, stellt uns das menschliche Bewusstsein eine „benutzerzentrierte Realität“ zur Verfügung, die für uns nur einen winzigen Bruchteil der Informationen darstellt, die uns umgeben, und nur ein kleines Abbild dessen ist, was unser Gehirn tatsächlich verarbeitet und speichert.

Zudem weist unser kognitiver Verarbeitungsprozess „bauartbedingt“ einige Besonderheiten auf. Das liegt unter anderem daran, dass unser Gehirn extrem flexibel sein muss, weil anscheinend niemand genau wusste, welche Fertigkeiten Menschen irgendwann benötigen würden. Unsere «Fähigkeit zu lesen» ist ein gutes Beispiel dafür – sie ist evolutionsgeschichtlich gesehen eine sehr junge Erfindung (siehe dazu auch meinen Blog-Beitrag: Was passiert in unserem Kopf wenn wir lesen). Dennoch ist unser Gehirn aufgrund seiner hohen Flexibilität in der Lage, nicht nur Lesen zu lernen, sondern auch andere, völlig ungewohnte Dinge. Es kann sich sogar umstrukturieren, um wiederkehrende Aufgaben schneller, effizienter und vor allem intuitiver zu erledigen. Diese erstaunliche Eigenschaft wird als «Neuroplastizität» bezeichnet.

Bei blinden Menschen werden z.B. Hirnareale, die eigentlich für die Verarbeitung visueller Reize zuständig sind, für andere Fähigkeiten freigegeben und eingesetzt. So haben blinde Menschen einen sensibleren Tast- und Hörsinn als Sehende. Ausserdem können sie gesprochene Sprache viel schneller verarbeiten. Wer einmal erlebt hat, wie ein Blinder einen Screenreader benutzt, weiss, wovon ich hier spreche.

Selektive Wahrnehmung und kognitive Verzerrungen

Aufgrund unserer begrenzten Verarbeitungskapazität in Bezug auf das Überangebot an Informationen muss unser Gehirn zwangsläufig viele Prozesse möglichst einfach und effizient erledigen. Dabei werden bekannte Lösungswege bevorzugt, komplexe Strukturen und Sachverhalte stark vereinfacht und gerne Abkürzungen bei der Problemlösung genommen.*²

Allerdings bringt dies in bestimmten Situationen auch Schwierigkeiten mit sich. Häufig kommt es zu so genannten Verzerrungen, d.h. zu Abweichungen zwischen dem objektiv zu erwartenden Ergebnis und dem Ergebnis unseres subjektiven Verarbeitungsprozesses.

Manche dieser Verzerrungen sind so allgegenwärtig, dass sich unsere normativen Erwartungen an diese Fehlinterpretationen angepasst haben. Dafür gibt es in der Wahrnehmungsforschung und in den Kognitionswissenschaften Hunderte von Beispielen, die durch zahlreiche Studien belegt sind.

Ich nenne hier nur zwei Beispiele. Für diejenigen, die sich für dieses Thema näher interessieren, habe ich am Ende dieses Beitrags etwas sehr interessantes.

1. Optische Mitte

Der Effekt der optischen Mitte beschreibt eine Verzerrung bei der Beurteilung von Objekten. Wenn wir gebeten werden, die exakte vertikale Mitte eines Objekts zu bestimmen, neigen wir fast alle dazu, diese etwa zwei bis drei Prozent höher zu definieren, als sie geometrisch oder mathematisch tatsächlich ist. Wir haben uns so sehr an diese Verzerrung gewöhnt, dass uns Positionierungen etwas oberhalb der geometrischen Mitte harmonischer und natürlicher erscheinen als die exakte geometrische Mitte, und wir bevorzugen sie.

Teilweise unbewusst, aber auch bewusst setzen wir die optische Mitte im Design oder in der Raumgestaltung ein. So werden Bilder in einem Rahmen oder Texte auf einer Buchseite meist vertikal höher positioniert als ihre geometrische Mitte. Auch liegen die Mittelstriche unserer Buchstaben alle in der optischen Mitte. Wären sie in der geometrischen Mitte, würden sie sich «falsch platziert» anfühlen – also auf uns unharmonisch wirken.

Die Ursachen für diese Verzerrung sind wissenschaftlich nicht hundertprozentig geklärt. Es gibt verschiedene Theorien – wahrscheinlich ist es eine Kombination aus dem Effizienzstreben unseres Gehirns und einer frühkindlichen Konditionierung.

Effizienzstreben

Wie schon angeführt, beruht das Effizienzstreben unseres Gehirns vor allem auf der Beschränkung unserer kognitiven Fähigkeiten. Aus diesem Grund ist für viele Probleme die optimale Lösung zu zeit- und ressourcenaufwändig. Zur Lösung dieser Probleme greift unsere Kognition daher auf vereinfachende Entscheidungsstrategien (sogenannte Heuristiken) oder bereits vorhandene Lösungswege und Ergebnisse zurück, um möglichst schnell zu einer guten, aber nicht zwangsläufig exakten oder optimalen Lösung zu gelangen. Dies ist auch bei der Beurteilung der Mitte von Objekten der Fall.

Konditionierung

Die Konditionierung beruht darauf, dass unser Gehirn von frühester Kindheit an viel mit der Interpretation von Meta-Informationen zu tun hat, die uns über Gesichtsausdrücke, also Mimik, vermittelt werden. In unserer zwischenmenschlichen Kommunikation ist es extrem wichtig, ad hoc zu erkennen, in welcher Stimmung sich unser Gegenüber befindet. Dabei spielt sich die Mimik fast ausschliesslich im unteren Gesichtsbereich ab – unser Fokus liegt also auf Mund, Nase, Augen – der obere Kopfbereich (Stirn, Haare) wird nur peripher wahrgenommen. Er wird quasi weggefiltert und tendenziell weniger beachtet. Dies führt zu einer Übergewichtung und Überschätzung der unteren Gesichtshälfte.

Der obere Teil des Kopfes, insbesondere der Haarbereich, wird von uns unterbewertet wahrgenommen, da sich die Mimik hauptsächlich in der unteren Kopfhälfte abspielt.

Die Übergewichtung oder Überhöhung des unteren Gesichtsbereiches ist so allgegenwärtig, dass wenn man Menschen (die keine professionellen Zeichner, Künstler oder Fotografen sind) bittet, ein Gesicht zu zeichnen, diese die Augen meist viel zu hoch ansetzen*³. Anatomisch gesehen liegen sie nämlich fast genau in der Mitte des Kopfes.

Die Abbildung zeigt eine Zeichnung eines Erwachsenen, der gebeten wurde, sich selbst zu zeichnen. Mehr als 95% der Personen, die keine zeichnerische Ausbildung erhalten haben, positionieren Augen viel zu hoch im Kopf.

Wie bereits erwähnt, ist die Interpretation von Gesichtern für uns so wichtig, dass das Prinzip der Überhöhung der unteren Gesichtshälfte quasi universell auch auf andere Bereiche übertragen wird. Der Fachbegriff dafür lautet «Selektive Verfügbarkeit». Er umschreibt die Tatsache, dass unser Gehirn bestimmte Ergebnisse und Vorgehensweisen, die wir häufig erfolgreich angewendet haben, leichter verfügbar macht. Als Implikation werden diese Muster oder Informationen in unseren kognitiven Prozessen häufiger angewendet, als uns manchmal lieb ist – auch bei Aufgaben oder Problemlösungen, die mit der ursprünglichen Aufgabe rein gar nichts zu tun haben. In diese Richtung geht auch unser zweites Beispiel:

2. Ankereffekt

Der Ankereffekt beschreibt die Tendenz von Menschen, sich bei Schätzungen oder Entscheidungen stark vom Kontext oder einer unmittelbar vorliegenden Information – dem sogenannten Anker – beeinflussen zu lassen, auch wenn dieser Anker mit der eigentlichen Fragestellung nichts zu tun hat.

In einer Studie von Tversky und Kahneman*⁴ wurden Versuchspersonen gebeten, ein Glücksrad zu drehen. Das Glücksrad gab ihnen eine Zahl zwischen 0 und 100. Anschliessend sollten die Probanden schätzen, wie viel Prozent der Mitglieder der Vereinten Nationen afrikanische Länder sind. Die Ergebnisse waren verblüffend, denn die zuvor durch das Drehen des Glücksrades erhaltenen Anker beeinflussten die Schätzwerte signifikant. Der Mittelwert aller Schätzungen lag bei 45%. Der Mittelwert der Schätzungen von Personen, die zuvor eine Zahl von 10 oder weniger am Glücksrad gedreht hatten, lag jedoch nur bei 25%.

Mit dem berühmten Anchoring-Experiment zeigten Tversky und Kahneman, wie Probanden von einer zufällig erscheinenden Zahl unbewusst beeinflusst werden, wenn sie anschliessend eine Schätzfrage beantworten müssen.

Wie kommt es zu dieser Verzerrung?

Die so genannte Ankeraufgabe (Drehen des Glücksrades und Erhalten einer zufälligen Zahl) aktiviert Gedächtnisinhalte, die zur Ankerzahl passen, und stellt diese für nachfolgende Aufgaben in leicht abrufbaren Bereichen unseres Gedächtnisses zur Verfügung. Die Informationen in diesen Arealen werden dann bevorzugt genutzt, selbst bei Aufgaben, die mit der ursprünglichen nichts zu tun haben.

Praktische Bedeutung

So kommt es, dass das, was wir erleben und zu wissen glauben, ein Produkt unserer Kognition und leider auch gezielt eingesetzter Täuschungen ist.

Allein dadurch, dass wir über die allgegenwärtigen Medien häufiger oder emotionaler über bestimmte Themen oder Behauptungen informiert werden, gewichten und bewerten wir diese anders als Themen, zu denen wir eher selten informiert werden. Dies kann dazu führen, dass wir bestimmte Risiken masslos überschätzen, nur weil Medien verstärkt darüber berichten.

So schätzt der überwiegende Teil der Menschheit das Risiko, von einem Hai angegriffen zu werden, wesentlich höher ein als das Risiko, von einer herabfallenden Kokosnuss erschlagen zu werden*⁵. Dabei ist die Wahrscheinlichkeit genau umgekehrt. Allerdings wird die Nachricht über einen Hai-Unfall von uns intensiver wahrgenommen und wahrscheinlich wird über Hai-Angriffe auch häufiger in den Medien berichtet als über Strandgäste, die von herabfallenden Kokosnüssen erschlagen werden.

Anker können in auch Verhandlungssituationen eine entscheidende Rolle spielen. So hängt beispielsweise die subjektive Einschätzung von Verlust oder Gewinn sehr stark vom ersten Angebot ab, das den weiteren Verhandlungsprozess massgeblich beeinflussen kann. So bieten Verkäufer und Online-Shops Produkte gerne zunächst teuer an, um sie dann deutlich zu reduzieren, so dass der Eindruck entsteht, der Preis sei nun extrem günstig.

Auch Experten sind nicht völlig frei vom Ankereffekt. Studien*⁶ belegen, dass Richter, Gutachter und Geschworene in der Vergangenheit dadurch massiv manipuliert wurden. In diesem Zusammenhang gibt es weitere Methoden, die teilweise bewusst oder unbewusst eingesetzt werden, um uns in die eine oder andere Richtung zu beeinflussen, wie z.B.

• Serieller Positionseffekt
• Default-Effekt
• Halo-Effekt

Diese Grundsätze müssen nicht zwangsläufig zu unserem Nachteil angewendet werden. Wenn sie richtig eingesetzt werden, können sie sogar einen entscheidenden Beitrag zu einer hohen Usability und User Experience leisten.

Viele UX/UI Designer, die wissen, dass unser Kurzzeitgedächtnis begrenzt ist oder dass sie Benutzer überfordern können, wenn sie ihnen zu viele Auswahlmöglichkeiten zur Verfügung stellen (Hick’sche Gesetz), können durch die Anwendung kognitiver Prinzipien die Usability, wenn nicht sogar die gesamte User Experience, deutlich verbessern. Es ist daher sehr wichtig, die dafür nötigen kognitiven Prinzipien zu kennen.

Aus diesem Grund habe ich in den letzten Monaten einen möglichst umfassenden Überblick über die kognitiven Grundsätze, die für eine gute User Experience eine grosse Rolle spielen, zusammengestellt und freue mich, diese hier vorstellen zu können:

cognitive-ux.com

Die Website umfasst derzeit die 72 wichtigsten kognitiven Prinzipien, die für eine User Experience eine Rolle spielen können. Es gibt eine Suchfunktion, eine Filteroption und die Möglichkeit, eine Favoritenliste anzulegen. Jede Woche werde ich auf meiner LinkedIn-Seite ein Gesetz oder Prinzip näher vorstellen, begleitet von konkreten Anwendungsbeispielen.

Quellenangaben:

*1: Tor Nørretranders (1998): The User Illusion: Cutting Consciousness Down to Size.
Das Verhältnis von 10 Millionen zu 40 Bit/s wurde von Tor Nørretranders ermittelt. Da die Erhebungsmethoden (z.B. das Aufsummieren der Wahrnehmungsmodalitäten und die Umrechnung ins “Bit/s”) mit zahlreichen Annahmen behaftet sind, sind die Werte als Richtwerte zu betrachten. Studien belegen jedoch, dass die bewusste Wahrnehmung nur einen Bruchteil der vom Gehirn empfangen Reize umfasst.

*2: Herbert A. Simon (1956): Rational choice and the structure of the environment, in: Psychological Review, S. 129–138; doi:10.1037/h0042769.
Herbert A. Simon legt dar, dass Menschen bei der Informationsverarbeitung durch unterschiedliche Faktoren in ihrer kognitiven Leistungsfähigkeit eingeschränkt sind. Zu diesen Faktoren zählen ungenügende Informationen, begrenzte Zeit, begrenzte Aufmerksamkeit und begrenzte kognitive Ressourcen. Menschen wählen daher nicht immer die optimalste, sondern angesichts dieser begrenzten Ressourcen in der Regel die erste akzeptable Lösung.

*3: Betty Edwards (1979): Drawing on the Right Side of the Brain. Los Angeles: J. P. Tarcher.
In diesem Standardwerk des Zeichenunterrichts wird erläutert, wie Anfänger beim Zeichnen eines Porträts bestimmte Gesichtsproportionen verzerrt wiedergeben. U.a. nennt Edwards das häufige Platzieren der Augen zu weit oben als typisches Schema, das aus unserer mentalen Vorstellung eines „Gesichts“ resultiert.

*4: Tversky, A. & Kahneman, D. (1974): Judgment under Uncertainty: Heuristics and Biases. Science, 185(4157), 1124–1131, https://www.science.org/doi/10.1126/science.185.4157.1124

*5: Dass wir das Risiko eines Haiangriffs überschätzen, liegt an der sogenannten Verfügbarkeitsheuristik (engl. Availability Heuristic). Dramatische und medienwirksame Gefahren (wie beispielsweise Haiattacken) prägen sich besser in unser Gedächtnis ein als alltäglichere Gefahren.

*6: Englich, B., Mussweiler, T., & Strack, F. (2006): Playing Dice With Criminal Sentences: The Influence of Irrelevant Anchors on Experts. Personality and Social Psychology Bulletin, 32(2), 188–200, https://doi.org/10.1177/0146167205282152

Weiterführende Informationen:

Alessandra Rodrigues Eismann (2023): Cognitive Bias im UX Research, https://www.centigrade.de/de/blog/cognitive-bias-im-ux-research-ein-survival-guide/

Charlotte Ruhl, Harvard Universit (2023): Cognitive Bias: How We Are Wired to Misjudge, https://www.simplypsychology.org/cognitive-bias.html

Das Buch geht ausführlich auf die Kriterien für gute Lesbarkeit ein und nennt zumindest «eine» gut lesbare Schrift (die «Thesis» Schriftfamilie), die leider nicht als Open Source verfügbar ist.

Im Buch wird auch mehrfach darauf hingewiesen, dass die «Arial» alles andere als gut lesbar ist. Ich denke, das ist vielen klar, aber wer sich für die Gründe im Detail und viele weitere aktuelle Informationen aus dem Bereich der Lesbarkeitsforschung interessiert, dem sei das Buch empfohlen. Wer lieber ein paar qualifizierte Aussagen dazu online haben möchte, nachfolgend drei wirklich hilfreiche Links:

• • https://www.capito.eu/studie-zu-textgestaltung/
  • https://zeilenhacker.de/grotesk/
  • https://leserlich.info/zeichen/schriftart

Und nun folgen ein paar Tipps für alle, die nicht erst Design oder Typografie studieren möchten, nur um eine gut lesbare Schrift für ihr Projekt zu finden.

Schriften für Bildschirme

Es gibt Schriften, die speziell für die Darstellung auf Bildschirmen entwickelt wurden, wie z.B. «Inter», «IBM Plex» oder «Merryweather», und solche, die sich besser für gedruckte Medien eignen, wie z.B. die «PT Serif».

Bei den bildschirmoptimierte Schriften handelt es sich in der Regel um sogenannte Sans-Serif-Schriften*¹ – obwohl die Annahme, dass sich diese Schriften besonders gut für die Bildschirmdarstellung eignen, etwas überholt ist. Aktuelle Studien zeigen, dass Serifenschriften in Lesegrössen auf dem Monitor teilweise besser lesbar sind; es kommt auf die genauen Umstände an (Farbigkeit, Vorder-/Hintergrund, Schriftschnitt, Schriftgrösse …).

Gut ausgebaute Schriftfamilien

Ein weiteres Qualitätskriterium bei der Auswahl kann die Sprachunterstützung sein – also wie viele Sprachen mit den vorhandenen Zeichen unterstützt werden. Dies kann vor allem für einen konsistenten internationalen Einsatz eine entscheidende Rolle spielen. Einige Schriften, wie z.B. die «Roboto» und die «Nunito», decken immerhin das lateinische, kyrillische und griechische Schriftsystem ab und beinhalten zudem viele diakritische Zeichen*³, so dass man damit in Europa und Amerika ganz gut zurechtkommt. Sobald man aber auch noch Arabisch, Hebräisch, Türkisch und die wichtigsten asiatischen Schriftsysteme mit einer einzigen Schrift abbilden möchte, wird es sehr dünn. Dann bleiben vor allem die Schriften der grossen Computer- und Betriebssystemhersteller, wie die «Arial» oder «Segoe» von Microsoft. Beide Schriften sind aber weder Open Source noch formal gute Schriften. Die «Plex» von IBM stellt da eine Ausnahme dar – sie ist Open-Source und zudem sehr gut lesbar. Formal ist sie auf jeden Fall sehr sorgfältig ausgearbeitet worden – auch wenn der sehr technisch anmutende Stil nicht jedermanns Sache ist.

• • https://www.ibm.com/plex/gallery/

Die meisten Sprachen und Zeichensysteme deckt aber derzeit die «Noto» ab. Sie ist ein Gemeinschaftsprojekt von Google und einer Reihe von Schriftenherstellern wie Adobe und Monotype. Mit über 77.000 Zeichen werden mehr als 1.000 Sprachen und über 150 Schriftsysteme unterstützt.

• • https://typogram.co/font-discovery/how-to-use-noto-sans-font
  • https://notofonts.github.io/noto-docs/website/homepage/

Die «Noto» verfügt zudem über sehr viele Schriftschnitte (= Schriftstile, wie z.B. kursive) und wirkt im Vergleich zu «IBM Plex» neutral, zurückhaltend, sachlich. Weitere Schriftfamilien mit vielen Schnitten sind die «Roboto», die «Inter» sowie die «Nunito».

Einige Schriftfamilien gibt es sowohl in einer «Sans Serif*¹» als auch als «Serif*² Version», was deren Anwendung sehr interessant macht. So ist es möglich, einen Fliesstext in der Serif und die Überschriften in der Sans Serif zu setzen (oder auch umgekehrt). Die Schriften sind in diesem Fall perfekt aufeinander abgestimmt. So entsteht ein abwechslungsreiches und doch harmonisches Schriftbild. Gut lesbare Open Source Schriften, die sowohl in einer Sans- als auch einer Serif-Version vorliegen, sind: «IBM Plex», «Merriweather», «Noto», «PT», «Roboto», «Source».

Inklusive Schriften

Es gibt auch einige wenige Schriften, die speziell für Menschen mit Leseschwierigkeiten oder Sehbehinderungen entwickelt wurden. Dabei wurden ästhetische Kompromisse zugunsten einer extrem hohen Erkennbarkeit der einzelnen Buchstaben gemacht. Die «Atkinson Hyperlegible» ist ein Beispiel für eine Schrift, die im Besonderem für stark sehbehinderte Menschen geeignet ist, und die «Lexend» für Menschen mit Leseschwierigkeiten.

• • Detaillierte Infos zur «Atkinson Hyperlegible»
  • Weitere Informationen zur «Lexend»

Die «Atkinson Hyperlegible» ist eine moderne, gut lesbare Schriftart, die speziell für Menschen mit Sehbehinderungen entwickelt wurde und sich daher ideal für barrierefreies Design eignet. Sie wurde vom Braille Institute in Zusammenarbeit mit Paratype entwickelt und ist als Open-Source-Font frei verfügbar.

 

Typografische Merkmale

• Strichstärke: Die Schrift hat eine relativ fette Strichstärke. Für Menschen mit extremer Sehbehinderung ist es wichtig, dass die Buchstabenformen nicht verschwimmen, wenn sie auf Monitoren oder auch in Büchern vom umgebenden Weiss überstrahlt werden.
• Eindeutige Buchstabenformen: Jeder Buchstabe ist so gestaltet, dass er sich deutlich von den anderen unterscheidet, um Verwechslungen zu vermeiden. So unterscheiden sich beispielsweise das „I“, das „l“ und die „1“ deutlich voneinander. Es wurden auch spiegelbildliche Buchstabenpaare berücksichtigt, wie z.B. das p und das q, die sich im Atkinson deutlich voneinander unterscheiden.
• X-Höhe: Eine erhöhte x-Höhe trägt zur besseren Lesbarkeit bei, insbesondere bei kleineren Schriftgrößen.

Der Unschärfeeffekt simuliert, wie Buchstaben für jemanden mit Sehbehinderung erscheinen können. Die «Atkinson» schlägt sich aufgrund ihrer besonderen formalen Merkmale gut.

Stilistische Empfehlungen

.

Mir persönlich gefällt die «Public Sans» sehr gut. Das ist die offizielle Schrift der US-Regierung. Sie ähnelt ein wenig einer Helvetica und hat etwas cooles Retro-mässiges an sich, jedoch ist sie viel lesbarer und in ihrer formalen Ästhetik zeitgemässer.

Wer eine neutrale Sans Serif sucht, die vor allem im digitalen Bereich gut lesbar ist, ist mit der «Roboto» oder der «Source Sans 3», die wirklich sehr offene Formen aufweist und sehr elegant wirkt, gut beraten. Bei der «Source Sans» steht dann auch die Serif Familie zur Ankoppelung zur Verfügung, was ihren Einsatz besonders interessant und wirkungsvoll macht.

Zum Abschluss nun in Listenform meine gesammelten Empfehlungen für gut lesbare Open-Source-Fonts. Diese Liste ist sicher nicht vollständig, aber eine gute Auswahl in Bezug auf Fremdsprachunterstützung, Zeichenvorrat und Anzahl der verfügbaren Schriftschnitte. Alle aufgeführten Schriften sind über Google Fonts kostenlos verfügbar.

Und nur am Rande: Ich weiss, wovon ich rede und schreibe. Ich habe «Visuelle Kommunikation» mit den Schwerpunkten Schriftdesign und Typografie studiert und selbst eine Reihe von Schriften (siehe hier) entwickelt. Bevor ich ins digitale Lager wechselte, habe ich mich zudem viele Jahre intensiv mit Mikro-Typografie und Lesbarkeitsforschung beschäftigt.

Jetzt, wo ich vor allem im Bereich «Inclusives Design» unterwegs bin, hat sich das Thema für mich neu geöffnet, da ich vor allem Schriften einsetzen möchte, die von Menschen mit Sehbehinderungen und kognitiven Einschränkungen gut verarbeitet werden können. Wer konkrete Fragen oder Hilfe diesbezüglich benötigt, kann mich jederzeit gerne kontaktieren.

Serif

(also Schriften mit Serifen)

• Noto Serif
• Source Serif 4
• PT Serif
• IBM Plex Serif
• Merriweather
• Lora
• Cardo

Sans Serif

(d.h. Schriften ohne Serifen)

• Noto Sans
• Open Sans
• Public Sans
• Nunito Sans
• Source Sans 3
• PT Sans
• Merriweather Sans
• IBM Plex Sans
• Fira
• Inter
• Lato (die Grundschrift meines Blogs, also der Fliesstext hier im Beitrag)
• Roboto
• Mulish
• Atkinson Hyperlegible
• Lexend

Glossar

*¹: Sans Serif Schriften sind Schriften ohne Serifen, d.h. ohne kleine Linien oder Verzierungen am Ende der Buchstaben. Das französische Wort „sans“ bedeutet „ohne“, „Sans Serif“ also „ohne Serifen“. Diese Schriften wirken modern, klar und technisch. Sie sind bekannt für ihr schnörkelloses und modernes Aussehen.

*²: Serifen-Schriften haben kleine Linien oder „Füße“ an den Buchstabenenden, die das Auge beim Lesen führen. Sie werden oft für gedruckte Texte bevorzugt, können aber auch im digitalen Bereich effektiv eingesetzt werden. Dabei sollte darauf geachtet werden, dass die Schriften nicht in extrem kleinen Grössen, z.B. 9px oder kleiner, verwendet werden, da dann die Auflösung des Monitors häufig nicht ausreicht, um die Serifen gut darzustellen, sie verklumpen oder brechen weg, was zu einem uneinheitlichen und kaputten Schriftbild führt. Wer kein Schrifteinsatz in diesen sehr kleinen Grössen plant, kann Serifen-Schriften bedenkenlos auch auf Monitore einsetzen. Als Leseschriften, insbesondere auch für die Zielgruppen der «Leichten Sprache», eignen sie sich besonders in Schriftgrössen von 16px und grösser.

*³: Diakritische Zeichen sind kleine Markierungen oder Symbole, die über, unter oder in einen Buchstaben gesetzt werden, um dessen Aussprache, Betonung oder Bedeutung zu verändern. Sie sind in vielen Schriftsystemen der Welt weit verbreitet und spielen eine wichtige Rolle bei der korrekten Darstellung von Texten in verschiedenen Sprachen. Beispiele sind die Cedille (ç) im Französischen, die Tilde (ñ) im Spanischen oder der Ring (å) im Schwedischen.

Gestaltungs- oder Design-Prinzipien gibt es schon sehr lange. Sie gehen auf die frühesten Kulturleistungen der Menschheit zurück und sind daher eng mit der Architektur, der Literatur und dem ihr zugrunde liegenden Schriftsystem verbunden. Schon damals erkannten die Menschen, dass gut durchdachte, plausible und einprägsame Formulierungen leicht zu merken sind.

Aus diesem Grund wurden im Laufe der Geschichte zahlreiche Manifeste und Regelwerke verfasst. So formulierte der chinesische Philosoph Konfuzius fünf Grundtugenden, die Harmonie und Ordnung in der Gesellschaft fördern. Auch taoistische Prinzipen wie das Konzept von Yin und Yang sowie der Wu-Wei-Ansatz betonen Ausgewogenheit und Natürlichkeit in der Gestaltung von Dingen und in der persönlichen Lebensführung.

Yin und Yang: Das Gleichgewicht der Gegensätze

Yin und Yang*¹ repräsentieren die dualen Kräfte, die das Universum und alle seine Phänomene durchdringen. Yin steht für das Weiche, Passive, Dunkle und Weibliche, während Yang das Harte, Aktive, Helle und Männliche symbolisiert. Im Designkontext bedeutet dies, dass ein ausgewogenes Zusammenspiel dieser Gegensätze zu harmonischen und funktionalen Ergebnissen führt.

Wu-Wei: Das Prinzip des Nicht-Handelns

Wu-Wei*², oft übersetzt als «Nicht-Handeln» oder «Handeln durch Nicht-Handeln», ist ein weiteres zentrales Prinzip des Taoismus. Es bedeutet, im Einklang mit der natürlichen Ordnung zu handeln, ohne zwanghaft einzugreifen oder Widerstand zu leisten. Im Design bedeutet dies, dass Lösungen intuitiv und im Einklang mit den natürlichen Abläufen der Nutzer entwickelt werden sollten.

Diese und viele andere Regelwerke gaben ihren Nutzern Orientierung und förderten ein einheitliches Verständnis von Ästhetik, Funktionalität und ethischen Standards, was die Entwicklung zahlreicher Stilrichtungen begünstigte. Noch heute lassen sich die ästhetischen Stile der verschiedenen Epochen gut erkennen – von der Antike, die stark von den griechischen Denkschulen beeinflusst war, über das Mittelalter und die Renaissance bis hin zu unserer industriellen Revolution, die mit ihrem technologischen Fortschritt einen völlig neuen Blick auf die Welt und ihre Dinge mit sich brachte.

Vitruvianische Prinzipien

Einer der bekanntesten frühen Architektur-Theoretiker war Marcus Vitruvius Pollio, ein römischer Architekt aus dem 1. Jahrhundert v. Chr. Er verfasste das Werk «De Architectura», das als eines der einflussreichsten Architekturlehrbücher der Welt gilt und bis in die Neuzeit hinein wirkt.

Darin formulierte er die folgenden drei grundlegenden Konstruktionsprinzipien, die seitdem als «Vitruvianische Prinzipien»*³ bekannt sind:

1. Firmitas (Festigkeit)
   Ein Bauwerk muss stabil und langlebig sein. Die Struktur muss den physischen Anforderungen und Belastungen standhalten.
2. Utilitas (Nützlichkeit)
   Ein Bauwerk muss funktional sein und den Bedürfnissen seiner Nutzer gerecht werden.
3. Venustas (Schönheit)
   Ein Bauwerk soll ästhetisch ansprechend sein und ein angenehmes Erscheinungsbild aufweisen.

Er wird daher von vielen als der Erfinder der so populären Uxer Experinece angesehen, auch wenn diese damals aus seiner Sicht vollständig gebäudebezogen war. Auf jeden Fall war er der erste, der die Berücksichtigung der «Nutzerbedürfnisse» als einen zentralen Gestaltungsparameter ansah.

Diese «Trias» hat Eingang in viele andere Modelle gefunden und bildete die Grundlage vieler Designprinzipien.

Griechische Philosophen

Neben den römischen Einflüssen spielten auch griechische Philosophen eine zentrale Rolle bei der Entwicklung ästhetischer Prinzipien.*⁴

Platon, ein Schüler von Sokrates und Lehrer von Aristoteles, diskutierte in seinen Dialogen die Natur der Schönheit und der idealen Formen. Er glaubte an die Existenz perfekter, unveränderlicher Formen (Ideale), die als Massstab für die Realität dienen. Platon betonte die Bedeutung von Harmonie und Proportion in der Kunst und Architektur, um ästhetische Vollkommenheit zu erreichen.

Aristoteles, ein Schüler Platons, entwickelte eine systematischere Theorie der Ästhetik und der Kunst. Er führte das Konzept der Mimesis (Nachahmung) ein, wobei Kunst die Realität nachahmen soll, jedoch auf eine Weise, die zur Erkenntnis und zum Genuss beiträgt. Zudem postulierte Aristoteles die Katharsis, durch die Kunst Emotionen reinigen und das seelische Gleichgewicht wiederherstellen kann. Ähnlich wie Platon betonte auch Aristoteles die Bedeutung von Proportion, Rhytmus, Spannung und Mass für ästhetisch ansprechende Werke.

Die frühen Designprinzipien aus der Antike, insbesondere die von Vitruv und den griechischen Philosophen legten den Grundstein für ein tiefes Verständnis von Ästhetik und Funktionalität. Ihre Konzepte sind nach wie vor zentrale Elemente in allen Designdisziplinen, von der Architektur über das Grafikdesign bis hin zum UX/UI-Design.

Designprinzipien der Gegenwart

Gestaltpsychologie (Gestalttheorie)

Die Gestaltpsychologie*⁵, entwickelt in den frühen 20. Jahrhunderten von Psychologen wie Max Wertheimer, Wolfgang Köhler und Kurt Koffka, hatte tiefgreifenden Einfluss auf das Design, insbesondere im Bereich der visuellen Wahrnehmung und des Grafikdesigns.

Die Prinzipien der Gestalttheorie erklären, wie Menschen ihre Umwelt wahrnehmen und interpretieren. Die Motivation unseres Gehirns ist bei vielen dieser Phänomene sehr ähnlich: Es versucht automatisch und effizient, Muster und versteckte Formen zu erkennen, damit wir sie wahrnehmen können. Dabei ergänzt unsere kognitive Verarbeitung fehlende Elemente oder zerlegt komplexe Formen in einfachere. Auf diese Weise können wir unsere visuelle Umwelt besser «verstehen» und sie uns besser einprägen.

Die wichtigsten Gestaltgesetze:

Unterscheidung in Figur und Grund

Die Unterscheidung von Vorder- und Hintergrund ist für die Wahrnehmung und Interpretation unserer Umwelt unerlässlich. Unser Gehirn verfügt dazu über eine Reihe von Strategien.

Gesetz der Nähe
Elemente, die nah beieinander liegen, werden als zusammengehörig wahrgenommen. Dies hilft dabei, Informationen zu gruppieren und Strukturen zu erkennen.

Gesetz der Ähnlichkeit
Ähnliche Elemente, sei es in Farbe, Form oder Grösse, werden als zusammengehörig empfunden. Dies erleichtert die Identifikation und das Verständnis von Mustern.

Gesetz der Verbundenheit und der gemeinsamen Region
Verbundene Elemente oder Elemente in abgegrenzten oder umschlossenen Gebieten werden als zusammengehörig empfunden.

Hier eine visuelle Demonstration des «Gesetzes der Geschlossenheit». Es demonstriert, dass unser kognitiver Wahrnehmungsprozess aus einer Reihe von vorhandenen Informationen automatisch eine nicht sichtbare Figur erzeugt.

Die Gestaltprinzipien sind unverzichtbare Werkzeuge im modernen Design, da sie das Verständnis dafür fördern, wie Nutzer visuelle Informationen verarbeiten. Durch die Anwendung dieser Prinzipien können Designer intuitive und ansprechende Benutzeroberflächen erstellen.

Beispielsweise ermöglicht eine klare Gruppierung von Elementen eine effizientere Navigation und eine bessere Informationsaufnahme. Darüber hinaus tragen diese Prinzipien dazu bei, visuelle Hierarchien zu verstehen, bestimmte Inhalte zu priorisieren und den Nutzer zielgerichtet durch das Design zu führen.

Das Bauhaus

Das 1919 von Walter Gropius in Weimar gegründete Bauhaus war eine der einflussreichsten Designbewegungen des 20 Jahrhunderts. Das Bauhaus vereinte Kunst, Handwerk und Technologie und legte den Grundstein für unser modernes Design. Ziel war es, eine neue Formensprache zu entwickeln, die sowohl ästhetisch ansprechend als auch funktional und massenproduzierbar sein sollte. Unter der Leitung von Gropius und späteren Direktoren wie Ludwig Mies van der Rohe beeinflusste das Bauhaus weltweit zahlreiche Designer, Architekten und Künstler.

Grundlegende Gestaltungs-Prinzipien des Bauhauses*⁶

1. Form folgt Funktion
   Die Gestaltung eines Objekts sollte seiner beabsichtigten Funktion dienen. Dies bedeutet, dass die Ästhetik eines Designs aus dessen praktischer Anwendung abgeleitet wird und nicht umgekehrt.
2. Einfachheit und geometrisches Konstruktionsprinzip
   Reduktion auf das Wesentliche und Vermeidung unnötiger Verzierungen. Designs sollten klar, übersichtlich und frei von überflüssigen Elementen sein. Geometrische Grundformen dienen als Bausteine.
3. Integration von Kunst, Handwerk und Technik
   Verbindung von ästhetischen und technischen Aspekten, um funktionale und zugleich schön gestaltete Produkte zu schaffen.
4. Innovationsfreudigkeit und ständige Weiterentwicklung
   Beim Bauhaus war man überzeugt, dass der technologische Fortschritt weitergeht und keinen Stillstand zulässt. Auf immer neue Anforderungen müssen stets neue Antworten gefunden werden.
5. Authentizität
   Die verwendeten Materialien sollten als solche erkennbar sein, um die wahre Natur der Objekte und Gebäude widerzuspiegeln.
6. Wiederverwendbarkeit und intelligente Nutzung von Ressourcen
   Die Bauhaus-Ideologie war von ökonomischem Denken geprägt. Sie wollte, dass massenproduzierte Gegenstände eine möglichst hohe Qualität aufweisen – bei einer möglichst ressourcenschonenden Herstellung. «Modularität» wurde als wichtiges Gestaltungsprinzip eingesetzt, um möglichst ökonomisch entwerfen und produzieren zu können.

Dieter Rams: 10 Thesen für gutes Design

Dieter Rams, ein einflussreicher Designer, formulierte Anfang der 1970er Jahre 10 Thesen für gutes Design*⁷. Diese 10 Prinzipien sind weltweit anerkannt und dienen Designern in verschiedenen Disziplinen als Leitfaden.

1.  Innovativ
   Gutes Design nutzt technologische Fortschritte und neue Materialien.
2. Nützlich
   Design dient einem Zweck und erfüllt die Bedürfnisse der Nutzer.
3. Ästhetisch
   Ästhetik ist ein integraler Bestandteil des Designs.
4. Verständlich
   Ein gutes Design erklärt sich selbst.
5. Unaufdringlich
   Gutes Design drängt sich nicht auf und stellt sich nicht als Selbstzweck dar.
6. Ehrlich
   Gutes Design bleibt der «Wahrheit des Produkts» treu und vermeidet Übertreibungen oder Täuschungen.
7. Langlebig
   Gutes Design übersteht kurzfristige Trends und Moden und bleibt über lange Zeit relevant.
8. Konsequent bis ins Detail
   Jedes Detail ist wichtig und trägt zum Design bei.
9. Umweltfreundlich
   Gutes Design berücksichtigt ökologische Aspekte.
10. Weniger, aber besser
    Reduktion auf das Wesentliche und Fokus auf Qualität.

AIGA Design Principles

Die AIGA Design Principles sind eine Sammlung von Richtlinien und ethischen Standards, die vom «American Institute of Graphic Arts» (AIGA), einem der ältesten und renommiertesten Berufsverbände für Grafikdesigner weltweit, entwickelt wurden. Diese Prinzipien dienen als Orientierungshilfe für Designer, um qualitativ hochwertige, ethisch verantwortungsvolle und wirkungsvolle Arbeiten zu schaffen.

Die AIGA Design Principles*⁸ wurden erstmals in den späten 1980er Jahren veröffentlicht und seitdem regelmäßig aktualisiert und erweitert, um den Fortschritten in Technologie, Gesellschaft und Designpraxis Rechnung zu tragen.

1. Klare Kommunikation
   Design sollte dazu dienen, Informationen klar und verständlich zu vermitteln. Die Botschaft muss präzise und unmissverständlich sein.
2. Funktionalität
   Design muss funktional sein und den praktischen Bedürfnissen der Nutzer entsprechen. Ästhetik sollte die Funktionalität unterstützen, nicht behindern.
3. Ästhetik
   Ästhetik ist ein wesentlicher Bestandteil des Designs. Ein ansprechendes Design zieht die Aufmerksamkeit auf sich und verbessert die Benutzererfahrung.
4. Innovation
   Designer sollten bestrebt sein, kreative und innovative Lösungen zu entwickeln, die über konventionelle Ansätze hinausgehen.
5. Nachhaltigkeit
   Design sollte umweltbewusst sein und nachhaltige Praktiken fördern. Materialien und Prozesse sollten so gewählt werden, dass sie die Umweltbelastung minimieren.
6. Inklusivität
   Design sollte für eine breite Zielgruppe zugänglich sein, unabhängig von Alter, Geschlecht, kulturellem Hintergrund oder physischen Fähigkeiten.
7. Ethik und Verantwortung
   Designer tragen eine Verantwortung gegenüber der Gesellschaft und sollten ethische Überlegungen in ihren Arbeitsprozess integrieren.
8. Zusammenarbeit
   Effektives Design entsteht durch Zusammenarbeit und den Austausch von Ideen zwischen verschiedenen Disziplinen und Stakeholdern.
9. Kontinuität und Konsistenz
   Design sollte konsistent und langlebig sein, um Wiedererkennbarkeit und Vertrauen bei den Nutzern aufzubauen.
10. Benutzerzentrierung
    Designprozesse sollten den Nutzer in den Mittelpunkt stellen und auf dessen Bedürfnisse und Erfahrungen abgestimmt sein.

Die Universal Design Prinzipien

Universal Design ist ein Konzept, das in den 1980er und 1990er Jahren entwickelt wurde, um Inklusivität und Zugänglichkeit in Designprozessen zu fördern. Das Center for Universal Design an der «North Carolina State University» spielte eine zentrale Rolle bei der Formulierung dieser Prinzipien. Das Team unter der Leitung von Ron Mace, einem Pionier auf diesem Gebiet, arbeitete interdisziplinär mit Architekten, Designern, Ingenieuren und anderen Fachleuten zusammen, um Richtlinien zu entwickeln, die eine breite Nutzerbasis ansprechen.

Hier die sieben Prinzipien*⁹:

1. Für alle nutzbar
   Das Konzept des Universellen Designs basiert auf der Tatsache, dass Menschen unterschiedliche Fähigkeiten haben und dass Design diese Heterogenität so gut wie möglich unterstützen sollte.
2. Flexibel im Gebrauch
   Design sollte dazu beitragen, dass Dinge ganz unterschiedlich genutzt werden können und möglichst alle Elemente an die Vorlieben und Fähigkeiten ihrer Nutzer angepasst werden können. Auf diese Weise ermöglicht es eine personalisierte Nutzungserfahrung.
3. Einfache und intuitive Nutzung
   Design sollte Dinge möglichst verständlich und einfach bedienbar machen – unabhängig von der Erfahrung des Nutzers, seinem Wissen, seinen Sprachfähigkeiten oder seinen mentalen Fähigkeiten.
4. Effektive Informationswahrnehmung
   Ein Design sollte relevante Informationen effektiv an die Nutzer übermitteln, unabhängig von ihren Sinnesfähigkeiten.
5. Fehlertolerant
   Ein Design sollte Risiken und negative Konsequenzen von unbeabsichtigten Handlungen oder Fehlern minimieren und das einfache Korrigieren von Fehlern ermöglichen.
6. Geringer körperlicher Aufwand
   Design sollte dabei unterstützen, dass Aufgaben ergonomsich und mit minimalem körperlichem Aufwand erledigt werden können. Es sollte dazu beitragen, dass Nutzer über längere Zeiträume bequem und ermüdungsfrei arbeiten können.
7. Freiraum für Zugang und Nutzung
   Design sollte ausreichend Freiräume und Pufferzonen für eine möglichst vielfältige Nutzung miteinbeziehen, unabhängig von der körperlichen oder motorischen Fähigkeiten der Nutzer.

10 Usability-Heuristiken für das User Interface Design von Jakob Nielsen

Jakob Nielsen, ein renommierter Usability-Experte veröffentlichte im Jahr 1994 zehn Usability-Heuristiken*¹⁰, welche als Richtlinien für die Gestaltung benutzerfreundlicher Benutzeroberflächen dienen sollten. Mittlerweile sind sie zu einem ein Standard im Bereich des User Experience Design geworden und werden weltweit von Designern und Entwicklern zur Bewertung und Verbesserung von User Interfaces eingesetzt.

Die 10 Usability-Heuristiken:

1. Sichtbarkeit des Systemstatus
   Das System sollte den Nutzern stets Rückmeldung über seinen aktuellen Status geben. Nutzer sollten immer wissen wo sie sich gerade im System befinden.
2. Übereinstimmung zwischen System und realer Welt
   Das System sollte die Sprache und Konzepte der Nutzer verwenden und möglichst Dinge aus der realen Welt zum Vorbild nehmen, um die Verständlichkeit zu erhöhen.
3. Kontrolle und Freiheit
   Nutzer sollten die Möglichkeit haben, Aktionen zu unterbrechen, bei Bedarf fortzusetzen, rückgängig zu machen oder diese einfach zu wiederholen.
4. Konsistenz und Standards
   Das Design und alle funktionalen Begriffe sollte konsistent angewendet werden. Dem Nutzer bekannte Konventionen sollten einhalten werden, um die Lernkurve zu reduzieren.
5. Fehlervermeidung
   Das Design sollte so gestaltet sein, dass Fehler vermieden werden.
6. Erkennen statt Erinnern
   Die Benutzer sollten möglichst viele relevante Informationen vorliegen haben, um sich nicht unnötig an Sachverahlte erinnern zu müssen.
7. Flexibilität und Effizienz
   Das System sollte sowohl Anfängern als auch erfahrenen Nutzern gleichermassen gerecht werden und effiziente Arbeitsabläufe ermöglichen.
8. Ästhetisches und minimalistisches Design
   Das Design sollte einfach und übersichtlich sein. Dekoratives sollte nicht ablenken oder störend wirken.
9. Unterstützung bei Fehlern
   Fehlermeldungen sollten klar und verständlich sein und konkrete Hinweise zur Fehlerbehebung bieten.
10. Hilfe und Dokumentation
    Auch wenn das System möglichst intuitiv bedienbar sein sollte, sollte es dennoch leicht zugängliche Hinweise und Dokumentationen anbieten.

Die 7 Interaktionsprinzipien der ISO Norm 9241-110

Die ISO 9241-110 wurde 2018 von der «Internationalen Organisation für Normung» herausgegeben und stellt ein Teil der umfangreichen ISO 9241 Normenreihe dar, die sich mit der Ergonomie der Mensch-System-Interaktion befasst.

Die dort veröffentlichten Interaktionsprinzipien*¹¹ bieten Designern und Entwicklern umfassende Leitlinien für die Entwicklung benutzerfreundlicher digitaler Systeme. Sie sollen eine nutzerzentrierte Designphilosophie fördern, die darauf abzielt, die Interaktion zwischen Mensch und System so angenehm und effizient wie möglich zu gestalten.

1. Aufgabenangemessenheit
   Das System sollte den Anforderungen und Zielen der Nutzer entsprechen und sie bei der Erreichung ihrer Aufgaben unterstützen.
2. Selbstbeschreibungsfähigkeit
   Das System liefert dem Nnutzer jederzeit die Informationen, die er braucht, um das System zu verstehen und es richtig zu bedienen.
3. Erwartungskonformität
   Das System sollte weitgehend den Erwartungen der Nutzenden entsprechen. Es ist in sich konsistent. Veränderungen im Status sind nachvollziehbar.
4. Erlernbarkeit
   Das System sollte einfach und intuitiv zu bedienen sein und die Nutzenden dabei unterstützen, sich schnell einzuarbeiten.
5. Steuerbarkeit
   Die Nutzenden sollen die volle Kontrolle über das System haben. Sie können entscheiden, wie schnell sie vorgehen oder ob sie eine Pause einlegen wollen. Wenn möglich, sollten Einstellungen und Zwischenergebnisse gespeichert und wieder aufgerufen werden können..
6. Robustheit gegen Benutzerfehler
   Das System sollte so gestaltet sein, dass Fehler vermieden werden. Falls Benutzer Fehler machen, sollten sie leicht korrigiert werden können.
7. Benutzer(ein)bindung
   Die Nutzung sollte so motivierend und einladend wie möglich sein. Die Nutzer sollten die Möglichkeit haben, Feedback zu geben oder mit den Verantwortlichen in Kontakt zu treten.

Resümee

Grundsätzlich gibt es nur zwei Bereiche, die die Arbeit eines Designers bestimmen und aus denen er seine Gestaltungsprinzipien ableitet:

A) Seine «Berufung»

Damit meine ich den eigenen Anspruch, etwas zu schaffen, das die eigenen Prinzipien und die eigene Haltung widerspiegelt. Viele erfüllt es, etwas Schönes oder Zeitloses zu schaffen und damit Menschen zu begeistern oder einen Beitrag zur Integration und besseren Verständigung zu leisten. Dabei spielen folgende Überlegungen eine wesentliche Rolle:

• • Ästhetik
  • Nachhaltigkeit
  • Inklusion

B) Seine «Beauftragung»

Design verfolgt immer einen Zweck und ist in die Realität eingebettet. Design möchte erfolgreich sein und muss daher kreative Antworten auf ungelöste Herausforderungen finden. Dabei unterliegt es allzu oft vielen Einschränkungen, die nie unreflektiert hingenommen, sondern stets hinterfragt werden sollten. Ein guter Designer muss daher über fundierte Kenntnisse in den folgenden Bereichen verfügen:

• • Wahrnehmung: Kognitionswissenschaften und Psychologie
  • Usability & Kommunikation: Ergonomie, Kommunikationswissenschaften und Nutzerforschung
  • Ökonomie und Technologie: Design Thinking, Kenntnisse der verfügbaren Assets, Ressourcen und Technologien

Aus den zentralen Anforderungen von A und B ergeben sich letztlich die spezifischen Anforderungen. Aus diesem Grund gibt es nicht einen allgemeingültigen Kriterienkatalog für gutes Design, sondern wahrscheinlich unendlich viele. Jedoch trägt ein Verständnis möglichst vieler Prinzipien dazu bei, die passenden für jedes Projekt zu identifizieren und anzuwenden.

Abschliessend eine tabellarische Übersicht der in meinem Beitrag genannten Modelle hinsichtlich ihrer Anforderungen und Aussagen.

Übersicht über allgemein anerkannte Design- und UI-Prinzipien

Quellen und weiterführende Informationen

*1: Yin und Yang
https://de.wikipedia.org/wiki/Yin_und_Yang

*2: Wu Wei
https://de.wikipedia.org/wiki/Wu_wei
https://www.chinadesigncentre.com/works/interview-with-wu-wei-thrudesign-sustainable-furniture-design-express-beauty-of-chinese-living.html

*3: Vitruvianische Prinzipien
https://la.wikisource.org/wiki/De_architectura
https://www.smashingmagazine.com/2020/06/vitruvius-web-design/

*4: Überlegungen zur Ästhetik von Platon und Aristoteles
Platon: Diskussionen über Schönheit und Ideale
Aristoteles: Poetik, Metaphysik – Theorien zur Ästhetik und Kunst
The Classical Language of Architecture, John Summerson – Ein Überblick über die klassischen Ordnungen und ihre Prinzipien

*5: Gestaltgesetze
https://de.wikipedia.org/wiki/Gestaltpsychologie
https://www.e-teaching.org/didaktik/gestaltung/visualisierung/gestaltgesetze
https://pmc.ncbi.nlm.nih.gov/articles/PMC3482144/
https://www.oeagp.at/cms/uploads/pdf/literatur/ueber_gestalttheorie_Max_Wertheimer_1924.pdf

*6: Bauhaus Manifest und Gestaltungsprinzipien
https://www.bauhaus-bookshelf.org/
https://art.art/de/blog/10-bauhaus-principles-still-apply-today

*7: Dieter Rams: Zehn Thesen für gutes Design
Gleichnamiges Buch, Hrsg.: Cees W. de Jong. Prestel Verlag, München 2017, ISBN 978-3-7913-8365-1
EN: https://www.braun-audio.com/en-GLOBAL/10principles
DE: https://www.braun-audio.com/de-DE/10principles
https://bigfive.it/en/how-dieter-rams-shaped-the-design-of-apple-and-other-brands/

*8: AIGIA Design Principles – https://www.aiga.org

*9: Universal Design Principles
https://universaldesign.ie/about-universal-design/the-7-principles
https://dac.berkeley.edu/services/campus-building-accessibility/universal-design-principles

*10: Nielsen, Jakob – 10 Usability Heuristics for User Interface Design
https://www.nngroup.com/articles/ten-usability-heuristics/

*11: Interaktionsprinzipien der ISO Norm 9241-110
https://de.wikipedia.org/wiki/ISO_9241#ISO_9241-110_Interaktionsprinzipien
https://www.soultank.ch/blog/die-7-interaktionsprinzipien-der-iso-norm-9241-110

Das Lesen ist – evolutionär gesehen – eine sehr junge Erfindung

Erst seit etwa 5-6000 Jahren kann die Menschheit lesen und schreiben. Das ist ein winziger Bruchteil ihrer Gesamtentwicklung. Und erst seit etwa 200 Jahren kann man in den Industrieländern von einer flächendeckenden Alphabetisierung sprechen.

Das bedeutet, dass unser Gehirn im Laufe der Evolution keine besonderen Eigenschaften für das Lesen erworben hat. Wie andere moderne Kulturleistungen, die uns nicht in die Wiege gelegt wurden, müssen wir das Lesen mühsam erlernen.

Beim Lesenlernen wird daher unser Gehirn «buchstäblich» auf den Kopf gestellt. Es muss seine visuellen Verarbeitungssysteme grundlegend umprogrammieren, damit es nicht nur im Alltag, sondern auch in einer Buchstabenwelt zurechtfindet. *¹ Diese Fähigkeit des Gehirns wird auch als Neuroplastizität bezeichnet.

Insbesondere der fusiforme Gyrus (auch «Visual Word Form Area», kurz: VWFA) spezialisiert sich beim Lesenlernen auf das effiziente Dekodieren von Zeichen und Wörtern.

Beim Betrachten eines Wortes wird die Sehrinde, auch visueller Kortex (2) genannt, aktiviert, indem elektrische Signale über den Sehnerv dorthin geleitet werden. Dort wird eine «neuronale Repräsentation» des visuellen Bildes des Wortes erzeugt. Im zweiten Schritt gelangen diese Informationseinheiten in den VWFA (3), wo durch eine komplexe Mustererkennung Schriftzeichen erkannt werden. Diese werden im Wernicke- und Broca-Areal (4) mit Lautinformationen verknüpft und zu Bedeutungsträgern verarbeitet. Erst dann erfolgt die Zuordnung von Bedeutungsinhalten, an der eine ganze Reihe von Hirnarealen beteiligt sind. Dieser Prozess läuft im normalen Gehirn automatisch innerhalb von 200 – 300 ms ab. *²

Lesen ist kein trivialer Prozess. Er kann er durch viele innere und auch äussere Umstände stark beeinträchtigt werden. Wie der kürzlich veröffentlichte Bericht der OECD zeigt, haben auch heute etwa 20 % der Erwachsenen in den Industrieländern erhebliche Leseschwierigkeiten. *³

Die folgende Grafik verdeutlicht die hohe Komplexität.

Kognitive Prozesse beim Lesen – Einblicke in die Funktionsweise unseres Gehirns

Der Leseprozess läuft in mehreren Phasen ab und beansprucht fast alle Bereiche unseres Gehirns. Das flüssige Lesen eines längeren Textes erfordert daher unsere volle Aufmerksamkeit.

Die analogen Reize unseres Auges werden zunächst in elektrische Signale und diese wiederum in verarbeitbare Informationseinheiten umgewandelt. (Phase 1 und 2 im Diagramm)

Diese werden dann mit bekannten Informationen aus dem Langzeitgedächtnis verglichen und mit anderen Wörtern und Sätzen im Text verknüpft. Dabei müssen verschiedene Wortbedeutungen und grammatikalische Regeln berücksichtigt werden (entspricht den Phasen 3 bis 6).

Beeindruckend ist die Verarbeitungsgeschwindigkeit unseres Gehirns. Bei geübten Lesern dauert der komplette Durchlauf dieser sechs Phasen nicht länger als 200-300 ms, wobei sie sich ständig wiederholen und überlappen. Nur so ist flüssiges Lesen möglich.

Ein geübter Leser kann auf diese Weise ca. 400 Wörter pro Minute lesen, d.h. er verarbeitet ca. sechs Wörter in einer Sekunde. Dies ist nur möglich, weil unser Gehirn Konzepte entwickelt hat, die es ihm ermöglichen, Muster und Wörter effizient zu identifizieren, siehe nachfolgende Abbildung:

Unser Gehirn versucht, seine Aufgaben stets mit maximaler Effizienz zu erledigen und seine kognitiven Ressourcen so wenig wie möglich zu belasten. Der hier veranschaulichte «Seriale Positionseffekt» spielt nicht nur bei der effizienten Worterkennung, sondern auch beim effizienten Abspeichern von Informationen in unserem Gedächtnis eine wesentliche Rolle. *⁹

Wir lesen also nicht einzelne Buchstaben …

… sondern in der Regel möglichst ganze Wörter oder zumindest 3-4 Buchstaben gleichzeitig. Dabei springen wir in sogenannten «Sakkaden» von einer «Fixation» zur nächsten, was etwa einem kognitiven Verarbeitungszyklus entspricht (200-300 ms).

Hier ist eine Simulation eines Eyetrackings (Aufnahme des Fokuspunktes des Auges), die zeigt, wie sich der Fokus des Auges beim Lesen eines Textes bewegt. Die Kreise markieren die scharf gesehenen Bereiche während jeder Fixation, die gestrichelten Linien stellen die Sakkaden dar – schnelle Augenbewegungen zwischen den Fixationen – und die durchgezogenen Linien kennzeichnen Regressionen, also Rückbewegungen des Auges zu vorherigen Textstellen. Wenn das Gehirn ganz Wörter erkennt, sind die Sprünge weiter, falls nicht, umfassen sie etwa eien Silbe (3–4 Buchstaben).

Unser Auge nimmt aber jeweils einen grösseren Bereich wahr als diese 3-12 Buchstaben. Diesen Bereiche nennt man «Periphere Region» und er umfasst ungefähr das vorangehende Wort, die nächsten 5–6 Wörter sowie die nächste Zeile. Dieser visuelle Kontext wird zwar nicht bewusst «gelesen», aber hilft dem Gehirn, sich auf die nächste Fixation vorzubereiten. Untersuchungen belegen zudem, dass das Gehirn in diesen Bereich zum Teil Wörter wahrnimmt, welche es zur «Kontextualisierung» miteinbezieht. *⁴

Das während einer Fixation wahrgenommene Feld kann in drei Bereiche geteilt werden: in eine kleine «foveale» Region von etwa 1 Grad Radius um den Fixationspunkt, einen «parafovealen» Bereich bis zu 5 Grad und eine darüber hinausgehende «Periphere Region». In jeder dieser drei Regionen können wir unterschiedlich scharf sehen. Am schärfsten sehen wir in der Fovea. Dort erkennen wir 4-7 Buchstaben. Je weiter wir uns von der Fovea entfernen, desto unschärfer wird das Bild. Dennoch verarbeitet das Gehirn auch Informatioen, die in der Peripherie liegen. Es nimmt wahr, vor sich das Zeilenende und ggf. auch der Anfang der nächsten Zeile befindet und kann darüber die Sakkaden zielgerecht steuern.

Treten bei der Verarbeitung Schwierigkeiten auf (die vielfältiger Natur sein können), springt das Auge zurück und wiederholt die Erfassung der vorherigen Zeichen, man spricht von einer «Regression».

Unbekannte Wörter lesen wir uns automatisch still vor (phonologische Schleife*⁵), um sie besser zu verstehen. Zudem werden ähnliche Wörter aus dem Langzeitgedächtnis hinzugezogen, um die Bedeutung kombinatorisch zu erschliessen. Dabei bezieht unser Gehirn den gesamten vorhandenen Kontext des Textes (Thema, Intention, bereits erfasste Informationen) mit ein, um die wahrscheinlichste Bedeutung zu konstruieren. Dies geschieht teils unbewusst, teils bewusst.

Die beim Lesen gewonnenen Informationen (Bedeutungen, Zusammenhänge, Assoziationen) werden in unserem Kurzzeitgedächtnis gesammelt und parallel dazu zu Sätzen und Gedanken verarbeitet, die anderen Hirn-Arealen zur Verfügung stehen und dort weiterverarbeitet werden (Phase 7 im Diagramm).

Letztendlich wird eine «Synthese» davon in unserem Gedächtnis gespeichert, je nachdem, wie wichtig das Gehirn diese Informationen für uns einschätzt. (siehe Phase 8 im Diagramm)

Deshalb erinnern wir uns in der Regel nicht Wort für Wort an das, was wir gelesen haben. Nur sehr wenige Menschen (z.B. Menschen mit einem fotografischen Gedächtnis) oder unser Kurzzeitgedächtnis können dies – aber nur für etwa 20 bis 40 Sekunden, dann verschwinden die dort gespeicherten Informationen.

Interessant ist die Tatsache, dass Schriftzeichen im Gehirn in der Regel mit phonologischen Informationen verknüpft oder sogar phonetisch übersetzt werden, bevor ihnen eine Bedeutung zugewiesen wird – im Gegensatz zu Symbolen oder Bildern, denen direkt Bedeutungen zugeschrieben werden.

Diesen Umstand macht sich auch die Werbung zunutze, wenn sie uns suggestiv Assoziationen vermitteln möchte. In diesem Fall werden Bilder bevorzugt eingesetzt, da sie weniger verarbeitet werden müssen und daher kaum kritisch hinterfragt werden. Bei der Rezeption eines Bildes sind wesentlich weniger Hirnareale beteiligt als beim Lesen.

Untersuchungen zeigen, dass wir bei exakt gleicher Aussage eine Textinformation wesentlich kritischer als eine Bildinformation gegenüberstehen.*⁶ Eine Ausnahme bilden Wörter, die eher als «Zeichen» wahrgenommen werden, wie z.B. PEACE oder LOVE. Aus diesem Grund sind viele Slogans sehr kurz, so wie beispielsweise der von McDonald’s: «Ich liebe es» Diese kurzen, eingängigen Codes schaffen es, «unverarbeitet» in uns einzudringen und damit suggestiv zu wirken. *⁷

Es ist zwar möglich, Wörter auch ohne phonologische Information zu verarbeiten, z.B. beim Lesen einer Abkürzung oder eines fremdsprachigen Textes, dessen Aussprache man nicht kennt, aber diese Verarbeitung ist wesentlich fehleranfälliger und kognitiv anstrengender.

Daher macht es beim Lesen eines Textes, den man auch aussprechen kann, keinen grossen Unterschied, ob man schreibt: „Ich maistere die Aufgabe“ oder „Ich meistere die Aufgabe“, da man sich selbst innerlich zuhört und Rechtschreibfehler automatisch korrigiert.

Die Schlüsselrolle des Kurzzeitgedächtnisses

Menschen mit kognitiven Lese-Beeinträchtigungen weisen sehr häufig eine verminderte Kapazität des Kurzzeitgedächtnisses auf – sei es aufgrund einer langsameren Verarbeitungsgeschwindigkeit, einer kürzeren Gedächtnisspanne oder einer geringeren Speicherkapazität. *⁸

Aber auch eine Ablenkungen, sensorische Störungen oder eine langsame Lesegeschwindigkeit aufgrund mangelnder Sprachkenntnisse oder geringer Lesekompetenz führen dazu, dass die verfügbaren kognitiven Ressourcen, insbesondere das Arbeitsgedächtnis, nicht optimal genutzt werden können. Dies führt zu einer eingeschränkten Leseleistung, häufig zu einem verminderten Textverständnis sowie zu Ermüdungserscheinungen.

Das menschliche Kurzzeitgedächtnis funktioniert ähnlich wie der Arbeitsspeicher eines Computers: Daten, die verarbeitet werden sollen, werden geladen, verknüpft, verglichen, gefiltert, bewertet, um schliesslich dauerhaft gespeichert oder verworfen zu werden.

Dabei hat das menschliche Kurzzeitgedächtnis keine scharfe Grenze oder exakte Bitzahl. Vielmehr gibt es ein zentrales Verarbeitungszentrum und nach aussen hin einen auslaufenden Bereich, welcher immer unschärfer bzw. unspezifischer wird.

Man kann sich das wie einen Tisch mit Karten vorstellen, auf welchem in der Mitte die relevanten Karten liegen, umgeben von einem Bereich mit vielen weiteren Karten, die bei Bedarf hinzugezogen werden können. Ständig treffen neue Karten ein und werden mit den auf den Tisch liegenden verglichen, wobei nicht relevante Karten zur Seite geschoben oder ganz vom Tisch entfernt werden.

Beim Lesevorgang geht man davon aus, dass ein geübter Leser etwa sieben Informationseinheiten (siehe auch: «Millersche Zahl») bildlich gesprochen in der Mitte seines «Spielfeldes» liegen hat, die er mit Dutzenden weiteren aus seinem kontextualen Kurzzeitgedächtnis oder unzähligen aus dem Langzeitgedächtnis (also dem bereits Gelernten) in Beziehung setzen kann.

Diese Informationseinheiten dürfen wir uns aber nicht nur als blosse Buchstaben oder Zeichen vorstellen, sondern als komplexe, vielschichtige Informationseinheiten, in denen auch Beziehungen zu anderen Informationseinheiten, also komplexe Assoziationen, mitgespeichert sind. Alle Relationen werden ständig auf ihre «Bedeutungsrelevanz» hin untersucht und entsprechend priorisiert, angepasst oder verworfen.

Folglich ist es nicht überraschend, dass der biologische Textverarbeitungsprozess als Grundlage für die Entwicklung maschineller neuronaler Netze diente. Die Funktionsweise dieser Netze ist ähnlich wie die ihrer biologischen Vorbilder. Bei Betrachtung der Konzepte der in unseren Sprach-KIs verwendeten Transformer-Modelle wird ersichtlich, dass auch diese Modelle den vor- und nachliegenden Kontext eines Wortes berücksichtigen und alle sich daraus ergebenden Zusammenhänge in einer mehrdimensionalen Matrix speichern, deren Relevanz durch das Netzwerk ständig neu gewichtet wird. *⁹

Wie Design die kognitive Verarbeitung positiv beeinflusst

Die kognitive Verarbeitung visueller Informationen beruht auf dem Erkennen von Strukturen und Mustern und deren korrekter Interpretation. Da es bei dieser konplexen Verarbeitung zu Störungen oder Fehlinterpretationen kommen kann, die fatale Folgen haben können, ist eine Auseinandersetzung mit den Grundlagen dieses Wahrnehmungsprozesses gerade für Designer sehr sinnvoll.

So spielt auch bei der Rezeption der meisten visuellen Kulturgüter das Design, also das Aussehen der Dinge, eine zentrale Rolle. Es beeinflusst massgeblich, wie unser Gehirn visuelle Informationen wahrnimmt und verarbeitet.

Ein Beispiel: Wir Menschen – aber auch viele Tiere – sind in der Lage, die Anzahl von Objekten intuitiv zu erkennen, ohne sie explizit zählen zu müssen. Man spricht hier von «Subitizing»*¹⁰

Beim Subitizing (deutsch: Simultanerfassung) spielt die Anordnung, d.h. die visuelle Form eine grosse Rolle. Bei einer eher ungeordneten Anordnung liegt die Subitizing-Grenze bei etwa vier Objekten, bei geordneten (z.B. bündig/symmetrischen) ungelernten Strukturen bei etwa 9 und bei geordneten, bekannten Strukturen in Einzelfällen sogar bei 16. Das «Design» der Objekte steigert die kognitive Aufnahmekapzität in diesem Fall um ein Mehrfaches. Diese Tatsache kommt uns bei der Erkennung von Schriftzeichen sehr zugute.

Die meisten Menschen erkennen auf Anhieb, dass es sich bei der rechten Anordnung um 9 Objekte handelt. Sie müssen dabei nicht zählen. Bei der linken Anordnung sind es nur 8 Objekte. Jedoch müssen die meisten Menschen hier «zählen». Dieses Beispiel zeigt eindrücklich die Wirkung der Gestaltung auf den Wahrnehmungsprozess.

Die kognitive Verarbeitung visueller Informationen, die sich weitgehend evolutionär entwickelt hat, folgt zahlreichen wahrnehmungspsychologischen und neurobiologischen Prinzipien. Diese Fähigkeiten ermöglichen es uns, komplexe visuelle Szenarien sehr schnell zu erfassen und daraus Bedeutungen abzuleiten. In der Vergangenheit war dies vor allem wichtig, um Gefahren zu erkennen und ihnen auszuweichen. Heute tragen diese Fähigkeiten weiterhin zur schnellen Informationsverarbeitung bei – sei es beim Autofahren, in der Arbeitswelt oder bei der Navigation durch digitale Benutzeroberflächen.

Kognitionswissenschaftler haben in den letzten Jahrhunderten zahlreiche Phänomene und Gesetze entdeckt, die unsere Wahrnehmung, Kommunikation sowie unser Denken und Urteilen stark beeinflussen. Dazu gehören, wie oben bereits erwähnt, die «Millersche Zahl», der «Serieller Positionseffekt»*¹¹, die Gestaltgesetze*¹², aber auch eine Reihe von kognitiven Verzerrungen, wie die Ebbinghaus Täuschung:

Welcher der beiden orangen Kreise ist grösser? Erstaunlicherweise sind die beiden orangen Kreise gleich gross! Siehe diesbezüglich: Wikipedia

Für UX/UI-Designer ist es essenziell, diese Wahrnehmungsprinzipien zu berücksichtigen, um Interfaces zu gestalten, die intuitiv nutzbar sind und die kognitiven Ressourcen der Nutzer effizient nutzen.

Auf die kognitiven Verzerrungen werde ich in einem späteren Blogeintrag noch näher eingehen. Im Folgenden möchte ich mich vor allem auf die Faktoren konzentrieren, die den Leseprozess unterstützen. In der nachfolgenden Grafik wird deutlich, dass verschiedene Faktoren an unterschiedlichen Stellen des komplexen Verarbeitungsprozesses wirken.

Die visuellen Bedingungen, der Wahrnehmungskontext sowie die Beschaffenheit der Zeichen haben einen grossen Einfluss auf die Verarbeitung. Optimale Bedingungen erleichtern den Prozess und tragen zum Verständnisaufbau bei.

Optimale Typographie für bessere Lesbarkeit

Für das Erkennen von Zeichen und Wörtern spielt vor allem die Mikrotypografie, also das Aussehen und der Abstand der Buchstaben, eine grosse Rolle. Dies ist für eine flüssige Rezeption sehr wichtig, damit das Auge den Text ungestört scannen kann und das Gehirn keine unnötigen Kapazitäten für die Steuerung des Auges benötigt.

Schriftzeichen müssen vor allem deutliche Unterscheidungsmerkmale aufweisen, um intuitiv und automatisch erkannt zu werden. Leider gibt es viele Schriften mit grossen Mängeln, siehe nachfolgende Abbildung:

Gerade der obere Teil der Buchstaben hilft Lesern, ganze Wörter «simultan» zu dekodieren – solange keine Grossbuchstaben oder keine ungeeigneten Schriften verwendet wurden.

Satzausrichtungen wie Blocksatz (mit unterschiedlich grossen Abständen zwischen den Wörtern) oder mittelaxialer bzw. rechtsbündiger Satz (bei dem das Auge bei jedem Zeilensprung die neue horizontale Position des Zeilenanfangs suchen muss) erschweren den Leseprozess erheblich.

Auch die Verwendung von GROSSBUCHSTABEN verlangsamt die Verarbeitungsgeschwindigkeit. Bei sehr langen Passagen um mehr als das Doppelte, da Grossbuchstaben aufgrund ihrer zweizeiligen Struktur (Kleinbuchstaben haben eine vierzeilige Struktur) zu homogen sind und der kognitiven Mustererkennung zu wenig Unterscheidungsmerkmale bieten. Siehe dazu die folgende Abbildung.

Aufgrund fehlender Unterscheidungsmerkmale (gleiches Formprinzip, gleiche Höhe) müssen Sätze in Grossbuchstaben praktisch buchstabiert werden. Pro Fixation können nur ca. 2-3 Grossbuchstaben erkannt werden. Eine Ganzworterkennung ist praktisch nur bei Abkürzungen wie z.B. ARD, DFB möglich. Beim Lesen von Wörtern in gemischter Schreibweise (d.h. Klein- und Grossbuchstaben) ist unser Gehirn dagegen in der Lage, fast alle bekannten Wörter in einer «Ganzworterkennung» zu erfassen.

Beim Lesen von Grossbuchstaben benötigen wir viel mehr Fixationspunkte als beim Lesen von Kleinbuchstaben. Daher ist das Lesen von VERSAL-Sätzen (ja so heissen die) für die meisten Menschen in unserer reizüberfluteten Welt zu anstrengend. Einzelne Wörter (max. drei) als Label oder Kategoriebezeichnung sind in Ordnung, aber bitte niemals mehrzeilig setzen!

Damit Texte gut lesbar sind, müssen daher Fragen wie diese optimal beantwortet werden:

• Sind die Zeilenanfänge bündig und sind die Abstände zwischen Buchstaben, Wörtern und Zeilen optimal und einheitlich?
• Sind die Zeilen nicht zu lang, damit das Auge leicht zur nächsten Zeile springen kann?
• Stören Bilder, die in den Text integriert sind, den Lesefluss?
• Wird eine Schrift verwendet, deren Buchstaben genügend visuelle Unterscheidungsmerkmale aufweisen?

Inklusive Gestaltung unter Berücksichtigung kognitiver Prozesse

Im Sinne einer inklusiven Barrierefreiheit ist die Beachtung dieser wahrnehmungspsychologischen Prinzipien äusserst wichtig, da Menschen mit kognitiven Beeinträchtigungen wesentlich empfindlicher auf visuelle Störungen reagieren als Personen mit durchschnittlichen kognitiven Fähigkeiten.

Typografische Mängel, die auf die Nichtbeachtung der oben genannten Grundsätze zurückzuführen sind, führen bei Zielgruppen mit geringer Lesekompetenz sehr schnell zu einem unzureichenden Textverständnis oder sogar zu einem vollständigen Leseabbruch. Eine gute Website mit Hilfestellungen für alle, die sich mit Typografie nicht so gut auskennen, bietet vor allem diese preisgekrönte Website: leserlich.info, die vom Deutschen Sehbehindertenverband getragen wird. Sie demonstriert mit vielen guten Beispielen, wie eine möglichst barrierefreie Typografie aussieht.

Die kognitive Verarbeitung wird zudem durch gut strukturierte und kurze Sätze erleichtert.*¹³ Wie bereits erwähnt, müssen wir jeden Satz möglichst vollständig im Arbeitsgedächtnis speichern, um seine Bedeutung zu verstehen. Je länger Sätze sind, desto stärker wird das Kurzzeitgedächtnis beansprucht. Texte mit sehr langen Sätzen können daher selbst sehr gute Leser überfordern und ermüden. Bei Menschen mit kognitiven Beeinträchtigungen oder geringer Lesekompetenz führen sie häufig zum völligen Verständnisverlust, da die Gedächtnisspanne nicht ausreicht, um alle notwendigen Informationen zwischenzuspeichern. Am Satzende stehen die Informationen vom Satzanfang nicht mehr zur Verfügung!

Wer mit seinen Inhalten auch diese Menschen erreichen möchte, sollte möglichst darauf achten, Gedanken und Schlussfolgerungen nicht in Nebensätzen zu verschachteln, sondern wenn immer möglich in einfachen Hauptsätzen zu schreiben.

Wer mehr zu diesem Thema erfahren möchte, dem empfehle ich meinen Blogbeitrag: Leichte und einfache Sprache.

Quellenangaben:

*1 – Neuroplastizität beim Lesenlernen

• Huettig, F., Kolinsky, R., & Lachmann, T. (2018). The culturally co-opted brain: How literacy affects the human mind. Language, Cognition and Neuroscience. https://www.mpi.nl/news/culture-shapes-brain-how-reading-changes-way-we-think

*2 – Kognitive Prozesse zur Zeichenerkennung beim Lesen

• Visueller Cortex, https://flexikon.doccheck.com/de/Visueller_Cortex
• Reading Reshapes Stimulus Selectivity in the Visual Word Form Area, Vassiki S. Chauhan, Krystal C. McCook, Alex L. White, eNeuro 12 July 2024, 11 (7) ENEURO.0228-24.2024; DOI: 10.1523/ENEURO.0228-24.2024 (https://www.eneuro.org/content/11/7/ENEURO.0228-24.2024)
• Binder, J. R., Frost, J. A., Parmar, M. K., Desai, R. H., & Conant, L. L. (2009). Where is the semantic system? A critical review and meta-analysis of 120 functional neuroimaging studies. *Cerebral Cortex, 19*(12), 2767-2796. [DOI: 10.1093/cercor/bhp060] (https://doi.org/10.1093/cercor/bhp060)
• Dehaene, S., & Cohen, L. (2011). The unique role of the visual word form area in reading. *Trends in Cognitive Sciences, 15*(6), 254-262. [DOI: 10.1016/j.tics.2011.04.003] (https://doi.org/10.1016/j.tics.2011.04.003)
• Siok, W. T., Tan, S. W., Lee, H. C., Perfetti, C. A., & Tan, C. L. (2009). The left fusiform gyrus: a cortical hub for visual word recognition. *Neuropsychologia, 47*(8), 1654-1663. [DOI: 10.1016/j.neuropsychologia.2009.01.019] (https://doi.org/10.1016/j.neuropsychologia.2009.01.019)

*3 – 20% der Erwachsenen in den Industrieländern haben erhebliche Leseschwächen

• https://www.zdf.de/nachrichten/panorama/pisa-studie-lesen-rechnen-erwachsene-100.html
• https://www.derstandard.at/story/3000000248672/29-prozent-der-erwachsenen-in-214sterreich-haben-probleme-beim-lesen
• OECD Stuide, 10.12.2024 – https://www.oecd.org/en/publications/survey-of-adult-skills-2023_3639d1e2-en.html

*4 – Blickbewegungen beim Lesen, die periphere Region wird zur Kontextualisierung benutzt

• Rayner, K. (1998). Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124(3), 372–422. [DOI: 10.1037/0033-2909.124.3.372] (https://pubmed.ncbi.nlm.nih.gov/9849112/)
• Radach, R., & Liversedge, S. P. (2009). Dynamic integration of foveal and parafoveal processing during reading. Eye Movement Research, 12(2), 66–81. (https://www.allgemeinepsychologie.uni-wuppertal.de/fileadmin/psychologie/allgemeinepsychologie/Artikel/Artikel_Radach/Redach_Kennedy_Reading_Review_QJEP_2013.pdf)
• https://www.researchgate.net/publication/51759936_Parafoveal_processing_in_reading
• https://psycnet.apa.org/record/2006-01956-002
• https://link.springer.com/article/10.3758/PBR.17.6.834
• https://pubmed.ncbi.nlm.nih.gov/10605397/

*5 – Phonologische Schleife

• Baddeley, A. D., & Hitch, G. J. (1974). Working Memory. In G. A. Bower (Ed.), The Psychology of Learning and Motivation (Vol. 8, pp. 47-89). Academic Press.
• Gathercole, S. E., & Baddeley, A. D. (1993). Working memory and language. Psychology Press.

*6 – Die tiefere kognitive Verarbeitung von Texten führt dazu, dass sie kritischer bewertet werden als Bilder, die eher peripher verarbeitet werden

• Paivio, A. (1986). Mental Representations: A Dual Coding Approach. Oxford University Press.
• Petty, R. E., & Cacioppo, J. T. (1986). The elaboration likelihood model of persuasion. Advances in Experimental Social Psychology, 19, 123-205.
• Liu, Y., & Shrum, L. J. (2002). What is interactivity and is it always such a good thing? Implications of definition, person, and situation for the influence of interactivity on advertising effectiveness. Journal of Advertising, 31(4), 53-64.

*7 – Ikonische oder semiotische Wortwahrnehmung

• Keller, K.L. (1993) Conceptualizing, Measuring, and Managing Customer-Based Brand Equity. Journal of Marketing, 57, 1-22. http://dx.doi.org/10.2307/1252054
• Fog, K., Budtz, C., & Yakaboylu, B. (2005). Storytelling: Branding in Practice.
https://books.google.ch/books/about/Storytelling.html?id=ZGT6nATg8_YC&redir_esc=y
• Chandler, D. (2007). Semiotics: The Basics. Routledge, https://www.routledge.com/Semiotics-The-Basics/Chandler/p/book/9780367726539?srsltid=AfmBOorhfwdYkZ4NssGepv-tGLC8qjSFUKyt16D4cFR53oIiRvtENzrf

*8 – Kurzzeitgedächtnis, Verarbeitungsgeschwindgkeit und Gedächtnispanne

• https://dorsch.hogrefe.com/stichwort/arbeitsgedaechtnis
• https://www.cognifit.com/at/wissenschaft/kognitive-fahigkeiten/verarbeitungsgeschwindigkeit
• https://www.pschyrembel.de/Ged%C3%A4chtnisspanne/P02LP/doc

*9 – Parallelen zwischen künstlichen neuronalen Netzen und der neuronalen Verarbeitung im menschlichen Gehirn

• Sejnowski, T. J. (2018). The Deep Learning Revolution. MIT Press.
• Yamins, D. L. K., & DiCarlo, J. J. (2016). Using goal-driven deep learning models to understand sensory cortex. Nature Neuroscience, 19(3), 356-365.
• Vaswani, A., Shazeer, N., Parmar, N., Uszkoreit, J., Jones, L., Gomez, A. N., … & Polosukhin, I. (2017). Attention is all you need. Advances in Neural Information Processing Systems, 30, 5998-6008. DOI: 10.48550/arXiv.1706.03762

*10 – Subitizing: https://www.nature.com/articles/s41562-023-01709-3

*11 – Serieller Posiionseffekt: https://de.wikipedia.org/wiki/Primacy-Recency-Effekt

*12 – Gestaltgesetze

• https://de.wikipedia.org/wiki/Gestaltpsychologie
• https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

*13 – Leitfaden zur guten Verständlichkeit von Textinformationen

• https://www.capito.eu/app/uploads/Sieghart-Angemessene-Kommunikation-mit-leichter-Sprache.pdf
• https://leserlich.info

Weitere Quellen:

• Visual Space in Parietal Cortex by Intended Eye Movements, Jean-René Duhamel et al. (1992) DOI: 10.1126/science.1553535
• Was geschieht im Kopf des Lesers? Schnotz, W. (2006), https://www.degruyter.com/document/doi/10.1515/9783110199963.2.222/html?lang=de&srsltid=AfmBOoop7eh2q8AhaNpfCy7OuJcHg6LqeHsxcwIePTHntTiPB8ckLklT
• Connectives and layout as processing signals: How textual features affect students’ processing and text representation, Van Silfhout, G., Evers-Vermeul, J., Mak, W. M., & Sanders, T. J. (2014). Journal of Educational Psychology, 106(4), 1036–1048, DOI: https://psycnet.apa.org/record/2014-09572-001
• Grundlagen der Gestaltung und ihre Wirkung, Kicinski, M. (2020), https://www.th-owl.de/elsa/download/3689/3690/Bachelorarbeit_Kicinski.pdf
• Minimize Cognitive Load to Maximize Usability, Whitenton, K. (2013), https://www.nngroup.com/articles/minimize-cognitive-load/
• Schriftgestaltung und Lesbarkeit, https://www.mwimmerdesign.de/corporate-design-branding/schrift-und-lesbarkeit/
• Leichte Sprache im Spiegel theoretischer und angewandter Forschung, Bock, Bettina M.  (2017), https://katalog.ub.uni-heidelberg.de/cgi-bin/titel.cgi?katkey=68126124&sess=038977261f18b789b30442b03e21b1a9&query=band%3Auw68126160

Die Berücksichtigung von Faktoren wie dem visuellen Wahrnehmungsablauf*¹, der Millerschen-Zahl*² sowie relevanter Gestaltgesetze*³ unterstützt den Wahrnehmungsprozess und bildet die Grundlage für eine leichte Zugänglichkeit.

Eine wahrnehmungspsychologische Auseinandersetzung beim Grid-Entwurf ist sehr wichtig, da ein Grid das unsichtbare Grundgerüst des Designs darstellt und – auch wenn es später für die Nutzer nicht mehr sichtbar ist – für die kompositorische Harmonie und Konsistenz des gesamten Designs verantwortlich ist. Darüber hinaus kann ein konsistent angewendetes Grid-System selbst ein prägendes Gestaltungselement sein, welches dem gesamten Design wiedererkennbar, von anderen unterscheidbar und ästhetisch macht.

Grid vs. Layout-Grid

Ein «Grid-System» besteht grundsätzlich aus einem «Grid» und einem «Layout-Grid». Dabei besteht das «Grid» aus einer bestimmten Anzahl gleich grosser Einheiten und bildet das zugrundliegende Rastersystem (in der nachfolgenden Abbildung rot gekennzeichnet). Durch die Kombination dieser kleinsten Zellen entsteht ein übergeordnetes «Layout-Grid» (blau gekennzeichnet), an dem sich die Seitenelemente im Design ausrichten.

In der Regel gibt es für ein Design nur ein seitenübergreifendes «Grid», aber je nach Seitentyp eine Reihe von «Layout-Grids». Hier sehen Sie ein asymmetrisches dreispaltiges Layout-Grid für eine Inhaltsseite aus einen meiner letzten Projekte. In der linken Spalte befindet sich eine sticky Inpage-Navigation, in der mittleren Spalte der Seiteninhalt und in der rechten Spalte eine Reihe von Funktions-Buttons.

Keyfacts

Begriff: Der Begriff «Grid» stammt aus dem Englischen und bedeutet «Gitter» oder «Netzwerk».

Synonyme: Auch Bezeichnungen wie «Gestaltungsraster» und «Rastersystem» werden verwendet.

Ursprung: Grids haben ihren Ursprung im Buchdruck des 15. Jahrhunderts und wurden später von Designern wie Jan Tschichold, Josef Müller-Brockmann und der Schweizer Schule*⁴ in den Designprozess integriert.

Welche Arten von Grids gibt es?

Neben horizontal und vertikal gliedernden Grids gibt es auch sogenannte «Modulare Grids», die eine Fläche sowohl horizontal als auch vertikal in Einheiten unterteilen. Diese Grid-Systeme sind besonders vielseitig und eignen sich für komplexere Layouts.

Im westlichen Sprachraum, wo man in horizontaler Ausrichtung schreibt, spielen Raster, die eine Fläche in vertikale Abschnitte gliedern, im responsiven Webdesign eine geringe Rolle, da die Höhe der Textspalten durch die responsive Anpassung nicht vorhersehbar ist. Vertikale Dimensionen können im Webdesign daher nur dann zuverlässig geplant werden, wenn ausreichend Freiraum bzw. Pufferzonen berücksichtigt werden. Dies erschwert eine konsistente vertikale Gliederung im responsiven Kontext erheblich und macht vertikal gliedernde Grids in der Praxis oft unpraktikabel.

Nutzen eines Grids

Struktur trifft Ästhetik: Grids schaffen eine klare Struktur und ein einheitliches Erscheinungsbild.

Effizientes Arbeiten: Die Anwendung eines Grid-Systems unterstützt und vereinfacht den Gestaltungsprozess visueller Anwendungen und Systeme, wie Websites oder Printmedien.

Zugänglichkeit: Studien*⁵ zeigen, dass Designs mit einem strukturierten Layout die Verständlichkeit für den Benutzer um bis zu 50 % verbessern können, was Rastersysteme zu einem wirksamen Faktor für effektive Kommunikation macht.

Responsive Grid-Systeme

Im Print-Bereich bilden Grid-Systeme seit langem die Grundlage der meisten Designs. Aber auch bei der Gestaltung interaktiver Benutzeroberflächen spielen Grids eine wichtige Rolle.

Während im Print-Bereich vor allem kompositorische Aspekte und Anforderungen an die Lesbarkeit im Vordergrund stehen, stellt im Web-Design die Notwendigkeit der Entwicklung responsiver Raster eine zentrale Herausforderung dar. Responsivität in diesem Kontext bedeutet, dass sich das Design optimal an die Grösse des Ausgabemediums anpasst.

Responsive Grids dürfen daher nicht ausschliesslich fixe Dimensionen aufweisen, sondern müssen zumindest teilweise flexible Einheiten verwenden. Dazu gibt es zwei grundlegenden Methoden:

1. für die Grid-Dimensionen prozentuale Werte benutzen (fluide Vorgehensweise)
2. über sogenannte «Media Queries»*⁶ Anpassungen der Grid-Dimensionen vornehmen (adaptive Vorgehensweise)

Adaptiv vs. Fluid

Nachfolgend zwei unterschiedliche Grids, die ich mit dem «Ultimate Grid Generator» erstellt habe. Oben ein adaptives Grid-System, das über eine Reihe von Media Queries, wie z.B. @media (max-width: 768px) { … } angepasst wird; und darunter ein vollständig fluides Grid, das ganz ohne Media Queries auskommt und für die responsive Anpassung ausshliesslich prozentuale Berechnungen verwendet. Verkleinern Sie doch die beiden iframes mit der Handle-Bar (jeweils unten rechts) und beobachten, was passiert.

Adaptives Grid

Adaptive Anpassung über mehrere Media Queries:

@media (max-width: 768px) { margin: 0 30px }

@media (max-width: 640px) { gap: 15px }
@media (max-width: 480px) { margin: 0 20px; gap: 12px }

Fluides Grid

Fluide Anpassung des Grids mit der relativen CSS-Einheit vw:
margin: 0 max(15px, 4vw) und gap: min(30px, 4vw);

Herausforderungen beim Grid-Entwurf

Viele Designer empfinden die Erstellung und Planung responsiver Grids als extrem mühsam. Insbesondere die Berechnung der notwendigen Parameter stellt sich nicht so trivial dar, da alle Grid-Parameter miteinander in Beziehung stehen. Siehe dazu nachfolgende Gleichungen.

Gleichung zur Berechnung der Grid-Weiten: oben ist die Gleichung so umgestellt, dass man damit die Spaltenbreite (cw) und unten die Gutterbreite (gw) errechnen kann.

Für die gleichmässige Verteilung der Spalten gibt es im CSS drei Möglichkeiten:

• «space-between» verteilt den Freiraum zwischen den Spalten, so dass die erste und letzte Spalte direkt an den Rändern des Grids ausgerichtet sind.
• Bei «space-around» wird jeweils 50% des Freiraumes um jede Spalte rechts und links angefügt.
• Bei «space-evenly» wird der Freiraum sowohl zwischen den Spalten als auch ausserhalb der Spalten gleichmässig verteilt.

Gestalterische Grundlagen

Auch sind vielen Designern die gestalterischen Gesetzmässigkeiten, die später die Effizienz bei der Platzierung von Elementen erhöhen und sich positiv auf das Layout auswirken, nicht im Detail bekannt. Daher ist es sehr wichtig die Grundlagen, also die Gestaltgesetze selbst zu verstehen, um nicht nur unreflektiert Best-Practice-Beispielen zu folgen, sondern auch «kreativ» mit einem Grid-System arbeiten zu können. So werden zum Beispiel von vielen Designern unreflektiert Grid-Systeme mit 12 Spalten erstellt. Die wenigsten kennen die Gründe dafür, sie folgen einfach bestimmten Standards, ohne zu wissen, wann es durchaus sinnvoll sein kann, davon abzuweichen.

Der Grund für die Verwendung eines 12er-Grids liegt darin begründet, dass die Zahl 12 eine sogenannte «hochzusammengesetzte Zahl»*⁷ ist. Dies ist eine Zahl, die durch mehr ganze Zahlen teilbar ist als jede andere kleinere Zahl.

Abgesehen davon, dass jede Zahl durch 1 und sich selbst teilbar ist, kann die «12» durch 2, 3, 4, 6, eine «10» hingegen nur durch eine 5 geteilt werden, so dass ein 12er Raster eine vierfach flexiblere Aufteilung des Layout-Grids in verschiedene Spaltenkombinationen ermöglicht als ein 10er Raster.

Häufige Missverständisse

Grid-Systeme sind nur für grosse Projekte sinnvoll. Falsch, auch kleine Projekte profitieren von einer klaren Struktur.

Grids schränken die Kreativität ein. Im Gegenteil, sie bieten einen Rahmen, innerhalb dessen kreative Lösungen entstehen können.

Empfehlungen für Grid-Newbies

Ich empfehle daher den Grid-Newbies nachfolgende Beiträge, um sich umfassend mit den Grundlagen von Grid-Systemen vertraut zu machen:

Geschichtlicher Rückblick und guter Überblick

• https://uxplanet.org/grids-in-graphic-design-a-quick-history-and-5-top-tips-29c8c0650d18

Grid-System Guides

• https://supercharge.design/blog/grids-and-layouts-in-ui-design-a-guide
• 
https://www.nngroup.com/articles/using-grids-in-interface-designs/

• https://medium.com/peopleofpapara/the-importance-of-grid-systems-in-ui-ux-design-enhancing-user-experience-ff7d0a90b08e
• https://www.ramotion.com/blog/website-grid-design/

Design-Grundlagen / Gestaltgesetze

• https://www.chrbutler.com/gestalt-principles-of-design-proximity
• https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/

• https://99designs.de/blog/design-tipps/gestaltprinzipien/
• https://www.nngroup.com/articles/how-people-read-online/

Technische Aspekte (CSS)

• https://clickable.agency/responsive-vs-adaptive-vs-fluid-key-differences-for-great-web-design/
• https://css-tricks.com/snippets/css/complete-guide-grid/

Wenn Sie die gestalterischen Grundlagen eines Grids verstehen, wird es Ihnen leicht fallen, Grid-Systeme zu entwerfen, die eine gute Zugänglichkeit und zugleich eine hohe Flexibilität besitzen. Damit schaffen Sie eine wesentliche Grundlage für ein kohärentes Benutzererlebnis.

Ultimate Grid Generator

Für Designer, die sich vor allem mit der Berechnung und Evaluierung der Grid-Dimensionen schwer tun, habe ich andere Hilfe im Angebot; und zwar habe ich eine kleine, aber sehr hilfreiche Anwendung programmiert: einen «Grid-Generator», der Sie dabei unterstützt, ein Grid-System zu entwerfen und in Echtzeit «responsive» zu evaluieren. Probieren Sie ihn doch einfach mal aus!

Hier geht´s zum «Ultimate Grid Generator»

Die Anwendung ist kostenlos und die erstellten Grid-Systeme lassen sich bequem als SVG, PNG oder HTML exportieren, um sie in anderen Anwendungen wie z.B. figma zu verwenden. Ich bin überzeugt, dass Ihnen mit diesem Tool der Entwurf eines responsiven Grids leicht von der Hand gehen wird.

Verweise:

*1: https://www.nngroup.com/articles/how-people-read-online/

*2: https://www.userbrain.com/blog/millers-law-important-rule-ux-design-everyone-breaks

*3: https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/

*4: Schweizer Schule

• The Swiss Style
• Geschichte des Swiss Designs

• The Swiss Grid

*5: Studien zur Wirksamkeit von Grid-Systemen

• Sweller, J. (1988). Cognitive Load During Problem Solving: Effects on Learning, Cognitive Science, 12(2), 257-285; https://onlinelibrary.wiley.com/doi/epdf/10.1207/s15516709cog1202_4
• Meinald T. Thielsch, Gerrit Hirschfeld: Facets of Website Content. Human-Computer Interaction, Published online: 15 Mar 2018; https://doi.org/10.1080/07370024.2017.1421954
• Oliver Emch, Ästhetische Qualitäten für das Design von Web-Interfaces; www.zora.uzh.ch/id/eprint/164488/1/20152553.pdf

*6: Media Queries stellen eine CSS-Technik dar, die es ermöglichen, gewisse Parameter einer Webseite basierend auf den Eigenschaften des Geräts oder des Anzeigefensters des Benutzers anzupassen. Dadurch kann sich ein Design optimal an unterschiedliche Bildschirmgrössen ausrichten.

*7: https://de.wikipedia.org/wiki/Hochzusammengesetzte_Zahl