Visuelles vs. UX-Design: Was kommt zuerst?

Der erste Eindruck zählt. Menschen neigen dazu, schnelle Urteile zu fällen, und das ist bei digitalen Produkten nicht anders. Die Art und Weise, wie Ihr Produkt aussieht, wirkt sich auf die Erfahrung der Kunden aus - wie lange bleiben sie auf der Seite und erkunden sie oder kehren sie zurück? Visuelle Ästhetik ist also wichtig. Lassen Sie uns näher darauf eingehen, was visuelles Design ist, welche Grundsätze für ein besseres Nutzererlebnis befolgt werden sollten und wie es mit der Benutzerfreundlichkeit zusammenhängt.

‍

Wenn Sie von "Visuellem Design" hören, was ist der erste Gedanke, der Ihnen durch den Kopf geht? Denken Sie an etwas Ästhetisches, an auffällige Animationen oder stellen Sie sich die zahllosen farbenfrohen Bildschirme von Inspirations-Websites wie Dribbble vor?

Die meisten Menschen neigen dazu, visuelles Design einfach mit der Verschönerung digitaler Anwendungen, Websites oder allgemeiner Benutzeroberflächen zu assoziieren, was seinen Umfang stark einschränkt. Obwohl es diese Eigenschaft tatsächlich besitzt, geht es um viel mehr als nur darum, etwas visuell ansprechend zu gestalten.

In diesem Artikel werden wir einen Blick darauf werfen, was visuelles Design eigentlich bedeutet, welche Rolle es im Universum der User Experience spielt, und auch kurz auf einige seiner Grundlagen eingehen.

Lassen Sie uns zunächst mit einer einfachen Definition beginnen:

Visuelles Design ist die Verwendung von Bildern, Farben, Formen, Typografie und Form, um die Benutzerfreundlichkeit und das Benutzererlebnis zu verbessern.

Die Schlüsselwörter, auf die man achten sollten, sind "Verbesserung der Benutzerfreundlichkeit" und "Verbesserung der Benutzererfahrung".

‍

Wo ist das visuelle Design im Universum der User Experience?

Das Hauptziel des visuellen Designs ist es, das Produkt benutzbar zu machen, indem die Aufmerksamkeit der Nutzer auf die richtigen Funktionen und Informationen gelenkt wird.

Dies wird durch den Einsatz von Text, Farben und Bildern erreicht, um das Gesamterlebnis des Nutzers zu verbessern - dies ist das Kernkonzept des visuellen Designs und sein Platz innerhalb der UX.

‍

Bedeutet das, dass die visuelle Gestaltung unwichtig ist?

Bevor wir diese Frage beantworten, sehen wir uns 2 Beispiele an.

Bitte notieren Sie sich beim Betrachten der beiden Bilder Ihre ersten Eindrücke und beantworten Sie die unten aufgeführten Fragen.

‍

‍

‍

1. Hatten Sie eine Vorliebe für die beiden Bilder?
2. Warum haben Sie das eine dem anderen vorgezogen?

‍

Ein bestimmter Eindruck, sei es ein guter oder ein schlechter, entsteht allein durch das Durchblättern einer Website, ohne dass man mit ihr interagiert oder ihren Inhalt liest.

Was soll das bedeuten? Es bedeutet, dass der erste Eindruck zählt!

‍

Zahlreiche Studien wurden durchgeführt, um dies zu belegen:

• Es dauert 50ms, um sich eine Meinung zu einem Entwurf zu bilden

• Die Nutzer bevorzugen Websites, die einfach und vertraut aussehen. (Quelle)

• 94 % der Rückmeldungen auf den ersten Blick beziehen sich auf das Design

• Schlechte UI wurde mit Misstrauen und der Glaubwürdigkeit des Produkts durch die Nutzer in Verbindung gebracht. (Quelle)

• Optische Attraktivität schlägt Benutzerfreundlichkeit beim ersten Eindruck

• Die Nutzer bewerteten die Benutzerfreundlichkeit von Websites mit geringer visueller Anziehungskraft niedrig und die Benutzerfreundlichkeit von Websites mit hoher visueller Anziehungskraft hoch. (Quelle)

• Ein positiver erster Eindruck kann zu einer allgemeinen Nutzerzufriedenheit führen

• Nutzer, die einen positiven Eindruck haben, haben eine positive Meinung, die zur Nutzerzufriedenheit führt. (Quelle)

‍

Die Antwort auf die Frage, ob visuelle Gestaltung unwichtig ist, lautet also: "Nein, sie ist sehr wichtig, wenn sie richtig eingesetzt wird und das Hauptziel im Auge behält."

Wenn Sie Ihre Nutzer vom ersten Eindruck an ansprechen wollen, müssen Sie darauf achten, wie Ihr Produkt aussieht und nicht nur, wie es funktioniert.

‍

Grundsätze der visuellen Gestaltung

Werfen wir einen Blick auf einige Attribute, die wir erkennen können, und verstehen wir, wie und warum sie implementiert werden.

(Eine gute Quelle für ein besseres Verständnis sind die ABNUX's Youtube video)

 (Quelle)

‍

Gleichgewicht
ist die Verteilung des visuellen Gewichts von Objekten, Farben, Textur und Raum, um ein stabiles Gefühl zu erzeugen.

‍

Hervorhebung
ist eine Strategie, die darauf abzielt, den Blick des Benutzers auf ein bestimmtes Element zu lenken, indem ein Schwerpunkt im Design geschaffen wird.

‍

Hierarchie

Die visuelle Anordnung von Elementen, um Bedeutung zu vermitteln und die Kernaussage zu transportieren.

‍

Wiederholung

Die Wiederverwendung von Elementen in gleicher oder ähnlicher Weise im gesamten Entwurf, um Muster zu schaffen. Dies schafft Vorhersehbarkeit, was für die Benutzer angenehm ist.

Nähe

Die Verwendung von Leerraum, um Gestaltungselemente so zu manipulieren, dass sie entweder als ähnlich gruppiert oder getrennt werden. Leerraum ist der Schlüssel zur Bestimmung und sinnvollen Kommunikation durch Nähe.

‍

Proportion

Die Beziehung zwischen zwei oder mehr Elementen in einem Design und wie sie in einem bestimmten Kontext zueinander stehen.

‍

Nachdem wir nun diese Grundsätze kennengelernt haben, stellt sich die große Frage, die sich aufdrängt:

Warum sind Websites wie Craigslist so erfolgreich?

Websites wie Craigslist werden notorisch und mit Stolz als hässliche Websites bezeichnet, die dennoch funktionieren. Warum gibt es solche Websites immer noch, wenn das visuelle Design so wichtig ist, um die Nutzer zu halten?

Im Folgenden werden viele Gründe genannt, warum es funktioniert. Würden Sie zustimmen oder fällt Ihnen ein anderer Grund ein?

• Es fühlt sich "sicher" an
• Die Aufteilung des Inhalts in Haupt- und Unterkategorien, die alle in der Mitte der Seite hervorgehoben werden, ist gut gelungen.
• Es gibt keine Ablenkungen: keine Farben, Bilder oder Hintergründe
• Es ist einfach, sie konsistent zu halten und zu pflegen -> es gibt weniger Möglichkeiten für Fehler und Bugs
  
  

Kurz gesagt: Benutzerfreundlichkeit und Vertrautheit haben Vorrang vor der visuellen Gestaltung.

‍

Benutzerfreundlichkeit vs. visuelle Gestaltung: Die Pyramide von Aaron Walter

Die nächste Frage, die wir uns stellen müssen, lautet: Wie können wir diese Entscheidung nutzen? Wie viel Zeit sollten wir für die Erstellung einer optisch ansprechenden Website aufwenden im Vergleich zu der Zeit, die wir für die Nutzbarkeit des Produkts aufwenden müssen?

‍

Werfen Sie einen Blick auf das Diagramm der Pyramide von Aaron Walters. Er schlägt vor, dass, wenn wir ein Produkt erfolgreich funktional, zuverlässig und benutzbar gemacht haben, es NUR dann Sinn macht, weitere Ressourcen darauf zu verwenden, es durch Verbesserung des visuellen Designs angenehmer zu machen.

Ein schönes Produkt, das nicht funktional ist, wird die Bedürfnisse der Nutzer nicht erfüllen. Es hat keinen Zweck, und unabhängig von seiner Ästhetik muss das Produkt zunächst ein Bedürfnis befriedigen und benutzbar sein. Ist ein Produkt hingegen funktional, aber unzuverlässig, wird es den Nutzer trotzdem unzufrieden zurücklassen.

Im Beispiel von Craigslist ist das Produkt funktional, zuverlässig und benutzbar. Das sind die drei wichtigsten Anforderungen, die erfüllt werden müssen, bevor man dem Produkt eine Ebene der Freude (visuelle Gestaltung) hinzufügt.

‍

Wonach suchen wir also, abgesehen vom visuellen Design, bei einer guten Website oder Anwendung?

Laut der Nielsen Norman Group, einem Beratungsunternehmen, das für seine Forschung im Bereich der Benutzererfahrung bekannt ist, wird die Benutzerfreundlichkeit durch 5 Komponenten definiert:

• Lernfähigkeit
• Effizienz
• Einprägsamkeit
• Affordanzen vs. Fehler
• Zufriedenstellung

‍

Lernfähigkeit

betrachtet, wie einfach es für die Benutzer ist, eine Aufgabe zu erledigen, wenn sie das erste Mal auf die Schnittstelle stoßen, und wie viele Wiederholungen sie benötigen, um bei dieser Aufgabe effizient zu werden.

Um herauszufinden, ob Ihre Anwendung lernfähig ist, können Sie Fragen wie diese stellen:

• Was sind die Erwartungen Ihrer Nutzer?
• Können sie bei der ersten Nutzung der Website einfache Aufgaben erledigen?
• Können sie zusätzliche Funktionen im Laufe der Zeit erlernen?

‍

Effizienz

ist die Geschwindigkeit, mit der Menschen Aufgaben erledigen, nachdem sie die Schnittstelle erlernt haben.

• Wie viele Schritte sind nötig, um ein bestimmtes Ziel zu erreichen?
• Kann (und sollte) es in weniger Schritten erledigt werden?
• Welche Aufgaben haben die höchste Priorität?

Wichtiger Hinweis: Effizienz ≠ Anzahl der Klicks.

Viele Teams neigen dazu, die Effizienz digitaler Werkzeuge an der Anzahl der Klicks zu messen, die zur Erledigung einer Aufgabe erforderlich sind. Dies ist ein gefährlicher Ansatz, der zu falschen Entscheidungen führen kann.

Klicks können zum Beispiel durch die Hover-Funktionalität ersetzt werden, die nicht immer intuitiv und benutzerfreundlich ist. Die Anzahl der Klicks hängt außerdem nicht nur vom Design, sondern auch von der Komplexität der Aufgabe ab - eine absolute Zahl, die für alle Aufgaben gilt, sagt also nicht die Wahrheit.

Nicht alle Klicks sind gleich: Einige führen zu langen Wartezeiten (z. B. wenn eine neue Seite geladen wird), andere erfolgen sofort, z. B. wenn ein Akkordeon aufgeklappt wird.

Wer einfach nur die Anzahl der Schritte in einem Prozess zählt, übersieht, was die Benutzer tatsächlich tun und welche Möglichkeiten es gibt, ihnen ein weniger frustrierendes Erlebnis zu bieten.

‍

Einprägsamkeit

Wenn die Benutzer nach einer gewissen Zeit der Nichtbenutzung zu dem Entwurf zurückkehren, wie leicht können sie dann ihre Kenntnisse wieder erlangen?

• Benötigen Ihre Benutzer Hilfe, wenn sie eine Anwendung nach einiger Zeit nicht mehr benutzen?
• Gibt es irgendwelche wiederkehrenden Fehler, die Ihre Benutzer nach einer gewissen Zeit der Nichtverwendung der App machen?

‍

Affordanzen vs. Fehler

Eine Designaffordanz ist ein Hinweis darauf, wie ein Objekt verwendet werden sollte, der in der Regel durch das Objekt selbst oder seinen Kontext bereitgestellt wird.

• Können Sie die interaktiven und statischen Elemente unterscheiden?
• Entspricht das Ergebnis den Erwartungen des Nutzers (z. B. wenn Sie auf das Suchfeld klicken)?
• Ergibt die Hierarchie der Elemente einen Sinn?
• Wie viele Fehler gibt es?

‍

Falsche Affordanzen

Von einer falschen Affordanz spricht man, wenn der Benutzer etwas erwartet, aber etwas anderes eintritt. In der digitalen Welt würde dies Dinge wie folgende beinhalten:

• Eine Schaltfläche, die aktiv aussieht, aber nichts tut, wenn sie angeklickt wird
• Ein Logo, das nicht mit etwas verknüpft ist
• Die Worte "Hier klicken", wenn der Text kein Link ist
• Eine rote Schaltfläche, die mit einer positiven Aktion verbunden ist, oder eine grüne Schaltfläche, die mit einer destruktiven Aktion verbunden ist

https://userinyerface.com/ ist ein großartiges Beispiel für falsche Affordanzen. Versuchen Sie es selbst!

‍

Fazit

Wenn Sie eine teure Neugestaltung in Erwägung ziehen, sollten Sie zunächst die Benutzerfreundlichkeit Ihrer Anwendung oder Website berücksichtigen. Wenn Ihre Website sehr funktionell ist und bereits genutzt wird, kann ein ausgefallenes Redesign Ihre Gewinne und das Wachstum der Website zunichte machen.

‍

‍