Was sollten Designer in diesem Jahr in den Bereichen UI (User Interface) und UX (User Experience) beachten? Welche Trends dominieren 2023? Unser Communication Design Chapter hat sich die diesjährigen UI-/UX-Trends einmal genauer angesehen und eine kleine Zusammenfassung vorbereitet.
Eine attraktive Benutzeroberfläche auf einer Webseite oder App zu schaffen ist eine Kernanforderung dafür, dass Nutzer:innen überhaupt mit den Inhalten interagieren. Webdesignern stehen hier alle Türen offen. Um den Überblick zu behalten, folgen nun die bedeutendsten Elemente im Bereich UX-/UI-Design für das Jahr 2023.
Hyperpersonalisierter Content
Bei der sogenannten Hyperpersonalisierung wird das Echtzeitverhalten der User genutzt, um zu bestimmen, wie die Webseite oder App in der Folge mit den Usern interagieren solle. Hyperpersonalisierten Content zu nutzen erlaubt es den Nutzer:innen genau das zu sehen, was sie sehen wollen (ob bewusst oder unbewusst) und zwar zu einer Zeit, in der es am wahrscheinlichsten ist, dass sie auf Basis des Content in Aktion treten. Dadurch, dass nur relevante Inhalte angezeigt werden, erhöht sich die Conversion Rate. Die Inhalte der Webseiten werden speziell an individuelle User angepasst, bezüglich ihrer Interessen, der Endgeräte und der Häufigkeit der Nutzung. Die Faustregel hier: Die Webseite oder App hat acht Sekunden Zeit, um den Usern etwas zu zeigen, das ihr Interesse weckt. Nur so können sie auch auf der Seite gehalten werden und klicken nicht weg. Hyperpersonalisierung wird in diesem Jahr einer der führenden UX-/UI-Trends und unter anderem in zahlreiche Marketingstrategien Einzug finden.
Darstellung von electricenjin.com
Kräftige Farben
Kräfte Farben haben sich in diesem Jahr zu einem Muss im Webdesign entwickelt.
Die Fähigkeit, Farben effektiv einzusetzen, ist ein Muss für jeden, der mit visuellen Kompositionen arbeitet, einschließlich Illustrator:innen und UI-Designern. Mit der zunehmenden Popularität von Flat- und Material-Design sind Kenntnisse der Farbtheorie noch wichtiger geworden. Kräftige Farben und Farbverläufe sind heute in den Benutzeroberflächen verschiedener, digitaler Produkte zu finden: von spielerischen und unterhaltsamen Produkten bis hin zu Websites. Farben haben ihre eigene Hierarchie, die hinsichtlich ihrer Wirkung auf den Verstand der Benutzer:innen definiert ist. Es gibt kräftige Farben wie Rot und Orange, aber auch schwache Farben wie Weiß und Creme. Helle Farben sind leicht zu erkennen, daher verwenden Designer sie oft als Mittel zur Hervorhebung oder zum Setzen von Kontrasten. Mehr Informationen zur Wirkung und dem Einsatz von Farben hat unser Communication Design Chapter in diesem Artikel beleuchtet.
Minimalistisches Design
Im Design von Webseiten und Apps wird der Minimalismus immer beliebter. Unter diesen Trend fallen einige Subgenres, zum Beispiel das Flat Design. Das Merkmal dieser Stilrichtung ist das Anwenden flacher, zweidimensionaler visueller Details und das Vermeiden von realistischen, detaillierten Formen. Zum Minimalismus im UX-/UI-Design gehören auch monochrome beziehungsweise begrenzte Farbpaletten. Hier werden die gewählten, wenigen Farben gestärkt und die Benutzer:innen werden nicht durch zu viel Abwechslung gestört. Weitere Elemente des minimalistischen Designs sind unter anderem die Verwendung ausdrucksstarker Typografien, Funktionalität und Einfachheit beim Navigieren durch die Webseite und den Einsatz von Leerräumen.
Die Startseite von www.apple.com als Beispiel für minimalistisches Webdesign.
3D-Modelle
3D-Modelle können einen höheren Visualisierungs- und damit Verständnisgrad schaffen.
3D-Modelle ersetzen zweidimensionale Bilder und Videos, damit sich User besser in die virtuelle Welt integrieren können. So ist es beispielweise in Onlineshops möglich, dass die Nutzer:innen einen besseren Eindruck von den Produkten bekommen. Durch 3D-Modelle kann die Interaktion mit digitalen Inhalten auf ein neues Level gebracht werden. 3D-Elemente wie Produkte, Gebäude oder Landschaften in Webseites zu integrieren, kann eine ansprechende und realistische Benutzererfahrung schaffen. Die Modelle können interaktiv sein, also durch die Benutzer:innen zoom- und drehbar. Ein weiterer Vorteil der 3D-Modelle ist, dass komplexe Inhalte verständlich dargestellt werden können. Ein 3D-Modell kann ein Produkt und dessen Funktionen sowie Komponenten besser und verständlicher visualisieren als eine einfache Fotografie oder eine 2D-Zeichnung.
Mikroanimationen
Eine Mikroanimation der Seite smashmallow.com
Wie der Name bereits vermuten lässt, sind Mikroanimationen kleine Animationen. Aber in diesem Fall bedeutet klein nicht unbedeutend. Mikroanimationen sind äußerst hilfreich, wenn es darum geht, Nutzer:innen über die Webseite zu leiten und die Aufmerksamkeit auf bestimmte Elemente zu richten. Sie können der Webseite auch ein spielerisches Element hinzufügen. Mikroanimationen sind zwar schon seit ein paar Jahren beliebt, aber in diesem Jahr wird es darum gehen, sie organisch einzusetzen. Ein großer Vorteil in der Verwendung von Mikroanimationen liegt in der erhöhten Interaktionsrate. Mikroanimationen belohnen User, beispielweise indem eine Animation erscheint, wenn man einen bestimmten Button anklickt. Der User verspürt dadurch eine Art Belohnung und möchte den Vorgang wiederholen. Dieser Aktions-Belohnungs-Zusammenhang kann gezielt als Technik zu mehr Interaktion genutzt werden. Interaktionen im Webdesign, die zwischen Benutzer:innen und Interface stattfinden, sind beispielweise Feedback beim Klicken, Loading Indicators, Hover-Effekte und Scroll-Effekte.
Seitenladezeit (Page Load Speed)
Die Seitenladezeit misst – wie der Name bereits verrät – wie schnell der Inhalt auf einer Website geladen wird. Es geht also um die Zeit, die benötigt wird, um den Inhalt einer bestimmten Seite vollständig anzuzeigen. Sie kann auch als „Zeit bis zum ersten Byte“ bezeichnet werden, das heißt die Zeit, die der Browser benötigt, um die erste Information vom Server zu empfangen. Die Seitengeschwindigkeit ist sehr wichtig, da Webseiten, die schnell laden, natürlich auch schneller Inhalte liefern. Sie erfüllen also die Bedürfnisse der modernen Nutzer:innen besser. Aus diesem Grund wird die Seitenladezeit schon seit vielen Jahren von Suchmaschinen als Rankingfaktor verwendet. Von Jahr zu Jahr nimmt ihre Bedeutung zu. Ursprünglich war die Seitenladezeit nur eine Kennzahl, um festzustellen, wie schnell Nutzer:innen auf den Seiteninhalt zugreifen können. Inzwischen hat sie sich jedoch zu einem wichtigen Indikator für die Benutzerfreundlichkeit einer Website entwickelt.
Adaptives Design
Adaptives Design ist kein flüssiges Design. Anstatt das Bildschirmlayout zu ändern, um es an jede Gerätegröße anzupassen, wird ein statisches, festes Layout definiert, das an die jeweilige Bildschirmgröße angepasst wird. Adaptive Webseiten sind für die beste Nutzererfahrung optimiert – sie laden schneller und verwenden Bilder sowie Menüs, die für die mobile Nutzung optimiert sind. Ein hervorstechendes Merkmal des adaptiven Designs ist beispielweise das Layout der Website, das für verschiedene mobile Geräte optimiert ist. Dadurch wird die Einheitlichkeit der Webseite auf allen Geräten gewährleistet. So werden die Größe und das Design der Bilder an die Größe des Geräts angepasst und bieten den Besucher:innen der Webseite ein ideales Seherlebnis.
Der Unterschied zwischen adaptivem und responsivem Design. Darstellung von www.clariontech.com
Quellen:
- https://electricenjin.com/how-to-hyper-personalize-your-customers-experience-in-the-digital-marketing-space
- https://merehead.com/blog/graphic-web-design-trends-2023
- https://codegoda.io/
- https://www.apple.com
- smashmallow.com
- https://www.theedigital.com/blog/web-design-trends
- https://dribbble.com/shots/16265014-Delight-3D-and-Animation-for-Smart-Home
- https://lead-online.de/magazin/webdesign/webdesign-trends-2023/
- https://www.smarterdigitalmarketing.co.uk/page-speed-vs-web-design-how-to-do-both-right/
- https://www.clariontech.com/blog/responsive-vs.-adaptive-website-design-know-the-difference