von TN34 So sieht das Web 2018 aus

Bedeutungsvolle Kleinigkeiten: Mikrointeraktionen

Volume-Control-Animation

Egal, ob nun als Benachrichtigungszähler, Emoji-Button oder als animierte Buttons: kleine Animationen geben unmittelbar Feedback, sobald sich etwas verändert oder der Nutzer in Aktion treten sollte. Im Webdesign sind solche Mikrointeraktionen kein besonders neuer Trend, aber trotzdem zunehmend wichtig und vor allem auch immer besser zu gestalten. Denkt man an Facebook und seine Reaktionen (die den Like-Button ersetzt haben), wird klar, wie mächtig solche kleinen Stellschrauben sein können.

Denn Mikrointeraktionen eröffnen neue Wege, die Nutzer einer Website zu emotional zu belohnen, zum Beispiel mit einem passenden Emoji, und interessiert zu halten. Vor allem übernehmen sie immer häufiger die Aufgaben, die vorher einzelne Pop-ups oder überlagernde Seitenelemente hatten, nämlich kurze Informationen zu geben. Ein schönes Beispiel sind auch Ladebalken und Erfolgsbenachrichtigungen bei Down- und Uploads.

Fazit: (noch) mehr Liebe zum Detail

Die kleinen Details sind es oft, die eine Website zum Erlebnis machen. Im Fall von Mikrointeraktionen sind es nützliche oder auch einfach nur unterhaltsame Details, die aber auch Werte verkörpern können, die Sie mit Ihrer Website transportieren wollen.

Vom Inhalt zum Symbol: Typographie

Typographie ist natürlich kein Trend an sich, sondern ein Bereich des Webdesigns. Allerdings ist diese Disziplin – ähnlich wie Farben – immer wieder interessanten Veränderungen ausgesetzt. Allein schon deswegen, weil allen Weiterentwicklungen im Bereich (Bewegt-)Bild zum Trotz der Großteil des Webs aus Text besteht, ist die Textgestaltung ein extrem wichtiger Teil der Arbeit am Webdesign.

Text als Gestaltungselement ist ein Anwendungsbereich, der erst in den letzten Jahren wieder an Aufmerksamkeit gewonnen hat. Insbesondere durch moderne Methoden der so genannten Advanced Web Typography, also der weiterentwickelten Schriftenvewendung im Web, wurde der Einsatz von Schriften im Webdesign bequemer und vor allem auch über Browser-Grenzen hinweg zuverlässiger.

Die neuesten Entwicklungen kommen verschiedenen Webdesign-Trends entgegen: Zugänglichkeit etwa, geht über die Konventionen der Barrierefreiheit hinaus. Dabei spielt vor allem der mittlerweile überwiegende mobile Teil der Internetnutzung eine wichtige Rolle. Wenn Bildschirmgrößen derart variieren und vor allem „eingeschränkte“ Möglichkeiten des Medienkonsums (einhändig in der U-Bahn, im Sonnenlicht am Strand) eher der Standard als die Ausnahme sind, muss sich das Webdesign entsprechend anpassen.

Plötzlich spielt die nahtlose Skalierbarkeit aller Inhalte und vor allem der Schriften eine größere Rolle (was zum Beispiel über neuere css-Attribute wie „ch“ und mit Variable Fonts gesteuert werden kann). Mit einer zunehmend globalen Reichweite kommen auch neue Anforderungen an Übersetzungen und Lokalisierungen von Websites. Auch hier greifen Neuerungen in der Web-Typographie, wie css-Attribute für die Laufrichtung. Und zu guter Letzt sind da noch Texteffekte, die es möglich machen, über statische Zustände hinaus Text zum Leben zu erwecken und eine technisch saubere und stabile Alternative zum datenhungrigen Bewegtbild-Content bieten.

Eine großartige Übersicht über die wichtigsten Elemente des modernen Typographie-Einsatzes im Webdesign gibt es übrigens von Jonas Hellwig in seinem Talk auf der Contao Konferenz 2018:

Fazit: Es lebt!

Dank Advanced Web Typography werden neue Gestaltungsmöglichkeiten im Web geschaffen, die eher dem Print-Universum zugetanen Nutzer*innen viel Freude bereiten werden. Die ganzheitliche Sicht auf die Website-Besucher*innen und deren Nutzungsszenarien wird außerdem – neben der Dominanz der mobilen Nutzung – außerdem zum bestimmenden Thema für die Gestaltung von Online-Angeboten. Text lebt also, und wie!

Die App ist tot, lang lebe die App: Progressive Web Apps

smartphone neben Laptop

Wie schon erwähnt überwiegt die mobile Nutzung von Online-Inhalten mittlerweile deutlich, auch wenn sich der Desktop hartnäckig als professioneller Knotenpunkt der Webnutzung halten kann. Aber mit der mobilen Revolution kamen auch die Apps in unser Leben: kleine und große Programme, die fest installiert auf unseren mobilen Geräten eine feste Aufgabe haben und uns online und offline zur Verfügung stehen. Apps sind allerdings auch ressourcenhungrig und wegen der schier unermesslichen Vielfalt an Endgeräten (zumindest im Android-Universum) schwer in der Gestaltung zu handhaben.

Diesen zwei Hauptpunkten (neben weiteren, die wir in diesem Artikel beleuchten) begegnen Progressive Web Apps, die das mobile Web mit der Welt der nativen Apps verheiraten. Eine PWA ist im Grunde eine mobile Website, die mit einem Schnellstart-Symbol auf dem Startbildschirm eines mobilen Endgeräts (und zunehmend auch Desktop, siehe Microsoft App Store) abgelegt wird und eine sozusagen geschlossene Browser-Instanz öffnet. Dabei machen sich PWAs neueste Entwicklungen in der Programmierung zunutze, um auf Gerätefunktionen und Offline-Inhalte zuzugreifen, die sonst nur nativen Apps vorbehalten waren.

Das bedeutet, dass die Frage, ob Website oder App für Betreiber in Zukunft leichter zu beantworten sein sollte. Denn das entweder-oder macht einem sowohl-als-auch Platz. Wichtig für das Webdesign werden dadurch andere Fragen:

  • Wer nutzt die Seite wann wofür?
  • Welche Funktionen sollen offline verfügbar sein?
  • Welche Gerätefunktionen habe ich zur Verfügung und wie setze ich sie nutzerorientiert (heißt Sinn-voll!) ein?
  • Welches Design ist der Nutzer gewohnt, bzw. wie nutze ich dazugewonnenen Platz (z. B. durch Vollbildanzeige)?

Fazit: Die Zeiten von App vs. Web sind vorbei

In Zukunft stehen Fragen der Nutzungsszenarien viel stärker im Vordergrund. PWAs bieten Webdesignern ganz neue Möglichkeiten, mit dem besten aus beiden Welten zu arbeiten – immer im Dienste des optimalen (mobilen) Nutzererlebnisses. Für uns einer der heißesten Trends im ganzen Online-Bereich!

Und was treibt Sie um?

Schreiben Sie es uns: service@tn34.de!

Zurück

Wie können wir helfen?

Internet Explorer? Ernsthaft? Aufgrund Ihres Browsers sehen Sie hier nichts! Spätestens seitdem Microsoft selbst vor der Nutzung des Internet Explorers warnt, haben wir uns entschlossen diese Webseite nicht für eine "Kompatibilitätslösung für ältere HTML-Anwendungen" (Zitat Microsoft) zu optimieren.

Wer mehr wissen will findet hier mehr Infos, oder Sie laden sich einfach einen echten Browser herunter (einfach auf die Icons klicken) und genießt die Möglichkeiten des Internets im Jahr 2019.