UX Design Prozess (für Einsteiger)


Usability Testing

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 zu 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. 

Teil I: Hypothese

UX Design Prozess – 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". Eine Hypothese zu definieren und sie dann zu hinterfragen, ist der erste Schritt im Produktentwicklungsprozess.

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.


Teil II: Das Experiment starten

UX Design Prozess Experiment

Du hast herausgefunden, dass dein Problem real ist und dass ein Produkt 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 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 es dann Produktentwickler*innen umso schwer fällt, 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 schaffen!

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. 


Teil III: Auswertung

UX Design Process 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 Nutzern, 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 ins feine Design übergehen. Nach dieser kritischen Wireframe Test startet die UI Design Phase!


Beginnen wir nun mit dem UI-Design-Prozess

UI Design

UX Design ist ein nutzerzentrierter Produktentwicklungsprozess, der sich auf die Optimierung eines Produkts für eine effiziente und angenehme Nutzer-Erfahrung konzentriert. Im Gegenzug dazu konzentriert sich das UI-Design auf das Erscheinungsbild und die Präsentation eines Produkts.

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!


Mehr UX Blog Posts für Dich

  • Kritisches Denken im UX Design

    Kritisches Denken ist eine sehr wichtige Disziplin für Menschen wie UX Designer*innen, die Produkte entwickeln. Wir erklären warum und wie das geht!

    2021-04-30

  • About Anna R.!

    Anna is our HMI expert for UX research and UI design for and machines/industrial applications. Check out her tips for a good UX of industrial applications and what else she is up to at interfacewerk!

    2021-03-09

  • Management Buy-In für UX Design: 3 Schritte, Beispiel & Tipps

    Wie man das Management wirklich überzeugt, in UX Design zu investieren

    2021-03-05

  • UX Patterns für das UI Design

    Was sind Faustregeln für Buttons? Wie kommuniziere ich direkt einen Status im User Interface? Wir erklären gängige UX Patterns und beantworten diese Fragen!

    2021-04-16

UX Design Prozess

Veröffentlicht von Sybille am 19.05.2021

Interesse geweckt? Entdecken Sie unsere Leistungen!