Strategische Website-Planung mit dem Homepage Canvas
In der Web-Entwicklung bedeutet eine klare Landkarte oft den Unterschied zwischen einem erfolgreichen Projekt und einem, das hinter den Erwartungen zurückbleibt. Strukturierte Kommunikation der Ziele und Anforderungen an das Entwicklungsteam bildet die Grundlage erfolgreicher Projekte und fördert nebenbei auch die produktive Zusammenarbeit. Viele Vorhaben leiden allerdings an unklaren Zielen, unterschiedlichen Erwartungen und endlosen Überarbeitungsschleifen zwischen Kund:innen und Entwicklungsteams. Diese Herausforderungen verursachen auf beiden Seiten Frustration, Verzögerungen und steigende Kosten.
An dieser Stelle kommt der Homepage Canvas ins Spiel – ein vielseitiges Werkzeug, das die Kommunikation vereinfacht und damit die Zusammenarbeit verbessert. Er hilft beim Sammeln und Strukturieren von Ideen, Wünschen und Präferenzen – primär für Homepages, Landing Pages und andere statische Sites. Sein klar strukturierter Ansatz fokussiert die Essenz dessen, was Kund:innen benötigen und wünschen. Damit überbrückt der Canvas die Kluft zwischen Anforderungs- und Lösungsseite. Er verwandelt vage Ideen in handlungsfähige Formulierungen und stellt sicher, dass Projekte auf festem Boden beginnen, mit einem gemeinsamen Verständnis des weiteren Vorgehens.
Als Vorbilder dienen einerseits der berühmte (ursprüngliche) Business Model Canvas [1] und andererseits der arc42-Canvas zur Dokumentation von Softwarearchitektur [2]. Beide kommen in verschiedenen Bereichen zur Anwendung, um Strategien und Pläne respektive Entscheidungen strukturiert zu sammeln und zu visualisieren.
Konzept eines Canvas
Bevor wir in die Details des Homepage Canvas eintauchen, sollten Sie ein paar grundlegende Konzepte verstehen: Allgemein bietet ein Canvas einen strukturierten Rahmen für relevante Information zu einem bestimmten Sachgebiet. Im Gegensatz zu konventionell linear strukturierten Dokumenten liegt der Fokus beim Canvas auf Kürze und Prägnanz. Diese Grundidee kommt in unterschiedlichen Varianten und Disziplinen zum Einsatz, sei es in der Unternehmensstrategie [1], der Softwarearchitektur [2], dem Domain-Driven Design [3], der Produktgestaltung [4] oder – seit neuestem – in der Web-Entwicklung.
Im Wesentlichen handelt es sich um eine strukturierte visuelle Darstellung, die komplexe Konzepte in einem einfachen und prägnanten Format verdichtet. Ein Canvas forciert kurze Aussagen und lässt bewusst keinen Platz für ausführliche und ausschweifende Antworten. Nutzer:innen eines Canvas sind somit gezwungen, sich auf wesentliche Informationen zu beschränken.
Aufgrund seiner übersichtlichen Struktur und dieser konzentrierten Darstellung sorgt ein Canvas für bessere Kommunikation, fördert die Kreativität und vereinfacht Entscheidungsprozesse. Indem er mehrere Informationen auf einen Blick darstellt, fungiert ein Canvas auch als hervorragendes Werkzeug zur Teamarbeit. Er hilft sicherzustellen, dass Projektbeteiligte ein gemeinsames Verständnis der relevanten Fakten haben und auf dieser kompakten Basis eigene Ideen einbringen können. Der berühmte Business Model Canvas [1] verdeutlicht dieses Konzept strukturierter Kürze und Prägnanz.
Sie erkennen deutlich die Reduktion auf wesentliche Themenbereiche. Der limitierte Platz sorgt automatisch für Kürze. Auf einer einzigen Seite, sei es als PDF, PowerPoint oder auch ganz oldschool auf einem Blatt Papier, werden alle wichtigen Informationen dargestellt und übersichtlich präsentiert.
Der Homepage Canvas
Kund:innen der Web-Entwicklung stehen oft vor der Herausforderung, ihre Visionen und Anforderungen zu artikulieren. Die gleiche Problematik betrifft Personen, die die Entwicklung einer Website für ihre Organisation oder ihr Unternehmen vorantreiben und den Canvas für sich selbst zum Sammeln und Strukturieren von Ideen nutzen. Im Folgenden verwende ich ausschließlich den Begriff Kund:innen, um sowohl Kund:innen als auch diejenigen, die den Canvas für ihre Organisation oder ihr Unternehmen nutzen, zu umfassen. Methoden wie Fragebögen scheitern häufig daran, die Essenz realer Anforderungen zu erfassen, andere Methoden sind für Kund:innen schwer verständlich und zu aufwändig. Das führt zu zeitintensiven und teuren Überarbeitungen und Re-Designs. Der Homepage Canvas begegnet diesem Problem, indem er einen strukturierten Rahmen bietet, der Klarheit und Kürze fördert. Er verfügt über ein klares und prägnantes Format für das Sammeln und Organisieren von Ideen, Wünschen und Präferenzen für passende Website-Projekte. Der Canvas ist, wie eingangs erwähnt, primär für statische Sites wie Homepages oder Landing Pages konstruiert. Für die Anforderungserhebung und -klärung komplexerer Projekte können Sie hingegen etwa das Requirements-Engineering-Framework req42 verwenden [5].
Der Homepage Canvas steht unter der (sehr liberalen) Creative Commons License [6]. Das bedeutet, dass Sie ihn für eigene Arbeiten ohne Einschränkungen nutzen können.
Sie finden sowohl eine englische als auch eine deutsche Version des Canvas online [7]. Beide enthalten eine genaue Erklärung des Gesamtkonzepts sowie der einzelnen Fragen und Bereiche und umfassen einen Download mit mehreren Beispielen. Der Homepage Canvas besteht aus drei Hauptbereichen: Inhaltliche Strategie, Stil und Organisatorisches. Jeder dieser Bereiche enthält konkrete Fragen, die darauf abzielen, wichtige Informationen von Kund:innen zu erhalten. Diese Fragen helfen den Kund:innen, ihre Ziele, Inhaltsanforderungen, Designpräferenzen und sonstigen Anforderungen klar und präzise zu artikulieren. Diese klare und einfache Struktur des Canvas minimiert Missverständnisse und kann helfen, Entwicklungszeit zu reduzieren. Im Folgenden stelle ich die drei Bereiche des Canvas kurz vor.
Inhaltliche Strategie
Dieser Abschnitt konzentriert sich darauf, die primären Ziele der Website zu definieren, die Zielgruppe zu identifizieren sowie Schlüsselbotschaften und inhaltliche Anforderungen zu skizzieren. Kund:innen werden aufgefordert, ihre Ziele für die Website in wenigen Stichworten zu formulieren, ihre gewünschte Zielgruppe zu beschreiben und die Arten von Inhalten anzugeben, die sie einbeziehen möchten.
Mit Hilfe dieser Informationen können Entwickler:innen spezifisch das Design, die Struktur, die Textformulierungen und das allgemeine Feeling der Seite an die Zielgruppe und Zielsetzung anpassen. Das erhöht die Nutzerfreundlichkeit und hilft, die Ziele der Website besser zu erreichen.
Stil
Der Stilabschnitt geht auf die visuellen Aspekte der Website ein, einschließlich allgemeiner Designpräferenzen, Branding-Elemente und Bildmaterial. Er enthält kurze Statements zu generellem Aussehen und Layout. Er beschreibt das "Feeling", das Sie bei Ihrer Zielgruppe auslösen möchten. Nennen Sie hier gerne Beispiele von Websites, die Sie als Vorbilder in dieser Hinsicht ansehen. Einen wichtigen Baustein im Stilabschnitt bilden Farbschemata und Branding-Elemente. Diese Informationen helfen dabei, dass die konkrete optische Gestaltung der Website den Wünschen und Visionen der Kund:innen entspricht.
Organisatorisches
Der organisatorische Abschnitt befasst sich mit praktischen Überlegungen wie Fristen und Kosten. Diese Informationen bilden die Grundlage für Zeit- und Budgetplanung. Im klassischen Projektvorgehen fallen diese Informationen unter die Kategorie "Randbedingungen".
Beispiele
Den Homepage Canvas habe ich erfolgreich in realen Projekten angewendet. Als Beispiel finden Sie in Abb. 3 den Canvas für die erste Kommunikation zur Erstellung der Website der Metal-Band NeuroTidal [8].
Die Verwendung des Homepage Canvas für die NeuroTidal-Website hat zu einer effizienten Kommunikation zwischen dem Entwickler (dem Autor dieses Artikels) und dem Kunden (Musiker mit keinerlei IT-Erfahrung) geführt. Wir haben auf Basis des Canvas die Gestaltungs- und Entwicklungsschritte optimiert und hatten gegenüber früheren Website-Projekten erheblich weniger Überarbeitungsaufwand. Schon die erste Iteration hatte die wesentlichen Visionen und Ziele der Musikerinnen und Musiker von NeuroTidal erreicht. In der zweiten (und finalen) Iteration brauchten wir lediglich marginale Änderungen der Schriftart und einiger Bilder, bevor die Website online gehen konnte.
Arbeiten mit dem Homepage Canvas
Der Homepage Canvas bietet die Grundlage für die erste Kommunikation. Kund:in und Entwickler:in verwenden den Canvas, um sich gemeinsam einen Überblick über die Anforderungen an eine neue Website zu verschaffen. Wichtig: Der Canvas ersetzt keine weitere Kommunikation, sondern bildet mit seiner klaren und einfachen Struktur den Ausgangspunkt, um bei Bedarf weitere Details zu klären. Das erspart lästige und unübersichtliche Fragebögen. Entwickler:innen können im Anschluss genauestens mitteilen, welche weiteren Informationen sie benötigen, um den ersten Entwurf der Website zu erstellen.
Als Entwickler:in
Als Entwickler:in nutzen Sie den Canvas, um von Kund:innen konkret und präzise formulierte Anforderungen an die entstehende Website zu erhalten. Damit beide Seiten möglichst viel davon haben, sollten Sie den Kund:innen kurz und knapp das Konzept und den Sinn dahinter erklären, damit diese motiviert sind, den Canvas gründlich und überlegt auszufüllen. Für weitere Details verweisen Sie auf die ausführliche Online-Dokumentation. Diese erklärt alle Bereiche und einzelnen Fragen des Canvas im Detail und enthält konkrete Beispiele. Daran können Ihre Kund:innen sich gut orientieren. Dort finden Sie den Canvas zum Download als PowerPoint-Datei zum direkten Ausfüllen. Bieten Sie den Kund:innen den Canvas als Option für die erste Kommunikation an, jedoch nicht als Pflicht.
Als Kund:in
Als Kund:in nutzen Sie den Canvas, um zwei Dinge zu erreichen: Erstens, um sich selbst konkrete Gedanken über Anforderungen an und Wünsche für die neue Website zu machen, entweder allein oder im Team. Zweitens, um diese Anforderungen klar zu formulieren und dem Entwicklungsteam mitzuteilen.
Auf der Suche nach einer neuen Website haben Sie den Canvas entweder von Ihrem/r Webentwickler:in erhalten oder Sie sind selbst auf den Canvas gestoßen. Strukturieren Sie mit dem Canvas Ihre Wünsche, Ideen und Anforderungen an Ihre neue Website. Schlagen Sie Ihrem Entwicklungsteam vor, diesen Canvas als inhaltliche Ausgangsbasis der Zusammenarbeit zu verwenden. Im besten Fall kann das Entwicklungsteam auf dieser Basis schnell erste Entwürfe vorlegen.
Canvas als Basis der Zusammenarbeit
Die Website des Canvas bietet Ihnen zu jedem der drei Bereiche konkrete Fragen und Erklärungen sowie Beispiele. Sie können anhand dessen das Ausfüllen allein oder im Team erledigen, da der Canvas sich auch gut für gemeinsame Überlegungen eignet. Verschiedene Stakeholder haben mit dem Canvas ein Werkzeug mit extrem niedriger Einstiegshürde, mit dem sie sofort loslegen können – ohne dass jemand spezifische Methodik oder Notation erlernen muss.
Hoher Nutzen durch Kompaktheit
Ein Canvas zeigt sich unter anderem deshalb so zweckmäßig, weil er kurze und präzise Antworten erfordert. Nutzen Sie diesen Vorteil und versuchen Sie, Antworten möglichst kurz zu halten. Wir haben gute Erfahrungen damit gemacht, Texte hart auf eine feste Anzahl Worte oder Zeichen zu beschränken (erinnern Sie sich an die Zeiten, als Twitter noch gut war? 140 Zeichen maximal pro Tweet – hat prima funktioniert).
Manchmal sind allerdings längere Antworten unumgänglich, zum Beispiel, wenn Sie eine Website mit sehr vielen Unterseiten und Bereichen benötigen. Vermeiden Sie aber unnötig lange Texte, halten Sie das Wesentliche prägnant und verständlich.
Worauf warten Sie noch?
Egal, ob Sie ein:e Webentwickler:in sind, der/die nach einem Weg sucht, die Kommunikation mit Ihren Kund:innen zu optimieren oder ob Sie eine neue Website für sich selbst suchen: Probieren Sie den Homepage Canvas aus und teilen Sie mir gerne Ihre Erfahrungen mit. Ich freue mich auf Ihre Rückmeldungen. Ihre Beiträge helfen dabei, den Homepage Canvas für Sie und andere weiter zu verbessern und noch nützlicher zu machen.
- Strategyzer: The Business Model Canvas
- arc42: Software Architecture Canvas
Informatik Aktuell: Dr. G. Starke & B. Wolf: Der Architecture Communication Canvas - Bounded-Context Canvas der DDD-Crew
- R. Pichler: The Product Canvas
- req42
- Creativecommons
- P. Starke: Homepage Canvas
- NeuroTidal
