UX Design kann schwer zu verstehen sein, besonders für eine/einen Nicht-Designer:in. Auch nicht jeder aus der Tech-Welt wird mit dem Prozess vertraut sein. Um ganz einfach zu beginnen: UX Design stellt den Fokus auf die Bedürfnisse der Benutzer:innen bei der Gestaltung jedes Produkts. UX Design und Benutzerfreundlichkeit (Usability) gehen Hand in Hand.
Usability ist ein Qualitätsmerkmal, das beurteilt, wie einfach eine Benutzeroberfläche bedient werden kann.
Normalerweise als UX/UI-Design gepaart, konzentrieren sich sowohl UX- als auch UI-Prozesse auf den Aufbau attraktiver Produkte und helfen dabei, eine große Herausforderung zu lösen: Wie können wir Benutzern helfen, mit einem Produkt einfach und erfolgreich zu interagieren?
In diesem Guide werden wir einige grundlegende Komponenten erklären, um euch zu helfen, euren eigenen UX Design-Prozess zu starten. Da UI Design ein Teil des UX Design Prozesses ist, werden wir auch einige UI-Design-Schritte veranschaulichen. Viel Spaß!
Schritt I: Hypothese
Die Idee hinterfragen
Der Beginn des UX Design-Prozesses beginnt in der Regel mit der Formulierung einer Hypothese, z. B. „Unternehmen benötigen ein Tool zur Reduzierung des Plastikverbrauchs" oder „unser Produkt könnte ein neues Feature vertragen“. Eine Hypothese zu definieren und sie dann zu hinterfragen, ist der erste Schritt im Produktentwicklungsprozess mit UX-Design.
Den Problemraum definieren mit UX Design
Ein Problemraum zeigt alle verschiedenen Komponenten an, die zur Lösung eines Problems beitragen; ein bisschen wie ein Bilderrahmen. Ein Problemraum hilft dabei, sich ein klares Bild von den Problemen zu machen, Wege zur Lösung zu erarbeiten und die Umsetzung der Lösung voranzutreiben.
Das Ziel ist es, durch Diskussion und (Nutzer)-Forschung herauszufinden, ob das Problem es wert ist, gelöst zu werden, und wenn ja, verschiedene Lösungen in Betracht zu ziehen.
Dabei ist es wichtig, qualitative und quantitative Informationen zu sammeln. Also zum einen Daten und Fakten zu sammeln, die die Hypothese entkräften bzw. validieren. Und zum anderen in Diskussionen und Interviews mehr zum Kern des Problems vorzudringen.
Wenn man unsere aufgestellte Hypothese „Unternehmen benötigen ein Tool zur Reduzierung des Plastikverbrauchs" nimmt, sollte man z.B. in Interviews mit Firmen herausfinden, ob so ein Tool genutzt werden würde und ob es das Problem „zu viel Plastikmüll“ nachhaltig lösen oder verbessern würde. Hier beginnt der klassische Produktentwicklungsprozess, in dem wir etwas kreieren. Für unserer Hypothese „unser Produkt könnte ein neues Feature vertragen“ würden wir das aktuelle Nutzerverhalten analysieren und Nutzer-Befragungen durchführen.
Diese Phase (auch UX Research genannt) ist das allerbeste Mittel, um Wissen zu generieren und unnötige Ressourcen zu verschwenden. Sollte sich in Phase I nämlich ein ganz anderes Problem herauskristallisieren, werdet ihr sehr froh sein, keine unnötiges Produkt oder Feature entwickelt zu haben.
Schritt II: Das Experiment starten
Du hast herausgefunden, dass dein Problem real ist und dass ein Produkt oder neues Fature dieses Problem lösen würde? Glückwunsch!
Dann ist es an der Zeit, mögliche Lösungen prototypisch zu designen und den Markt zu evaluieren. Hier beginnt der klassische Produktentwicklungsprozess, in dem wir etwas kreieren.
Tipp: Wir tasten uns heran. Lösungen, die hier entstehen müssen nicht für die Ewigkeit gedacht sein. Darum: in dieser Phase, insbesondere bei den ersten Experimenten, reicht es wenige Haupt-Features oder Elemente zu testen. Auch muss das Ganze noch nicht perfekt sein. An diesem Punkt dürfen wir nicht zögern, Features und somit Teile des Produkts zu verwerfen. Also: gibt euch erst mal nicht zu viel Mühe, alles ästhetisch zu perfektionieren. Wir haben die Erfahrung gemacht, dass Perfektion es Produktentwickler:innen umso schwerer macht, neue Ideen auszuprobieren und stattdessen zu lange an schlechten Lösungen festgehalten wird.
Startet mit euren eigenen Design-Reviews
Der einfachste Weg zu starten ist, ein Produkt zu testen, das es bereits auf dem Markt gibt. Eine Website, eine App usw., das ebenfalls versucht (im Weitesten Sinn) euer aufgestelltes Problem zu lösen und stellt euch die folgenden Fragen:
- Was ist genau ist das Problem, das das Produkt zu lösen versucht?
- Wer ist die Zielgruppe des Produkts?
- Warum gibt es die Features, die es gibt?
- Warum werden diese Farben und Schriftarten verwendet?
- Warum wird dieses Layout verwendet, und warum sind die einzelnen Komponenten (z. B. Schaltflächen) auf diese Weise angeordnet?
Wenn ihr diese Fragen beantworten könnt, werdet ihr höchstwahrscheinlich die Antwort auf die Frage „Warum ist das Produkt erfolgreich bzw. nicht erfolgreich?" finden. Und nun habt ihr die Chance ein besseres Produkt zu erschaffen!
Macht eure eigene UX-Nutzerforschung für potenzielle Funktionen
Beginnt damit, eure Freunde, Familie und (potenzielle oder tatsächliche) Nutzer zu fragen, was sie von dem Produkt oder der Dienstleistung wollen oder erwarten und wie die Funktionen aussehen sollten. Einige Forschungsmethoden sind beispielsweise Interviews, ethnografische Forschung (Menschen in ihrer natürlichen Umgebung beobachten), Umfragen oder sogenannte Journey Maps (Visualisierung der Nutzung eines Produkts durch eine Person). Wahrscheinlich werdet ihr nicht alle Antworten bekommen, die ihr sucht, aber einige Anregungen für den Anfang.
Wireframes erstellen
Wenn man ein Produkt entwickelt, sollte der erste Designschritt die Erstellung von Wireframes sein. Wireframes sind eine einfache Struktur einer Website oder App. Sie beschreiben die Funktionalität eines Projekts sowie die Interaktion der Komponenten, z. B. was passiert, wenn man auf einen bestimmten Button klickt. Dieser Schritt wird euch helfen, den Ablauf, das Benutzererlebnis und das Layout zu verstehen. Falls ihr euch mit Stift und Papier am Wohlsten fühlt, benutzt einfach das für diesen Schritt. Das ist der kosteneffektivste Weg, und erwiesenermaßen funktioniert der mentale Transfer von digitalen Inhalten auf Papier bei Benutzer:innen sehr gut.
Und wenn ihr euch mit digitalen Tools am wohlsten fühlt, dann empfehlen unsere Designer:innen Balsamiq oder Mockplus zum Erstellen von Wireframes, aber es gibt keine richtige oder falsche Lösung.
Schritt III: Auswertung
Zum Schluss... Testet eure Lösung
Zurück zu unserem UX Design-Prozess. Das Testen ist die letzte und kritischste Phase des gesamten Prozesses. Diskutiert eure Ideen und Lösungen mit einigen potenziellen Nutzer:innen, z. B. euren Freunden. Beim Testen werdet ihr die Vor- und Nachteile entdecken und entsprechend Änderungen vornehmen können. Dies ist ein wesentlicher und kritischer Punkt beim UX Design. Nach dieser Testphase werdet ihr verstehen, was funktioniert und was nicht und könnt das Design ändern, bevor ihr es finalisiert.
Bei der Produktentwicklung werdet ihr diesen Zyklus mehrere Male durchlaufen müssen. Jedes Mal erhaltet ihr mehr und mehr Wissen über den Problembereich, die Benutzeroberfläche und eure Nutzer:innen. Mit diesem Wissen werdet ihr in der Lage sein, die Qualität und das gesamte Benutzererlebnis zu verbessern.
Wichtig: Ihr testet erst mal nur eure Wireframes oder ihr macht einen kleinen Klick-Prototypen. Ihr müsst hier noch nicht in feine Design übergehen.
Beginnen wir nun mit dem UI-Design-Prozess
Wichtig: Vergesst nicht, dass UI-Design nur ein Teil des UX Design-Prozesses ist.
- Entscheidet euch für eine Farbpalette
Ihr könnt euch von anderen Produkten inspirieren lassen, die eurem ähnlich sind. Das Wichtigste ist, dass eure Farbpalette zu den Eigenschaften des Produkts passen sollte. Zudem sollte man auf den Farbkontrast Wert legen. Falls ihr auf der Suche nach Inspiration für eine Farbpalette seid, werft einen Blick auf die Farbpaletten von Canva. Oder möchtet ihr wissen, welche Farbe eine Website, die euch gefällt, genau verwendet? Dann probiert doch mal den Color Picker von ColorZilla aus.
- Wählt eine Schriftart, die euch gefällt
Wählt eine Schriftart aus und legt die Basiswerte für Schriftgröße, Schriftstärke, Zeilenhöhe und Buchstabenabstand fest, damit sie mit den Überschriften- und Absatzgrößen übereinstimmen. Es können auch zwei Schriftarten verwendet werden; die sekundäre Schriftart ist dann für die Unterstützung der primären Schriftart zuständig.
Habt ihr auf einer Website eine Schriftart gesehen, die euch gefällt, aber ihr wisst nicht, welche es ist? Fonts Ninja hilft dabei, herauszufinden, welche Schriftarten auf einer bestimmten Website verwendet wurden. Oder ladet ein Bild zu WhatTheFont hoch, um die ähnlichsten Übereinstimmungen in deren Datenbank zu finden.
- Beginnt jetzt mit dem Design eurer Komponenten
Design bedeutet, Dinge harmonisch zusammenzustellen. Um dies zu erreichen, sollte man damit beginnen, allgemein-gültige Komponenten zu entwerfen. Zum Beispiel:
- Formular-Elemente
- Schaltflächen
- Modale
- Auswahlbox
- Menü
- Bread Crumbs
Achtet auch darauf, die Basishöhe von Schaltflächen, Eingaben, Modals usw. zu definieren, um Konsistenz zu gewährleisten.
Dies wird euch auch dabei helfen, euren Styleguide zu erstellen. Ein Styleguide ist ein Dokument, das UX/UI-Designer erstellen, um den wachsenden Umfang an Designstandards für UI-Elemente und Interaktionen zu dokumentieren. Durch die Erstellung eines Styleguides stellen die Designer:innen die Einheitlichkeit des Produktdesigns während des gesamten Designprozesses sicher. Wir empfehlen einen Styleguide zu erstellen und im zweiten Schritt über ein Design System nachzudenken. Das wird den Design Part mit dem Software Engineering Part verbinden.
- Verwendet Icons und Illustrationen
Wenn man nur Texte verwendet, ist es wahrscheinlich, dass sich der Benutzer langweilt oder schockiert das Weite sucht. Nutzt stattdessen die Macht von Icons. Und nicht vergessen: Ein Icon sagt mehr als tausend Worte! Achtet aber darauf, dass der Stil der Icons einheitlich ist und zusammenhängende Icons verwendet werden. Es ist auch eine gute Gewohnheit, Icons nie alleine zu verwenden, sondern immer in Kombination mit Text, damit der Benutzer eindeutig weiß, wofür es bestimmt ist.
Unsere Designer empfehlen Google Fonts oder Font Awesome, aber es gibt auch eine Menge anderer schöner Icons. Diese sind bereits miteinander konsistent.
Mehr nützliche UX Patterns, die euch helfen werden, euer UI nach geprüften Usability Standards zu entwerfen:
Es ist an der Zeit, alles zusammenzufügen!
Nach diesem ersten produktiven UI-Prozess gelangt man zum schönsten Teil. Ihr habt Euch bereits für Farben, Schriftarten, Komponenten und Icons entschieden. Jetzt ist es also an der Zeit, sie zusammenzufügen und zu sehen, was ihr schon erreicht habt!
Tipp: Auch wenn ihr das Produkt als abgeschlossen und fertig betrachtet, gibt es immer Raum für Verbesserungen. Daher solltet ihr weiterhin Feedback und Meinungen einholen, um euer Produkt mit der Zeit zu verbessern, auch nach dem offiziellen Release!
Wir hoffen, dieser Artikel hat euch einen Einblick in das UX-Design gegeben. Es ist ein sich ständig weiterentwickelnder Prozess und die Erfahrung kommt mit der Zeit. Wenn ihr neugierig auf UX-Design seid und ständig verschiedene Kombinationen und Stile ausprobiert, werden eure Designs und Produkte mit der Zeit immer besser und benutzerfreundlicher werden.
Unser Rat an euch: Recherchiert, lasst euch inspirieren, übt, erschafft, wiederholt, und habt Spaß dabei. Und wenn ihr mehr Hilfe braucht, kontaktiert uns! Eine Stunde UX Strategie Review bekommt ihr bei uns immer umsonst!
6
Minuten Lesezeit
Geschrieben von:
Sybille
.svg){kind=small}