Schnellere Internetverbindungen, mobiles Web-Browsing und die stetige Weiterentwicklung von Technologien haben das Nutzerverhalten im Netz stark verändert. Das hat auch Auswirkungen darauf, wie User Marken im Web wahrnehmen. Damit Sie Ihre Marke online ins beste Licht setzen können, werfen wir einen Blick auf aktuelle Trends in der User Experience (Nutzererlebnis) und User Interface (Nutzeroberfläche).
In den Anfängen des Webdesigns waren mobile Endgeräte noch Zukunftsmusik. Die meisten Websites wurden daher für einen Desktop-Screen gestaltet. Das brachte mit dem Aufkommen von Smartphones und Co. ein Problem mit sich: Auf den kleinen Bildschirmen liess die User Experience stark zu wünschen übrig und das Markenerlebnis litt.
«Responsive Webdesign» bedeutet «mobile and content first»
Um die Nutzererfahrung und das Markenerlebnis auch auf mobilen Endgeräten sicherzustellen, wurden Websites für kleine Screens optimiert. Ein Trend, der bis heute anhält und sich stetig weiterentwickelt.
Für die Smartphone-Optimierung mussten sich die Website-Betreiber auf neue Art und Weise mit dem Design und Inhalt auseinandersetzen. Abspecken hiess die Devise. Denn auf den kleinen Screens hatte nichts Überflüssiges mehr Platz. Die ersten Resultate stellten die User jedoch nicht zufrieden: Die ersten für Smartphones optimierten Websites waren lediglich stark vereinfachte Desktop-Websites.
Der logische Schluss aus diesen Entwicklungen: die mobile Version und die Inhalte an erste Stelle zu setzen. So kommen auch die heutigen Desktop-Seiten aufgeräumt und schlank daher. Auf einer modernen, nutzerfreundlichen Website muss sich niemand mehr durch überfüllte Informations-Dschungel klicken. Das sorgt für eine positive User Experience – und die User behalten die Marke in bester Erinnerung.
Schlanke Inhalte und Nutzerfreundlichkeit – dafür steht Responisve Design heute. © kernbrand.ch
Die Evolution von Flat Design
Mobile Endgeräte haben nicht nur kleinere Bildschirme, sondern häufig auch eine langsamere Ladezeit. Dem kommt das Flat Design entgegen. Dieser Trend startete 2010. Von Swiss Design und Minimalismus inspiriert, ist es noch immer die meistgenutzte Technik im Webdesign, da es mehr eine Evolution denn Revolution darstellt. Heute wird «flat» nicht mehr so streng ausgelegt wie früher – es darf auch mal mit Schatten gearbeitet werden, wenn es das Nutzerlebnis verbessert. Hauptmerkmale vom heutigen Flat-Design sind ausdruckstarke Farben, mutige Typographie und grossflächige Fotografie.
Früher (links) wurde Flat Design strenger ausgelegt wie heute (rechts). © Riki Tanone und Arthur Lipsky via dribbble.com
Die Rückkehr des Scrollens
Schnell mit dem Finger über den Bildschirm wischen und durch einen Artikel scrollen – kein Problem. Smartphone- und Tablet-Nutzer sind sich das gewohnt. Dies wiederum hat Rückwirkungen auf die Gestaltung der Desktop-Version von Websites: Nachdem jahrelang gepredigt wurde, dass die ganze Seite auf den ersten Blick sichtbar sein muss – d.h. «über dem Falz» – ist Scrollen inzwischen nun wieder ein fixer Bestandteil des Erkundens von Websites. Aber Achtung: Das Scrollen muss interaktiv sein und Spass machen. Wenn es zum Frust wird, verlässt der Nutzer die Seite sofort. Ein gelungenes Beispiel ist der aufwändige und sehr schön gemachte Parallax-Effekt auf der Website des Games «FireWatch».
Parallax-Effekte laden zum Scrollen und Entdecken ein. © Eddie Lobanovskiy via dribbble.com
Interaktionen
Nutzer wollen mit Websites interagieren und Website-Betreiber möchten, dass Nutzer mit ihrem Content interagieren. Der Trick dabei: Die Interaktion spielerisch und nahtlos zu gestalten und so ein positives Erlebnis für den Nutzer zu schaffen, das er dann mit der Marke in Verbindung setzt. Wichtig ist, die Webseite nicht mit unnötigen Features, Animationen und Interaktionen zu überladen, sondern diese mit einem genau definierten Ziel bewusst zu platzieren.
Features, Animationen und Interaktionen müssen gezielt eingesetzt werden, damit sie ihre Wirksamkeit entfalten. ©Sam Thibault via dribbble.com
Tiny Animations
Erfolgreiche Bewegung im Webdesign muss nicht aufdringlich sein. Dezente Aktionen sind die beste Art, Bewegung ins Design zu bringen. Gute Beispiele sind Hover-Zustände – d.h. Effekte beim Überfahren mit der Maus – oder Lade-Animationen. Solche Tiny Animations können dem User helfen, sich auf spezifische Elemente des Inhalts zu fokussieren oder ihn zum Klicken animieren. Dieser Trend steckt noch in den Kinderschuhen und konzentriert sich bisher auf Desktop-Seiten. Wir sind gespannt, wie sich das bei mobile-Phones weiterentwickeln wird.
Animieren zum Klick und lenken den Blick auf wichtige Inhalte: Tiny Animations. © Patryk Kalwas via dribbble.com
Fazit
Neue Wege des Denkens werden zu immer innovativeren Lösungen führen und Marken werden mit immer mehr Fokus auf User Experience im Web inszeniert. Besonders das Responsive Web zwingt uns, alte Wege zu überdenken und die neuen Möglichkeiten gewinnbringend einzusetzen.