Lerne / LeitfÀden / UX-Design
Die 12 besten UX-Design-Tools (und wie du sie einsetzt)
Wenn du die Erfolgsmethoden des User Experience (UX)-Designs konsequent umsetzt, kannst du fesselnde Produkte, Websites und Anwendungen entwickeln, die deine Kund:innen begeistern.
Doch wie sollst du bei den vielen UX-Design-Tools, die von der Recherche bis hin zum Prototyping alles anbieten, wissen, mit welchem Tool du deine Vision am besten zum Leben erwecken kannst?
Die Kunst besteht darin, die richtige Kombination von Tools zu finden und sie im Rahmen einer nutzerzentrierten UX-Design-Strategie richtig einzusetzen, um optimale Ergebnisse zu erzielen.
Zuletzt aktualisiert
21 Sep 2023Die richtige Auswahl an UX-Design-Tools unterstĂŒtzt produktorientierte Teams ĂŒber den gesamten Entwicklungsprozess hinweg â von der Ideenphase ĂŒber Prototyping und Design bis hin zur Test- und Iterationsphase.
In diesem Kapitel unseres UX-Leitfadens zeigen wir dir die besten UX-Design-Tools fĂŒr jede Phase des Prozesses, um dir bei der Lösung der Probleme zu helfen, mit denen du und deine Nutzenden konfrontiert sind. AuĂerdem erklĂ€ren wir dir, wie du die Tools (einzeln oder in Kombination) einsetzen kannst, um eine hervorragende User Experience zu schaffen.
Erhalte mit Hotjar Einblicke in die digitale Erfahrung und verbessere deine UX
Mit Hotjar findest du heraus, wie echte Nutzende deine Website oder App erleben â sodass du sie dementsprechend verbessern kannst!
Am besten kannst du das Nutzererlebnis (User Experience, UX) verbessern, indem du herausfindest, wie sich Nutzende auf deiner Website verhalten, deine App nutzen und mit deinem Produkt interagieren.
Lean-UX-design eignet sich dabei hervorragend zur Strukturierung und Kombination deiner UX-Tools: Das Modell beinhaltet drei Designphasen, ist nutzerzentriert und beruht auf einem kollaborativen Ansatz, schnell durchfĂŒhrbaren Experimenten und Prototyping, um Nutzerfeedback zu erhalten. So kannst du deine User Experience ganzheitlich verbessern.
Hier sind drei Arten von UX-Tools fĂŒr jede Phase des Lean-UX-Modells:
THINK-Phase: UX-Forschung
MAKE-Phase: UX-Design
CHECK-Phase: UX-Tests
THINK-Phase: UX-Design-Tools zur Nutzerforschung
In der ersten Phase des UX-Designs geht es darum, deine Zielgruppe genau kennenzulernen, damit du ein Nutzererlebnis schaffen kannst, das die Perspektive und die BedĂŒrfnisse deiner Nutzenden widerspiegelt. Um deine Zielgruppe zu verstehen, benötigst du Tools zur UX-Forschung (auch: UX Research oder Nutzerforschung) sowie einige weitere UX-Ressourcen.
Das Beobachten von Nutzenden sowie das Sammeln von Feedback ist unglaublich effizient: Auf der Grundlage der durch UX-Forschung gewonnenen Daten kannst du eine Problemstellung oder Hypothese entwickeln und Bereiche identifizieren, die du verbessern willst (oder musst).
Einige UX-Forschungstools zeigen dir, warum ein Problem besteht oder wie es zu beheben ist, und liefern dir qualitative Einblicke in das Nutzerverhalten. Andere Tools generieren hingegen quantitative Daten und eignen sich eher dazu, Fragen nach dem Wie viel oder Wie viele zu beantworten.
Beide Arten von UX-Forschungstools â qualitative und quantitative â helfen dir dabei, UX-Probleme zu identifizieren und zu lösen. Tauchen wir also ein in die Welt der UX-Tools!
1. Hotjar Engage
Hotjar Engage ist ein UX-Forschungstool, mit dem du die richtigen Nutzenden rekrutieren, Interviews durchfĂŒhren und Erkenntnisse sammeln (und weitergeben) kannst â und das alles in einem.
Mit Hotjar Engage sparst du wertvolle Zeit fĂŒr Verwaltungsaufgaben, sodass du stattdessen Experimente und Usability-Tests durchfĂŒhren kannst, um das Nutzerverhalten zu verstehen, Verbesserungsmöglichkeiten zu identifizieren und Hypothesen zu validieren.
So setzt du Hotjar Engage zur UX-Forschung ein und verbesserst dein UX-Design:
Rekrutiere Nutzende aus einem Pool von ĂŒber 175.000 Teilnehmenden oder lade deine eigenen Nutzenden ein
Automatisiere die Planung und DurchfĂŒhrung deiner moderierten Interviews
Lade deine GesprÀchsprotokolle herunter
Erstelle Videoclips mit den wichtigsten Erkenntnissen aus deinem Interview
Nutze die brillanten Funktionen zur Zusammenarbeit, um Highlights und mit Zeitstempel versehene Notizen mit deinem Team zu teilen.
FĂŒge zusĂ€tzliche Teammitglieder als Beobachtende und Moderator:innen hinzu
2. Loop11
Loop11 ist ein Remote-UX-Forschungstool, mit dem du moderierte und unmoderierte Interviews durchfĂŒhren kannst. Du kannst Prototypen und Live-Websites auf verschiedenen GerĂ€ten (Handy, Desktop und Tablet) testen, um Erkenntnisse darĂŒber zu sammeln und zu teilen, wie Nutzende dein Produkt erleben.
So setzt du Loop11 zur UX-Forschung ein und verbesserst dein UX-Design:
Beobachte die Nutzenden bei der AusfĂŒhrung von Aufgaben auf deiner Website, um die Nutzerfreundlichkeit zu beurteilen.
Betreibe Benchmarking, um zu sehen, wie deine Website im Vergleich zu deinen Wettbewerbern abschneidet
Teste Prototypen vor der vollstÀndigen Entwicklung, um neue Funktionen und Aktualisierungen vor der Fertigstellung zu validieren.
Bewerte die verschiedenen Designs deiner A/B-Tests, indem du live beobachtest, welches Design die beste User Experience bietet
3. Hotjar Observe & Hotjar Ask
Hotjar ist die einzige Plattform fĂŒr Insights in die digitale User Experience, die dir visuelle Einblicke ins Nutzerverhalten, sofortiges Feedback und Einzelinterviews in einem bietet. Hotjar Observe gibt dir Zugang zu den Tools Heatmaps, Recordings und Funnels, wĂ€hrend Hotjar Ask die Tools Surveys und Feedback beinhaltet.
So setzt du Hotjar Observe und Hotjar Ask zur UX-Forschung ein und verbesserst deine UX:
1. Erhalte mit Heatmaps Einblicke in die Performance deiner Website
Heatmaps liefern die visuellen Einblicke, die dir zeigen, an welchen Elementen deiner Seite du arbeiten solltest (und welche du ignorieren kannst), um so die Customer Experience zu verbessern.
Klicken Nutzende auf ein Bild, weil sie denken, dass es irgendwo verlinkt ist? Scrollen sie an einem wichtigen CTA vorbei? Heatmaps helfen dir, all diese (und weitere) Fragen zu beantworten.
Nutze zum Beispiel:
Click-Heatmaps, um herauszufinden, wo Nutzende auf der Seite klicken und tippen (oder eben nicht)
Scroll-Heatmaps, um herauszufinden, wo du die Aufmerksamkeit der Nutzenden verlierst
Move-Heatmaps, um nachzuvollziehen, wie Nutzende auf deinen Seiten navigieren
Engagement-Zonen-Maps, um zu messen, wie stark Nutzende mit den Seiteninhalten interagieren
Wutclick-Heatmaps, um genau zu bestimmen, wo Nutzende frustriert sind
đĄPro-Tipp: Markiere in Hotjar Highlights deine wichtigsten Heatmaps-Erkenntnisse, damit dein gesamtes Team sie leicht finden kann.
2. Identifiziere Pain Points, die Nutzende zum Abbruch veranlassen
Mit Hotjar Funnels kannst du herausfinden, wo Nutzende in deinen wichtigsten AblĂ€ufen abspringen und warum â und zwar mit Session-Aufnahmen von Nutzenden, die nicht zur nĂ€chsten Phase ĂŒbergegangen sind.
3. Frage deine Nutzenden beim Besuch deiner Website, was funktioniert (und was nicht)
Verwende eine (oder mehrere) unserer zahlreichen Umfragevorlagen, um direkten Input von deinen Nutzenden zu erhalten, wie zum Beispiel:
eine Exit-Intent-Umfrage zu den GrĂŒnden, warum Nutzende deine Website verlassen
eine Umfrage zum Produktfeedback, um herauszufinden, was Nutzenden gefÀllt und was nicht
eine Customer-Effort-Score (CES)-Umfrage, um festzustellen, wie aufwÀndig dein Produkt zu benutzen ist
eine Konzepttest-Umfrage, in der Nutzende deine Prototypen bewerten oder in einem PrÀferenztest zwischen mehreren Optionen wÀhlen können
Ebenso kannst du direktes Feedback mithilfe eines eingebettetes Feedback-Widgets oder eines schwebenden Widgets, wie das kleine rote Tag rechts auf dieser Seite đ, einholen.
đĄPro-Tipp: Mit den Integrationen fĂŒr Slack und Microsoft Teams kannst du dein Umfrage- und Nutzerfeedback ganz einfach an andere Teammitglieder weiterleiten, was die Zusammenarbeit im Team enorm erleichtert.
4. UXPressia
UXPressia ist ein Customer-Journey-Mapping-Tool, mit dem du ganz einfach die Touchpoints mit deinen Kund:innen sehen und individuelle Customer Journey Maps erstellen kannst. AuĂerdem dient es auch als Tool zur Erstellung von User Personas.
So setzt du UXPressia zur UX-Forschung ein und verbesserst dein UX-Design:
Erstelle einen visuellen Ăberblick darĂŒber, wie deine Kund:innen ĂŒber mehrere Touchpoints hinweg mit deiner Website, App oder deinem Produkt interagieren und es erleben.
Erfasse und vergleiche Ist- und Soll-Nutzerpfade.
Visualisiere die Emotionen der Kund:innen bei jedem Schritt der Reise und identifiziere ihre Pain Points und Momente der Freude mit dem Erlebnisdiagramm.
Arbeite gemeinsam mit deinem Team gleichzeitig und in Echtzeit an derselben Datei.
Exportieren dein Customer Experience Maps in verschiedenen Formaten.
đĄPro-Tipp: Mit Hotjar Recordings kannst du die User Journey ĂŒber verschiedene Tabs und Browserfenster hinweg ohne Unterbrechung nachverfolgen. Du kannst die Aufnahmen sogar nach Engagement- und Frustrations-Scores filtern, um direkt zu den aufschlussreichsten Nutzersessions zu gelangen.
MAKE-Phase: UX-Design-Tools fĂŒr Wireframing, Prototyping und Umsetzung
Tools fĂŒr das Design der NutzeroberflĂ€che (User Interface, UI) befassen sich mit dem visuellen Teil des UX-Designs â sie helfen Designer:innen beim Brainstorming, bei der Planung und bei der Umsetzung von Ideen in die RealitĂ€t. In dieser Phase versuchen Designer:innen und Entwickler:innen, Funktionen zu entwickeln, um ein Problem zu lösen oder die Website, die App oder das Produkt besser zu machen.
Diese UI/UX-Design-Tools unterstĂŒtzen dich dabei optimal:
Flowcharting: Skizziere deine voraussichtlichen Nutzerflows auf Grundlage der in der Forschungsphase ermittelten BedĂŒrfnisse, Gedanken und Handlungen deiner Nutzenden.
Wireframing: Erstelle Low- oder High-Fidelity-Visualisierungen möglicher Lösungen fĂŒr Problemstellungen.
Prototyping: Erstelle anspruchsvollere Visualisierungen von Designlösungen, die sich in Hinblick auf die Interaktionen wie das Endprodukt verhalten.
Zusammenarbeit: Ob asynchron oder in Echtzeit â lasse dein Team Feedback geben und entscheiden, welche EntwĂŒrfe in die Produktion gehen sollen.
5. Figma
Figma ist eine All-in-One-Plattform fĂŒr kollaboratives UX-Design, mit der du interaktive Prototypen mit einer benutzerfreundlichen OberflĂ€che erstellen kannst. Um mit diesem Tool arbeiten zu können, musst du dir so gut wie gar kein neues Wissen aneignen, sondern kannst direkt loslegen (deshalb lieben wir Figma so).
So setzt du Figma zur Verbesserung deines UX-Designs ein:
Verwende Mockups und Wireframing-Tools, um eine optimale NutzeroberflĂ€che fĂŒr deine Website oder dein Produkt zu erstellen.Â
Entwirf dynamische, realitĂ€tsgetreue Prototypen und simuliere Interaktionen wie Klicks und Hover mithilfe von Animationen, ĂbergĂ€ngen und dynamischen Overlays.
Betrachte und bearbeite dein Projekt im Team mit den Funktionen zur Zusammenarbeit in Echtzeit.
Wechsle zwischen Designdateien und Prototypen hin und her, um Usability-Tests auf der Plattform durchzufĂŒhren.
Mache die Ăbergabe an Entwickler zum Kinderspiel, indem du CSS bereits in deine Designs integrierst.
6. InVision
InVision ist eine kostenlose Plattform fĂŒr kollaboratives Design, die weit mehr Funktionen bietet als herkömmliche UI-Tools zur Gestaltung und Verbesserung der UX.
Mit der Plattform von InVision können du und dein Team:
gemeinsam Designs erstellen, teilen und kommentieren, dank des webbasierten Whiteboard-Tools Freehand;
mithilfe von Wireframing- und Prototyping-Tools realistische Designs erstellen, die wie das Endprodukt aussehen und sich auch so verhalten;
Usability-Tests ĂŒber Add-ons und Plugins durchfĂŒhren;
andere bereits verwendete Tools verknĂŒpfen, seien es UI-Design-Tools wie Figma oder Produktmanagement-Tools-Tools wie Airtable oder Monday.
7. Sketch
Sketch ist eine erstklassige All-in-One-UI-Designsoftware fĂŒr macOS, mit der Teams Wireframes und Prototypen erstellen können.
Mit dem Design-System von Sketch kannst du:
jeden Aspekt der UI deiner Website oder deines Produkts steuern, von grundlegenden Funktionen wie das Anpassen der Schriftart oder das Ăndern der GröĂe von Elementen bis hin zu fortgeschrittenen Funktionen wie der Vektorbearbeitung;
Symbole, Farben und Stile fĂŒr mehrere Dateien erstellen, verwalten und einsetzen, um fĂŒr ein konsistentes Design zu sorgen;
den gesamten Designprozess vom Entwurf ĂŒber die Tests bis hin zum Coding an einem Ort verwalten und durchfĂŒhren.
8. AdobeXD
Adobe XD ist eine herausragende Software fĂŒr kollaboratives UI/UX-Design. Als Teil der Creative-Cloud-Suite von Adobe kannst du es als eigenstĂ€ndiges Tool erwerben oder in Photoshop, Illustrator und After Effects integrieren.
So setzt du Adobe XD zur Verbesserung deines UX-Designs ein:Â
Erstelle schneller einfache Wireframes mit dem Quick-Mockup-Plugin.
Gestalte dynamische Elemente mit Drag-and-Drop schneller und flexibler als mit herkömmlichen UI-Kits.
Verwende (Mobile und Desktop-)Vorlagen, um deinen kreativen Prozess in Gang zu bringen.
Verwandle Low-Fidelity-Wireframes in High-Fidelity-UI-Designs mit verschiedenen Themes und Elementstilen.
Erstelle fortgeschrittene interaktive Prototypen mithilfe von Animationen und sprachgesteuerten Funktionen.
đĄPro-Tipp: Teste deine mit Figma, InVision, Sketch und Adobe XD erstellten Prototypen ĂŒber Anima mit den Hotjar-Tools Heatmaps, Recordings, Surveys und Feedback, und erhalte so weitere wertvolle Einblicke in deine UX.
9. Miro
Miro ist ein Online-Whiteboard, das bei der Entwicklung von App- oder Web-Design die Zusammenarbeit sowohl asynchron als auch in Echtzeit ermöglicht.
So setzt du Miro zur Verbesserung deines UX-Designs ein:
Beginne deine Brainstorming-Phase, indem du Ideen auf Haftnotizen notierst und sie mit Emojis, Formen und Bildern visuell festhÀltst.
Erstelle Flussdiagramme und Schaubilder mit der intuitiven Drag-and-Drop-Funktion.
Lade Stakeholder ein, asynchron oder in Echtzeit mitzuarbeiten, oder teile ein Whiteboard mit ihnen.
Organisiere und kommuniziere deine Ideen mit der Mind Map-Funktion.
Beschleunige die Entscheidungsfindung mit der Voting-Funktion und dem eingebauten Timer.
đ Weitere erwĂ€hnenswerte UX-Design-Tools (in alphabetischer Reihenfolge):Â
Axure: ein erstklassiges All-in-One-Tool fĂŒr UI-Design und Prototyping
Balsamiq: schnelle Erstellung von Low-Fidelity-Wireframes und Mockups mit integrierten UI-Kits
Framer: ein kostenloser No-Code-Website-Builder und UI-Design-Tool
Lucidchart: eine einfache Software fĂŒr Flussdiagramme und Schaubilder mit Zusammenarbeit in Echtzeit und Drag-and-Drop-Funktion
Marvel: ein webbasiertes Wireframing-Tool, das InteraktivitĂ€t und Animationen unterstĂŒtzt
Origami Studio: ein kostenloses UI/UX-Design-Tool
Proto.io: ein webbasiertes Premium-UI-Prototyping-Tool
UXpin: ein erstklassiges webbasiertes Tool fĂŒr Wireframing und Prototyping
CHECK-Phase: UX-Design-Tools fĂŒr Tests und Experimente
Sobald du einen funktionierenden Prototyp erstellt oder diesen an dein Entwicklerteam zur Implementierung auf deiner Website ĂŒbergeben hast, musst du testen, wie die Nutzenden auf dein neues Design reagieren.
In der PrĂŒf- oder Testphase testen die Teams die neue Funktion, Website, App oder das Produkt mit geeigneten UX-Tools, um herauszufinden, ob ihre Hypothese richtig war und wie die Nutzenden mit dem Design interagieren. Auf diese Weise kann das Design oder das Produkt dann dementsprechend verbessert werden.
Mithilfe von Nutzertest-Tools kannst du deine Hypothesen ĂŒberprĂŒfen und feststellen, ob die vorgenommenen Ănderungen funktionieren. Falls sich zeigt, dass dem tatsĂ€chlich so ist, kannst du die getesteten Ănderungen getrost umsetzen.
10. Optimizely
Optimizely ist eine Experimentierplattform, die es deinem UX-Team ermöglicht, durch Split- und multivariate Tests Erkenntnisse ĂŒber die von dir erstellten Designs zu gewinnen, so dass du lernen, iterieren und die UX kontinuierlich verbessern kannst.
So setzt du Optimizely zur Verbesserung deines UX-Designs ein:
Entwirf Ideen dank eines benutzerfreundlichen visuellen WYSIWYG-Editors und nimm ganz einfach Ănderungen an deiner Website vor (kein HTML erforderlich).
Merge und implementiere Code, ohne Funktionen tatsĂ€chlich freizugeben, bevor alle Stakeholder soweit sind; dann âlege einfach den Schalter umâ.
Schneide die UX auf bestimmte Nutzende oder Gruppen zu, miss dann den Effekt dieser Personalisierung und iteriere.
Sorge fĂŒr eine einheitliche Customer Experience, indem du Tests auf verschiedenen Plattformen synchronisierst.
đĄPro-Tipp: Bringe deine A/B- und multivariaten Tests auf ein höheres Level, indem du das Nutzerverhalten oder deine getesteten Varianten mit der Hotjar-Optimizely-Integration analysierst. Zum Beispiel:
Teste ein neues Navigationsleisten-Design: Erstelle zunÀchst verschiedene Varianten der Navigationsleiste deiner Website als Optimizely-Experiment. Analysiere dann Hotjar-Aufnahmen, die nach diesem Optimizely-Experiment gefiltert wurden, um zu sehen, wie Nutzende mit der jeweiligen Variante interagieren. Entscheide dann, welche Version der Navigationsleiste gelauncht werden soll.
Identifiziere die erfolgreichsten User Journeys: Entwirf multivariate Tests fĂŒr leicht unterschiedliche User Journeys von der Landing Page bis zum Kauf. Beobachte, welche Flows eher konvertieren, und finde mit Recordings und Heatmaps die GrĂŒnde dafĂŒr heraus.
Hole Feedback zu einer neuen Funktion ein: Richte eine Umfrage zur Variante mit der neuen Funktion ein und lasse die Nutzenden ihre Meinung dazu sagen. Entscheide auf Grundlage des Nutzerfeedbacks, ob du die neue Funktion einfĂŒhrst oder lieber noch weiter optimierst.
11. Omniconvert
Omniconvert ist ein Tool zur Optimierung der Conversion Rate (Conversion Rate Optimization, CRO) und zur DurchfĂŒhrung von Experimenten. Es ist speziell auf E-Commerce-Websites zugeschnitten und hilft dir dabei, aus EinmalkĂ€ufer:innen Kund:innen auf Lebenszeit zu machen, indem es den Weg fĂŒr die Costumer-Value-Optimierung (CVO) bereitet.
So setzt du Omniconvert zur Verbesserung deines UX-Designs ein:
FĂŒhre A/B-Tests deiner Hypothesen sowie Experimente durch.
Verwende benutzerdefinierte Attribute und On-Page-Variablen, um Nutzende zu segmentieren und Tests zu personalisieren.
Verstehe, ĂŒberwache und pflege deine besten Kund:innen, um die Kundenbindung zu stĂ€rken und den Kundenertragswert (Customer Lifetime Value, CLV) zu erhöhen.
đĄPro-Tipp: Omniconvert lĂ€sst sich auch in Hotjar integrieren, sodass du Aufnahmen von Sessions und Heatmaps nach deinen Omniconvert-Experimenten filtern kannst, um herauszufinden, warum Nutzende ein bestimmtes Design prĂ€ferieren.
12. Maze
Maze ist eine Plattform fĂŒr Einblicke in das Produkterlebnis, mit der du die Nutzerfreundlichkeit deiner Konzepte und Prototypen testen kannst. Der Schwerpunkt liegt bei Maze dabei auf der kontinuierlichen Product Discovery (zu deutsch: Produktentdeckung).
So setzt du Maze zur Verbesserung deines UX-Designs ein:
Validiere und experimentiere mit Prototypen, Wireframes, Konzepten und Texten mithilfe von unmoderierten Tests.
Integriere Maze nahtlos in die hier vorgestellten UI/UX-Design-Tools, um Ideen zu validieren und den Designprozess zu beschleunigen.
Erhalte umsetzbare Einblicke in das Nutzerverhalten mit automatisierten Metriken und Berichten.
Sende gezielte Forschungskampagnen an deine maĂgeschneiderte Teilnehmerdatenbank.
Hilf deinen Nutzenden beim Erreichen ihrer Ziele, damit du deine eigenen erreichst.
Um UX-Design wirklich zu beherrschen, brauchst du mehr als nur Zahlen und Daten: Du musst die emotionale Bindung deiner Nutzenden erforschen.
Behalte bei der Verwendung der oben aufgefĂŒhrten Tools das groĂe Ganze im Auge: Du entwickelst und implementierst eine ganzheitliche UX-Design-Strategie, die fĂŒr deine Website, deine App oder dein Produkt - und dein Publikum - funktioniert. Denke nicht nur an die Optimierung von Zahlen, sondern hilf deinen Nutzenden, ihre Ziele zu erreichen. Nur so erreichst du auch deine Ziele.
Erhalte mit Hotjar Einblicke in die digitale Erfahrung und verbessere deine UX
Mit Hotjar findest du heraus, wie echte Nutzende deine Website oder App erleben â sodass du sie dementsprechend verbessern kannst!