UI/UX Review

In diesem Artikel finden Sie alle Informationen zu unserem UI/UX Review Angebot. Bitte lesen Sie sich die Inhalte sorgsam durch, um ein vollständiges Bild über die angebotenen Services zu erhalten.

Für wen ist dieses Service geeignet?

Dieses Service richtet sich an Kund:innen, die darauf Wert legen, dass die eigene Webseite den gängigen UI/UX Richtlinien entspricht. Wir erbringen dieses Service entweder im Rahmen eines Relaunchs, wo wir z.B. einen Klickdummy bzw. Prototypen (z.B. in Figma) analysieren oder durch die Analyse einer bereits bestehenden Webseite.

Was können Sie sich von diesem Service erwarten?

Ziel des Services ist es, dass Sie einen kompletten Report über die analysierte Webseite bzw. Ihren Prototyp erhalten. Sie bekommen eine Analyse darüber, ob Ihre Website-Visitors sich leicht auf Ihrer Website zurechtfinden, die Inhalte klar erkennen und auch verstehen können. Zusätzlich erhalten Sie Input zu Ladezeit und Performance der bestehenden Webseite und können diese Informationen entweder durch uns (im Falle vom HubSpot CMS) oder Ihre bestehende Agentur (bei Fremdsystemen) optimieren lassen.

Ziel ist es, dass durch die anschließenden Maßnahmen die Journey auf Ihrer Webseite optimiert, die Verweildauer und die Conversions verbessert werden. Darüber hinaus sollte sich durch die Performance Optimierungen Ihr Ranking in Suchmaschinen und KI-Chatbots verbessern und dadurch auch mehr Traffic auf Ihre Webseite gelangen.

Was beinhaltet das UI/UX Review Service?

Prinzipiell testen wir nach 5 Kategorien. Je nachdem, ob es sich um eine bestehende Webseite oder ein Relaunchprojekt mit Klickdummy handelt, stehen Ihnen unterschiedliche Paketgrößen und Inhalte zur Verfügung. In der nachfolgenden Tabelle, finden Sie alle Inhalte aufgelistet.

Prämisse für unser Pricing ist die Analyse von vier unterschiedlichen Seitentypen:

• Startseite
• Landingpage
• Service/Product Page
• Blog Detailseite

¹: Accessibility & UI Testing wird im Paket "Light" und "Classic" nur teilweise durchgeführt. Nähere Informationen finden Sie in der nachstehenden Detailbeschreibung.

²: Die technische Performance-Analyse mittels Google Lighthouse ist optional zusätzlich buchbar.

Designrichtlinien (Desktop & Mobil)

Im Zuge dieses Analysepunkts, widmen wir uns den grundsätzlichen Gestaltungsrichtlinen im Webdesign. Oftmals scheitern optisch ansprechende Designs an diesen Richtlinien und sorgen für hohe Absprungraten bzw. geringe Conversions.

1. Gestaltgesetze: Die menschliche Wahrnehmung folgt fixen Regeln, die psychologisch verankert sind. Werden diese Gestaltgesetze nicht eingehalten, werden visuelle Informationen falsch geordnet und Zusammenhänge werden nicht mehr erkannt. Wir nutzen hierfür die Erkenntnisse der wissenschaftlichen Forschung von Max Wertheimer, Kurt Koffka und Wolfgang Köhler.
2. Hervorstechende Inhalte: Die wichtigsten Inhalte aus Sicht der Website-Beuscher:innen sollten hervorstechen, um die Aufmerksamkeit der Personen zu steuern. Insgesamt sollten in jedem sichtbaren Bereich maximal 4 Elemente hervorgehoben werden.
3. Gedächtnisgrenzen: Im Schnitt können Menschen nur bis zu vier Informationen gleichzeitig berücksichtigen oder verarbeiten. Eine maximale Grenze von drei Informationen wird aktuell als ideal angesehen. Wenn mehr als vier Informationen nötig sind, sollte eine Gruppierung oder evtl. ein Zwischenschritt angeboten werden.
4. Erkennen vs. erinnern: Es ist deutlich einfacher einen Inhalt zu erkennen, als sich an diesen zu erinnern. Wir achten darauf, dass die wesentlichen Informationen dargestellt werden, damit Personen diese einfach erkennen können.
5. "What you see is all there is"-Effekt: Wenn Information nicht im ersten Moment erkennbar oder sichtbar ist, kann dies schnell dazu führen, dass falsche Schlussfolgerungen gezogen werden und sich daraus Handlungen, wie etwa das Verlassen der Webseite oder auch das generelle Einstufen eines Unternehmens als "für einen bestimmten Usecase irrelevant", verursachen.
6. Zeigarnik-Effekt: Unerledigte Aufgaben bleiben besser im Gedächtnis als abgeschlossene und blockieren dazu noch mentale Ressourcen, die für die weitere Konsumation von Inhalten oder das Durchführen von Conversions wichtig sind. Daher achten wir darauf, dass Aufgaben für Website-Besucher:innen in einzelne Schritte zerlegt und bei Erledigung auch deutlich gekennzeichnet werden.
7. Aversion gegen Extreme: Menschen vermeiden die extremen Alternativen bei Entscheidungen oder Handlungen. Bei einem Ausschluss von Extremen, sollte immer noch eine reelle und attraktive Option zur Verfügung stehen. Dies gilt nicht nur für Pricing Tables, sondern auch für Conversion Aufforderungen und weitere interaktive Elemente.
8. Auswahlparadoxon: Je mehr Optionen zur Verfügung stehen, desto größer ist die Unsicherheit während der Entscheidung und die Unzufriedenheit mit der getroffenen Wahl. Wir analysieren Varianten auf Ihrer Webseite, um die Entscheidungsfreudigkeit zu optimieren.

Accessibility (gesetzliche Vorgaben)

Mit 28. Juni 2025 trat der European Accessibility Act (EAA) in Kraft. Dieser besagt, dass unterschiedliche Produkte & Dienstleistungen barrierefrei zugänglich gemacht werden müssen und sieht auch ein entsprechendes Bußgeld von bis zu EUR 100.000,- vor. Als Grundlage der Bewertung dient die WCAG 2.2 Richtlinie.

Vorwiegend sind davon Webseiten von Telekommunikations-, Bankdienstleistungs-, Beförderungs- und einige weitere Branchen betroffen. Jedoch gilt diese Regelung auch für z.B. E-Commerce Unternehmen. Selbstredend auch Webseiten öffentlicher Stellen.

Es ist davon auszugehen, dass diese Regelung auch im Sinne der Gleichbehandlung nach und nach auf weitere Branchen übergehen und verpflichtend wird.

Abgesehen davon wirken sich die Maßnahmen die für eine barrierefreie Webseite wichtig sind auch positiv auf das SEO-Ranking aus. Selbst wenn lt. Google Accessibility noch keinen offiziellen Ranking Faktor darstellt.

Abschließend: Unabhängig von Ranking und gesetzlichen Vorschriften, ist es wichtig, dass Ihre Webseite niemanden exkludiert. 

1. Farbkontraste: Wir prüfen, ob Farbkontraste den Richtlinien entsprechen und die Inhalte auf z.B. CTAs, etc. auch tatsächlich für Menschen mit Seheinschränkung gut erkenn- und lesbar sind.
2. Keyboard-Testing: Jede Webseite muss mit der Tastatur gut bedienbar sein. Besucher:innen können schon alle aus Effizienzgründen lieber mit der Tastatur z.B. per Tab-Taste navigieren oder durch motorische Behinderung darauf angewiesen sein. Wir prüfen, ob die Programmierung diesen Anforderungen entspricht. In der Version Light bzw. Clickdummy Review, wird diese Analyse nicht durchgeführt.
3. Alternativtexte: Alt-Texte sind schon seit Jahren ein Thema und sollen aussagekräftig sein. Dadurch können Medieninhalte in den entsprechenden Bildersuchen aufgenommen und auch Personen akustisch ausgegeben werden. Suchmaschienen nutzen diese Informationen u.a. zum Bewerten und Kategorisieren des Zwecks und Inhalt einer Seite. In der Version Light bzw. Clickdummy Review, wird diese Analyse nicht durchgeführt.

UI Testing (nach Jakob Nielsen)

Jakob Nielsen formulierte 10 Heuristiken für gutes Interaktionsdesign. Basierend auf diesen Parametern, analysieren wir Ihre Webseite.

1. Sichtbarkeit des Systemstatus: Dieser Punkt dient dazu, dass Website-Besucher:innen erkennen wo sie sich befinden (z.B. Breadcrumbs, Hervorhebung im Hauptmenü, aktive Felder im Formular, Log-in-Status, etc.) und sich dadurch einfacher orientieren können.
2. Übereinstimmung von System und Wirklichkeit: Manche Dinge im Web sind gewohnt. Wir wischen Bilder auf die Seite und erwarten uns hinter bestimmten Icons auch bestimmte Funktionen. Doch manche Webdesigns sind anders und verursachen damit Chaos. Auch wenn optisch ansprechend, kann das dazu führen, dass User:innen verwirrt die Webseite verlassen.
3. Nutzer:innenkontrolle und Freiheit: Hier werden die typischen Befehle, die von User:innen genutzt werden, analysiert. Ist einfaches Rückgängigmachen möglich? Kann ich in einem Multi-Step-Formular einen Schritt vorwärts bzw. auch zurück gehen ohne meine Einfaben zu verlieren? Es gibt viele Standards, die User:innen die Kontrolle geben und gegebenenfalls durch deren Nichtvorhandensein zu einer höheren Absprungrate führen.
4. Beständigkeit & Standards: User:innen lernen idealerweise intuitiv wie Ihre Webseite funktioniert. Wir achten darauf, dass dieses Lernen nicht durch unterschiedliche Botschaften (z.B. unterschiedliche Icons für denselben Kontext, durchgängige und gleich platzierte Navigation, Wording Abweichungen wie z.B. "Kontakt" vs. "Anfrage") kompromitiert wird und dadurch Verwirrung entsteht.
5. Fehlervermeidung: Wir analysieren Ihre Webseite nach potentiellen Fehlerquellen, die eine User:in im Zuge ihrer Interaktion mit der Webseite durchleben kann. Das können Formulare sein, bei denen Pflichtfelder nicht deutlich markiert und daher ein Absenden am Ende nicht möglich ist oder auch einfach, dass richtige Formularfeldtypen Falscheingaben verunmöglichen. Dadurch reduzieren Sie Frustration auf Seite Ihrer Website-Besucher:innen und steigern die Conversionrate und Datenqualität.
6. Wiedererkennung statt Erinnerung: In Ergänzung zu Punkt 4 der Designrichtlinien geht es trotz Namensgleichheit um weitere Themen, wie beispielsweise, dass Formularfelder immer sichtbare Beschriftungen aufweisen, die zuletzt angesehenen Produkte angezeigt werden oder auch eine Autovervollständigung im Suchfeld zur Verfügung steht. Diese und mehr Punkte unterstützen User:innen dabei zu den gewünschten Informationen und Inhalten zu gelangen und reduzieren die Absprungrate.
7. Flexibilität & Effizienz: Eine gute Webseite muss nicht nur schnell, sondern auch einfach zu bedienen sein. Wir analysieren daher, ob die Webseite für erfahrenere oder weniger erfahrenere User:innen geeignet ist und evtl. Shortcut Optionen zur Verfügung stehen. Klar ist, dass je einfacher und effizienter Ihre Webseite im Vergleich zu Ihren Wettbewerber:innen zu bedienen ist, sie eher als Informationsquelle herangezogen wird.
8. Ästhetisches und minimalistisches Design: Hier betrachten wir, ob die Webseite den Fokus auf den jeweilig wichtigsten Aspekt des unterschiedlichen Seitentyps im jeweiligen Abschnitt legt. So müssen sich Landingpages auf die jeweiligen Conversion-Handlung fokussieren und nicht davon ablenken oder z.B. das sich das Hauptmenü beim scrollen reduzieren um mehr Platz für die entscheidenden Inhalte zur Verfügung zu stellen.
9. Hilfestellung beim erkennen, bewerten und beheben von Fehlern: Sollten Fehler auftreten, muss dafür Sorge getragen werden, dass eine nächste sinnvolle Handlung durchführbar ist. Gelangt man beispielsweise auf eine 404-Seite (Seite nicht gefunden), empfehlen wir dort eine Suchfunktion oder die beliebtesten Webseite Inhalte zur Verfügung zu stellen, damit für User:innen keine Sackgasse entsteht. Auch andere Fehlermeldungen (z.B. bei Formularen, Chats, Ladefehlern, ...) sollen dazu führen, dass die jeweilige Person versteht was nun zu tun ist oder zum gewünschten Inhalt geführt wird.
10. Hilfe & Dokumentation: In seltenen Fällen sind komplexe Interaktionen von User:innen nötig (z.B. die Anlage eines User-Accounts, das Verwalten eines Accounts, ...). Um sich im System zurecht zu finden, ist es wichtig, dass die jeweiligen Optionen erklärt werden. Sollte Ihre Webseite auf den untersuchten Seiten über spezielle Handlungen verfügen, betrachten wir auch die dazu benötigten Erklärungen für ein ideales User:innenerlebnis.

Content Clarity

Eine klare und deutliche Sprache, kann User:innen nicht nur zum setzen einer Handlung animieren, sondern auch Fehlern in der Bedienung und damit Frustration vorbeugen. Dabei helfen verständliche Begriffe Ihren User:innen dabei das zu finden was sie suchen, ohne evtl. falsch abzubiegen oder Ihre Webseite wieder zu verlassen.

1. Lesbarkeitsindex: Wir nutzen den Flesch-Index zur Bewertung der Lesbarkeit Ihrer Website-Texte. Dahinter liegt eine Formel, die auf Basis der Anzahl von Wörtern, Silben und Sätzen die Aufschluss darüber gibt, ob der vorliegende Website-Text einfach oder schwierig zu verstehen ist.
2. Wiener Sachtextformel: Darüber hinaus analysieren wir auf Basis der Wiener Sachtextformel, wie einfach oder schwer verständlich die geschriebenen Inhalte Ihrer Webseite für Besucher:innen zu lesen bzw. zu verstehen sind.
3. Priming: Jede Wahrnehmung beeinflusst wie oder ob nachfolgende Informationen aufgefasst werden. Um Website-Besucher:innen zur gewünschten Handlung zu animieren, ist es wichtig, dass aussagekräftige und konsistente Begriffe, Ausdrücke, Farben, Schriften, Icons, Bilder, Layouts, Strukturen, Statusanzeigen u.v.m., verwendet werden.
4. Aktive Sprache: Um Personen zu einer Handlung zu animieren, empfiehlt es sich, sich einer aktiven und motivierenden Sprache zu bedienen. Dadurch werden Handlungsaufforderungen klar erkennbar und laden zur Interaktion ein. Im Zuge dieses Punkts prüfen wir, ob Ihre Handlungsaufforderungen klar und aktiv formuliert sind.

Optional: Technische Performance

Die Leistung einer Webseite ist nicht nur ein Thema für die organische Suchmaschinenoptimierung. Sie trägt darüber hinaus zur User Experience bei und führt bei möglichst kurzen Ladezeiten zu Verbesserungen von Conversion Rates.

1. Google Lighthouse Messung: Wir nutzen für die Performance Messung Google Lighthouse als Standardinstrument. Dadurch erhalten wir einen Überblick zur Ladezeit, SEO, Barrierefreiheit und Best Practices. Diese Informationen lassen wir inkl. des bisherigen Kontexts in unsere Ergebnisse einfließen, um Ihnen auch hier bei Bedarf Optimierungsvorschläge für Ihr technisches SEO bieten zu können.

Ergebnispräsentation

In einer abschließenden Präsentation, fassen wir unsere Ergebnisse und Empfehlungen zusammen und gehen diese mit Ihnen in einem gemeinsamen Termin durch. Sie erhalten im Anschluss an das Meeting auch unsere Ergebnispräsentation, um mit Ihren internen bzw. externen Dienstleister:innen die entsprechenden Maßnahmen zu setzen. 

Gerne stehen wir Ihnen auch selbst für technische Optimierungen innerhalb des HubSpot CMS zur Verfügung. 

Abgrenzungen und nicht inkludierte Leistungen

Sofern nicht explizit anders vereinbart, analysieren wir je eine Einzelseite der folgenden vier Seitentypen: Startseite, Landingpage, Service/Product Page, Blog Detail Page.

Sollten Sie abweichende Seitentypen analysieren lassen wollen, lassen Sie es uns bitte im Vorfeld wissen.

Unsere Services umfassen nicht die Erstellung von Content, Ads oder anderen Inhalten. Wir analysieren lediglich Ihre Inhalte. Sollten Sie andere Erwartungshaltungen haben, lassen Sie uns gerne im Vorfeld darüber reden.

Dieses Service beinhaltet keine kontinuierliche Analyse oder Optimierung der Webseite. Sollten Sie daran interessiert sein, lassen Sie uns gerne wissen.