Konzept als Basis jedes erfolgreichen Webauftritts

Die Konzeptionsphase ist die erste Phase bei der Entwicklung eines Internetauftritts. Leider wird sie oft unterschätzt. Dabei dient das Konzept als Basis für alle nachfolgenden Schritte.
Ohne die Konzeption besteht die Gefahr, dass die fertige Website oder App zentrale Anforderungen gar nicht abdecken kann. Einfach, weil sie bei der Programmierung vergessen wurden.

In ein sauber durchdachtes Konzept dagegen fließen alle wichtigen Use-Cases ein und Änderungen können ohne großen Aufwand durchgeführt werden.

Research und Brainstorming

Der allererste Schritt der Konzeption besteht aus Recherche Arbeit. Es gilt möglichst viel Wissen über das Unternehmen, die Branche und vor allem deren User zu aggregieren. Denn der User und seine Bedürfnisse stehen im Mittelpunkt. Die zentrale Frage lautet immer: Wer ist der zukünftige User und welchen Zweck verfolgt er?

Dabei verlässt man sich nicht nur auf die Angaben des Kunden, sondern nimmt auch die Seiten der (internationalen) Konkurrenz und ähnlicher Branchen als Vorbild. Um am Puls der Zeit zu sein, fließen ins Konzept auch neue Lösungen und Ansätze mit ein, die in der Branche vielleicht noch nicht angekommen sind. Wertvoll sind natürlich auch eventuell vorhandene Daten zum Userverhalten (zum Beispiel von der bisherigen Website). Etwa an welchem Punkt viele User einen Kaufvorgang abbrechen ? Und daraus zu erschließen, warum sie das tun könnten? Sind die wichtigsten Use Cases identifiziert, geht es mit dem angehäuften Wissen an die Gestaltung des Grobkonzeptes.

Das Grobkonzept

Durch die Einsichten aus der Recherche entstehen erste Ideen für die Struktur der Seite. Dabei entwickelt sich das Ganze an zwei Fronten. Zum einen entsteht die Informationsarchitektur der ganzen Website, zum anderen der Aufbau einzelner Seiten.

Die Informationsarchitektur bestimmt die spätere Sitemap der Website. Eine erste Skizze für eine sinnvolle Aufteilung der Inhalte entsteht und zeichnet sich in der Navigation ab. Auch die „Tiefe“ der Website wird festgelegt: Wie viele Ebenen werden gebraucht, um alle Inhalte gut darzustellen?

Daneben ergeben sich verschiedene Seitentypen. Welche Elemente wird es geben, & wo befinden sie sich? Textblöcke, Bilder, Teaser, Überschriften, Slider,… alles das muss sinnvoll und übersichtlich angeordnet werden. Daneben spielt hier vor allem die Navigationslogik eine große Rolle. Neben der Startseite entstehen so verschiedene Versionen und Typen von Index- und Content-Seiten. Die Vorlagen für die späteren Design- und HTML-Templates.

Im Grobkonzept werden diese Punkte einmal sehr einfach grafisch dargestellt. Das kann mit einfachen Bleistiftzeichnungen passieren oder mit professionellen Wireframing und Mockup Programmen.

Das Feinkonzept

Stößt das funktionierende Grobkonzept beim Kunden auf grundsätzliche Zustimmung, geht es in die Feinkonzeption. Hier werden die verschiedenen Use-Cases und Prozesse näher durchdacht und im Detail durchgespielt. Dazu wird ein funktionierender Prototyp gebaut.

Mit speziellen Programmen – wir etwa arbeiten mit Axure – kann relativ einfach mit vorgefertigten Elementen ein klickbarer Dummy erstellt werden, der bereits einige Funktionalitäten der späteren Website widerspiegelt. Je nach Komplexität der jeweiligen Use-Cases werden entsprechende Teile (etwa Formulare) bisweilen sehr genau abgebildet, immer wieder getestet und optimiert.

Fragen in diesem Prozess aufgeworfen und gelöst werden sind etwa: Wie verhalten sich Elemente auf kleineren Displays? Was passiert, wenn dieser und jener Button geklickt wird? Welche Schritte sind für einen Kaufvorgang notwendig? Welche Daten müssen erhoben werden?

Je eher in diesem Fehler oder Probleme auftauchen, desto einfacher und kostengünstiger können sie gelöst werden. Denn ein nachträgliches Einbauen eines Eingabefeldes noch in der Konzeptionsphase ist wesentlich einfacher, als es viel später bei der Programmierung zu berücksichtigen.

Das Konzept ist kein Design!

Moderne Wireframing & Mockup Programme sind mittlerweile schon so ausgefeilt, dass sich auch flexible und interaktive Elemente oder responsives Verhalten bei kleineren Auflösungen relativ unkompliziert im Prototyp umsetzen lassen.

Wichtig ist den Kunden zu kommunizieren, dass ein Click-Dummy eben nur ein sehr grobes Konzept ist, auch wenn schon Logos, Bilder und sogar Farben verwendet werden. Immer wieder kommt es vor, dass Kunden denken, das Mockup wäre bereits das fertige Design. Auch Änderungswünsche zum Blindtext im Konzept sind schon vorgekommen.

Wie beschrieben dient das Konzept in erster Linie dazu, die Funktionalität des Endprodukts sicherzustellen. Daneben dient es auch dem Designer als Vorlage, die ihm eine grundsätzliche Idee vom Aufbau einer Seite vermittelt. Und auch während der Programmierung verlässt sich der Developer auf die im Konzept festgelegten Schritte.