Wie wird man UX Designer?

Kurz gesagt

Ein UX Designer sorgt dafür, dass Menschen ihre Aufgabe mit einem Produkt mühelos erledigen. Zuerst geht es darum, wer was warum tun will. Danach entstehen Screens und Abläufe, die diese Aufgabe mit möglichst wenigen Schritten erledigen.

Don Norman und Jakob Nielsen definieren User Experience als alle Aspekte der Interaktion eines Nutzers mit einem Unternehmen, seinen Diensten und Produkten. Die erste Bedingung guter Erfahrung ist für sie, das Bedürfnis des Kunden ohne Umstände zu erfüllen. Daran arbeitet ein UX Designer jeden Tag.

In Stellenanzeigen heißt die Rolle „UX Designer“ oder „UI/UX Designer“, manche Firmen sagen Produktdesigner. Die Oberfläche (UI) ist das sichtbare Gesicht der Arbeit. UX umfasst auch die Entscheidungen dahinter: Welcher Schritt ist nötig, welcher fliegt aus dem Ablauf?

Was macht ein UX Designer?

Ein Arbeitstag besteht oft mehr aus Gesprächen als aus Arbeit am Bildschirm. Mit dem Produktmanagement geht es um Ziele, mit der Entwicklung um technische Grenzen. Dazu kommen Gespräche mit Nutzern und das Beobachten, wie sie das Produkt verwenden.

Eine typische Woche sieht ungefähr so aus:

Aufgabe	Ergebnis
Nutzerinterview	Notizen und eine Liste wiederkehrender Probleme.
Ablauf zeichnen	Ablauf Schritt für Schritt und grobe Screen-Entwürfe.
Prototyp	Ein klickbarer, testbarer Entwurf.
Usability-Test	Eine Liste der Stellen, an denen Nutzer hängen bleiben.
Teammeeting	Entscheidung über Prioritäten und ein freigegebenes Design.
Übergabe an die Entwicklung	Screens mit Maßen, Zuständen und Fehlerfällen.

Ein Beispiel

Stellen Sie sich vor, in der App der Stadtwerke brechen viele Nutzer das Bezahlen der Wasserrechnung ab. Der UX Designer findet zuerst in der Analyse heraus, bei welchem Schritt. Sagen wir, beim Feld für die Kundennummer.

Danach folgen Gespräche mit einigen Nutzern. Sie wissen nicht, wo die Nummer auf der Rechnung steht. Der Prototyp bekommt unter dem Feld den Hinweis „Steht oben links auf Ihrer Rechnung“. Er wird erneut getestet und, wenn er funktioniert, an die Entwicklung übergeben.

Dieser Kreislauf ähnelt dem Rahmen des Design Thinking bei NN/g. Sarah Gibbons beschreibt ihn in sechs Schritten: Empathie, Definieren, Ideen finden, Prototyp, Test und Umsetzung. Den letzten Schritt, also das Umsetzen der Lösung, hält Gibbons für den wichtigsten.

Die Teamgröße verändert die Arbeit

So wie ich es erlebe, liegen Forschung, Oberfläche und Text in großen Teams bei verschiedenen Personen. In einem kleinen Start-up macht eine Person alles. Die Rolle „UI/UX Designer“ in Stellenanzeigen ist meist genau das.

In beiden Fällen bleibt der Kern gleich. Das Design macht das Problem der Nutzer für das Team sichtbar und verteidigt die Lösung mit Belegen.

Welche Fähigkeiten braucht man?

Was man als UI/UX Designer braucht, fasse ich in fünf Bereichen zusammen. Sie müssen nicht alle gleich gut beherrschen. Aber keiner sollte Ihnen völlig fremd sein.

1. Forschung

Forschung heißt herauszufinden, was Nutzer tun und warum. Die Übersicht von Susan Farrell bei NN/g ordnet Forschungsmethoden nach Phasen. Darin stehen Methoden wie Feldstudie, Card Sorting, Interview, Umfrage und Analytics.

Am Anfang müssen Sie nicht alle kennen. Wer zur Verbesserung eines bestehenden Systems nur eine Methode wählt, dem empfiehlt Farrell den Usability-Test mit lautem Denken. Auch ich rate Einsteigern, diese Methode zuerst zu lernen.

Laut Jakob Nielsen findet eine erste Studie mit fünf Teilnehmenden 85 % der Usability-Probleme. Nielsen rät, das Budget auf viele kleine Tests zu verteilen statt auf eine große Studie. Für Ihren ersten Test brauchen Sie also kein großes Budget.

2. Interaktionsdesign

Interaktionsdesign entscheidet, mit welchen Schritten Nutzer eine Aufgabe erledigen. Welcher Screen kommt zuerst, was sehen Nutzer bei einem Fehler? Das erarbeiten Sie zuerst mit einem groben Wireframe, dann mit einem klickbaren Prototyp.

Die Grundlage dieser Fähigkeit sind Nielsens 10 Usability-Heuristiken. Dazu kommt die Informationsarchitektur, die beschreibt, wie Menüs und Inhalte gruppiert sind. Welches Verhalten Nutzer von einem Screen erwarten, erklärt das mentale Modell.

3. Visuelles Design

Visuelles Design legt die Lesereihenfolge der Elemente fest. Was zuerst gesehen wird, bestimmen Größe, Abstand und Farbe. Den größten Teil dieser Arbeit leisten ein Raster und eine einheitliche Schriftskala.

Farbentscheidungen berühren auch die Barrierefreiheit. Die WCAG-Dokumente des W3C beschreiben, wie Webinhalte für Menschen mit Behinderungen zugänglicher werden. Version 2.2 des Standards erschien am 5. Oktober 2023.

Das Kriterium 1.4.3 Kontrast (Minimum) etwa gehört zur Stufe AA und verlangt für Text ein Kontrastverhältnis von mindestens 4,5:1. Ihre Farbpaare können Sie mit dem Kontrastrechner prüfen.

Als Werkzeug empfehle ich, mit Figma zu beginnen. Auch das UX-Zertifikat von Google bringt Figma bei.

4. Oberflächentext

Button-Beschriftungen, Fehlermeldungen und Texte für leere Screens gehören zum Design. Ein Fehler mit „Vorgang fehlgeschlagen“ sagt Nutzern nicht, was sie tun sollen. „Die Kundennummer hat 8 Stellen“ sagt es.

In dem Fall, den Jared Spool 2009 beschrieb, entfernte eine große E-Commerce-Seite den Button „Registrieren“ zwischen Warenkorb und Kasse. Stattdessen kamen ein Button „Weiter“ und eine Meldung, dass man ohne Konto einkaufen kann. Laut Spool stieg die Zahl der kaufenden Kunden um 45 %.

Die Details stehen auf der Seite zum 300-Millionen-Dollar-Button. Meine Lehre daraus: Text und Position eines Buttons im Ablauf sind eine Designentscheidung, genauso wichtig wie die Farbe des Screens.

5. Grundlagen im Code

Ein UX Designer muss kein Entwickler sein. Wer aber die Grundlagen von HTML und CSS kennt, sieht vorher, wie sich das Gezeichnete im Browser verhält. Ein langer Name oder ein kleiner Bildschirm ist dann keine Überraschung mehr.

Meine eigene Erfahrung dazu steht unten im Abschnitt „Meine Notiz“.

Fähigkeit	Womit Sie anfangen	Wie Sie sie zeigen
Forschung	Ein kurzes Nutzerinterview.	Interviewnotizen und Erkenntnisse.
Interaktion	Einen Ablauf auf Papier zeichnen.	Wireframe und klickbarer Prototyp.
Visuell	Einen Screen mit Raster neu zeichnen.	Vorher- und Nachher-Screens.
Text	Eine Fehlermeldung neu schreiben.	Alter und neuer Text nebeneinander.
Code	Ein Formular mit HTML und CSS bauen.	Ein Link zu einer funktionierenden Seite.

Fahrplan Schritt für Schritt

Wer mich fragt, wie man UI/UX Designer wird, bekommt diese Reihenfolge. Jeder Schritt nutzt das Ergebnis des vorigen. Am Ende haben Sie eine Arbeit, die Sie zeigen können.

1. Lernen Sie die Grundbegriffe. Beginnen Sie mit nutzerzentriertem Design, Usability und den 10 Heuristiken. Das ist die Sprache, mit der Sie später jede Designentscheidung begründen.

2. Wählen Sie ein Werkzeug und zeichnen Sie Screens. Kopieren Sie in Figma einen Screen einer App, die Sie nutzen, so genau wie möglich. Einziges Ziel dieses Schritts ist es, das Werkzeug kennenzulernen.

3. Machen Sie eine kleine Forschung. Sprechen Sie mit zwei oder drei Personen darüber, wie sie eine Aufgabe erledigen. Lassen Sie sich etwa erzählen, wie sie online einen Termin beim Bürgeramt buchen.

4. Gestalten Sie einen Ablauf neu. Wählen Sie eines der Probleme aus dem Gespräch und zeichnen Sie den Ablauf Schritt für Schritt neu. Nehmen Sie eine öffentlich zugängliche Oberfläche und bleiben Sie in Ihrer Kritik fair.

5. Testen Sie und zeichnen Sie neu. Geben Sie den Prototyp fünf Personen und beheben Sie die Stellen, an denen sie hängen bleiben. Die zweite Version wird zum wertvollsten Teil Ihres Portfolios.

6. Lernen Sie HTML und CSS in den Grundlagen. Bauen Sie ein Formular, das Sie gestaltet haben. Sehen Sie selbst, wie Label, Fokus und Fehlerzustände im Browser aussehen.

7. Schreiben Sie die Fallstudie. Beschreiben Sie Problem, Prozess und Ergebnis auf einer Seite. Wie Sie diese Seite aufbauen, erkläre ich unten im Abschnitt zum Portfolio.

8. Nähern Sie sich echter Arbeit. Das kann ein ehrenamtliches Projekt sein, ein Praktikum oder die Website eines kleinen Betriebs. Echte Einschränkungen lehren, was ein selbst ausgedachtes Projekt nicht lehren kann.

Braucht man ein Zertifikat?

Wenn Sie mit einem Programm vorgehen möchten, ist das Google UX Design Professional Certificate eine Option. Laut der offiziellen Seite bei Coursera ist es für Einsteiger gedacht und verlangt weder Erfahrung noch Abschluss. Die Seite nennt etwa 6 Monate bei 10 Stunden pro Woche.

Ich sehe das Zertifikat als Lernplan. Bei der Einstellung zählt vor allem das Portfolio. Das erkläre ich unten mit Quelle.

Wie lange dauert es?

Eine feste Dauer kann ich nicht nennen, denn sie hängt von Ihrem Startpunkt und Ihrer verfügbaren Zeit ab. Ich messe die Dauer am Ergebnis. Sobald Sie einen getesteten und aufgeschriebenen Ablauf haben, können Sie sich das erste Mal bewerben.

Regelmäßiges Arbeiten bringt mehr als lange, seltene Sitzungen. Schließen Sie jede Woche etwas Kleines ab, etwa ein Interview oder einen einzelnen Screen. Wenn sich fertige kleine Arbeiten sammeln, entsteht das Portfolio fast von selbst.

Erstellen Sie Ihre eigene Liste

In der Liste unten habe ich die Aufgaben des Fahrplans nach Fähigkeiten geordnet. Haken Sie ab, was Sie schon gemacht haben. Je nach Startpunkt ändert sich der nächste Schritt.

Checkliste zum Fahrplan

Wo fangen Sie an?

Ich fange bei null an. Ich habe keinen Hintergrund in Design oder Code.Ich bin Grafikdesigner. Die visuelle Seite kenne ich.Ich bin Entwickler. Ich schreibe Code und will ins Design wechseln.

Welche davon haben Sie schon gemacht?

• ForschungIch habe ein Nutzerinterview geführt und meine Notizen geordnet.
• InteraktionIch habe einen Ablauf Schritt für Schritt als Wireframe gezeichnet. Als Nächstes
• VisuellIch habe einen geordneten Screen mit Raster und Schriftskala gestaltet.
• InteraktionIch habe einen klickbaren Prototyp gebaut.
• TextIch habe eine Fehlermeldung und Button-Texte neu geschrieben.
• ForschungIch habe einen Usability-Test mit fünf Personen gemacht.
• CodeIch habe ein einfaches Formular mit HTML und CSS gebaut.
• PortfolioIch habe eine Fallstudie geschrieben.

Nächster Schritt: Zeichnen Sie einen Ablauf zum Bezahlen einer Rechnung Schritt für Schritt auf Papier. Auf jedem Screen hat der Nutzer nur eine Aufgabe.

Wer bei null anfängt, zeichnet als Erstes einen Ablauf.

Wählen Sie Ihren Startpunkt und haken Sie ab, was Sie schon gemacht haben. Der nächste Schritt hängt vom Startpunkt ab und erscheint in der Liste mit orangem Rahmen. Die Reihenfolge ist mein Vorschlag, kein offizieller Lehrplan.

Grafikdesignern empfehle ich zuerst die Forschung, denn die visuelle Seite beherrschen sie schon. Entwicklern rate ich, den Code ans Ende zu stellen. Die Fähigkeit haben sie bereits. Was fehlt, ist das Gespräch mit Nutzern.

Portfolio

Im Portfolio lernt die einstellende Person Sie zuerst kennen. Der Portfolio-Artikel von Rachel Krause bei NN/g aus dem Jahr 2019 beruht auf einer Umfrage unter 204 UX-Fachleuten, die Personal einstellen. Meine wichtigste Erkenntnis daraus: Wer einstellt, will auch den unordentlichen Prozess sehen, der zum fertigen Produkt geführt hat.

Krause empfiehlt 3 bis 5 ausführliche Fallstudien und stellt Qualität vor Menge. Jede Fallstudie sollte enthalten:

• Das Problem oder die Hypothese.
• Ihre Rolle und wie Sie mit dem Team gearbeitet haben.
• Wie Sie zur Lösung gekommen sind.
• Wie die Lösung das Problem gelöst hat.
• Hürden und verworfene Ideen.
• Die Wirkung auf Nutzer und Geschäft.
• Was Sie gelernt haben.

Laut Krause lesen Einstellende ein Portfolio nur selten Wort für Wort. Deshalb muss eine Fallstudie beim Überfliegen verständlich und leicht zu verfolgen sein. Erzählen Sie die Geschichte mit Bildern wie groben Skizzen, Forschungsnotizen und fertigen Screens.

Krause weist auch auf einen verbreiteten Irrtum hin: Ein Portfolio müsse nur fertige Oberflächen zeigen. Für sie gehören frühe Skizzen, Forschungsunterlagen und nicht weiterverfolgte Ideen ebenfalls hinein. Sie empfiehlt auch, Einschränkungen offen zu beschreiben.

Gerüst einer Fallstudie

Machen wir aus dem Beispiel mit der Wasserrechnung eine Fallstudie. Die Überschriften folgen Krauses Liste, der Inhalt ist komplett ein Beispiel.

• Problem: In der Stadtwerke-App bricht ein Teil der Nutzer das Bezahlen der Rechnung beim Schritt Kundennummer ab.
• Meine Rolle: Die Interviews und den Ablauf habe ich gemacht. Die Prüfregeln des Felds habe ich mit dem Entwickler im Team festgelegt.
• Prozess: Ich habe mit vier Nutzern gesprochen. Alle mussten die Nummer auf der Rechnung suchen, zwei gaben die falsche Nummer ein.
• Verworfene Idee: Zuerst habe ich versucht, die Nummer per Kamera einzulesen. Im Test hatten die Nutzer die Rechnung nicht dabei, also habe ich die Idee verworfen.
• Lösung: Unter dem Feld steht jetzt ein Hinweis mit einem kleinen Bild, das zeigt, wo die Nummer auf der Rechnung steht.
• Gelernt: Keine Lösung vorschlagen, ohne zu fragen, was Nutzer gerade zur Hand haben.

Am meisten leistet in diesem Gerüst die verworfene Idee. Dort sieht die lesende Person, wie Sie denken.

Mein Vorschlag: Ziehen Sie Ihre erste Fallstudie aus dem vierten und fünften Schritt des Fahrplans. Wenn das Problem aus dem Gespräch und die zweite Version nach dem Test zusammenkommen, steht das Gerüst der Geschichte.

Häufige Fehler

In diese Fehler tappen Einsteiger meiner Erfahrung nach am häufigsten.

Mit dem Werkzeug anfangen. Jede Funktion von Figma zu kennen, macht Sie nicht zum Designer. Das Werkzeug hilft, wenn Sie wissen, was Sie zeichnen wollen. Zehn Werkzeugnamen im Portfolio beweisen nichts.

Nur schöne Screens zeigen. Ein Redesign ohne Forschung und Test ist eine visuelle Übung. Die einstellende Person sieht nicht, woher Ihre Entscheidungen kommen.

Eigenen Geschmack für ein Nutzerbedürfnis halten. „Das sieht schicker aus“ ist keine Begründung. Verbinden Sie jede Änderung mit einem Nutzerproblem oder einem Prinzip.

Ohne Test für fertig erklären. Die Probleme Ihres eigenen Designs sehen Sie nicht, weil Sie schon wissen, wie es funktioniert. Schon ein kleiner Test mit fünf Personen bricht diese Blindheit.

Nicht mit der Entwicklung sprechen. Ein Design, das sich nicht bauen lässt, kommt nie auf den Bildschirm, egal wie gut es ist. Werden Fehlerfälle und leere Zustände nicht gezeichnet, baut die Entwicklung sie nach eigener Vermutung.

Alles gleichzeitig lernen wollen. Wer fünf Fähigkeiten auf einmal verfolgt, kommt in keiner voran. Einen Ablauf von Anfang bis Ende abzuschließen, lehrt mehr als zehn halb fertige Kurse.

Feedback ausweichen. Wer den ersten Entwurf niemandem zeigt, vergrößert denselben Fehler wochenlang. Einen groben Entwurf früh zu zeigen, ist billiger, als ein fertiges Design neu zu machen.

Barrierefreiheit ans Ende schieben. Wird eine Farbpalette mit zu wenig Kontrast erst später korrigiert, müssen alle Screens neu angefasst werden. Denken Sie Kontrast und Tastaturbedienung ab dem ersten Entwurf mit.

Meine Notiz

Ich gestalte und programmiere zusammen. Der größte Vorteil für mich: Entscheidungen lassen sich schnell ausprobieren. Statt in einer Skizze zu diskutieren, ob eine Interaktion stimmt, probiere ich sie im Browser aus. Fünf Minuten Ausprobieren geben eine klarere Antwort als ein langes Meeting.

Der zweite Vorteil: Ich sehe die Ränder des Designs. Auf einem statischen Screen ist jeder Name kurz und jede Liste voll. Im Code fallen lange Namen und leere Listen sofort auf.

Ich sage nicht, dass Sie Vollzeit-Entwickler werden sollen. Ein einfaches Formular mit HTML und CSS selbst zu bauen, reicht. Sobald Sie Ihr Design einmal im Browser angefasst haben, ändern sich Ihre Zeichengewohnheiten.

Wenn Sie in Ihrem eigenen Produkt bei Design- oder UX-Entscheidungen festhängen, zeigt der Ratgeber zum UX Audit Schritt für Schritt, wo Sie hinschauen sollten.