CMSstash

Praktische Tools für die Website Konzeption

Autor: Sebastian Schürmanns

Die Konzeption einer Website kann zur echten Wissenschaft werden. In der Praxis kommt man jedoch oft schon mit wenigen Werkzeugen zum Ziel. Dabei gehören Wireframes und Sitemaps zu den bekanntesten Tools. Aber auch weniger bekannte Hilfsmittel wie Priority Guides, das Core Model oder Activity Diagramme sind leicht zu erlernen und für die Konzeption einer Website oft hilfreich.

Job-Angebote für CMS-Experten

CMS-Experten wie Web-Entwickler, Produkt-Owner oder Projekt-Manager sind heiß begehrt. Daher bietet CMSstash in Zukunft ein Job-Board an. Job-Board ansehen

Natürlich gibt es noch unzählige weitere Werkzeuge, die bei der Website-Konzeption eingesetzt werden können. Dazu gehören Personas und Szenarios, Empathy Maps, Journey Maps oder Techniken wie Interviews, Eye-Tracking, Heatmaps, A/B-Testing und vieles mehr. Viele dieser Techniken machen jedoch nur in einem größeren Zusammenhang Sinn oder erfordern Spezialwissen von UX-Designer, Informations-Architekten oder Conversion-Experten. Hilfsmittel wie Wireframes, Sitemaps oder auch das Core Model sind dagegen sehr niedrigschwellig und können auch von Generalisten bei der Planung neuer Webseiten, bei der Website-Optimierung oder bei einem Website Relaunch verwendet werden.

Sitemaps

Mit Sitemaps kann man die Struktur einer Webseite visualisieren und planen. Im einfachsten Fall erstellt man schlicht eine hierarchische Baum-Struktur, in der die Themen gruppiert und priorisiert werden. Um Sitemaps zu oganisieren und zu priorisieren wird sehr gerne die Technik des Card Sortings verwendet: Man schreibt einfach die Elemente einer Website auf einzelne Karten und lässt dann verschiedene Nutzer die Karten sortieren. Nach und nach bekommt man ein Gespür dafür, welche Informationen für die Nutzer relevant sind.

Beispiel klassische Sitemap

Sitemaps sind ein Teilbereich der Informationsarchitektur, allerdings gibt es noch zahlreiche weitere Bereiche wie die Navigation, die Onsite-Search oder die Strukturierung der Inhalte. Der Begriff der Sitemap taucht auch noch in anderen Zusammenhängen auf: In der Suchmaschinenoptimierung (SEO) bezeichnet man mit der Sitemap eine XML-Datei, die im Kern die absoluten URLs einer Seite für Suchmaschinen auflistet. Sitemaps tauchen außerdem auf Webseiten als eine Art Inhaltsverzeichnis auf. Sie werden von den Besuchern allerdings kaum genutzt.

Vorteile von Sitemaps

Nachteile von Sitemaps

Tools

Wireframes

Wireframes sind der absolute Klassiker in der Website-Konzeption. Mit Wireframes kann man ohne technische Kenntnisse ein recht genaues Bild von einer Webseite zeichnen und sogar interaktive Klick-Dummies erstellen. Damit schaffen Wireframes eine verständliche und sehr konstengünstige Diskussions-Grundlage für Designer, Entwickler und Product Owner.

Beispiel für ein Wireframe

Allerdings ist der Ruf von Wireframes angekratzt, denn sie gelten als Kreativitäts-Killer. Wireframes sind sehr schematisch und sollen das Design einer Webseite eigentlich nicht vorwegnehmen. Allerdings sieht die Realität oft anders aus. Denn auf der einen Seite lassen sich viele Designer von den Wireframes beeinflussen. Auf der anderen Seite prägen Wireframes auch die Erwartungshalt der Stakeholder oder Kunden. Wireframes sollten daher nicht oder nur sehr behutsam in der Kunden-Kommunikation eingesetzt werden.

Vorteile von Wireframes

Nachteile von Wireframes

Tools

Es gibt unzählige Tools für Wireframes auf dem Markt, die bekanntesten sind:

Daneben gibt es eine unüberschaubare Masse an Online-Diensten wie zum Beispiel Pidoco oder Proto.io. So gut wie alle Tools sind kostenpflichtig, einige bieten kostenlose Varianten für Gelgenheitsnutzer.

Priority Guides

Priority Guides sind eine Weiterführung der älteren Page Description Diagrams. Beide Werkzeuge sind relativ unbekannt. Die Gründe liegen vermutlich in der höheren Abstraktionsebene, obwohl gerade diese Abstraktion viele Vorteile gegenüber Wireframes bietet. Priority Guides sind sehr niedrigschwellig, können ohne eine spezielle Software oder mit den üblichen Wireframe-Programmen erstellt werden. Sie sind allgemein verständlich und nehmen nicht das Design einer Webseite vorweg.

Beispiel für ein Priority Chart

Von Heleen van Nues und Lennart Overkamp auf Alistapart

Priority Guides wurden bereits 2012 von Drew Clemens im Smashing Magazin vorgestellt. Alistapart hat die Priority Charts vor kurzem wieder als Content-First-Alternative zu Wireframes beschrieben.

Vorteile von Priority Guides

Nachteile

Tools

Das Core-Model

Ähnlich wie die Priority Guides ist auch das Core-Model ein sehr Content-getriebener Ansatz. Beim Core-Model geht man von den einzelnen Seiten eines Webauftritts aus und skizziert für jede Seite die Ziele, die Inhalte, mögliche Nutzer-Aktionen und die verschiedenen Einstiege und Ausstiege aus der Seite. Das Core-Modell kann über ein ganz einfaches Schema abgebildet werden:

Das Core-Model für die Content-Planung

Von Netlife Research, Beispiel von Katrin Kerber, ursprünglich auf Alistapart

Während die oben beschriebene Sitemap die Vogel-Perspektive des Webseiten-Betreibers widerspiegelt, nimmt man beim Core-Model viel stärker die Rolle des Nutzers ein. Denn Nutzer erfassen einen Webauftritt nicht als Ganzes, sondern sie steigen in der Regel über einen Link oder über Suchergebnisse in der Tiefe einer Webseite ein, besuchen im besten Fall noch zwei oder drei andere Seiten und springen dann wieder ab. Kurz gesagt: Jede Seite eines Webauftritts ist in Wahrheit eine Landingpage.

Vorteile des Core-Models

Nachteile des Core-Models

Tools

Activity Diagramme

Activity Diagramme gehören zur Familie der Unified Modeling Languages (UML). UMLs sind in der Technologie weit verbreitet und ermöglichen die verschiedensten schematischen Darstellungen, angefangen von Datenbank-Strukturen über Server-Architekturen bis hin zu Workflows. Für Workflows kann man entweder Flow-Charts nutzen, oder eben Activity Diagramme, die ein erweitertes Set an Symbolen liefern.

Beispiel für ein Activity Diagram

Von Stern auf Wikipedia CC BY-SA 3.0

Activity Diagramme werden vor allem beim Business Process Modelling eingesetzt und finden entsprechend oft bei Business Software Anwendung. Viele normale Webseiten haben kaum oder nur einfache Workflows. Wenn es allerdings um Payment- oder Bestell-Prozesse oder auch um komplexe Fullfilment-Abläufe im Hintergrund geht, dann können Activity Diagramme das Leben sehr vereinfachen, wenn nicht sogar die Software retten.

Vorteile von Activity Diagrammen

Nachteile von Activity Diagrammen

Tools

Auch andere Experten lesen gerne gute Inhalte und freuen sich, wenn Du diesen Artikel zum Beispiel über Twitter teilst. Auf Twitter gibt es außerdem von @CMSstash tägliche Updates.

Zuletzt aktualisert: 15.06.2018