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.
Die 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!