Brain Science for UX. How learning about the brain can make us better designers
von Natalia Sander · User Experience Designerin bei Liechtenecker

Natalia eröffnet mit ihrem Beitrag und geht der Frage nach, auf welche Art und Weise Hirnforschung uns wertvolle Erkenntnisse für das UX-Design liefert:

Diese Grundlagen nicht nur zu verstehen, sondern sie auch in die Praxis umzusetzen, kann einen erheblichen Unterschied in der Wirksamkeit von Designs machen. Indem wir die Bedürfnisse und Verhaltensweisen der Nutzer:innen in den Mittelpunkt stellen, können wir Produkte und Services entwickeln, die nicht nur funktional sind, sondern auch intuitiv, ansprechend und effektiv.

Ihr wollt noch mehr?
Hier auch noch ein Buch-Tipp von Natalia:
The organized mind. Thinking Straight in the Age of Information Overload. Daniel J.Levitin

Hauptspeise

5 Lebensprinzipien und was diese mit UX zu tun haben
von Emanuel Jochum · Experience Designer

Weiter ging es philosophisch, denn Emanuel möchte – wie er selbst sagt – die Welt besser machen.
Nach einem Check in wie sich jeder fühlt und einem Bingo-Spiel für alle Teilnehmer:innen berichtet er mit persönlichen Erfahrungen und viel bildlichem Input über die 5 Lebensprinzipien:

Sein Ziel war es, dass jede/r Teilnehmer:in etwas mitnehmen kann.
Was wir mitnehmen? Unsere Welt ist komplex genug – versuchen wir sie ein Stück einfacher zu machen und konzentrieren wir uns darauf: Was ist essentiell?

Nachspeise

Signor Rossi sucht… Erfolgsrezepte und Stolpersteine bei der Konzeption von Suchfunktionen
von Matthias Grieder · Head of Design bei EBCONT

Bei Matthias geht es dann wieder zurück zu hands-on mit dem spannenden Thema „Suche“.
„Guessing ist waste of time“: Laut einem Report von McKinsey verbrauchen Mitarbeiter:innen täglich rund 1,8 Stunden mit Suchen – ein wahrhaft guter Grund sich mit dem Thema näher zu beschäftigen.
Niemand will sich bei der Suche mit dem Zufall auseinander setzen, wir
wollen relevante Suchergebnisse. Die Suche an sich ist dabei nicht das Ziel, sondern ein notwendiger Zwischenschritt um zum gewünschten Ergebnis zu kommen.
Anhand von Beispielen zeigt Matthias wie man Nutzer:innen mit einer durchdachten Suche Gutes tut und es nicht reicht nur fancy sein zu wollen.

Matthias meinte eingangs, er kann Stunden über das Thema sprechen. Glauben wir ihm, ein spannendes Thema dem oft viel zu wenig Beachtung geschenkt wird.

Mit vielen neuen Inputs sagen wir DANKE an unser Speaker:innen und unserer großartige UX Snacks Community für euer Kommen!

Mehr Fotos von der Veranstaltung findet ihr hier

SAVE THE DATE & SEE YOU THERE:
12. September – UX Snacks Vol. 8

Ihr wollt bei Thema UX Snacks am Laufenden bleiben? Tragt euch hier für den Newsletter ein!

Wir überwachen alle Projekte unserer Kunden (und natürlich auch unsere eigenen Services) mit einem Monitoring-Tool, das uns über Fehler, “Nicht-Erreichbarkeit” oder andere Probleme bei den von uns gehosteten Ressourcen informiert. Schon lange geistert bei uns die Idee herum, den Status der Services in einem Display bei uns im Büro anzuzeigen. Ein Kiosk, der uns laufend über Probleme informiert.

Noch schöner wäre es, eine kleine Web-Administration zu haben, die es erlaubt, auch andere Seiten in einer Schleife mit dem eigentlichen Status-Dashboard anzuzeigen. Passiert gerade etwas spannendes in der Welt? Wie wäre es mit dem Live-Feed dazu. Gehen wir mit einem Projekt Online? Projizieren wir die Seite an die Wand. Hat jemand ein besonders passendes Meme gefunden? Immer her damit.

Die Ausführung

Der Kontext ist also gegeben – wie starten wir?
Ich weiß, dass ich gerne eine Webapp mit Node Backend hätte – als Frontend Developer kenne ich mich mit JavaScript schließlich am Besten aus.
Der Zug beginnt sich in Bewegung zu setzen. Ich schmeiße den Visual Studio Code inklusive Github Copilot Chat an.

Copilot Chat ist eine Integration für Visual Studio Code und andere IDEs, die es ermöglicht, mit einem “CoPilot” zu chatten. Dabei wird (wenn schon etwas vorhanden ist) auf den SourceCode im Projekt zugegriffen und generell Fragen und Lösungsvorschläge zu technischen Themen präsentiert. Github, das zu Microsoft gehört, benutzt dafür OpenAIs ChatGPT im Hintergrund. Naheliegend, denn Microsoft zählt mit einem Investment von (gerüchteweise) 13 Milliarden $ zu den größten Investoren.

Los gehts:

ich möchte einen nodejs server mit minimalen ui bauen, in dem benutzer listen an urls mit weiteren parametern verwalten können. benutzer können urls und die anzeigedauer pro url eintragen. ein browser kann über eine seperate url auf den server zugreifen und erhält die aktuell aktive url

Copilot schlägt mir dafür einen Node Express Server mit ejs Templates vor. EJS hat mir davor nichts gesagt, wir setzen für unsere produktiven Lösungen im Backend auf PHP Stacks mit Laravel oder Drupal, scheint aber ein guter Einsatzzweck zu sein.

Copilot gibt mir eine Grundstruktur für meine App vor, erstellt mir einen Endpoint für das UI und eine Route für das anlegen neuer URLs.

Und der Server läuft auf Port 3000. Weil noch ein Formular zum hinzufügen neuer URLs fehlt, bitte ich Copilot, dies zu ergänzen.

Preise gewinnt das UI nicht, aber es funktioniert. Ich kann neue URLs und Anzeigedauern hinzufügen. Für unsere Kunden entwickeln wir zwar immer eigene UIs, für interne App reicht Bootstrap aber auf alle Fälle. Wie wärs, Copilot?

Super – jetzt ein bisschen Feintuning:

Füge eine Option zum Löschen einer URL hinzu. Ausnahmen davon sind URLs, die als Option protected: true haben

Wir möchten ja schließlich nicht, dass die lieben Kolleg:innen unseren Monitoring Status löschen, nur um ihre “lustigen Giphys” die ganze Zeit anzuzeigen.

Außerdem wäre noch Folgendes nett:

verifiziere, dass die url die hinzugefügt werden soll ein gültiges url format aufweist

und

Verändere die Eingabe der Dauer der Anzeige im index.ejs zu einem HTML Range Feld mit minimal 5 und maximal 30 sekunden und zeige visuelles Feedback beim Ändern des Range-Sliders, wie viele Sekunden gerade eingestellt sind

Der Zug überquert die Donau, mein Zielbahnhof kommt näher. Nach wenigen Sekunden spuckt Copilot die gewünschten Dinge aus.

Zusätzlich zum eigentlichen Code gibt mir Copilot auch immer eine textliche Erklärung, was in welchem File passieren soll und eine Warnung, den generierte Code nicht in Produktiv-Umgebungen einzusetzen. Keine Sorge, tun wir nicht.

Eine schnelle Bestandsaufnahme:

Gar nicht so schlecht für 30 Minuten Zugfahrt.

Nächster Schritt: Wie kann ich einen Client die aktuelle Seite anzeigen lassen und noch viel wichtiger, wie schalte ich die Seite automatisch nach der angegebenen Zeit auf die nächste Seite um?

Copilot scheint meine Anforderungen nicht richtig zu verstehen (fairerweise ist das natürlich schon ein sehr spezieller Anwendungsfall). Zunächst schlägt es mir eine Seite vor, die die aktuelle URL als Textlink anzeigt. Das ist für einen Kiosk natürlich wenig sinnvoll.

Nach weiteren Versuchen schlägt mir Copilot eine Lösung mit iFrame vor, was grundsätzlich funktionieren würde. Viele Seiten setzen aber Header, um genau das zu verhindern. Copilot will mir einen Proxy andrehen, der diesen Header vom Request entfernt. Zum Glück verhindern Zertifikatsfehler diese man-in-the-middle-Attacke.

Ich weihe Copilot in meinen Plan ein den ich von Anfang an hatte: Eine Browser-Extension die den aktuelle URL bei Änderung “gepushed” bekommt. Welche Optionen gibt es, Copilot?

Um eine Verbindung zu einem Endpunkt herzustellen, der einen nicht schließenden Stream unterstützt, können Sie verschiedene Technologien verwenden, abhängig von Ihren spezifischen Anforderungen. Hier sind einige Optionen:
 WebSockets: WebSockets ermöglichen eine bidirektionale Kommunikation zwischen Client und Server über eine einzige, dauerhafte Verbindung. Sie können die ws Bibliothek in Node.js verwenden, um einen WebSocket-Server zu erstellen.
 Server-Sent Events (SSE): SSE ist eine Technologie, die es einem Server ermöglicht, automatisch Daten an den Client zu senden, wenn neue Daten verfügbar sind. Sie können die express-sse Bibliothek in Node.js verwenden, um SSE zu implementieren.
 Long Polling: Bei Long Polling sendet der Client eine Anfrage an den Server und der Server hält die Anfrage offen, bis neue Daten verfügbar sind. Dann sendet der Server die Daten an den Client und schließt die Anfrage. Der Client sendet sofort eine neue Anfrage, um auf weitere Daten zu warten. Sie können dies mit jeder HTTP-Bibliothek implementieren, wie z.B. express in Node.js.
 HTTP/2 Server Push: HTTP/2 hat eine Funktion namens Server Push, die es dem Server ermöglicht, zusätzliche Ressourcen zusammen mit der Antwort auf die ursprüngliche Anforderung des Clients zu senden. Sie können die spdy Bibliothek in Node.js verwenden, um einen HTTP/2-Server zu erstellen. 
 Bitte beachten Sie, dass jede dieser Technologien ihre eigenen Vor- und Nachteile hat und die beste Wahl von Ihren spezifischen Anforderungen abhängt. 

Danke, dann nehm ich doch 2.)

Erstelle mir ein Grundgerüst für eine Browser-Extension für Chrome. Klappt nur halb, Copilot erstellt mir ein Manifest in Version 2 – Google hat schon angekündigt, die Unterstützung für V2 im Laufe von 2024 einzustellen.

Die veränderten Möglichkeiten und Parameter von V3 dürften noch nicht ganz zu Copilot vorgedrungen sein – bis die Extension lauffähig ist ist noch manueller Eingriff notwendig.

Mein Zug fährt in den Bahnhof ein. Ich hab nicht alles geschafft. Nach kleinen (manuellen) Eingriffen am nächsten Tag steht auch die Browser-Extension.

Jetzt fehlt noch der letzte Punkt, bei dem mir Copilot nicht helfen kann.

Fazit

Ich bin beeindruckt. Klar, die App könnten wir nie und nimmer Produktiv einsetzen – aber darauf weist ja selbst Copilot hin. Für ein RapidPrototyping, als Basis um mögliche Lösungen für Probleme auszuloten, funktioniert Copilot aber spitze.

Hätte ich alles genau so gemacht, wie Copilot mir das vorgeschlagen hat? Wahrscheinlich nicht, aber darin liegt sicher auch ein großer Vorteil von LLMs. Das Wissen über eine schier unendliche Zahl an Tools, Libraries und möglichen Lösungswegen kann man sich nur für eine sehr kleine Domäne aneignen. Copilot hat und wird mir mit Sicherheit helfen, meinen Horizont zu erweitern.

PHPStan ist ein vielseitiges Werkzeug, das verschiedene Arten von Fehlern erkennen kann, darunter:

Integration in automatisierte Deploy-Pipelines

Eine effektive Methode zur Sicherung der Codequalität ist die Integration von PHPStan in automatisierte Deploy-Pipelines. Dies ermöglicht es, den Code bei jeder Änderung automatisch zu überprüfen, bevor er in die Produktion gelangt. Dadurch wird sichergestellt, dass nur qualitativ hochwertiger und fehlerfreier Code in der Anwendung landet. Dies ist besonders hilfreich in neuen Projekten, um von Anfang an hohe Standards zu setzen.

Legacy-Projekte und PHPStan

Die Integration von PHPStan in Legacy-Projekten kann anfangs sehr zeitaufwändig sein. Die bestehende Codebase muss möglicherweise an die gewünschten PHPStan-Regeln angepasst werden. Dies kann eine Herausforderung sein, aber der langfristige Nutzen ist es wert. Alternativ können Entwickler:innen die Analyse des Legacy-Codes aussetzen und PHPStan nur für die Analyse neuer Features verwenden. Dies ermöglicht eine schrittweise Verbesserung der Codequalität.

PHPStan Levels im Überblick

PHPStan bietet verschiedene Analysestufen (Levels), die je nach Projektanforderungen und Komplexität ausgewählt werden können. Diese Levels sind von 0 bis 9 nummeriert, wobei Level 0 das grundlegendste und Level 9 das strengste ist.

Hier eine kurze Übersicht:

Die Wahl des richtigen Levels hängt von den spezifischen Anforderungen und dem Entwicklungsstadium des Projekts ab.

Insgesamt ist PHPStan ein leistungsstarkes Werkzeug zur Verbesserung der Codequalität in PHP-Projekten. Mit der Integration in automatisierte Deploy-Pipelines und einer klugen Herangehensweise an Legacy-Code können Entwickler sicherstellen, dass ihre Anwendungen effizienter, sicherer und wartbarer werden. PHPStan ermöglicht es, die Codequalität auf das nächste Level zu heben und damit den Erfolg eines Projekts nachhaltig zu steigern.

PHPUnit als Ergänzung zu PHPStan

PHPUnit ist ein herausragendes Framework für das Unit-Testing in PHP, das sich ideal als Ergänzung zu PHPStan eignet. Während PHPStan die statische Codeanalyse und Typüberprüfung durchführt, konzentriert sich PHPUnit auf das Ausführen von Tests, um sicherzustellen, dass der Code die erwarteten Ergebnisse liefert. Die Kombination von PHPUnit und PHPStan bietet eine umfassende Lösung zur Qualitätssicherung in PHP-Projekten.

Die Vorteile von PHPUnit in Kombination mit PHPStan sind vielfältig. Durch Unit-Tests mit PHPUnit können Entwickler:innen sicherstellen, dass jede Komponente ihres Codes wie erwartet funktioniert, und dabei die von PHPStan identifizierten Typfehler und Codeprobleme berücksichtigen. Dies ermöglicht es, nicht nur fehlerfreien Code zu schreiben, sondern auch sicherzustellen, dass die Anwendung die gewünschte Funktionalität bietet. Darüber hinaus tragen automatisierte Tests dazu bei, die Codequalität im Laufe der Zeit aufrechtzuerhalten und sicherzustellen, dass Änderungen am Code keine unerwünschten Nebenwirkungen haben. Insgesamt ermöglicht die Kombination von PHPUnit und PHPStan eine höhere Zuverlässigkeit und Qualität von PHP-Anwendungen.

Habt ihr Erfahrung mit PHP Stan?
Schreibt uns gerne!

Damit Menschen mit unterschiedlichen Fähigkeiten und Sehbeeinträchtigungen auf Websites zugreifen und sie nutzen können, sollte auf jeder Website sichergestellt werden, dass diese barrierefrei gestaltet ist. In Österreich müssen öffentliche Stellen sowie private Unternehmen mit öffentlichem Auftrag ihre Website WCAG (Web Content Accessibility Guideline) konform gestalten. Die Nichteinhaltung dieser Standards kann zu rechtlichen Konsequenzen führen. Es ist also nicht nur eine ethische Verpflichtung, sondern oft auch eine rechtliche Anforderung.

Hört sich gut an, ist in der Praxis leider trotzdem nicht die Norm. Unterschiedliche internationale Untersuchungen beschreiben die Web-Accessibility noch immer als mangelhaft. Laut einer diesjährigen Studie von WebAim sind 96 % der meistgenutzten Websites nicht barrierefrei.

Eine schockierend hohe Zahl. Doch warum ist das so? Die mangelnde Umsetzung von Web Accessibility kann auf verschiedene Gründe zurückgeführt werden:

Diese Gründe zeigen, dass es noch immer Herausforderungen gibt, die es zu überwinden gilt, um eine umfassende Barrierefreiheit im Web zu erreichen. Es ist wichtig, dass alle Beteiligten, von Entwickler:innen und Designer:innen bis hin zu Website-Betreiber:innen zusammenarbeiten, um die Web-Accessibility voranzutreiben.

In unserem heutigen Blogartikel wollen wir speziell auf 2 Punkte der Web Accessibility in der Praxis eingehen:

1. High Contrast Switch

Was ist das und wozu brauche ich es?

Einer der ersten Schritte zu einer barrierefreien Website ist der Einbau eines High Contrast Switchs. Doch wem genau nutzt dieser etwas? Viele Menschen mit Sehbehinderung leiden unter extremer Lichtempfindlichkeit (sogenannter Photophobie). Helles Licht macht für diese Menschen das Sehen schwierig oder unmöglich und verursacht Augen- und Kopfschmerzen. Deshalb ist für sie die normale Helligkeit eines Computerbildschirms mit hellem Hintergrund nicht lesbar und schmerzhaft. Ein High Contrast Switch auf einer Website ermöglicht es den Benutzer:innen schnell zwischen einem konventionellen Farbschema und einem High-Contrast-Modus zu wechseln.

High Contrast Switch in der Praxis – Was gilt es zu beachten?

Gemeinsam mit der Österreichischen Galerie Belvedere durften wir dieses Jahr einen High Contrast Switch umsetzen. Hier sind unsere Top 3 Tipps für Designer:innen, die ihr bei der Umsetzung des High Contrast Switches beachten solltet:

Rein weiße Schrift kann auf schwarzem Hintergrund für Menschen mit einer Hornhautverkrümmung schnell verschwommen bzw. unscharf wirken.

Generell sollten Farben nicht als einziges Mittel zur Unterscheidung verwendet werden. Zusätzlich können Zeichen und Muster eingesetzt werden um z.B. den Status eines Toggles anzuzeigen.

Ist die Fokusanzeige der Tastatur auf der Website sichtbar, gilt es folgende Punkte zu beachten: Die Umrandung sollte mindestens 2 Pixel größer sein als die nicht umrandeten Komponenten. Das Kontrastverhältnis zwischen den fokussierten und den unfokussierten Komponenten sollte 3:1 sein.

Ansonsten ist es wichtig, bei der farblichen Umstellung gründlich und umfangreich zu testen, um sicherzustellen, dass wirklich alle Elemente, Seiten und Funktionen berücksichtigt und angepasst wurden. Im Idealfall hilft auch ein kurzer Blick von Expert:innen und/oder Betroffenen über deine Seite, um mögliche Lücken aufzudecken.

2. Schriftgrößenanpassung

Was ist das und wozu brauche ich es?

Manche Menschen brauchen unterschiedliche Textgrößen, um die Buchstaben zu erkennen. Obwohl eine Vergrößerung in der Praxis am häufigsten vorkommt, bevorzugen manche Menschen mit Tunnelblick und guter Sehschärfe kleinere Buchstaben, damit sie mehr Wörter auf einmal sehen können. Den Benutzer:innen soll es möglich gemacht werden, die Textgröße (Schriftgröße) des gesamten Textes zu ändern, ohne die Benutzeroberfläche zu vergrößern (was der Fall wäre, wenn die Benutzer „heranzoomen“ oder Browserfunktionen verwenden würden). Laut den Web Content Accessibility Guidelines (WCAG) 2.0 und der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 ist eine Textvergrößerung von 200% erforderlich.

Beispiel BBRZ

Eine variable Schriftgröße ermöglicht es Menschen mit Sehbeeinträchtigungen, die Website besser zu lesen. Durch die Anpassung der Schriftgröße konnten wir auch “Reha-Billi” inklusiver gestalten.

Web Accessibility – Zusammenfassung und Ausblick

Jeder spricht darüber, aber wenige setzen es wirklich um. (Ja, auch wir haben teilweise Nachholbedarf bei unseren eigenen Seiten und sind dran das zu verbessern).
Web Accessibility wird derzeit noch als „nice to have“ betrachtet, das man sich auch leisten können muss. Wir sind noch weit davon entfernt, einen weltweiten Standard zu haben, da es immer noch an Erfahrung, Know-how und Verantwortung mangelt. Gerade deshalb ist es so wichtig, sich in den Diskurs einzubringen, Erfahrungen auszutauschen, mit Betroffenen zu sprechen und einfach anzufangen. Auf diese Weise können wir gemeinsam einige Schritte in die richtige Richtung machen. Denn darum geht es bei Accessibility: Gemeinsam mehr zu erreichen.

Hast du Fragen oder möchtest du das Thema angehen?
Wir helfen dir gerne in der Umsetzung deiner Accessibility-Projekte.

🩷 LOVE at first (In)sight: How A/B Testing Informs our Data -Driven UX

von Lisa Weilguni & Elena Coazzoli · Frontend Developer & Head of Product Development bei Lingvano

A/B Testing ist wie eine Schachtel mit Pralinen. Um zu wissen, welche die Beste ist, muss man einfach mal probieren. Das haben Lisa und Elena von Lingvano schon vor einiger Zeit erkannt und mittlerweile sind sie absolute Profis wenn es um A/B Testing geht.

Schon gewusst? Lingvano ist eine super coole App mit der man ganz einfach Gebärdensprache lernen kann. Und gerade bei einer interaktiven App mit hohem Engagement bietet sich A/B Testing als wunderbare Methode für continuous improvement an. Beim A/B Testing werden zwei Versionen, A und B, getestet, wobei eine Version eine Änderung enthält. Durch das gleichzeitige Testen beider Versionen mit verschiedenen Nutzergruppen kann man herausfinden, welche Version besser abschneidet. Das ermöglicht es, fundierte Entscheidungen darüber zu treffen, welche Änderungen die Nutzerzufriedenheit und das Engagement verbessern.

Welche Learnings die beiden aus dem A/B Testing mitgenommen haben?

 1. Lieber nicht zu viele Änderungen gleichzeitig implementieren. User:innen mögen die drastische Veränderung nicht und im Nachhinein lässt sich schwer identifizieren welche Teile der Veränderungen gefallen bzw. nicht gefallen haben.

2. Koordination der A/B Testings ist das A und O – damit sich unterschiedliche Ziele und Maßnahmen nicht in die Quere kommen.

3. Bei den Daten im A/B Testing ist es auch ähnlich wie mit den Pralinen. Je mehr Daten desto besser. A/B Testings in Bereichen von Applikationen in denen es fast keine Daten gibt sind nicht empfehlenswert.

4. Expect the unexpected: Wie bei jedem User-Testing wird man immer darüber überrascht wie User:innen ticken. Darauf muss man von Anfang an gefasst sein.

🩷🩷 We LOVE to entertain you: Elevating User Engagement with a Captivating Experience

Elena Winitschenko · Head of UX Streaming bei Seven.One Entertainment Group

Elena von JOYN ist extra aus München angereist um uns ihr großartiges Wissen zu User Experience im Streaming Bereich aufzutischen. Besonders spannend war ihre eigene Erfahrung mit einer Userin, die sie vor Ort zu einem Gespräch eingeladen hatten. Zur Begrüßung fragte Elena sie nach einem Getränk ihrer Wahl.

„Ich habe sie gefragt ob sie Wasser, Kaffee, Tee oder einen Saft trinken mag. Sie sieht mich dann an und antwortet wie aus der Pistole geschossen: Eine Cola.“

Elena wurde in dem Moment klar, dass die Situation nicht unähnlich ist zu der, wenn User:innen das erste Mal die App öffnen.

<br><em>„Um zu wissen was User:innen genau wollen, müssen wir wissen mit welchen Erwartungen sie zu uns kommen.“</em>
Elena Winitschenko

Nicht nur seit diesem Moment setzt sich Joyn sehr intensiv mit User:innen, deren Needs, Wünschen und Erfahrungen auseinander um so die möglichst beste App-Experience zu schaffen. Und nicht nur deswegen, hat es JOYN einen erfolgreichen Launch am österreichischen Markt über die (Streaming)Bühne gebracht. Was wir euch davon mitgeben können? Unternehmen brauchen ein offenes Verständnis für ihre User:innen und deren unterschiedliche Anforderungen…und eine volle Bar. 😉

🩷🩷🩷 LOVE letter to UX Community: Wie gute Typografie deine UX verbessert

Miriam Perkmann · UX Designerin bei Liechtenecker

A wise woman once said:

„Typografie ist wie Luft. Man nimmt sie erst wahr, wenn sie schlecht ist.“ Miriam Perkmann

Zum Glück arbeitet diese weise Frau tatsächlich in unseren eigenen, heiligen Hallen und hat uns sehr viel spannenden Inhalt zur Magie der Typografie geboten.

Um die Wichtigkeit der Typografie zu verstehen, müssen wir verinnerlichen wie das Lesen überhaupt zustande kommt. Das Lesen ist eine erlernte Fähigkeit die wir ca. ab unserem 7. Lebensjahr ausüben. Der Mensch liest in einem unterbewussten Autopilot-Modus, das geschieht leicht und flüssig, weil das Gehirn sich gleichzeitig auch mit dem Inhalt beschäftigen sollte. Damit das gut funktioniert, sollte schlechte Lesbarkeit unbedingt vermieden werden. Womit man schlechte Lesbarkeit vermeiden kann?

Klingt vielleicht leichter als es ist, denn gerade in der Praxis und bei der Kombination von mehreren Schriftarten gerät es leicht außer Fokus und macht Applikationen komplexer als die sein sollten. 

Wer übrigens noch immer nicht tief genug in das Thema Typografie eingetaucht ist der springt jetzt einmal rüber zu Miriam’s zwei tollen Blogbeiträgen:

Diggin deep in to typography Teil 1

Diggin deep into typography Teil 2

🩷
Das war wunderschön mit euch! Das Herzerl pumpert, die Schmetterlinge flattern und wir würden euch gerne auf ein 2. Date einladen… Wann? Na wie wäre es gleich mit der nächsten Ausgabe der UX Snacks.

UX Snacks Vol. 7 – Donnerstag, 25. April

Wir sehen uns dort! Bussi und bis bald 

Mehr Fotos seht ihr hier

Spoiler alert: auch dieses Jahr steht unter dem Einfluss von KI (Englisch: AI)! Schaut mit uns gemeinsam auf die wichtigsten Trends und altbekannte, jedoch neu verpackte Prinzipien, die ihr im Jahr 2024 im Auge behalten solltet.

Zum Überblick:

BEWEGUNG

MULTIMEDIA

LAYOUT & GRID

FARBE & FONT

UX “TRENDS” – WIE WIR NUN ARBEITEN

#Bonus Inspiration Boards
Die letzte #Weisheit

Lasst uns also loslegen:

Bewegung

Advanced (Micro-)Interactions

Micro-Interactions haben wir schon im Trendbericht 2023 erwähnt – sie vermitteln User:innen, wenn sich der Status oder der Kontext geändert haben, lenken die Aufmerksamkeit (die ja ein rares Gut ist!) und machen die Verwendung von digitalen Produkten zu einem extra Genuss.

Apple hat auf iOS17 nun animierte Icons zur Verfügung gestellt – wieder einmal kein neuer Trend, aber deswegen nicht minder spannend. Wichtig zu beachten – Richtlinien dazu von Material Design und Apple’s Human Interface Guidelines.

Auch schön, wenn die Schrift auf die Bewegung der Maus reagiert, wie hier bei Syndesi:

Hier sind auch zehn tolle Interaktionen von 2023 gesammelt – z.B. an einem Regentag ist das Trinkgeld in der Uber-App automatisch auf 20 % statt 10 % voreingestellt.

Looping Scroll

Bei diesen Seiten wird nach dem Erreichen des Seitenendes automatisch wieder zum Anfang der Seite zurückgekehrt. Trend gesehen bei Nobell oder hier bei LusionLabs:

Der unendliche Scroll kann dazu beitragen eine kontinuierliche und fließende Experience zu schaffen. Sie wird oft in kreativen Projekten, Storytelling-Websites oder Präsentationen eingesetzt, um Inhalte nahtlos zu präsentieren, ohne dass der Benutzer zwischen verschiedenen Seiten wechseln muss.

Es ist wichtig zu beachten, dass, während das Looping Scroll visuell ansprechend und innovativ sein kann, es auch darauf ankommt, wie gut es mit dem Inhalt der Seite harmoniert und ob es die User Experience verbessert oder eher als ablenkend empfunden wird.

Parallax effect

Diese Technik, die seit 2010 in Gebrauch ist, verleiht dem Design eine faszinierende Dimension, indem Hintergrund, Mittelgrund und Vordergrund sich mit unterschiedlichen Geschwindigkeiten bewegen, wie hier bei Web Design & Art History:

Das zeitlose Spiel mit Tiefe eines Parallax erzeugt die Illusion eines dreidimensionalen Raums und ist erneut in den Fokus der Designwelt gerückt – z.B. auch hier bei Vana.

Hier bei O’Higgins bewegen sich die Bilder nur ein wenig langsamer als der Rest der Seite, was einen schönen Effekt erzeugt:

Mischung aus horizontalem und vertikalem Scroll

Immer mehr Seiten werden im kommenden Jahr zu einer Mischung aus den zwei Scrollrichtungen greifen – im Vorjahr war es vermehrt eine Entweder-oder-Entscheidung. Gesehen z.B. bei den Interstellar Labs oder Oovra.

Multimedia

Fotos, 3D, VR & AR – welche Trends gibt es in diesem Bereich?

Foto Branding

Mit der Verwendung von Apps wie TikTok und BeReal werden nun auch im Web immer mehr realistische Fotos verwendet, die nicht über gestylt aussehen, sondern so, als hätte sie jemand schnell mit seinem Handy geschossen.

Weiterhin beliebt sind Fotos, die mit einem übermäßig starken Blitz geschlossen wurden – ein wenig Kodak-Feeling der 90er erweckend (s. Punkt “Retro”).

3D sowie AR/VR

Dieses Jahr betonen einige Quellen die Bedeutung von Augmented Reality (AR) und Virtual Reality (VR). Mit den Apple Glasses rückt die AR/VR-Revolution nun noch näher. Obwohl das Gerät selbst lediglich ein erstes Testmodell ist und zweifellos ernsthafte Überarbeitungen erfordert, beeindruckt das visionOS durch seine herausragenden Eigenschaften.

Diese Technologien ermöglichen die Erweiterung der Grenzen der physischen Welt und deren Verschmelzung mit digitalen Tools. Die Quellen weisen darauf hin, dass hierbei viele lukrative Möglichkeiten im Bildungsbereich, in der Immobilienbranche, bei Koch-Apps und mehr entstehen könnten. Schaut euch auch diese faszinierende Welt von Gucci an!

3D-Elemente sind eine wirkungsvolle Möglichkeit für Designer, Aufmerksamkeit zu erregen und Tiefe sowie Realismus in die Benutzeroberfläche zu integrieren, z.B. hier bei Mundhygieneprodukten.

Gerade für Storytelling eignen sich diese Technologien besonders. Hier eine Page von Hyundai in Kooperation mit dem Wall Street Journal, ein 360-Grad-Erlebnis in Form einer Erzählreise, das zeigt, wie die Produktinnovationen von Hyundai das Leben heute und in der Zukunft verbessern.

Layout & Grids

Ein Grid ist ein System von horizontalen und vertikalen Linien, das dazu dient, Elemente auf einer Seite oder in einem Layout zu organisieren. Dies erleichtert die Ausrichtung und Strukturierung von Inhalten.

Auch wenn es einige Seiten, wie Counter Forms, bewusst weglassen:

Bentobox Layouts

Die Bentobox, ursprünglich für organisierte Mahlzeiten entwickelt, findet im Online-Bereich großen Anklang bei Designern und ihren Kunden. Das ansprechende und leicht verständliche Layout strukturiert die digitalen Elemente in übersichtliche, funktionale Abschnitte. Diese Anordnung schafft ein Nutzererlebnis, das über das gewöhnliche Raster hinausgeht.

Hier z.B. bei Workshopsurvival hier unten – aber auch bei Prowl und Schooool.

100% Grid

Wir kennen dieses Layout bereits von dieser Bruegel-Seite von 2018 – auch hier gehen die Inhalte bis an den Browserrand und werden in kleineren und größeren Quadraten/Rechtecken angeordnet. Ganz neu ist der Trend also nicht, aber natürlich etwas seltener als ein klassisches Von-oben-nach-unten Grid.

Noch ein schönes Beispiel von einem Layout, das die gesamte Fläche von links nach rechts ausnutzt – Noerd:

Und noch ein Beispiel, bei dem die ganze Breite für eine regelmäßige Darstellung von Inhalten ausgenutzt wird – Antennebooks hier unten oder bei Cereal.

Asymmetrie

Weiterhin sind asymmetrische Layouts anzutreffen, die zwar trotzdem einem Grid folgen, aber doch aus dem Kästchen-Prinzip ziemlich ausbrechen, we like! Hier z.B. bei O’Higgins.

Asymmetrie, die aber verständlich ist, da das Grid freigelegt wurde, findet sich bei George Cox Footwear:

Farbe & Font

Gigantische Buttons, Headlines, Neobrutalism

Wie schon letztes Jahr sind XXL-Fonts und auch gigantische Buttons ein Ding im Jahr 2024. Große Schriften helfen dabei, ein Statement zu setzen und Aufmerksamkeit einzufangen. Sie verleihen Benutzeroberflächen eine starke Persönlichkeit, schaffen klare Hierarchien und leiten User durch den Inhalt.

Schaut euch das Riesenformular bei Mita an:

Oder hier diesen gigantischen Download-Button bei Rekki an. Ich meine, warum auch nicht? 🙂

Noch zwei tolle Beispiele beim Atio Studio und Lovers Magazine.

Generell wird Typografie 2024 weiterhin kreativ genutzt, mit experimentellen und expressiven Fonts – wo es natürlich angebracht ist und User Experience unterstützt, wie zB. bei Flyingpapers. Bei Omse wird die gigantische Schrift mit Mouse-Interactionen gepaart:

Serifenfonts schaffen ein Gefühl von Tradition und Sicherheit – z.B. bei Mode, einer Plattform für Datenanalyse:

Back to the roots Retro Trend

Was für ein Jahr es war! Kein Wunder, dass der Drang nach Altbekanntem und Gemütlichem hoch ist. Viele Quellen nennen zig Trends, die wir unter dem Begriff “Retro” zusammenfassen würden. Ob Elemente des Early Web der 90er und 2000er, Woodstock-Style der 60er, farbenfrohe Siebziger, Grainy Minimalismus der 80er, sogar klassisches Griechenland, Art Nouveau von 1890 und Art Deco von 1920 inspirieren UI Designer dazu, stilistische Elemente der Vergangenheit ins Web von heute zu holen. So heißen einige dieser Stile, falls ihr mal über die Begriffe stolpert: pop futurism, Y2K, line art, new grunge, neo-classical, neobrutalism.

z.B. hier beim Magazin Boysclub:

oder hier bei Molly Baz:

Minimalismus-Maximalismus-Kontinuum

Sowohl ganz minimalistische als auch komplett überladene Websites und Apps waren 2023 und werden vermutlich 2024 weiterhin je nach Anwendungsfall verwendet. Hier eine sehr passende überladene Seite eines veganen Käseherstellers:

Das Extrem auf der Minimalismusseite nennt sich “Utilitarian”, hierbei werden hauptsächlich schwarze und weiße simple Formen verwendet, um jegliche visuelle Störungen zu vermeiden (gesehen unter anderem beim Harlem Studio Museum):

Oder hier bei Postfamiliar:

Gradients

Komplexe und animierte Farbverläufe ersetzen bisher statische Gradients – auch hierbei handelt es sich um keinen neuen Trend, sondern eine Verfeinerung einer bewährten Farbmethode. Die neuen Farbverläufe bringen Tiefe, Fülle und ein Gefühl von Raffinesse mit sich. Sie spielen mit der Psychologie der Farben, um eine bestimmte Emotion hervorzurufen.

Hier wunderschön animierter Gradient bei Prism Data:

Zwar nicht ganz ein Gradient, aber dennoch: Grassmorphism ist schon wieder in den Trendlisten aufgetaucht (ein sehr hartnäckiger “Trend”). Kennt ihr dafür schon diesen Glassmorphism-Generator?

UX “Trends” – wie wir nun arbeiten

Generatives Design mit KIs

Künstliche Intelligenz, auch unter dem Begriff generatives Design bekannt, findet Anwendung, um dynamische und anpassungsfähige Benutzeroberflächen sowie visuelle Elemente, Texte und Icons zu schaffen. Dall-E, Midjourney und Stable Diffusion sind ja bereits seit dem Vorjahr bekannt.

Weitere Tools, die wir 2024 ausprobieren wollen:

2023 hat sich sogar die Rolle eines AI-Designers entwickelt, der dafür verantwortlich ist, generative Technologien zu nutzen und innovative Algorithmen in seinem Fachgebiet zu kreieren.

Keine Sorge für Designer – die Technologie ersetzt uns nicht, sondern beschleunigt den Arbeitsprozess und verbessert die Ergebnisse. Für UX/UI-Designer wird es im Jahr 2024 essenziell sein, sich über die aufkommenden KI-Trends auf dem Laufenden zu halten.

Adaptive UI: Personalisierte und kontextbezogene User Experience

Im Jahr 2024 liegt der Fokus auf dynamischen und anpassungsfähigen Benutzeroberflächen, die über Benutzerpräferenzen hinausgehen und Umweltfaktoren wie Licht und Lärm einbeziehen. Dieser Ansatz ist entscheidend für inklusives Design und macht Technologie für eine vielfältige Nutzerschaft zugänglicher.

Kontextbezogene Benutzererlebnisse gehen einen Schritt weiter in der Personalisierung, indem sie sich an die unmittelbare Umgebung und Situation des Nutzers anpassen. Beispiele hierfür sind eine Fitness-App, die an regnerischen Tagen Indoor-Workouts vorschlägt, oder eine Musik-App, die Playlists je nach Tageszeit kuratiert.

Der transformative Wandel hin zur Hyper-Personalisierung im Jahr 2024 zeigt sich darin, dass Benutzeroberflächen sich in Echtzeit dynamisch anpassen, Erkenntnisse aus Nutzeraktionen und vergangenen Interaktionen ziehen. Diese Entwicklung geht über die Anpassung von Inhalten hinaus und prägt grundlegend, wie Nutzer mit digitalen Benutzeroberflächen interagieren.

Als Beispiele werden z.B. Syte oder die automatische Bildschirmanpassung von MacBooks genannt.

Voice User Interface

Voice User Interfaces (VUIs) entwickeln sich über reine Zusatzfunktionen hinaus und werden zu primären Interaktionsmodi auf verschiedenen Plattformen. Ob in intelligenten Haushaltsgeräten oder mobilen Apps bieten VUIs eine freihändige, effiziente und oft zugänglichere Benutzererfahrung.

Darüber hinaus weitet sich die VUI-Technologie auf mehrsprachige Unterstützung aus und ist in der Lage, eine breite Palette von Dialekten und Akzenten zu erkennen und darauf zu reagieren. Diese Initiative zur Inklusivität macht digitale Produkte globaler und für diverse Benutzergruppen zugänglicher.

Fokus auf mentale Gesundheit

Die verstärkte Fokussierung auf die mentale Gesundheit der Nutzer im UX-Design spiegelt einen breiteren gesellschaftlichen Trend zum allgemeinen Wohlbefinden wider. UX-Designer:innen integrieren aktiv Prinzipien aus Psychologie und Verhaltenswissenschaften, mit dem Ziel, Designs zu schaffen, die nicht nur benutzerfreundlich sind, sondern auch zur mentalen Gesundheit beitragen.

Dieser Ansatz beinhaltet die Umsetzung beruhigender Farbschemata, die Einführung minimalistischer Layouts zur Entlastung der kognitiven Belastung sowie die Integration von Funktionen wie Erinnerungen an Bildschirmzeiten und Achtsamkeitsanleitungen. Für das Jahr 2024 wird eine verstärkte Einbindung von Funktionen in digitalen Produkten erwartet, die gezielt darauf abzielen, Stress und Angst zu bewältigen, darunter Entspannungsführer und Stimmungstracker.

Ethisches, umweltfreundliches und zugängliches Design

Mit steigendem Bewusstsein für Datenschutz und ethisches Design erfährt die UX im Jahr 2024 eine Verschiebung in Richtung Transparenz und Nutzerempowerment. Dies beinhaltet klare Datenrichtlinien, leicht navigierbare Datenschutzeinstellungen und Designs, die informierte Einwilligungspraktiken fördern.

Die DSGVO wird 2024 überprüft, und neue Vorschriften werden auch KI sowie UI und UX abdecken. Die Auseinandersetzung mit Schatten-UX, um Nutzer zu täuschen und zu mehr Datenpreisgabe zu bewegen, wird ebenfalls adressiert.

Nachhaltiges Design bleibt weiterhin relevant, da leichtere Webseiten weniger Serverplatz und somit Energie verbrauchen. Die Web Sustainability Guidelines (WSG) 1.0 bieten Ansätze für ressourcenschonendes Webdesign. Maßnahmen wie „Bieten Sie nur wesentliche Komponenten an, die zum Zeitpunkt ihrer Nutzung sichtbar sind“ werden als umweltfreundliche Strategien hervorgehoben.

Im Bereich der Zugänglichkeit wird darauf geachtet, dass Benutzeroberflächen für alle leicht zugänglich sind. Apple führt beispielsweise mit Assistive Access eine Barrierefreiheitsfunktion ein, die speziell für ältere Benutzer entwickelt wurde.

Designer sind zunehmend darauf bedacht, ethische Überlegungen, wie Datenschutz und Transparenz, in den Fokus zu rücken, um inklusive, zugängliche und transparente Produkte zu schaffen.

Bonus: Inspiration Boards für Trends

Man stolpert ja nicht einfach so über coole Pages, hierfür gibt es im Netz zahlreiche Sammlungen, die man auf der Suche nach Inspiration durchforsten kann. Hier ein paar davon:

https://land-book.com/

https://www.hoverstat.es/

https://www.siteinspire.com/

https://www.awwwards.com/

https://archive.cyrillic.design/

Die letzte Weisheit

Zum Schluss wollen wir noch einmal daran erinnern: Coole Designlösungen sind nicht auf Pinterest (oder in Trend Reports), sondern in der Problemstellung selbst zu finden.

Blind irgendwelche Trends zu kopieren und auf Gebrechen den Erfolg anderer nachstellen zu wollen, ist keine gute Strategie. Vielmehr lohnt es sich, das Besondere des eigenen Produkts/Services zu finden, die gegebenen Herausforderungen in Stärken umzudrehen und manchmal die Erste zu sein, die Dinge aus dem analogen Bereich in die digitale Welt “übersetzt”.

Falls du den Bericht hilfreich und inspirierend fandest, freuen wir uns natürlich, wenn du ihn mit anderen teilst! 🙏 Danke dir!

Quellen: rivulet Digital, wix studio, Media Contented, Tramplin, Uprock, Matt Thorne, Kostja Stepanov, Will T, Ami Moradia und das persönliche Liechtenecker Inspirationsarchiv.

PS: Das wunderschöne Artwork im Headerbild stammt von der Autorin Natalia selbst, hier seht ihr mehr.

Redesigning Search: Iterative Design through continuous User Feedback von Clemens Grave & Roann Louw, Director of Product & Product Design Lead @tourradar

Was haben einer der größten Anbieter von organisierten Abenteuern und eine UX-Agentur aus Wien gemeinsam? Sie lieben User Research! Und in den letzten Jahren hat Tourradar einiges dazugelernt, was sie in ihrem Talk mit uns geteilt haben.

Das ganze Team im Boot: Zum Kick-Off eines Projektes setzt sich das gesamte Team zusammen um Anforderungen und Ziele zu besprechen. Das heißt auch Abteilungen wie Sales, SEO, SEA und E-Commerce werden von Anfang an mit einbezogen, um ein gesamtheitliches Verständnis zu schaffen.

Kontinuierliche Verbesserung statt Big Bang: Tourradar setzt auf continuous discovery mit kleinen Veränderungen, anstatt einer Generalüberholung der Seite. So können Erfolge und Misserfolge besser beobachtet, gemessen und angepasst werden.

Expect the unexpected: Man kann seine User:innen noch so gut kennen, am Ende des Arbeitstages muss man immer auf Überraschungen gefasst sein. Zum Beispiel, dass Filtermöglichkeiten am unteren Rand des mobilen Bildschirm nicht benutzt werden, weil der größte Teil der User:innen den Cookie-Banner einfach nicht wegklickt.

#youneverknowifyounevertest #mindblown

Vielen Dank an euch beide – wir haben sehr viel davon mitnehmen können!

Christmas Roast 🐓

Labelling The Web von Nicolas Bernadowitsch, Senior UX Designer @Accenture Song

Nicolas gab uns nicht nur Einblicke in das Thema „Web Accessibility“ sondern auch in seine eigenen vier Wände. Denn auch dort gibt es von einer Sache zu wenig: Labels. Zumindest wenn man seinen Stromkasten ansieht…

<em>“Labels“ sind die Beschriftungen für Elemente wie Seiten, Links und Buttons. Sie benötigen zugängliche Namen, damit alle Benutzer:innen, auch die mit assistiven Technologien auf die Seite zugreifen, sie verstehen können.</em>

Labels

Im Entwicklungs- bzw. Design Prozess einer Website wird häufig übersehen, was für Menschen ohne Screen Reader nicht sichtbar ist. Doch schon mit kleinen Tweaks kann eine Seite für alle User:innen besser lesbar gemacht werden.

Nicolas Botschaft seines Talks ist klar: Das korrekte Benennen von UI-Elementen ist entscheidend für die Barrierefreiheit im Web. Ohne „Labels“ schließen wir Benutzer:innen aus. Also, lasst uns metaphorisch unsere „Label Maker“ herausholen und das Web barrierefreier gestalten. Wenn ihr mehr zu dem Thema bzw. zu Nicholas Arbeit nachlesen wollt könnt ihr das gerne auf seinem Blog tun.

Christmas Cookies 🍪

How to prepare for the future of UX von Susanne Holzer, CEO & Inhaberin @Liechtenecker

Welche aufstrebenden Technologien werden sich in Zukunft  durchsetzen? Wie können wir sie sinnvoll einsetzen? Susanne weckte mit ihrem Talk nicht nur das Interesse daran den Film „Zurück in die Zukunft“ wieder mal anzusehen, sondern auch über die Zukunft und die darin möglichen Entwicklungen nachzudenken. 

Wenn ihr euch jetzt denkt „What the f…“ seid ihr gar nicht so weit davon entfernt. Denn mit Hilfe unseres hauseigenen Kartenspiels „What the future“ konnten wir in Kleingruppen unterschiedliche Zukunftsvisionen kreieren und gleichzeitig hinterfragen. Super spannend!

Du würdest auch gerne mit Freund:innen, Kolleg:innen, Kund:innen… in die Zukunft blicken und dadurch Chancen aufdecken, die du so davor noch nicht am Schirm hattest? Alles über unser spekulatives Kartenspiel findest du hier.

Das war’s nun auch schon mit dem letzten Recap der UX Snacks für dieses Jahr. Wir möchten an dieser Stelle noch einmal DANKE von ganzem UX-Herz sagen, an alle Besucher:innen, Speaker:innen und Unterstützer:innen die 2023 mit uns vier unvergessliche Events mitgestaltet haben. Wir freuen uns schon auf das neue Jahr mit einer vollen Ladung UX Snacks Power. 🎉

Vielen Dank an unsere Speaker und die immer größer werdende UX Snacks Community <3
Hier geht es zu weiteren Fotos vom Event.

SAVE THE DATE – UX SNACKS 2024

15.02.2024
25.04. 2024
12.09. 2024
07.11.2024

1 — Layoutierung eines Textes

Zunächst einmal ist die Layoutierung eines Textes ausschlaggebend. Sie bestimmt, ob und wie der Inhalt erfasst wird.  Hat man bereits eine passende Schrift gefunden, die zur Gestaltung aber auch charakterlich zu unserem Inhalt passt, so beginnt die typografische Ausgestaltung über die letztendlich gebotene Lesbarkeit. 

Ein gut lesbarer Text setzt sich zusammen aus:

Diese drei Parameter stehen in unmittelbarer Abhängigkeit zueinander. Da das Zusammenspiel der drei Faktoren für jede Schrift abhängig von ihren individuellen Promotionen neu zu definieren ist, können festgelegte Werte nicht pauschal auf eine andere Schrift übertragen werden. Steht zum Beispiel ein Schriftwechsel vor, ist es notwendig Schriftgröße, Zeilenlänge und Durchschuss auf die neue Schrift anzupassen, um eine vergleichbare bzw. bessere Lesbarkeit zu gewährleisten. 

Die drei Parameter genauer erklärt: 

1. Schriftgröße

Die passende Schriftgröße ist abhängig von der jeweiligen Schrift. Manche Schriften mit großen Ober- und Unterlängen müssen größer gesetzt werden (zum Beispiel Futura), anders als Schriften mit einer gleichmäßigen x-Höhe. Die Voreinstellungen in den Gestaltungsprogrammen sind daher nicht verlässlich und passen nicht für jede Schriftanwendung. 

Ausschlaggebend für die Schriftgestaltung ist das gewählte Medium und die Textsorte. Im mobilen Design werden Schriften natürlich viel kleiner gesetzt, als im Desktop Design, abhängig von der Entfernung des Users zum Device.

Headlines oder Aufmacher Texte werden größer bzw. anders gesetzt wie Fließtexte. Alles dient der visuellen Unterscheidung und Sortierung des Contents, die wiederum die User Experience verbessern. 

Der Wert der Punktgröße / rem Größe gibt nur ein ungefähres Maß für die Größe der Schrift an – tatsächlich kann der optische Eindruck extrem von der Punktangabe abweichen. Das liegt daran, dass sich ein Schriftzeichen mit seiner Größe dem vorhandenen Platz auf dem Kegel einpassen muss, sodass die Proportionen einer Schrift über ihre optische Größe entscheiden: 

Bei dominanten Oberlängen wird die für die Leserlichkeit und Größenwirkung wichtige Mittelgänge viel kleiner abgebildet als bei einer Schrift mit dezenteren Oberlängen. 

Aus diesem Grund sollten Schriften auf eine ähnliche x-Höhe angepasst werden, um einen aussagekräftigen Vergleich zu erhalten. Allerdings nimmt auch die Ausprägung von Ober-und Unterlägen Einfluss auf die optische Größe einer Schrift, weshalb die Anpassung der Schriftgröße nur nach Augenmaß erfolgen kann – was zwangsläufig zu subjektiven Ergebnissen führt.

2. Zeilenlänge

Zum zweiten Punkt, die Zeilenlänge und Zeilenabstand. 
Dafür müssen wir zunächst mal verstehen, wie das Lesen überhaupt zustande kommt. 

Wir lesen nämlich nicht jeden Buchstaben einzeln, sondern das Auge springt quasi in mehreren ruckartigen Schritten über eine Zeile  – in sogenannten Sakkaden. Es gleitet also nicht nur über die Zeilen, wie wir es selbst möglicherweise empfinden. Die Sakkaden werden in kurze Fixationen unterbrochen. 

Nur während dieser Momente nimmt das Auge Buchstaben und Wörter wahr – während der Sprünge ist es quasi blind. Kommt es inhaltlich oder durch undeutliche Buchstabenformen zu Unklarheiten, springt das Auge zurück, um das Gelesene nochmals zu überprüfen. 10 bis 15 Prozent der Augenbewegungen sind solche rückwärtsgewandten Sakkaden (Regressionen) und blieben vom Leser meist unbemerkt – kosten aber viel Lesezeit und Konzentration. 

Probier es selbst aus:
Lesetest: Halte zwei Finger über das linke Augenlid, lies diesen Absatz und versuch zu spüren wie sich dein Auge bewegt:

Du wirst an deinen Fingern spüren, wie sich das Auge sprunghaft nach rechts bewegt und einen großen Schritt nach links, wenn es in einer neuen Zeile angekommen ist. 

Das heißt für einen optimalen Lesefluss ist die Schriftart wichtig, aber auch die Zeilenlänge.

Ist die Zeilenlänge zu breit, so ist es für das Auge mühsam vom Zeilenende in die neue Zeile links zu springen. Ist die Zeile zu kurz so ist der Lesefluss unterbrochen und das Auge springt zu oft in eine neue Zeile. Alles viel zu aufwendig für eine Handlung die wir aber so simpel wie möglich halten möchten. Die Zeilenlänge sollte daher, je nach Textgröße nicht zu breit oder zu schmal sein. Lange Zeilen benötigen generell einen größeren Abstand als kurze. Eine Schrift mit hoher x-Höhe profitiert von etwas mehr Durchschuss, da bereits die Zeichen selbst viel des Weißraums zwischen den Zeilen einnehmen. Umgekehrt ist bei ausgeprägten Ober- und Unterlängen ein geringer Zeilenabstand vorteilhaft, um den Text optisch zusammenzuhalten. 

Die Zeilenlänge ist in erster Linie also von der Schriftgröße abhängig. In sehr kleinen Schriftgrößen ist es für Leser anstrengend, über längere Zeit den Blick auf einer Zeile zu halten. Für Lesegrößen (9-12pt. bzw 0,75-1 rem) ist häufig eine Zeilenlänge von 50-70 Zeichen optimal; diese Angabe ist aber lediglich ein Richtwert. Die optimale Zeilenlänge wird durch die individuellen Proportionen der Schrift definiert.

Das richtige Maß der Zeilenlänge entscheidet maßgeblich über den Lesefluss- und Geschwindigkeit. 

Bei identischer Schriftgröße und Durchschuss scheint der Zeilenabstand bei kürzeren Zeilen größer zu sein als bei längeren Zeilen. Daher gilt: je länger die Zeilen, umso größer der Zeilenabstand. Ein größerer Zeilenabstand hilft dem Leser beim Zeilenwechsel nicht in die falsche Zeile zu springen. 

3. Zeilenabstand

Anschließend wird der Zeilenabstand ermittelt. Er beeinflusst den Grauwert des Textes und den gebotenen Lesekomfort. Bei zu geringem Zeilenabstand wird der Lesekomfort verringert, da zum einen Ober- und Unterlängen zweier Zeilen sich überschneiden können, sodass ein eindeutiges entziffern der Buchstaben mehr Zeitanspruch benötigt. Zum anderen kann der Leser während des Lesens in den Zeilen verrutschen, beim Zeilenwechsel leicht eine Zeile überspringen oder dieselbe Zeile erneut fixieren. Ist der Zeilenabstand zu groß, verliert der Text seinen Zusammenhalt. In beiden Fällen wird die Lesegeschwindigkeit herabgesetzt. Man sollte sich dabei nicht nur auf den in den Programmen voreingestellten Zeilenabständen verlassen, da diese nicht immer den optimalen Lesefluss bieten. Besonders Schriften mit einer hohen Mittellänge profitieren von zusätzlichen Raum zwischen den Zeilen, da sie mit ihrer x-Höhe bereits einen großen Teil der Zeilen ausfüllen, sodass der ausgeglichene Weißraum zwischen den Zeilen geringer als bei anderen Schriften ausfällt. 

Weitere wichtige Gestaltungsmittel:
Gird, Weißraum und Barrierefreiheit

Die Positionierung der Schrift sollte sich immer am Grid orientieren bzw einer bestimmten Regel der Ausrichtung am Grid folgen. So lassen sich starke und stilsichere Designs erstellen. Dabei muss darauf geachtet werden, dass das Layout auch mit mehreren Endgeräten funktioniert – sprich Responsive ist. Das Grid hilft dabei Texte zu sortieren, anzuordnen und besondere Layouts zu entwerfen um den User einen optischen Wegweiser zu bieten. Darauf aufbauend kann das Design dann in die Entwicklung gehen.

Nicht zu unterschätzen ist die Wichtigkeit des Weißraums. Dieser bildet den Kontrast zum Schwarzraum – also zum Text, lädt zum Lesen ein, oder hebt bestimmte Bereiche optisch hervor.  

2 — Die Schriftmischung

Generell ist ein Design insgesamt ruhiger und ansprechender, wenn wenig unterschiedliche Schriftarten eingesetzt werden. 

Umso mehr Schriften wir mischen, umso mehr treten die einzelnen Schriften miteinander in Konkurrenz um die Aufmerksamkeit des Lesers. Es kann dadurch ein unruhiges Gesamtbild entstehen, das der leichten Aufnahme der Texte abträglich ist. Entscheidet man sich aber doch dafür unterschiedliche Schriftarten einzusetzen, so ist es notwenig folgende Punkte zu beachten: 

Zunächst gilt einmal: In der Familie bleiben. Gibt es keinen zwingenden Grund weitere Schriftarten zu verwenden, so sollte man bei einer bleiben und die dafür entworfenen Schriftschnitte einer Schrift verwenden.

Entscheidet man sich doch für eine Schriftmischung, so gilt es folgende Punkte zu beachten: 

(Empfohlen werden nur 2- max. 3 Schriften zu mischen)

Kontrast erzeugen

Erst wenn der Unterschied hinreichend groß ist, kann der Zweck der Schriftmischung wirksam zum Tragen kommen. So kann eine Groteskschrift statt mit einer anderen Groteskschrift besser mit einer Antiqua oder einer Schreibschrift kombiniert werden. Dieser Kontrast lässt sich weiter erhöhen, wenn sich auch die gewählten Schriftschnitte – zum Beispiel in Strichstärke, Neigung oder anderen Charaktereigenschaften – unterscheiden. 

Einen ähnlichen Duktus verwenden

Also statische Schriften mit Statischen mischen und dynamische Schriften mit Dynamischen. 

Diese lassen sich grundsätzlich leichter kombinieren und schaffen ein einheitliches, ruhigeres Gesamtbild trotz verschiedenerer Schriftarten.  Gleich und gleich verträgt sich gut 😉

Exkurs:
Was sind Statische und dynamische Schriften?

Bei statischen Schriften sind die Formen der Buchstaben in sich geschlossen. Erkennen kann man dies gut an c, e, a, s;
Die Senkrechte ist betont. Das a ist offen, das g ohne untere Schleife. Wenn sie zu eng gesetzt werden, kann sich eine ‚Gartenzaun-Wirkung‘ ergeben. Bei mehrzeiligen Texten ist deshalb ein ausreichend großer Durchschuss nötig. Ruhiges, nüchternes Gesamtbild.

Die dynamische Schrift 
Die Achsen der Rundungen sind schräg versetzt, wie bei einer dynamischen Antiqua. Es herrscht eine Betonung der Waagerechten. Die Buchstaben sind deutlich unterschiedlich geformt, was sich beispielsweise an dem sogenannten zweistöckigen g deutlich zeigt. Auch die offene Form verschiedener Buchstaben (z. B. c, e, a) deutet auf einen dynamischen Stil hin.

Im Wortbild ergibt sich ein einheitlich, gemeinsames Bild, da die Buchstaben dicht zueinander stehen. Durch die dadurch hohe Lesbarkeit kann eine dynamische Grotesk für viele Aufgaben ohne Probleme eingesetzt werden.

Schriftmischung innerhalb von Zeilen

Wie wir bereits gelesen haben, ist es in der Regel notwenig die x-Höhe unterschiedlicher Schriften anzupassen, da sie mit gleicher Schriftgröße in einer Zeile eher selten harmonieren.  

Die x-Höhe ist also das entscheidende Maß. Also gilt die anzupassen. Für Schriftmischungen innerhalb von Zeilen gelten die vorgenannten Empfehlungen zu Kontrast und Duktus in gleicher Weise bzw. sind gegebenenfalls sogar besonders relevant. 

3 — Barrierefreiheit bzw. inclusive Design

Der letzte aber sehr wichtige  Punkt in der Schriftgestaltung ist die Barrierefreiheit bzw. inclusive Design. 

Das neue Barrierefreiheits-Gesetz (BaFG), welches 2024 noch als nationales Recht und ab Juni 2025 in Kraft treten wird, sieht für Websites aller Unternehmen, die digitale Produkte und Dienstleistungen anbieten, einen barrierefreien Zugang vor.In der allgemeinen Auslegung wird das als WCAG Level AA verstanden. Sprich eine Website muss für alle Menschen erreichbar und erfassbar sein.

Die Schriftfarbe muss zum Hintergrund ein bestimmten Kontrastwert erreichen, damit sie auch von Menschen mit Farbschwächen gelesen werden kann. Den Kontrastwert kann man sich hier ableiten lassen: Das Contrast tool

Wer auf den Geschmack gekommen ist, kann sich hier noch weiter in das Thema vertiefen: Inclusive Design Principles

INSPIRATION

Wo finde ich gute Schriften? Eine Type list to go 😉

Wo kann man gute Schriften finden bzw. Inspirationen finden?

Eine Top Adresse um Schriften in ihrer Anwendung bereits zu sehen ist fontsinuse.com

Einen guten Überblick über verschiedenste Fonts und die Fontsuche findet man auf: https://www.myfonts.com/

Gute Designs und mit extravaganten Schriften findet man auch immer wieder auf: awwwards.com

Weitere empfehlenswerte Foundries Adressen sind: 

https://abcdinamo.com/

https://www.typemates.com/fonts

https://justanotherfoundry.com/

https://www.dstype.com/fonts

INSPIRATION:

Wie schaut die Zukunft der Typografie im Web aus? It`s variable fonts!

Was sind variable fonts, warum sollte man sie einsetzen und wo kann man sie finden? Variable Font ist eine Fontdatei, die sich wie viele Schriftschnitte verhält. Alle Varianten der Schrift – von der Strichstärke über die Breite bis hin zur Neigung – finden in einer hocheffizienten, komprimierten Datei ihren Platz. 
Variable Fonts lösen nicht nur das technische Problem, indem sie viel weniger Dateien verwenden, da ja nur mehr eine Fontdatei benötigt wird, das wiederum zu schnelleren Ladezeiten führt. Auch  neue kreative Möglichkeiten eröffnen sich hiermit und fördern die typografische Qualität von Websiten.

Effektive Typografie verwendet eine Reihe von Strichstärken, Breiten und Implementierungen derselben Schrift. Es schafft starken Kontrast, visuelles Interesse und Hierarchie. Variable Fonts ermöglichen es, viel kreativer und gezielter zu sein. Sie bieten die Möglichkeit, ein überzeugenderes Erlebnis zu schaffen, welches genau auf die Bedürfnisse des Benutzers zugeschnitten ist.

Aus all diesen Gründen darf Typografie nicht vernachlässigt werden. So komplex, verzwickt und breitgefächert es auch ist, ist eine gut gesetzte Typografie im Webdesign definitiv jeden Effort wert. 

Beyond WCAG – Inclusive Design ist mehr als Standards erfüllen von Johannes Lehner, Lead UX Engineer

Ganz viel Liebe und Leidenschaft zeigt UX und Accessibility Profi Johannes Lehner. Für ihn ist es besonders wichtig zu verstehen:

Barrierefreies Design ≠ Inclusive Design

Was bedeutet das eigentlich? Inklusives Design ist wie der coole Partyplaner für Produkte, Dienstleistungen und Interfaces. Es denkt von Anfang an daran, dass alle möglichen Leute mitfeiern können! Das bedeutet, dass wir keine Last-Minute-Änderungen vornehmen müssen, um die unterschiedliche Gäste hereinzulassen. Es ist viel mehr als nur Barrierefreiheit – obwohl Barrierefreiheit natürlich der VIP-Zugang zur Party ist. Aber wir wollen nicht, dass unsere VIPs sich isoliert fühlen. Inklusives Design ist wie die ultimative Party, bei der  einfach jeder von Anfang an willkommen ist. Let’s ALL party together. 🥳

Nützliche Links zum Thema inclusive Design von Johannes findet ihr im Anhang des Beitrags. Viel Spaß beim Nachlesen. 

💛Die Hauptspeise

Wie Animationen eine bessere UX unterstützen von Lukas Kindermann-Zeilinger, Frontend Developer bei Liechtenecker

Swoosh, Plopp, Wish… So oder so ähnlich hört es sich an, wenn Lukas sein liebstes Handwerk ausführt: Animationen. Unser in-house Frontend Developer bekommt gar nicht genug davon. Warum sind Animationen in der UX eigentlich so wichtig?

Was bei der Umsetzung zu beachten ist?

<strong>“Animationen sollen User:innen unterstützen und ihnen den Weg weisen, ohne sie zu überfordern oder zu verwirren. Vor allem mit bereits gelernten Animationen kann man dieses Ziel erreichen.“</strong> Lukas Kindermann-Zeilinger

ANIMATIONEN

Du hast noch nicht genug von diesem bewegendem Thema? In Lukas Blogartikel „Angular Dynamic Page Transitions“ kannst du noch weiter in die Welt der Animationen eintauchen. 

Auch Lukas hat euch im Anhang Links zusammengesucht.

💙Die Nachspeise

Project Canvas – Wie man den Projektstart NICHT vermasselt von Jakob Maul, Digital Project Manager

Unser Herz macht einen Sprung, wenn Personen wie Jakob nicht nur einen super spannenden Vortrag halten, sondern auch spontan ein paar Stunden zuvor einspringen, um uns den Abend zu retten. 👏🏻

Jakob rettet jedoch nicht nur Abende, sondern auch Projekte auf Abwegen. Mit dem „Project Canvas“ hat er den idealen Weg gefunden, um Projekte von jedem Umfang auf Kurs zu halten. Es bietet eine strukturierte Methode, um Projektteams dabei zu helfen, die Grundlagen eines Projekts zu verstehen, zu definieren und zu kommunizieren. Die Verwendung eines Project Canvas kann besonders in agilen Projektumgebungen hilfreich sein, in denen Flexibilität und Anpassungsfähigkeit gefragt sind. Es dient als Ausgangspunkt für Diskussionen und Planungen und kann während des Projekts angepasst werden, wenn sich die Anforderungen ändern. 

Vielen Dank, Jakob, für den spannenden Einblick in den täglichen Wahnsinn einer Projektkoordination. Wir konnten sehr viel davon mitnehmen!

Weitere Fotos zum UX Snacks Vol.04 Event findet ihr hier

We are feeling all the L❤️VE nach der 4. Ausgabe der UX-Snacks. Und weil wir die rosarote Brille gerade schon aufhaben, können wir das auch gleich nutzen, um euch zu verraten, wann die UX Snacks Vol.5 stattfinden.

SAVE THE DATE & SEE YOU THERE:
30. November – UX Snacks Vol. 5

Und jetzt folgen noch ein paar nützliche Links für die Streber:innen unter euch:

Links von Johannes

Barrierefreiheitsgesetz: https://www.ris.bka.gv.at/eli/bgbl/I/2023/76/20230719 (Für alle, die gerne Gesetzestexte lesen 😉 )

Der Link zum Blogbeitrag „Building the most inaccessible site possible with a perfect Lighthouse score“: https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/

Bzgl. WCAG:https://webaim.org/standards/wcag/checklist (offizielle Checkliste von WebAIM)
https://www.w3.org/WAI/WCAG21/quickref/ (auch offizielle „quick reference“ – sehr übersichtlich und besser verständlich als der lange Text)

Und für „Nerds“ – hier mein Post zum WCAG Song 😉 🙂
https://www.linkedin.com/posts/jbeargraphics_web-accessibility-wcag-theme-song-activity-7094993197138898945-tQj4

„Easy read“ Link zu APCA: https://linktr.ee/Myndex (Zum Berechnen verwende ich ganz gerne eines der beiden Tools: https://colorcontrast.app/ oder https://contrast.tools/ )

Mehr Links und Infos sind in den Kommentaren zu Johannes LinkedIn Post zu finden: https://www.linkedin.com/posts/jbeargraphics_a11y-accessibility-colorcontrast-activity-7090982279585374208-dIxD

Accessibility Awareness Poster:https://ukhomeoffice.github.io/accessibility-posters/
(bzw. die Github Seite mit allen Varianten und Sprachen zum runterladen und ausdrucken: https://github.com/UKHomeOffice/posters )
Auch hier – mehr Infos in den Kommentaren zu Johannes LinkedIn Post: https://www.linkedin.com/posts/jbeargraphics_general-guidance-on-how-to-design-more-accessible-activity-7092606212239761408-gSUa

2 Links zum Thema Plain Language und Gender Neutral Language:
https://plainlanguagenetwork.org/
https://uxcontent.com/the-international-guide-to-gender-inclusive-writing/

Und noch 2 allgemeine Empfehlungen:https://www.thebookonaccessibility.com/ und https://www.magentaa11y.com/ (beides von Charlie Triplett und wirklich großartige Ressourcen!)

Und hier die versprochenen Links und ein paar Beispiele aus Lukas’ Talk:

Animation Easing vergleichen und ausprobieren:
https://cubic-bezier.com

Button Beispiele zur Inspiration: https://tympanus.net/Development/CreativeButtons/

Link Beispiele zur Inspiration https://tympanus.net/Development/CreativeLinkEffects/

Warenkorb Beispiel:
https://www.asos.com/

Page Transition Beispiele:
https://www.aspachroneou.com/

https://wearebright.studio/

Scroll Animation
Scrollitelling Comic „The boat“: https://www.sbs.com.au/theboat/

Luft soll aber frisch, leicht und angenehm sein, damit sich jeder wohl fühlt – sprich wir wollen eine optimal gesetzte Typografie für unser Webdesign erzielen.
Das Lesen ist eine erlernte Fähigkeit die wir ca. ab unserem 7. Lebensjahr ausüben. Wir lesen also den Großteil unseres Lebens und das meist unbewusst.

Um schlechte Typografie zu vermeiden, möchte ich hier mal aufdecken, warum eine gute Schriftsetzung nicht nur für die Gestaltung allein wichtig ist, sondern vor allem für den Inhalt der vermittelt werden soll.

Außerdem erkläre ich

Teil 1: Die Einführung

1. First of all: Warum ist Typografie überhaupt wichtig?

Um auf die Wichtigkeit der Typografie aufmerksam zu machen, müssen wir erst mal ein bisschen ausholen und das Leseverhalten in einen größeren Kontext setzen. 

Lesen ist eine Gewohnheit, die wir Menschen uns antrainiert haben. Gewohnheiten bieten einen gewissen Komfort und Sicherheit. Handlungen, die wir immer wieder durchführen, werden im unterbewussten Autopilot-Modus ausgeübt. Wir müssen uns nicht mehr auf die eigentliche Handlung konzentrieren, sondern können uns ganz dem Inhalt widmen. Das gelingt, wenn Leser:innen sich ganz auf Typografie und die Buchstaben verlassen können, wenn die Erwartungen einfach erfüllt werden, und somit Augen und Gehirn leicht Fuß fassen können.
Dann fühlt sich lesen leicht und flüssig an – ja man kann während des Lesens nachdenken, weil das Gehirn sich weniger auf die Erfassung des Textes konzentriert, sondern sich gleichzeitig auch mit dem Inhalt beschäftigen kann. Dies ist im Grunde das oberste Ziel der Schriftsteller:innen oder der Unternehmen, welche ihrem Publikum die Inhalte möglichst gut kommunizieren möchten. 

Wie aber geschieht das Lesen?

Schrift besteht ganz grundlegend aus der Aneinanderreihung von sich abwechselnd schwarzen und weißen Flächen. Zusammen ergeben sie einen Grauwert, den wir mit unserem Auge erfassen und kognitiv verarbeiten. Dabei muss man bei der Gestaltung einer guten Lesbarkeit darauf achten den Satz durch den richtigen Grauwert darzustellen.
Sind beispielsweise auf 1 Quadratzentimeter 15 Linien gezeichnet, kann man sie bei einem durchschnittlichen Leseabstand von 3,5 bis 4 Millimeter durchaus voneinander unterscheiden. Zeichnet man aber 30 Linien auf demselben Quadratzentimeter, so kann man sie schwer voneinander unterscheiden und bei 45 Linien sehen wir großteils nur mehr eine graue Fläche.

Es gibt also eine vom Leseabstand abhängige Grenze für das Vermögen unserer Augen, Linien voneinander unterscheiden zu können. Aus diesem Grund spielen Abstände eine besonders wichtige Rolle. Bei der Schriftsetzung sind folgende Faktoren zu beachten:

Typografen:innen entwerfen im Idealfall ihre Zeichen so, dass das Auge den idealen Weiß- und Schwarzraum möglichst intuitiv erfassen kann. Dabei werden die Punzen (der Weißraum in den Buchstaben), das Kerning (manueller Abstand zwischen bestimmten Zeichen), die x-Höhe und die Formen so aufarbeitet, um eine optimale Lesbarkeit je nach Schriftverwendung zu gewährleisten.

Exkurs: Begriffserklärungen Kerning und Laufweite

Kerning: Nicht alle Buchstaben lassen sich allein durch die Zurichtung harmonisch miteinander paaren, sodass zu große oder zu kleine Abstände die Lesbarkeit nicht beeinträchtigen. Um den stetigen Rhythmus im Schriftbild zu wahren, kommt daher das Kerning zum Einsatz. Es ermöglicht, den Abstand einer bestimmten Zeichenkombination individuell zu definieren, indem es eine zu große Lücke schließt oder zu geringem Weißraum erweitert. 

Laufweite: Über die Laufweite lassen sich die Buchstabenabstände nachträglich vergrößern oder verkleinern. Das ermöglicht eine Verbesserung der Lesbarkeit in unterschiedlichen Schriftgrößen, indem Weißraum auf die optischen Einflüsse abgestimmt wird. Grundsätzlich sind gute Fließtextschriften in ihrer Laufweite schon so gut gesetzt, sodass es vermieden werden sollte die Laufweite noch stark abzuändern, da sonst nicht die beste Lesbarkeit garantiert werden kann. 

2. Was macht eine gute Schrift aus und worauf sollte man bei der Schriftwahl achten?

Eine gute Schrift bietet optimale Lesbarkeit. Diese wird aber nicht allein von Typografen:innen, sondern auch von Gestalter:innen vorausgesetzt, welche die Schrift schlussendlich einsetzten. 

Die Gestalter:innen sollten sich also bei der Wahl einer passenden Schrift ihre Auswahl sehr genau anschauen: 

Zu beachten sind zunächst Proportionen, Strichstärke, Form und Kontrast der Schriftzeichen. Sie bestimmen das Verhältnis von Schwarz und Weiß. Je ausgeglichener dieses ist, desto mehr profitiert die Leserlichkeit. Sie definieren auch den Charakter der Schrift. Diese kann leise und vorsichtig klingen, oder laut und robust. Seriös oder informell, kühl oder verspielt.
Mit ihrer Stimme eignet sich eine Schrift für bestimmte Anwendungsbereiche, für die sie oftmals auch optimiert wurde. Diese „Eignung“ sollte man bei der Schriftwahl unbedingt berücksichtigen. Schließlich hat die Schrift einen Zweck zu erfüllen, und nur eine passende Font kann der von ihr geforderten Aufgabe erfolgreich nachkommen. 

Eine Headline hat beispielsweise den Zweck Aufmerksamkeit auf sich zu ziehen. Die Lesbarkeit kann hier eher an zweiter Stelle stehen. Der Copytext hat die Anforderung einer subtilen Atmosphäre, um den Leser nicht vom Inhalt abzulenken. 

Allein die Art der Formen verleihen unterschiedlichen Webfonts mit demselben Wortlaut eine andere Stimmung. Dies kann man sich als Gestalter:in zu nutze machen, indem man durch die Schriftwahl absichtlich irritiert oder den Ton des Inhalts visuell aufgreift. In der Regel ist es sinnvoll wenn man die Schrift an die Art des Inhalts in gewisser Weise widerspiegelt. 

An folgende Gestaltungskriterien kann man eine gut lesbare Schrift erkennen:

Genauso wichtig ist aber ein zusammenhaltender, stimmiger Einklang. Kein Buchstabe sollte neben einem anderen aus der Reihe tanzen. Der Textblock sollte einen ruhigen, ausgeglichenen Grauton annehmen, ohne, dass dunkle Klekse oder helle Löcher entstehen, da das Auge immer den höchsten Kontrast sucht und daher daran hängen bleibt. 

Bei der Wahl einer Schrift ist auch auf die Vollständigkeit der Schrift zu achten: Schriftschnitte sind besonders wichtig bei Schriftmischungen – dazu später aber noch mehr; Glyphen (In der Typografie bezeichnet “Glyphe” die konkrete grafische oder typometrische Darstellung eines Zeichens innerhalb eines Schriftsystems.) sollten vollständig vorhanden sein, als auch die benötigten Sprachen und die Schriftlizenzen sollten im klaren sein. 

Welche Schriftstile gibt es nun überhaupt und wofür werden sie eingesetzt?

Schriften lassen sich in folgende Schriftstile unterteilen: 

Serif Schriften: Serif Schriftarten werden oft als „Antiqua“ oder römische Schriftarten bezeichnet, da der Ursprung der Serifen auf die römische Inschriftenbuchstaben zurückgeführt wird. Da Serifen Schriften älter sind als Slab Serif oder Sans Serif, gelten sie oft als traditioneller und zuverlässiger. Serifen Schriften können grob in vier Unterkategorien eingeteilt werden: wie oldstyle, modern, transitional, geometrisch und glyphisch.
Serif Schriften Beispiele

Sans Serif: Der Begriff leitet sich vom französischen Wort „sans“ ab, was „ohne“ bedeutet. Die frühesten Groteskschriften stammen aus dem Jahr 1809 und wurden auf englischen Münzen gefunden. Im frühen 20. Jahrhundert wuchs das Interesse an serifenlosen Formen als Ausdruck neuer technologischer Entwicklungen. Die serifenlosen Schriftarten lassen sich weiter unterteilen in: Groteskschriften, geometrische Sans-Serifs, humanistische Sans-Serifs, gerundete Sans-Serifs.
Sans Serif Schriften Beispiele 

Slab serif: werden auch wie Displayschriften für Headlines eingesetzt. Sie fallen mit ihren dicken und blockigen Serifen auf.
Hier einige Slab Serif Schriften zum Vergleich

Monospace: Die frühesten Monospace Schriften erschienen auf Schreibmaschinen, die das Papier bei jedem Tastendruck um den gleichen Abstand bewegten. Daher mussten die Buchstaben identische Breiten teilen. Diese allgegenwärtigen Schriftarten wurden entworfen, um funktional und robust zu sein, und kamen in Drehbüchern und offiziellen Dokumenten zum Einsatz. Heutzutage können Schriftarten mit fester Breite in verschiedenen typografischen Kontexten verwendet werden und vermitteln eine industrielle, nüchterne Atmosphäre. 
Beispiele für Monospace Schriften oder hier

Displayschriften: sind bestimmt für den Einsatz von Headlines, Titeln, Schlagzeilen oder Hervorhebungen – also meist nur für einzelne Wörter oder kurze Sätze.  Beispiel

Script: Sie sind im Allgemeinen für kurze Texte konzipiert, hauptsächlich für Präsentationszwecke, und können in Kursivschrift und lockere, informelle Handschriften unterteilt werden, welche ausdrucksstärker sind. Die Unterkategorien der Handschrift-Schriftarten: Formell, casual, kalligrafisch, Frakturschrift oder Handwritten.
Beispiel

Variable fonts: Für Webdesign besonders interessant sind natürlich variable fonts. Diese Schriften sind eine moderne Art von Webfonts, die es ermöglicht, mehrere Achsen von Designvariationen in einer einzigen Schriftart zu kombinieren. Sie erlauben es, diese Eigenschaften fließend anzupassen, wodurch eine nahezu unbegrenzte Anzahl von Abstufungen und Kombinationen möglich ist. Sie können also ideal für Schriftanimationen eingesetzt werden, Schriftstärke, breite, Neigung und Höhe können kontinuierlich variiert werden. Dies bietet mehr gestalterische Möglichkeiten, insbesondere für responsive Designs und Webseitenoptimierung. 
Variable Fonts Beispiele

In einer weiterer Folge werde ich genauer auf die Schriftlayoutierungen, Schriftfindung und Schriftmischung, eingehen, sprich vieles was die Schriftgestaltung betrifft – stay tuned – 😀