Design ist mehr als nur bunte Bilder. Der Designprozess durchläuft mehrere Schritte, um die Qualität, Benutzerführung und den „Joy-of-use“ im gesamten Prozess durchgängig hoch zu halten.
Häufig wird erwartet, das zu einer ersten Präsentation beim Kunden schon fertige, farbige Entwürfe durch die Designabteilung geliefert werden. Doch um einen qualitativ hochwertigen Entwurf zu liefern, müssen folgende Prozesse durchlaufen werden:
Workshop zu den Zielen der Website
In Zusammenarbeit mit Marketingexperten, der Designabteilung und dem Webdevelopment werden wichtige Zielgruppen, Funktionen und Anwendungen geklärt, die später die Corporate Website, die Kampagnensite oder das Intranet abdecken soll.
Dabei werden den Webdesignern Informationen zur Corporate Identity und zum Corporate Design des Unternehmens zur Verfügung gestellt.
Auf Basis der Informationen aus dem Workshop und dem CI/CD kann dann von den Webdesignern eine erste funktionale Studie in Form von einfachen Wireframes erstellt werden.
Wireframes
Mit Hilfe der Wireframes werden alle funktionalen Bereiche der Webseite festgelegt. Hierbei geht es nicht um die optische Anmutung der Webseite, gleichwohl die Aufteilung oder das zugrunde gelegt Raster hier schon berücksichtig werden und später die Grundlage für die zukünftige Webseite bilden.
Die Aufgabe des Webdesigners hat sich in den letzten Jahren von der reinen Darstellung einer fertigen Website zu einer Anwendungsentwicklung gewandelt. Der Nutzer erwartet heute eine hohe Funktionalität und eine leicht verständliche Benutzerführung.
All diese Punkte können im Rahmen des Wireframings erarbeitet werden und in einer ersten Präsentation mit dem Kunden besprochen werden.
Kein Rot ist hier zu rot, kein Blau zu dunkel oder hell. Keine Farben lenken im Wireframe von der eigentlichen Funktion der Webseite ab.
Interaktionsmodelle
Bei komplexeren Funktionen auf Webseiten werden spezielle Interaktionsdesigner in den Prozess mit einbezogen. Mit Ihrer Hilfe werden Prozesse der Webseite in schriftlicher Form, als Diagramme oder als interaktive Wireframes aufbereitet. Ein typisches Beispiel hierfür, wo so etwas notwendig wird, ist ein Bestellvorgang für ein Produkt. Mit Hilfe eines interaktiven Wireframes oder HTML-Prototypen können u.a. folgende Fragen geklärt werden:
Wie findet die Auswahl der Produkte statt?
Was passiert beim Ausfüllen von Feldern?
Wie kann ich die Bestellung verändern?
Welche Rückmeldungen erhält der Nutzer bei fehlerhaften Eingaben und wann?
Was passiert beim Absenden der Bestellung?
Wie und welche Rückmeldungen erhält der Nutzer?
…
Steht das Interaktionsmodell, ist es ratsam, einen Usability-Test durchzuführen. Hierbei werden Mängel in der Benutzerführung oder fehlende Informationen aufgedeckt. Usability-Tests sind ein wesentlicher Bestandteil des gesamten Designprozesses und führen zu erhöhter Akzeptanz der Website und auch zu einer höheren Konversionsrate.
MockUp
Jetzt kommt die Farbe mit ins Spiel. Nun findet der eigentliche Entwurf der Website statt, immer unter Berücksichtigung des CI/CD des Unternehmens. Die Entwürfe werden in Form von Grafiken – eben den „MockUps“ – dem Unternehmen zur finalen Abstimmung präsentiert.
Danach erfolgt meistens eine Korrekturphase.
Das erste MockUp der Website kann zusätzlich in Form eines HTML-Prototypen programmiert und für einen weiteren Usabiltiy-Test genutzt werden. Grade auf den „letzten Metern“ will man sich ja keinen Fehler erlauben. Eine gute Konversionsrate der Website basiert auf einem durchgängig guten Designprozess.
Yvonne Scherzer
Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielfältig ist und wirklich Spaß macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.