Die Konzepte UI (User Interface) und UX (User Experience) sind über 70 Jahre alt. Ihnen wird allerdings erst seit kurzem die notwendige Aufmerksamkeit geschenkt. UX ist verantwortlich für Benutzeremotionen, Anpassungsfähigkeit und Produktfunktionalität. UI ist verantwortlich für die Darstellung der Oberfläche unter Beibehaltung eines einheitlichen Stils und einer einheitlichen Logik, sowie für die Interaktion des Produkts mit dem Benutzenden.

E-Book-Download: Mit einer optimierten Website zu mehr Traffic und Leads

UX und UI Design: Eine Definition

Beim UX-Design geht es darum, ein einfaches Interface einer Webseite zu kreieren. Je verständlicher es für Benutzende ist, desto höher ist die Wahrscheinlichkeit, dass diese gezielte Aktionen durchführen und das gewünschte Ergebnis erhalten kann. Beim UI-Design geht es um die Arbeit an der grafischen Darstellung: Schriftarten, Schaltflächen, Menüs und Illustrationen, die in der Benutzeroberfläche verwendet werden.

Ein UX-Designer muss das Benutzerverhalten analysieren, neue Verhaltensalgorithmen erstellen und testen. Ein UI-Designer erklärt einem Benutzer oder einer Benutzerin, wie mit dem fertigen Produkt gearbeitet werden soll. Objektiv betrachtet sind UI und UX aber so sehr miteinander verflochten, dass es oft keine klaren Grenzen zwischen ihnen gibt.

Was beide Konzepte gemeinsam haben ist die ständige Weiterentwicklung. Es tauchen regelmäßig neue Trends auf, die die bisherigen Ideen oft radikal verändern. Im Folgenden lernen Sie 14 wichtige Trends kennen, die die Entwicklung von UI / UX in nächster Zeit prägen werden.

Verhaltensforschung

Tests und Analysen zum Benutzererlebnis werden im Jahr 2021 immer wichtiger. Viele Marken legen zu viel Wert auf ein optimales Erlebnis. Das Problem bei der Produktentwicklung ist, dass hierbei häufig nicht aus Sicht der Benutzenden gedacht wird.

Produktentwickler können deswegen nicht alle Probleme vorhersehen, auf die eine Person bei dem Besuch einer Webseite trifft. Das bedeutet, dass Sie analysieren müssen, welche Art von Unterstützung der Benutzer oder die Benutzerin erhalten wird, wenn er oder sie einen Fehler macht und nicht das erwartete Ergebnis erhält.

Sie können zum Beispiel eine spezielle Software verwenden, die Benutzersitzungen reproduziert. Das gelingt beispielsweise mit einer sogenannten Heat Map: Durch die Bewegungen und Aktivitäten des Besucher-Mauscursors lassen sich Verhaltensmuster eines Webseitenbesuchers visualisieren. Sie können dadurch nicht nur Benutzerprobleme analysieren, sondern auch Designlösungen testen

Verbesserung des Anpassungsprozesses

Dieses Prinzip wird in mobilen Anwendungen eingesetzt und birgt ein großes Potenzial. Es beschreibt Startbildschirme mit „Tooltips“ und Hinweisen. Diese machen die Dinge viel einfacher, besonders für Menschen, die das Produkt noch nie zuvor gesehen haben.

Hinweise sind ein wichtiges Element der Navigation. Beim Design eines Interfaces achten die Entwicklerinnen und Entwickler auf Standardkomponenten, können aber auch mit der Visualisierung und Platzierung der Elemente experimentieren. Die ganze Arbeit kann jedoch nutzlos sein, wenn der Benutzende nicht versteht, wie er das Formular ausfüllen oder das Menü aufrufen kann.

Hinweise können optimal genutzt werden, wenn die Struktur einer Anwendung oder eines Programms auf der Grundlage der Untersuchung des Benutzerverhaltens und der Benutzerbedürfnisse entworfen wurde. Hinweise können für beliebige interaktive und grafische Elemente verwendet werden:

  • Kurze Anweisungen beim ersten Öffnen der Anwendung

  • Tooltips

  • Automatische Prüfung des ausgefüllten Feldes

  • Fortschrittsanzeige, etc.

Ihre Aufgabe ist es, den Benutzer schneller mit dem Produkt vertraut zu machen und eine komfortable Interaktion zu ermöglichen.

Animierte Benutzeroberfläche

Eine animierte Benutzeroberfläche ist nützlich für die Verbesserung der Kundenerfahrung. Animationen halten die Aufmerksamkeit der Webseitenbesucher auf bestimmten Inhalten und schöpfen das Potenzial der Webseiten-Oberfläche effizienter aus als statische Grafiken.

Es wird erwartet, dass mehr Marken in diesem Jahr mit Animationen experimentieren werden, indem sie zum Beispiel versuchen, animierte Schaltflächen und andere Elemente anstelle der standardmäßigen Pop-ups oder Banner zur Benutzeroberfläche hinzuzufügen. Besonders für mobile Anwendungen ist eine animierte Benutzeroberfläche effizient, da sie den Besuchenden die stattfindende Aktion konkret visuell anzeigt.

Dunkles Theme

Der Dunkelmodus wird von den bekanntesten Produkten und großen Marken wie Instagram, Android und Google angeboten. Dieser Trend ist zwar nicht neu, wird aber auch im Jahr 2021 relevant bleiben. Hier sind ein paar Gründe dafür:

  • Es ist einfacher, die notwendigen Designelemente vor einem dunklen Hintergrund hervorzuheben.

  • Das Erscheinungsbild ist hochmodern.

  • Die Akkulaufzeit wird bei Geräten mit OLED- / AMOLED-Bildschirmen deutlich verlängert.

  • Bei geringerer Helligkeit ist die Belastung für die Augen geringer.

Dunkle Themes haben ein großes Entwicklungspotenzial, sowohl auf mobilen als auch auf Desktop-Geräten. Um das Potenzial für Ihre Anwendung zu testen, können Sie für dafür eine Schaltfläche zur Aktivierung des Dunkelmodus hinzufügen und analysieren, wie viel Prozent der Benutzenden die neue Funktion (also das Dark Theme) wählen und wie viele das alte, helle Design bevorzugen.

Apple-Geräte bieten in den Einstellungen sogar die Option, den Modus automatisch zu wechseln.

3D-Entwicklung anstatt 2D

Die modernen Konzepte einer erfolgreichen Benutzererfahrung und -oberfläche basieren auf den Prinzipien der Originalität. Dreidimensionale Objekte wurden zum Beispiel anfangs nur in der Spieleindustrie verwendet, aber jetzt findet man sie auch in mobilen Anwendungen und Webseiten. „Flache" Bilder werden also bald schon der Vergangenheit angehören.

amazon logo mit 3d effektQuelle: designershub.com

Es gibt unterschiedliche 3D-Effekte. Manchmal müssen Sie nur Schatten unter einem Text verwenden, um die Buchstaben optisch voluminöser zu gestalten. In anderen Fällen können Sie voluminöse Elemente der visuellen Identität erstellen, indem Sie zum Beispiel den Service von Logaster verwenden, um sie zu generieren. Sie können auch AR- oder VR-Technologie testen, um das Design der Benutzeroberfläche mit animierten Grafiken zu ergänzen.

3D-Effekte können die Benutzeroberfläche informativer und interessanter machen. Die 360-Grad-Ansicht ist ein Beispiel dafür. Sie gehört zwar zu einer anderen Kategorie, erfüllt aber die gleiche Funktion wie 3D-Objekte: Sie gestaltet Objekte realistischer und bietet quasi einen Rundumblick.

Design mit Fokus auf die Geschwindigkeit

Ein Teil der Menschheit kämpft zwar weiterhin gegen die 5G-Technologie, aber sie entwickelt sich aktiv weiter und hat auch Einfluss auf Trends im Bereich Benutzererlebnis und Design. Die Internetgeschwindigkeit hat sich deutlich erhöht. Deswegen ist es für das Benutzererlebnis bei modernen Anwendungen und Webseiten wichtig, dass sie eine geringe Ladezeit haben. Das sorgt für einen Widerspruch: Es ist einerseits möglich, mehr Oberflächenelemente zu verwenden, weil die Geschwindigkeit höher ist - aber die Geschwindigkeit verringert sich wiederum, wenn die Anzahl der Elemente erhöht wird. 

In diesem Fall ist eine detaillierte Analyse der Bedürfnisse Ihres Zielpublikums wichtig. Analysieren Sie das Benutzerverhalten und fügen Sie nur solche Details auf Ihrer Webseite hinzu, die für wertvoll für das Design sind und keinen entscheidenden Einfluss auf die Ladegeschwindigkeit haben. Mit kostenlosen Werkzeugen (z.B. GTmetrix) können Sie die Seitenladezeiten ermitteln und die Ursachen und überflüssigen Elemente finden, die Ihre Anwendung verlangsamen.

Geräte synchronisieren

Der durchschnittliche Konsumierende besitzt mehrere Geräte, die im regelmäßigen Wechsel oder sogar gleichzeitig verwendet werden. Sie benötigen daher UX-Designs, die auf allen Betriebssystemen und Plattformen gleich gut funktionieren. Die Funktionalität der verschiedenen Gadgets sollte aber mit einer einzigen Handlung synchronisiert werden können.

Denn Benutzerinnen und Benutzer verwenden nicht mehr nur Smartphones und Laptops, bei denen die UX-Designs aufeinander abgestimmt sein sollten.

Es gibt auch andere Gadgets, die täglich verwendet werden, wie beispielsweise Tablets und Smartwatches. Das UI / UX Design sollte daher für alle Arten von Benutzergeräten konzipiert sein. Das umfasst unter anderem die Synchronisation von Daten, wodurch Konsumierende auf jedem ihrer Geräte all ihre Daten gespeichert und griffbereit haben.

Augmented-Reality-Apps für mobile Geräte

Es wird erwartet, dass der weltweite Umsatz mit mobilen AR-Anwendungen bis 2022 auf  15497.53 Millionen Dollar ansteigen wird.

Was macht „Augmented Reality“? Sie erweitert die Möglichkeiten des UX-Designs für mobile Geräte und bietet ein umfangreicheres Benutzererlebnis. AR beseitigt alle physischen Barrieren bei der Interaktion zwischen den Benutzenden und der Anwendung. Dadurch ändert sich das Kommunikationserlebnis mit einer Marke komplett.

Durch die Integration virtueller Designelemente in den physischen Raum ermöglichen die Entwicklerinnen und Entwickler den Anwendern eine tiefgreifendere Interaktion mit dem Produkt. Augmented Reality hat ein enormes Potenzial, vor allem für Marken, die ihre Produkte online verkaufen oder im Bildungsbereich, den Medien oder in der Unterhaltungsbranche tätig sind. Beispiele für AR-Anwendungen in diesen Bereichen sind virtuelle Umkleideräume oder interaktive Lernwerkzeuge.

agmented reality mit doodlens appQuelle: doodlelens.app

Revolutionäre Asymmetrie und „falsche“ Layouts

Asymmetrisches Design ist überall zu finden ist. Auch der menschliche Körper ist nicht perfekt symmetrisch: Die Länge der Arme ist zum Beispiel leicht unterschiedlich.

Asymmetrie kann und sollte in den Oberflächen von Web-Anwendungen und mobilen Programmen genutzt werden. Die Gründe für die Verwendung hängen von der Gesamtdesignstrategie ab. Asymmetrie wird zum Beispiel benötigt, um Gleichgewicht und Harmonie zu erreichen, oder um ein gewolltes „Chaos“ zu erzeugen.

Wenn Sie die erste Option (Gleichgewicht und Harmonie) wählen, dann basiert das asymmetrische Design auf Lücken, klaren Linien, kontrastierenden Farben. Wenn Sie ein Gefühl von „Zufälligkeit“ hinzufügen möchten, dann sollten Sie unkonventionelle Farbkombinationen, ungewöhnliche Kompositionen oder „zufällige“ Objekte verwenden.

Die richtige Verwendung von Asymmetrie führt entgegen der anfänglichen Erwartung zu einer Ordnung der Inhalte. Die Grenzen der Wahrnehmung werden verschoben, was die Marke einzigartig macht.

wholy dose website bilder von kaffeeQuelle: wholydose.com

Unkonventionelle Typografie

Fast alle modernen App-Designer wissen, dass die Typografie wichtig ist. Es gibt jedes Jahr neue Trends, durch die sich die Größen und Arten von Schriften sowie die Möglichkeiten für ihre Anordnung auf den Seiten verändern.

Die Schriftarten werden im Jahr 2021 unkonventioneller aussehen. Riesige Beschriftungen, die die Bilder teilweise oder ganz verdecken, werden zum Beispiel relevant sein. Buchstaben, die die ganze Aufmerksamkeit auf sich ziehen oder über die Grenzen des Bildschirms hinausgehen, werden Ihnen in der Zukunft auf einigen Webseiten begegnen.

Das UI / UX Design im Jahr 2021 erlaubt verschiedene Schriftarten (auch Serifen), kontrastierende Farbkombinationen und allgemeine Disharmonie. Das soll Aufmerksamkeit erregen und die Aufmerksamkeit der Benutzerinnen und Benutzer länger auf Ihrer Anwendung halten.

Generatives Design

Bei dem generativen Design handelt sich um Programme, die in der Lage sind, große Mengen ähnlicher Daten zu analysieren, gemeinsame Merkmale zu finden und auf der Grundlage der bereitgestellten Informationen neue Daten zu erstellen. 

Es gibt bereits mehrere Dutzend dieser auf Algorithmen basierenden Werkzeuge, unter anderem Fusion 360, Creo Generative Design oder nTop Platform. Sie können verwendet werden, um Layouts zu entwerfen, Stile auszuwählen, die Zugänglichkeit zu steuern und andere Aufgaben zu erledigen, für die früher viel Zeit und wenig kreativer Aufwand erforderlich war.

Berührungslose Interaktion

Dieser Trend hat angefangen, sich nach der Corona-Pandemie zu entwickeln. Durch die neuen Regeln für die kontaktlose Interaktion zwischen den Menschen (und Geräten) ist er weltweit relevant geworden. Es geht um verschiedene Möglichkeiten, mit Geräten zu arbeiten, ohne sie direkt zu berühren. Das ist zum Beispiel durch verschiedene Sprachschnittstellen und der Steuerung durch Gesten, wie beispielsweise bei der kontaktlosen Bezahlung, möglich.

Gestensteuerungstechniken werden in Zukunft wahrscheinlich sogar Touchscreens ersetzen. Ein Beispiel hierfür ist die berührungslose Steuerungstechnologie der europäischen Luxusautomarke DS Automobiles. Eine Demonstration des Systems hat gezeigt, dass Gesten 3-mal genauer funktionieren als die Steuerung über einen Touchscreen:

UI / UX und Künstliche Intelligenz 

Die Benutzeroberfläche und das Benutzererlebnis werden von Experten und Expertinnen gestaltet. Das Endprodukt hängt direkt von ihren Handlungen und Fähigkeiten ab. Die aktuellen Trends zielen daher nicht nur auf die Anwender ab, sondern auch auf die Entwicklerinnen und Entwickler.

Alle modernen Werkzeuge für die Arbeit mit Schnittstellen haben im Allgemeinen die folgenden Ziele:

  • Weniger Routine bei der Verwendung

  • Synchronisierung der Arbeitsprozesse von Designern und Entwicklern

  • Komfortable Entwicklungsumgebung

  • Die Möglichkeit, aus der Ferne an gemeinsamen Projekten zu arbeiten

All das zusammen bildet einen der Haupttrends für das moderne Design der Benutzeroberfläche. Das Ziel ist, die Arbeit der Designerinnen und Designer durch Technologien und Werkzeuge der nächsten Generation zu erleichtern.

Ein Beispiel für den Einsatz von KI im UX Design ist Adobe. Adobe’s Update für die Photoshop-Version 22.0 enthält eine Reihe innovativer KI-gestützter Funktionen von Nvidia. Es handelt sich dabei insbesondere um eine Reihe von Bildbearbeitungswerkzeugen, die auf „Neural Filters“ basieren. 

Ein weiteres Beispiel ist der Grafikeditor Pixelmator. Die Pro-Version nutzt maschinelles Lernen für Funktionen wie automatische Ebenenbenennung, Horizonterkennung und Objektentfernung.

Fazit: Benutzerfreundlichkeit als konstanter Trend

Die aktive UI / UX-Entwicklung wird 2021 viele Möglichkeiten bieten. Marken werden sich mit mehreren Themen gleichzeitig beschäftigen müssen, von der Einführung eines dunklen Themes bis hin zum 3D-Rendering von Elementen. Ein Trend, der sich dabei durch alle Designs ziehen wird ist die Wichtigkeit eines herausragenden Benutzererlebnisses.

website optimierung

Titelbild: scyther5 / iStock / Getty Images Plus

Hinweis: Bei diesem Beitrag handelt es sich um einen Gastbeitrag von Dmytro Leiba, Marketingexperte bei Logaster.

Ursprünglich veröffentlicht am 13. Mai 2021, aktualisiert am Mai 13 2021

Themen:

Webdesign