Conversion und Performance sind bei Webseiten mittlerweile Erfolgskriterium Nr. 1, da sie direkten Einfluss auf den Umsatz des Unternehmens haben. Für eine erfolgreiche Webseite reicht es heutzutage nicht mehr aus, einfach nur alle Funktionen bereitzustellen und ein schönes Design darüberzulegen.

Eine Top-Webseite muss eine positive User Experience (UX) aufweisen und den Nutzern Spaß machen. Emotionen spielen dabei eine wesentlich wichtigere Rolle als jemals zuvor. Im "Human Centered Design" wird die Webseite direkt auf die jeweilige Zielgruppe zugeschnitten und durch Evaluierungen bereits während des Entwicklungsprozesses kontinuierlich getestet und optimiert.

Christoph Rager, Creative Director im Bereich Kreation/Design und Head of UX bei coma in München erklärt, wie man in sechs Schritten die optimale UX erreicht und der High-Converting-Webseite nichts mehr im Weg steht.

1. Ziele der Webseite definieren und Kundenbedürfnisse eruieren
Im ersten Schritt werden die Ziele der Website definiert. Diese werden häufig mit den Unternehmenszielen verwechselt und gleichgesetzt. Das ist meist nicht sinnvoll, da es primär um die Kundenbedürfnisse geht. Und letztlich werden die Unternehmensziele nur erfüllt, wenn die Kundenbedürfnisse befriedigen werden. Durch Umfragen, Studien sowie Analyse der bestehenden Daten können Bedürfnisse gefunden und unterschiedlichen Personas zugeordnet werden, welche die Zielgruppen präzise darstellen. Es empfiehlt sich, jeder Persona eine wirtschaftliche Wichtigkeit zuzuordnen, um im weiteren Verlauf ein noch zielgruppenrelevanteres UX-Design zu erreichen.

2. Anforderungen an Funktionen und Inhalte festlegen
Nachdem die Ziele der Website und die Bedürfnisse der Personas definiert wurden, werden die benötigten Funktionen und Inhalte festgelegt. Da die Personas bereits bewertet wurden, können jetzt auch die Funktionen und Inhalte wirtschaftlich priorisiert werden. Faktoren wie die Markenidentität und Must-haves können die Priorisierung zusätzlich beeinflussen. Gestaltet sich das Finden der Funktionen als schwierig, können Fokusgruppen innerhalb der Zielgruppe zu neuen Ideen führen. Die erarbeiteten Anforderungen können nun mit der IT besprochen werden, um Machbarkeiten zu prüfen und zu definieren.

3. Interaktionsdesign und Informationsarchitektur entwickeln
Im Interaktionsdesign werden die Funktionen der Webseite textlich detailliert beschrieben. In manchen Fällen ist es sinnvoll einzelne Funktionen zusätzlich mit Wireframes zu veranschaulichen. Diese können dann durch Usability-Tests weiter optimiert werden.

Danach werden die Inhalte und Funktionen strukturiert, sortiert und verschiedene Sitemaps erstellt. Über Methoden wie das Card Sorting werden Wordings und Clusters getestet und optimiert. Um die Seitenarchitektur zu testen und die optimale Sitemap zu konsolidieren, empfiehlt sich ein Tree-Test, bei dem die Probanden versuchen, bestimmte Ziele zu erreichen. Da man nun die Anforderungen kennt, können die wichtigsten Seitentypen abgeleitet werden.

4. Navigationsdesign und Device-Konzept erstellen
Im Navigationsdesign definiert man globale, lokale, ergänzende oder auch kontextrelevante Navigationen und deren Verhalten. Ein Testing empfiehlt sich erst später in der Wireframephase.
Das Device-Konzept definiert das Verhalten auf verschiedenen Endgeräten. Hier wird festgelegt, ob eine adaptive oder responsive Website entstehen soll und wie sich das Layout verhalten wird (Fixed, Fluid, Elastic oder Mixed).

5. Wireframes und Prototypen gestalten
Man startet mit abstrakten Wireframes (Lo-Fi), welche in einem Prozess zunehmend verfeinert werden (Hi-Fi).
Auf Basis der in Schritt zwei bewerteten Funktionen und Inhalte kann man sehr gut die Wichtigkeit der einzelnen Elemente bestimmen und in den Wireframes entsprechend berücksichtigen. Niehaus-Wireframes, die die Wichtigkeit von Elementen mit verschiedenen Grautönen darstellen, eignen sich hierfür perfekt. Im Laufe des Prozesses entwickeln die UX-Designer die benötigten Funktions- und Inhalts-Module, die möglichst vielseitig einsetzbar sein sollen.

Wireframes sollten in allen relevanten Device-Größen angelegt werden (siehe Schritt vier zum Device-Konzept), um die Bedienbarkeit auf allen Endgeräten sicherzustellen. Da die ersten Wireframes nur auf der Expertise der UX-Designer beruhen, sollten sie zusätzlich zielgruppenrelevant getestet werden. Das geht am besten mit Hi-Fi-Klickdummys oder Prototypen, kann aber auch schon mit Lo-Fi-Paper-Wireframes durchgeführt werden.

6. Design und Animationen festlegen
Unter Berücksichtigung der Unternehmens- und Markenpositionierung sowie eventuell vorliegender Design-Richtlinien wird nun das Design erstellt. Man beginnt mit dem wichtigsten Seitentyp in einer Auflösung, um nach Freigabe und Evaluierung die restlichen Device-Größen, Seitentypen und Module auszugestalten. Hier kann mit Design-Testing-Verfahren getestet werden, ob das Design in der Zielgruppe funktioniert oder möglicherweise angepasst werden muss. Oft behindern Design-Richtlinien diesen Prozess und der Webseitenbetreiber muss sich entscheiden, ob ihm seine eigene CI oder doch eher die Kundenbedürfnisse wichtiger sind.

Bei wichtigen Zustandsänderungen einer Webseite ist es sinnvoll, Animationen zu integrieren, um die Usability zu erhöhen. Dezent eingesetzt, erhöhen sie das Verständnis der Funktionen und beruhigen den Anwender.