WAS BEDEUTET USER-EXPERIENCE (UX)

Der Begriff User Experience (UX), bezeichnet die Erfahrung die ein Nutzer bei der Interaktion mit dem Produkt erlebt. Meistens ist dieses Produkt eine Maschine oder im IT-Bereich ist der Begriff User Experience meist im Zusammenhang mit der Gestaltung von Websites oder Apps zur Anwendung. Übersetzt bedeutet User Experience wörtlich: Nutzererfahrung / Nutzererlebnis.

WAS BEDEUTET UI-DESIGN (UI)

Das User Interface (UI) bezeichnet das Design, auf der die Interaktion zwischen Mensch und Maschine stattfindet. Das UI gehört dabei weder zum Menschen noch zur Maschine. Ziel ist es, die Benutzerschnittstelle für den User nutzbar und sinnvoll zu gestalten, damit dieser leichter operative Entscheidungen ausführen kann.

3D-Grafik

Einer der heißesten Trends des letzten Jahres ist die Integration verschiedener 3D-Grafiken in mobile und Web-Interfaces. Das Anwenden dieser Art von Grafiken auf die Benutzeroberfläche ist eine ziemliche Herausforderung, die es erfordert, dass bestimmte Fähigkeiten und künstlerisches Auge gut in Handarbeit gemacht werden. Außerdem ist es zeitaufwändig. Es ist jedoch definitiv ein Hingucker und die Benutzer werden es niemals bemerken.

Die 3D-Darstellungen sehen oft fotorealistisch aus, was für die Gestaltung der Benutzeroberfläche von großem Vorteil ist. Diese Art von Grafik kann das Spiel in Fällen retten, in denen der benötigte Bildinhalt nicht zu bekommen ist oder sehr teuer ist.

Vollbild-Hintergrundbilder und -Videos

Wie Sie auch aus früheren Beispielen ersehen können, ist die Verwendung von Vollbild-Hintergrundgrafiken ein weiterer Trend, der sich verstärkt, insbesondere im UI-Design für Websites. Dies können Fotos, speziell gerenderte Visualisierungen oder auch Videos sein. Ein solcher Ansatz trägt dazu bei, die Bildschirme optisch und emotional ansprechend zu gestalten und die Integrität aller Layoutelemente zu unterstützen.

Visuelles Geschichtenerzählenk

Der Trend zu benutzerdefinierten Grafiken hat dem Storytelling in den Benutzeroberflächen eine weitere Perspektive eröffnet. Immer mehr Websites und mobile Apps greifen auf speziell gestaltete Charaktere zurück, die die Geschichte zeigen, die Atmosphäre einstellen, die Nachricht senden oder die Vorteile so präsentieren, wie es der Stimmung, dem Ton und der Stimme der Plattform entspricht.

Originelle Charaktere tragen dazu bei, die Interaktionen menschlicher zu gestalten, starke visuelle Assoziationen mit der realen Welt herzustellen und die gewünschte Stimmung sofort zu übertragen. Darüber hinaus können die Zeichen je nach Komposition ein effektives Werkzeug sein, um die Seite oder den Bildschirm dynamisch und lebendig zu gestalten.

Knopflose Interaktionen

Schaltflächen sind nach wie vor eines der wichtigsten Elemente des Benutzeroberflächen-Designs. Jetzt sehen wir kreativere Experimente zur mobilen Benutzererfahrung im Hinblick auf Benutzeroberflächen-Interaktionen ohne Schaltflächen. Dieser Ansatz spart wertvollen Platz auf dem Bildschirm, um weitere Informationen zu erhalten, und es wird sogar angenommen, dass er der erste Schritt zu den virtuellen Schnittstellen ist, die nur auf Gesten basieren.

Eingängige und handliche UI-Animation

Im letzten Jahr hat das Interesse an Schnittstellenanimationen nicht nachgelassen. Dies fügt dem Interaktionsprozess nicht nur Leben und Bewegung hinzu, sondern verbessert auch die Benutzerfreundlichkeit erheblich. Das Benutzererlebnis wird informativer und ansprechender, während die Manipulationen mit den Interaktionselementen klarer werden und auf verständliche Weise auf den Benutzer reagieren. So arbeiteten die Designer gut an einer Vielzahl von Schaltflächen, Registerkarten, Diagrammen, Preloadern und Bildlaufanimationen.

Prominente Typografie und sorgfältig gestaltete Slogans

Die kühne und eingängige Typografie behält ihre hohe Präsenz in Web- und mobilen Layouts bei. Es wird in der Regel zu einem der wichtigsten Gestaltungselemente, und Designer legen großen Wert darauf, dass es lesbar und durchsuchbar bleibt: Die typografische Hierarchie und die Auswahl der richtigen Schriftarten gehören zu den Kernaufgaben jedes UI-Gestaltungsprojekts. Immer häufiger stoßen wir auf Websites und Apps, bei denen Text nicht nur die Informationsquelle, sondern auch das Kernelement des Designs und das Zentrum der Benutzererfahrung ist. Darüber hinaus legt die Design-Community mehr Wert auf das Verfassen von Texten für die Benutzeroberfläche: Insbesondere informative und einprägsame Schlagwörter haben sich als integraler Bestandteil des Webdesigns erwiesen.

Wachstum von Videoinhalten

Verschiedene Arten von Promo- und Erklärvideos wurden verbessert, um auf Bildschirmen und Seiten angezeigt zu werden. Kein Wunder, denn sie dienen effizient den Marketingzielen und steigern die Markenbekanntheit. Ein kreatives und einprägsames Video ist eine gute Möglichkeit, die Aufmerksamkeit der Kunden auf sich zu ziehen und die bewährte Methode, um sie schnell und hell zu informieren. Ein Video aktiviert mehrere Wahrnehmungskanäle - Audio, Video, Ton - gleichzeitig und erweitert sie um die Fähigkeit, Geschichten zu erzählen.

Alle genannten Faktoren neigen dazu, die Präsentation per Video stark und einprägsam zu machen, insbesondere wenn sie auf qualitativ hochwertigem Grafikdesign und Animation basieren. Die Menschen sind täglich mit unzähligen Informationen aller Art überlastet, sodass die meisten von ihnen nicht bereit sind, viel Zeit in das Erlernen von Produkten oder Dienstleistungen zu investieren, insbesondere der neuen. Unter diesen Umständen sind Videos zu einem dynamischen, informativen und attraktiven Kommunikationsmittel geworden. Das Problem der Ladegeschwindigkeit für eine Webseite wird jedoch immer größer und sollte auf verschiedenen Geräten sorgfältig getestet werden.

UI-orientiertes Branding

Das Jahr 2018 setzte den massiven Trend des Redesigns für das Branding fort: Globale und lokale Unternehmen, Produkte und Marken änderten ihre Logos und Markendarstellungen, hauptsächlich mit dem Ziel, Formen und Details zu vereinfachen. Einer der Gründe für den Trend war das Streben nach einer besseren Bedienbarkeit und Navigierbarkeit der Markenelemente, da immer mehr Unternehmen um eine höhere Online-Präsenz konkurrieren. Daher wurden sowohl neue als auch überarbeitete Logos erstellt, um die Benutzeroberfläche zu vereinfachen und auf einer Vielzahl von digitalen Geräten und Layouts effektiv wahrgenommen zu werden.

Darüber hinaus wurden animierte Logos zu einem Trend, der Identitätssymbole interaktiver machte und das Markenbewusstsein stärkte.

Mehrschichtige Layouts

Kreative Experimente werden ständig von UI-Designern durchgeführt, um neue interessante Wege zu finden, um die Webseite ansprechend und interaktiv zu gestalten. Einer der wachsenden Trends ist das Anwenden mehrerer interaktiver Ebenen, die das Scrollen und die Interaktion originell erscheinen lassen.

Design für alle, Universal Design, Inklusive Design, Barrierefreies Design… alle diese Begriffe können so interpretiert werden, dass die Designer an ALLE Menschen denken, und ihre Bedürfnisse berücksichtigen, egal welches Alter, Geschlecht, Herkunft, Beeinträchtigung (permanent, temporär oder situativ) sowie in welchen Kontext (physisch und sozial) sie sich befinden.

Einen gutes Kontrastverhältnis bieten

Die Inhalte sollten leicht wahrgenommen werden können und die Unterscheidung zwischen Vorder- und Hintergrund sollte leicht sein.
Nicht nur unter optimalen (kontrollierten) Bedingungen, sondern auch in verschiedenen Nutzungskontexten muss ein ausreichender Farbkontrast berücksichtigt werden, z.B. Bildschirm in der Sonne, Auflösung/Größe des Bildschirmes, alte Monitore, etc.
Die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund sollte so weit wie möglich erleichtert werden.

Hilfreiche Ressourcen für barrierefreies Designen.

Minimum Kontrast WCAG – BITV
Kontrast Checker plugin für Sketch
Mozilla WCAG Contrast checker
Google Developer Guidelines for Accessible Styles

Reinen Text verwenden, wo immer dies möglich ist

Statt Texte in form von Bildern auszugeben, sollte reiner Text genutzt werden. So kann der Text verkleinert und vergrößert werden (Responsivität), dazu lädt er schneller und ist einfacher zu übersetzen. Reine Texte können auch von Screenreadern einfach vorgelesen werden. Es müssen keine zusätzlichen alternative Texte für die Bildern hinterlegt werden.