Website-Relaunch (4): UX und Design

Veröffentlicht

Lesezeit

4 Minuten

Portraitfoto von Olli, Inhaber der Digitalagentur seitenweise

Autor

Oliver Hunke

Nahaufnahme eines Computers, auf dem eine WordPress Website der Digitalagentur seitenweise zu sehen ist.

Ein erfolgreicher Website-Relaunch basiert nicht nur auf einer soliden technischen Basis und einer durchdachten SEO-Strategie, sondern auch auf einem überzeugenden Nutzererlebnis (User Experience, kurz UX). Das Design der Website ist die Visitenkarte eines Unternehmens und prägt den ersten Eindruck der Nutzer. Eine durchdachte UX-Strategie sorgt dafür, dass Nutzer schnell und intuitiv die gewünschten Informationen finden, was sich direkt auf die Verweildauer, Conversion-Rate und den Erfolg der Website auswirkt.

Nutzerzentriertes Design

Beim Relaunch sollte das Design der Website konsequent auf die Bedürfnisse der Nutzer ausgerichtet sein. Das bedeutet, dass die User Experience an den verschiedenen Touchpoints optimiert wird – vom ersten Seitenaufruf bis zur Conversion. Wichtige Fragen, die hierbei berücksichtigt werden sollten:

  • Wer sind die Hauptnutzergruppen? Um ein optimales Design zu entwickeln, müssen zunächst die verschiedenen Zielgruppen definiert und analysiert werden. Für B2B-Websites spielen beispielsweise andere Design- und UX-Konzepte eine Rolle als für B2C-Websites. Jede Zielgruppe hat unterschiedliche Bedürfnisse und Erwartungen, die sich in der Navigation, der Darstellung von Inhalten und den Interaktionen widerspiegeln sollten.
  • Welche Probleme sollen für die Nutzer gelöst werden? Nutzer kommen mit einer klaren Erwartungshaltung auf eine Website – sie wollen eine bestimmte Aufgabe erledigen, sei es Informationen suchen, einen Kauf tätigen oder Kontakt aufnehmen. Das Design sollte darauf abzielen, diese Aufgaben so einfach und reibungslos wie möglich zu gestalten. Funktionen wie gut platzierte Call-to-Action-Buttons, eine klare Seitenstruktur und eine intuitive Navigation sind hierbei essenziell.
  • Visuelle Hierarchie: Ein durchdachtes Design legt großen Wert auf die visuelle Hierarchie – also die Ordnung und Betonung von Inhalten. Durch den gezielten Einsatz von Farben, Typografie und Layout-Elementen können wichtige Informationen hervorgehoben und weniger wichtige Inhalte zurückgestellt werden. Dies führt zu einer besseren Orientierung für die Nutzer und erhöht die Wahrscheinlichkeit, dass sie die gewünschten Aktionen ausführen.

Responsive Design und Mobile-Optimierung

Da mittlerweile der Großteil der Internetnutzung über mobile Endgeräte erfolgt, ist ein responsive Design unerlässlich. Ein Relaunch bietet die perfekte Gelegenheit, die Website nicht nur für Desktop-Nutzer, sondern auch für Smartphones und Tablets zu optimieren. Dabei geht es nicht nur darum, dass die Website auf allen Geräten gut aussieht, sondern dass die Nutzererfahrung auch auf kleineren Bildschirmen intuitiv und effizient ist.

  • Mobile-First-Ansatz: Der Mobile-First-Ansatz bedeutet, dass das Design zuerst für mobile Geräte entworfen wird und dann schrittweise für größere Bildschirme angepasst wird. Dies stellt sicher, dass die wesentlichen Funktionen auch auf mobilen Geräten einwandfrei funktionieren. Elemente wie große Navigationen oder detaillierte Tabellen sollten so gestaltet werden, dass sie auf einem kleinen Bildschirm nicht die Usability beeinträchtigen.
  • Optimierte Ladezeiten: Auf mobilen Endgeräten sind schnelle Ladezeiten besonders wichtig, da langsame Websites oft frühzeitig verlassen werden. Der Einsatz von modernen Technologien wie Lazy Loading, Bildkompression und asynchronem Laden von Inhalten trägt dazu bei, die Performance zu verbessern. Google legt in seinem Ranking-Algorithmus großen Wert auf die Ladezeit, weshalb dieser Aspekt auch aus SEO-Sicht besonders relevant ist.

Barrierefreies Webdesign

Ein weiterer wichtiger Aspekt moderner Websites ist die Barrierefreiheit. Websites sollten so gestaltet werden, dass sie von allen Nutzern, unabhängig von möglichen Einschränkungen, genutzt werden können. Dazu gehören:

  • Kontraste und Schriftgrößen: Für Menschen mit Sehschwächen ist es wichtig, dass die Website ausreichende Kontraste aufweist und die Schriftgröße anpassbar ist. Auch die Lesbarkeit von Texten auf verschiedenen Hintergründen sollte berücksichtigt werden.
  • Tastaturbedienung: Barrierefreie Websites sollten vollständig per Tastatur bedienbar sein, da nicht alle Nutzer eine Maus verwenden können. Besonders wichtig ist dies für die Navigation und das Ausfüllen von Formularen.
  • Screenreader-Unterstützung: Inhalte sollten so strukturiert sein, dass sie von Screenreadern korrekt erfasst werden können. Dazu gehören beispielsweise klare Überschriftenstrukturen, alternative Texte für Bilder und eine saubere HTML- und CSS-Umsetzung.

Interaktive Elemente und Animationen

Moderne Websites setzen häufig auf interaktive Elemente und Animationen, um die Nutzererfahrung zu verbessern. Diese sollten jedoch mit Bedacht eingesetzt werden, um die Nutzer nicht zu überfordern oder die Ladezeiten zu beeinträchtigen.

  • Microinteractions: Kleine Animationen und visuelle Rückmeldungen bei der Interaktion mit der Website – sogenannte Microinteractions – können das Nutzungserlebnis positiv beeinflussen. Beispielsweise kann ein animierter Button eine visuelle Bestätigung geben, wenn eine Aktion abgeschlossen ist, oder ein Ladebalken zeigt dem Nutzer, dass Inhalte im Hintergrund geladen werden.
  • Dezente Animationen: Animationen sollten immer dezent und funktional sein. Überladene oder willkürlich eingesetzte Animationen können die Benutzerfreundlichkeit beeinträchtigen und Nutzer vom eigentlichen Inhalt ablenken. Stattdessen sollten sie dazu beitragen, die Navigation zu unterstützen und die Website dynamischer wirken zu lassen.

A/B-Testing und iterative Optimierung

Nach dem Relaunch hört die Arbeit am Design und der UX nicht auf. Um sicherzustellen, dass die Änderungen die gewünschten Effekte haben, ist es wichtig, die Website kontinuierlich zu testen und zu optimieren.

  • A/B-Tests: A/B-Tests sind eine hervorragende Methode, um verschiedene Design- oder UX-Varianten gegeneinander zu testen. Dabei wird einer Gruppe von Nutzern eine Version der Website angezeigt und einer anderen Gruppe eine alternative Version. Durch die Analyse des Nutzerverhaltens kann herausgefunden werden, welche Version besser performt.
  • Nutzerfeedback: Neben quantitativen Daten wie Klickzahlen und Conversion-Raten sollte auch qualitatives Feedback von Nutzern eingeholt werden. Regelmäßige Umfragen oder Usability-Tests geben wertvolle Einblicke in die Stärken und Schwächen des Designs.
  • Iterative Optimierung: Auf Basis der gewonnenen Daten und des Nutzerfeedbacks sollte das Design kontinuierlich optimiert werden. Kleine Anpassungen, die schrittweise umgesetzt werden, ermöglichen es, die UX zu verbessern, ohne das Risiko einzugehen, dass größere Änderungen die Nutzer verwirren.


Im nächsten Artikel unserer Reihe behandeln wir das Thema Content-Strategie.

Euer Partner für einen erfolgreichen Neustart

Wir sorgen dafür, dass der Relaunch nicht nur zu einem Projekt, sondern zu einer langfristigen Investition in die digitale Zukunft eures Unternehmens wird.

Beratung vereinbaren

Insights

Alle Insights
Webentwickler Udo sitzt am Schreibtisch und arbeitet an einem TYPO3 Projekt der Digitalagentur seitenweise.

Website-Relaunch (3): Die Rolle von SEO

Website-Relaunch (3): Die Rolle von SEO

Barrierefreie Websites werden zur Pflicht: Die 15 wichtigsten Anforderungen

Barrierefreie Websites werden zur Pflicht: Die 15 wichtigsten Anforderungen

So misst du den Erfolg deiner SEO-Strategie

So misst du den Erfolg deiner SEO-Strategie
Nahaufnahme eines Computers, auf dem eine WordPress Website der Digitalagentur seitenweise zu sehen ist.

Website-Relaunch (6): Technische Optimierung und Launch

Website-Relaunch (6): Technische Optimierung und Launch

Was macht eine erfolgreiche Website aus?

Was macht eine erfolgreiche Website aus?
Foto von Mirko, Projektmanager bei der Digitalagentur seitenweise in Bielefeld. Mirko sitz auf einem grauen Sofa vor einer gelben Wand, hat einen Laptop auf dem Schoß und arbeitet konzentriert.

Website-Relaunch (2): Typische Herausforderungen und Stolpersteine

Website-Relaunch (2): Typische Herausforderungen und Stolpersteine