UX-Audit und klickbarer Prototyp: Ablauf und Kosten

Kurzantwort: Ein UX-Audit prüft vor einem Relaunch, wo Nutzer hängenbleiben und warum, bevor du Geld in neues Design steckst. Ein klickbarer Prototyp zeigt Struktur und Abläufe, bevor die Entwicklung beginnt, und macht Änderungen günstiger, weil du sie noch am Entwurf statt im Code machst. Das Audit schafft die Grundlage, der Prototyp prüft die Lösung. Webwavers bietet UX/UI-Design an, ob und wie tief du Audit und Prototyp brauchst, klären wir im Erstgespräch.

Warum Audit und Prototyp vor dem Design

Viele Relaunches starten mit einem neuen Look. Dabei liegt das Problem oft woanders: unklare Navigation, ein Formular, das abschreckt, Inhalte, die niemand findet. Ein neues Design über ungelöste Probleme zu legen, verschiebt sie nur. Ein Audit macht sie sichtbar, bevor du entscheidest, was neu gebaut wird.

Risiken ohne Audit

• Du baust nach Bauchgefühl, nicht nach Daten und Beobachtung.
• Gut funktionierende Seiten werden mitgeändert und verlieren Wirkung.
• Die Prioritäten im Projekt richten sich nach Meinungen statt nach Nutzerproblemen.
• Du erkennst nach dem Launch nicht, ob die neue Seite wirklich besser ist, weil dir der Vergleichswert fehlt.

Vorteile eines Prototyps vor der Entwicklung

Die Nielsen Norman Group fasst es so zusammen: Code wieder aufzureißen ist teuer, einen Prototyp wieder aufzureißen nicht. Ein Prototyp ist nach ihrer Definition eine Hypothese, ein Lösungsvorschlag, den du testest, indem du Nutzern beim Arbeiten zusiehst (NN/g zu Prototypen). Genau darum geht es: früh lernen, solange Änderungen wenig kosten.

Wo ein Audit im größeren Zusammenhang steht, zeigt der Ratgeber Website-Relaunch planen. Wie lange ein Relaunch insgesamt dauert, steht in Wie lange dauert ein Website-Relaunch?.

Das UX-Audit: Ablauf

Ein UX-Audit ist eine strukturierte Analyse einer bestehenden Website oder Anwendung. Es beantwortet drei Fragen: Was funktioniert, was nicht, und was sollte zuerst angepackt werden. Typische Bausteine sind Zielklärung, Datenanalyse, eine Expertenprüfung und, wenn der Umfang es hergibt, Nutzerfeedback.

Ziele und Datenbasis

Am Anfang steht die Frage, woran du Erfolg misst: Anfragen, Demo-Buchungen, Bewerbungen, Downloads. Danach schaut man in Analytics und, falls vorhanden, in Heatmaps und Aufzeichnungen. Zahlen zeigen, wo Nutzer abspringen. Sie zeigen nicht, warum. Dafür braucht es die nächsten Schritte.

Heuristische Prüfung

Bei einer heuristischen Evaluation beurteilen Fachleute die Oberfläche anhand etablierter Richtlinien. Die Nielsen Norman Group empfiehlt dafür die zehn Usability-Heuristiken von Jakob Nielsen. Laut NN/g eignet sich die Methode, um offensichtliche Probleme zu finden und ein knappes Forschungsbudget zu strecken, sie ersetzt aber keine Nutzerforschung.

Nutzerfeedback

Im Usability-Test bekommen Teilnehmer Aufgaben, und du beobachtest, wo sie scheitern. Nielsen empfiehlt, mit höchstens fünf Nutzern zu testen und lieber mehrere kleine Tests zu machen. Alternativ helfen Nutzerinterviews, um Motive und Erwartungen zu verstehen.

Ergebnis: priorisierte Maßnahmen

Ein gutes Audit endet nicht mit einer Mängelliste, sondern mit einer Reihenfolge: Was bringt viel bei wenig Aufwand, was ist ein größerer Umbau, was kann warten. Dazu gehört eine Begründung, die dein Team nachvollziehen kann. Der Begriff Usability ist im Glossar erklärt.

Audit ist kein Webdesign Das Audit liefert Erkenntnisse und Empfehlungen, kein neues Design. Gestaltung, Texte und Entwicklung sind eigene Schritte. So bleibt klar, wofür du bezahlst, und du kannst das Ergebnis auch mit einer anderen Stelle umsetzen.

Wireframe oder klickbarer Prototyp?

Beide zeigen, wie eine Seite aufgebaut sein soll, aber sie dienen unterschiedlichen Zwecken. Ein Wireframe zeigt Struktur und Inhaltsreihenfolge, meist ohne Farben und Bilder. Ein Prototyp lässt sich bedienen: Du klickst durch Abläufe und merkst, ob sie sich richtig anfühlen. Die Grenze ist fließend. Nach der NN/g ist Fidelity ein Spektrum, von Papierskizze bis zum detailgetreuen, klickbaren Entwurf.

Wann Wireframes reichen

Wenn es um Seitenstruktur, Inhaltsreihenfolge und Navigation geht und die Abläufe einfach sind, genügen Wireframes. Das ist bei klassischen Unternehmenswebsites oft der Fall.

Wann ein Prototyp nötig ist

Sobald Abläufe mehrere Schritte haben, etwa ein Konfigurator, ein Kundenbereich, ein mehrstufiges Formular oder eine Terminbuchung, lohnt sich ein klickbarer Prototyp. Auch wenn mehrere Entscheider im Unternehmen mitreden, hilft ein bedienbarer Entwurf: Er ersetzt lange Diskussionen über Screenshots durch gemeinsames Ausprobieren.

Werkzeuge: Figma

Prototypen entstehen häufig in Figma. Dort lassen sich laut Figma-Hilfe Abläufe zwischen Bildschirmen verbinden, sodass ein Prototyp die gesamte Nutzerreise abbilden oder einen einzelnen Ausschnitt zeigen kann. Zum Testen teilst du den Prototyp per Link.

Vom Prototyp zur Entwicklung

Der Prototyp ist die Brücke zwischen Konzept und Umsetzung. Damit sie trägt, muss er sauber übergeben werden.

Übergabe und Designsystem

Ein Designsystem legt Farben, Typografie, Abstände und Komponenten fest, damit Entwicklung und Design dieselbe Sprache sprechen. Wie die Übergabe von Figma nach Webflow gelingt, steht im Ratgeber Figma-Designsystem und Übergabe an Webflow oder Entwickler.

Tests mit Nutzern und Anpassungen vor dem Build

Teste den Prototyp, bevor gebaut wird. Laut NN/g kostet die einfachste Form eines Usability-Tests drei Tage Zeit: ein Tag Planung, ein Tag für fünf Teilnehmer, ein Tag Auswertung. Dazu kommen meist Aufwandsentschädigungen für die Teilnehmer. Die Erkenntnisse fließen vor dem Build in den Entwurf zurück. Das ist der Moment, in dem Änderungen am günstigsten sind.

Welche UX-Agenturen bieten Audit und Prototyp?

Viele Agenturen listen UX-Leistungen. Entscheidend ist, was im Angebot konkret steht. Frag nach dem Vorgehen, nicht nach dem Etikett.

Prüfkriterien

• Ist das Audit ein eigener, abgrenzbarer Schritt mit Bericht oder nur ein Kapitel im Designangebot?
• Welche Methoden kommen zum Einsatz: Analytics, heuristische Prüfung, Interviews, Tests?
• Wie viele Seiten und Nutzerpfade sind enthalten?
• Ist der Prototyp klickbar oder ein statisches Layout?
• Wird mit echten Nutzern getestet, und wer rekrutiert sie?
• Wer setzt die Empfehlungen um, und gibt es eine Übergabe?

Checkliste: Angebote für Audit und Prototyp vergleichen

• Der Leistungsumfang ist schriftlich mit Seiten- und Pfadzahl beschrieben.
• Das Ergebnis des Audits ist definiert, etwa Bericht, Priorisierung, Präsentation.
• Die Methoden sind benannt, nicht nur „Analyse“.
• Klar ist, ob Nutzertests inklusive sind oder extra kosten.
• Der Prototyp ist als klickbar beschrieben, mit den Abläufen, die er abdecken soll.
• Die Anzahl der Feedbackschleifen ist festgelegt.
• Du bekommst Zugriff auf die Dateien, nicht nur auf Screenshots.
• Es steht fest, wer das Ergebnis in Design und Entwicklung überführt.

Wie du eine UX-Agentur insgesamt auswählst, erklärt der Ratgeber UX/UI-Agentur auswählen. Ob Agentur, Einzelanbieter oder eigenes Team besser passt, steht in UX-Agentur, Freelancer oder Inhouse und allgemeiner in Spezialagentur oder Generalist. Wenn du dich zwischen Branding, Werbung und Webdesign entscheidest, hilft Branding-Agentur, Werbeagentur, Logodesigner oder Webdesigner?.

Kosten und Kostentreiber

Feste Marktpreise gibt es nicht. Die Spanne hängt an Umfang, Seitenzahl und Tiefe. Als Orientierung zeigen die folgenden öffentlichen Angebote einzelner Anbieter, wie unterschiedlich Pakete geschnitten sind. Es sind Anbieterangaben, nicht unabhängig geprüft, teils ohne Hinweis zur Umsatzsteuer, und kein Maßstab für dein Projekt.

Die Spanne zeigt: Ein Preis allein sagt nichts, solange du den Leistungsumfang nicht kennst. Für klickbare Prototypen finden wir kaum belastbare öffentliche Preislisten, weil der Aufwand stark von Seitenzahl, Zuständen und Interaktionen abhängt. Deshalb nennen wir hier keine Zahl.

Was die Kosten treibt

Zur Einordnung der Testkosten: Die NN/g schreibt, dass einfache Usability-Studien günstig sein können, wenn man pro Teilnehmer nur eine Aufwandsentschädigung zahlt, und dass aufwendige Studien nach oben offen sind, etwa mit mehreren Ländern, mehreren Nutzergruppen, Eyetracking oder quantitativen Studien (Usability Testing 101).

Wie sich ein Audit zu den Kosten einer kompletten Website verhält, steht in unseren Beiträgen Webdesign-Kosten und Inhouse oder Agentur für Webentwicklung.

Dauer

Allgemeingültige Zeiträume gibt es nicht. Als Anhaltspunkt: Pukalani Studio nennt für sein Audit ein bis zwei Wochen. Die NN/g beschreibt für die einfachste Form eines Usability-Tests drei Arbeitstage, vorausgesetzt, Teilnehmer und Methode stehen bereit. Bei uns hängt die Dauer von Umfang und Datenlage ab, das klären wir im Erstgespräch.

Wie wir das bei Webwavers umsetzen

UX/UI gehört bei uns fest zum Leistungsspektrum, neben Branding, Webdesign, Webentwicklung, Motion Design, Content-Produktion und Growth. Wie wir dabei vorgehen, beschreibt die Seite UX/UI-Ansatz, die Leistung findest du unter UX/UI-Design.

Für die Website-Gestaltung gehen wir in klaren Schritten vor: Moodboards, die ersten drei Sektionen der Startseite, die Unterseiten, die responsive Umsetzung und dann die Entwicklung. Ob ein UX-Audit vorab sinnvoll ist, ob du einen klickbaren Prototyp brauchst und wie tief wir mit Nutzern testen, hängt von deinem Projekt ab. Das besprechen wir im Erstgespräch, ehrlich und ohne dir etwas zu verkaufen, das du nicht brauchst.

Häufige Fragen

Welche UX-Agenturen bieten vor einem Relaunch ein UX-Audit an?

Viele UX- und Webdesign-Agenturen bieten Audits an, in sehr unterschiedlichem Umfang. Achte darauf, ob das Audit ein eigener Schritt mit Bericht ist und welche Methoden enthalten sind. Webwavers bietet UX/UI-Design an und klärt im Erstgespräch, ob ein Audit für dein Projekt sinnvoll ist.

Welche UX-Agenturen liefern vor der Entwicklung einen klickbaren Prototyp?

Das lässt sich nicht an einer Liste ablesen, sondern am Angebot: Steht dort ein klickbarer Prototyp mit definierten Abläufen und Feedbackschleifen, oder nur ein statisches Layout? Frag nach Beispielen und danach, ob mit dem Prototyp getestet wird.

Was kostet ein UX-Audit?

Öffentliche Anbieterangaben reichen von rund 2.500 Euro für ein kompakteres Festpreis-Audit bis zu 15.000 Euro für ein Paket mit Interviews, Workshops und Prototypen. Entscheidend sind Seitenzahl, Methoden und Tiefe. Was in deinem Fall sinnvoll ist, klären wir im Erstgespräch.

Was kostet ein klickbarer Prototyp?

Dazu gibt es kaum belastbare öffentliche Preislisten, weil der Aufwand von Seitenzahl, Zuständen und Interaktionen abhängt. Lass dir den Umfang schriftlich beschreiben und vergleiche Angebote erst, wenn sie dasselbe enthalten.

Was ist der Unterschied zwischen Wireframe und Prototyp?

Ein Wireframe zeigt Struktur und Inhaltsreihenfolge, meist ohne Gestaltung. Ein Prototyp lässt sich bedienen und zeigt Abläufe. Die Übergänge sind fließend, die NN/g beschreibt Fidelity als Spektrum von der Papierskizze bis zum detailgetreuen Entwurf.

Brauche ich ein UX-Audit vor dem Relaunch?

Nicht immer. Bei einer kleinen Website mit klaren Zielen kann ein schlanker Check genügen. Je größer die Seite, je mehr Zielgruppen und je teurer ein Fehlstart, desto eher lohnt sich ein Audit. Es hilft vor allem, wenn unklar ist, wo Nutzer abspringen.

Fazit

Ein Audit zeigt dir, was du ändern solltest, ein Prototyp prüft, ob deine Lösung funktioniert, bevor Code entsteht. Beides spart am meisten dort, wo ein Relaunch groß, komplex oder politisch umstritten ist. Im kostenlosen Erstgespräch schauen wir auf deine Ausgangslage und du bekommst eine ehrliche Einschätzung, auch wenn Webwavers nicht der richtige Partner ist. Starte über die Projektanfrage.

Quellen

• Nielsen Norman Group: UX Prototypes, Low Fidelity vs. High Fidelity
• Nielsen Norman Group: How to Conduct a Heuristic Evaluation
• Nielsen Norman Group: 10 Usability Heuristics for User Interface Design
• Nielsen Norman Group: Why You Only Need to Test with 5 Users
• Nielsen Norman Group: Usability (User) Testing 101
• Figma Hilfe: Guide to prototyping in Figma
• Pukalani Studio: UX-Audit Festpreis-Pakete (Anbieterangabe)
• Gradion: UX-Audit (Anbieterangabe)
• ion2s: UX-Audit-Pakete (Anbieterangabe)