Wie plane ich eine klare Webseitenstruktur

Bei der Planung von Webseiten wird nur allzuoft der Karren vor den Esel gespannt - ein schickes Design wird geplant und anschließend schaut man, wie man die fertig gestaltete Webseite mit Inhalten füllt. Irgendwo werden die Infos schon hinpassen.

Tatsächlich gehört das Design ans Ende der Überlegungen: Wichtig bei der Webseitenplanung sind allem anderen voran Ziel und Zweck der Webseite, Integration mit der Marketingstrategie des Unternehmens und daraus folgend die Entscheidung für Inhalte, Medien, Funktionen und entsprechend die Struktur der Webseite.

Zuerst die Vorüberlegungen – die Umsetzung folgt anschließend einem strukturierten Plan.

Zielsetzung der geplanten Unternehmens-Webseite

Worauf es bei der Planung einer Unternehmens-Webseite ankommt, wird schnell klar, wenn man sich vor Augen führt, was der Unterschied der Aufgaben von Intranet- und Internet-Seiten ist: Eine Intranetseite bietet beschränkten Zugang für eine bestimmte Personengruppe. Sie liefert notwendige Informationen und Dokumentationen. Sie ist eher eine webbasierte Wissensmanagement-Plattform. Dementsprechend werden Inhalte gelistet.

Unternehmensauftritte hingegen sind für neue und bestehende Kunden (und Investoren) gestaltet und sind Teil der Marketing-Strategie des Unternehmens – sie dienen der Außendarstellung und Verkaufsförderung.

In erster Linie geht es um das Image, PR und darum, dass Kunden direkt zur Möglichkeit des Kaufabschlusses (bzw. Vertragsabschlusses) geführt werden. Sei dies ein direkter Vertragsabschluss über die Webseite, eine Kontaktaufnahme oder das Anbieten von relevanten Informationen für die Kaufentscheidung -- die Webseite arbeitet für die Unternehmensziele.

Sind Investor Relations oder ein anderes essentielles Informationsangebot wichtig für eine Organisation, so ist dies natürlich bei der Planung einer Webseite auch zu berücksichtigen. Bei einer Fluggesellschaft beispielsweise liegen die benötigten Bereiche der Webseite auf der Hand – die Kunst ist, diese ideal zu präsentieren. Die Suche nach Flügen ist eine Herausforderung für die Nutzerführung, aber vor allem auch für die Anforderungen an die Funktionalität der Webseite.

Klarheit in Bezug auf Unternehmensziele, Marketingstrategie und Funktion der Webseite im Gesamtgefüge ist der erste Schritt.

Was bedeutet die Marketingstrategie für die Webseiten-Planung?

Neben unerlässlichen und funktionellen Inhalten hängt es von der Marketing-Strategie des Unternehmens ab, welche Inhalte für die Webseite geplant werden.

Beispiel Blog: Wenn ein Blog als Teil der Unternehmenswebseite geplant wird – dient dieser der Erläuterung und für Anleitungen zum Produkt? Oder dem Inbound- und Suchmaschinenmarketing? Der Positionierung und dem Zeigen von Expertise und Leadership? Danach richtet sich die Planung des Blogs in jeder Hinsicht. Dies kann auf alle Webseiten-Bestandteile übertragen werden.

Zielgruppenbestimmung für die Webseite

Die Zielgruppe oder die Persona, für welche die Webseite geplant wird, sollte hinsichtlich der Nutzung und Interaktion mit der Webseite gründlich durchdacht werden. Hierzu dienen die Persona, Use Cases und User Stories.

Zu welchem Zeitpunkt der Kaufentscheidung kommt der Nutzer auf welche Seite des Webauftritts? Was braucht der Nutzer von der Webseite? Wie wird er dorthin geführt?

Wenn man sich die Persona und die User Story veranschaulicht – welche Inhalte sollten also wie präsentiert werden? Verschiedene Nutzergruppen können ganz unterschiedliche Infos benötigen. Aus diesem Grund werden User Stories skizziert – diese zeigen, vor welchem Hintergrund ein Nutzer zur Webseite kommt, was er sucht und von der Webseite braucht und wie dies vonstatten geht.

Beispiel: Persona A ist 70 Jahre alt und plant eine Flugreise zur Tochter ein halbes Jahr im Voraus. Sie hat keine Kreditkarte und wünscht sich viele Extras, Komfort und besonderen Service. Persona B ist 32 und fliegt nur mit Rucksack kurzentschlossen zu spannenden Zielen – möglichst günstig und immer mit Kreditkartenzahlung. Wie löst die Webseite diese Bedürfnisse verschiedener Personas? Was passiert, wenn die jeweilige Persona die Webseite gefunden hat und ein Ticket buchen möchte? Dies sind kurze, allgemeine Beschreibungen, dafür, was die Webseite grundsätzlich bieten sollte.

Use Cases hingegen verfeinern und veranschaulichen, was genau bei der Nutzung einer Anwendung passiert – der dahinter liegende technische Ablauf mit allen Variablen. Was passiert bei welcher Aktion des Nutzers? Denn Webseiteninhalte sind keine statischen Texte, sondern sie erfüllen interaktiv einen Zweck.

Planung einer Marketingstrategie für die Webseite

Bei der Planung einer neuen Webseite sollte in die Überlegungen mit einfließen: Wie soll die Webseite beworben werden? Wie wird der Nutzer die Webseite finden?

Wird auf Paid Online-Marketing gesetzt, auf Inbound Marketing oder Social Media Marketing? Oder soll die Webseite im Gegenteil einfach eine virtuelle Visitenkarte sein? Dies beeinflusst die Planung der Inhalte und wie diese aufbereitet werden.

Message  - Hauptaussagen, was soll die Webseite können

Kurz: Was ist die Message und die Funktion der Webseite? Was soll diese kommunizieren - verbal und non verbal? Was soll die Webseite können?

Webseiten INHALTE planen: Devision - Category - Class

Wenn entschieden ist, was die Webseite können soll und was drauf muss, können Struktur bzw. Informationsarchitektur der Webseite geplant werden. Es gilt – „mobile first“.

Webseiten-Inhalte müssen klar gegliedert sein. Wichtig ist, nicht zu vergessen, dass eine klassische Gliederung nicht ausreicht, da es um interaktive Inhalte und Funktionalitäten geht und nicht um statischen Text. Eine Webseite ist kein Buch, sondern lebt von Vernetzung und Interaktivität: von Links und von der Interaktion des Nutzers mit der Webseite. Deshalb ist die Nutzerführung so zentral. Erinnern Sie sich daran, wie Sie das letzte Mal im Kreis geführt wurden, als Sie unter Zeitdruck wichtige Informationen auf einer Webseite auf Ihrem Mobiltelefon suchten – und Sie wissen, was gemeint ist.

Klassisch gilt eine Top Down Aufteilung der Inhalte – vom Groben ins Feine. Devision, Category, Class. Kanal oder Themenbereich, dann die Kategorien die darunter liegen, Subkategorien und Klassen. Dies ist am einfachsten für Webshops nachvollziehbar, gilt aber eigentlich für alle umfangreichen Webseiten – man muss nur mal an Zeitungen oder Online-Magazine denken.

Beispiele

Haus & Garten -- Küche -- Küchen-Kleingeräte -- Mixer -- Standmixer – Produkt xy

Kultur/Feuilleton -- Musik – Aktuelle Konzerte -- Rock/Pop – Auftritt der Band xy

Jede Ebene sollte natürlich so klar und übersichtlich strukturiert sein, wie möglich. Elemente der untersten Ebene können zwar verschiedenen Kategorien zugeordnet sein – doch die obersten Ebenen sollten den Nutzer direkt zum gesuchten Bereich bringen. Die meisten Webshops und Blogs folgen diesem Prinzip. Sie kennen die Frustration, die es es bringt, wenn die Struktur nicht konsistent umgesetzt wurde und die Suche nach Content zum Ratespiel wird.

Diese Top Down Aufteilung gilt für alle Webseiten und Inhalte. Deep Content, umfangreiche Artikel, detaillierte Beschreibungen, ... gehören auf untere Ebenen, die der Nutzer erreicht, der nach diesen Informationen gezielt gesucht hat.

Auf die obersten Ebenen, auf die Seiten, die der Nutzer zuerst sieht, gehören die relevantesten Informationen auf einen Blick. Hier sollte der Nutzer darüber informiert werden, welche Informationen oder Produkte er auf dieser Webseite erwarten kann. „Intuitive“ Webseitengestaltung meint in diesem Zusammenhang, dass kompliziertes Suchen vermieden wird - es sollte direkt klar sein, welche Aktion zum Ziel führt.

Die Startseite verlinkt alle Bereiche der obersten Ebene der Webseite. Da dies bei umfangreichen Webseiten verwirrend werden kann, sei daran erinnert – Zweck und Kommunikationsziel der Webseite sollten glasklar sein. Wird die Startseite zu unübersichtlich, wenn man einen Hinweis zu allen anderen Menupunkten unterbringen will, stehen die Chancen gut, dass die gesamte Struktur zu kompliziert ist.

Ein „responsives“ Webdesign ist hier wichtig, weil der Nutzer die relevanten Infos auf jedem Endgerät gleichermaßen ideal sehen können sollte. Dies geht bis hin zu alternativen Textlängen für verschiedene Bildschirme.

Haben Sie sich schonmal über zu viel kleine Schrift auf dem Mobiltelefon geärgert oder über viel zu große Schrift für viel zu wenig Info auf dem Desktop Monitor? Dies sind Beispiele dafür, dass man an dieser Stelle gespart hat.

Strukturbaum für die Webseite

Wie visualisiert man also, wie die Webseite aufgebaut sein soll und welche Inhalte wohin kommen?

1. a) Idealerweise werden Webseiteninhalte und alle Unterseiten mit einem Strukturbaum visualisiert.
   b) Abläufe oder Vernetzungen, Anwendungen, ... werden mit einem klassischen Ablaufdiagramm oder idealerweise mit einem spezifischen UML (Unified Modeling Language) Diagramm veranschaulicht. Ein herkömmliches Ablaufdiagramm ist ausreichend für übliche Aktionen auf Webseiten. Ein UML kann nötig werden, wenn die Webseite spezifische Anwendungen bieten soll.
   
   Erster Schritt zum neuen Web-Design: Wireframes
   
   An dieser Stelle kann ein Wireframe für das Grundgerüst der Webseite entworfen werden. Er zeigt den grundlegenden Aufbau sowie die funktionellen Bestandteile der Webseite.
   
   Eine Webseite hat für verschiedene Typen an Unterseiten bzw. Inhalten ein „Template“, - eine Gestaltung für jede Inhaltsform. Ein Wireframe wird für jeden benötigten Seiten-Typ der Webseite erstellt – zum Beispiel: Wie sieht die Startseite aus? Wie der Blog? Unterseiten für Artikel? Wo werden verschiedene Medien positioniert? Es sollte für jedes Endgerät einen eigenen Wireframe geben.

Aus dem Strukturbaum ergeben sich:
NAVIGATION
MENU

Praxis-Tipp: Sie können Wireframes mit einem besonderen Wireframe Programm erstellen oder Papier und Bleistift oder Programme wie PowerPoint nutzen.

Wie der Wireframe umgesetzt wird – visuell und programmiertechnisch – das ist nun die Basis des eigentlichen Webdesigns.

Entscheiden Sie:
a) sind die Ziele meiner Webseite mit herkömmlichen Frameworks und CMS (Content Management Systemen) und Strukturen umsetzbar? Sind fertige Templates für das Design ausreichend? Gibt es Plug-ins bzw. Erweiterungen für mein Vorhaben und für das gewählte CMS (beispielsweise WordPress, Joomla! oder Drupal)?

1. b) oder benötige ich Individual-Programmierung und individuelles Webdesign? Benötige ich spezifische Anwendungen (Apps), die Anbindung an weitere Datensysteme, usw.?

Inhalte / Themen planen -- Suchbegriffe 

Wenn der abstrakte Strukturbaum steht, können die Themen im Feinen gegliedert werden.

Dabei schaut man nicht nur, welche Infos relevant sind - sondern auch, welche Suchbegriffe mit Inhalten abgedeckt werden sollten. Wie soll die Webseite und deren Unterseiten in Suchmaschinen erscheinen, inklusive Schema Mark Up?

Dies ist ebenfalls Teil der Marketing-Strategie:
Welche Suchbegriffe sind am Wichtigsten und sollten abgedeckt werden? Welche Keywords sollten idealerweise eine eigene Unterseite erhalten? Wie tief soll die Webseite überhaupt gehen?

Seite für Seite kann eine Word- oder Excel Tabelle mit allen relevanten Daten, Keywords, Inhalten, Navigation, etc. ausgefüllt werden.

Inhalt der Website Seite für Seite planen:

• Titel, Kernaussagen, Inhalte
• Zielsetzung der Seite -- educational, zum Kauf anregend, Hintergrundinfos, Image, ... für Neukunden oder Bestandskunden?
• Metadaten inkl. Keywords, welche im Text bzw. Medium vorkommen sollten
• Was passiert von der Nutzerführung her auf der Seite, was ist die nächste Aktion? Call to Action, ... Verlinkungen, "Next" Buttons, Funktionalitäten, ...
• Medien (Text, Bild, Audio, Video, Animationen, 3D, Applikationen, Spiele, etc.)
• Funktionen – Datenbankanbindungen, Suchanfragen, Formulare, Bezahlfunktion, ...

Kontakt & Call to Action überall nur einen Klick entfernt

Wichtig ist, das jene Aktion, welche den Nutzer dem Kaufabschluss näher bringt, immer nur einen Klick entfernt ist. Call to Actions sollten stets gut sichtbar sein. Eine klare Nutzerführung sollte den Nutzer auf direktem Wege dahin bringt, wo er hin will und soll.

Form follows function

Wenn die Informationsarchitektur, Nutzerführung, Wireframes, Funktionalität, Zielgruppe, Image, etc. für alle Bereiche feststehen, - DANN kann definiert werden, welche Technologien (Programmierung, Erweiterungen, ...) am Besten dem Ziel dienen und wie das Design aussieht. Das Design folgt der Funktion.

An dieser Stelle sind Mock-ups und Style Guides zielführend - und das Design kann ausgewählt werden.

Mock-ups sind Design-Entwürfe, deren Elemente in den Grundfunktionen angeklickt werden können, jedoch noch nicht programmiert wurden. Sie zeigen, wie die Webseite aussehen und funktionieren kann.

Auswahl und Platzierung der Medien für die Webseite

Auch welche Medien die Informationen übermitteln sollen, ist wichtig und hängt stark von Thema und Zielgruppe ab - und nicht zuletzt vom Budget.

Wichtig ist jedoch:

Es ist nicht relevant, ob die Webseite cool und glossy daherkommt und neuesten Trends folgt (es sei denn, dies ist der Kern des Geschäftsmodells). Relevant ist, dass der Nutzer direkt die gesuchten und relevanten Informationen erhält und dann direkt zur Aktion geführt wird, welche zum Ziel führt.

Medien können sein:
- Text
- Bild (Illustrationen, Fotos)
- Video / Bewegtbild, Erklärfilme, Animationen
- interaktive Lerninhalte
- Audio
- Simulationen
- Spiele
- Foren
- Chat
- etc.

3D Visualisierungen für Webseiten

Zu den spezielleren, aufwändigeren Inhalten einer Webseite, welche aber einen ganz klaren Konkurrenzvorteil bieten können, wenn es um erklärungsbedürftigere oder einfach komplexe Dinge geht, gehören 3D Visualierungen und Computeranimationen.

Diese sollten nicht aus "Trends" heraus geboren werden, sondern für den Nutzer der Webseite einen echten Mehrwert bieten. Sie sollten dem Nutzer besser, schneller und einfacher veranschaulichen und erklären, was er verstehen sollte.

Negativ-Beispiele:
Hängende Webseiten, langsam ladende Animationen / 3D Visualisierungen - die keinen Mehrwert bieten, sondern Spielerei sind, dabei aber wertvolle Zeit verschwenden.

Ist die Navigation dann verwirrend, oder nicht funktionierend, sagt der Nutzer Good-Bye.
Statistiken besagen, dass über die Hälfte der Webseiten, die nach 3 Sekunden nicht geladen wurden, wieder geschlossen werden. Es sollte also einen guten Grund haben, wenn man verlangt, dass der Nutzer warten soll, bis die Webseite geladen hat. Nach zehn bis zwanzig Sekunden sollte das Interesse des Nutzers definitiv geweckt sein.

Mobilgeräte werden heute überwiegend für die Websuche genutzt sowie entspreched mobiles Internet. Dies ist gerade für anspruchsvollere Webinhalte zu bedenken.

Deshalb sollten 3D Animationen oder -Visualisierungen schnell und eindrücklich die gesuchten Informationen liefen und keine sinnlosen Spielereien darstellen.

Daumenregel: MEHRWERT. Kann das 3D-Modell etwas besser und schneller veranschaulichen? Wird es den Kunden eher überzeugen als Alternativen? Prima. Dann fokussieren Sie sich darauf.

Selbst die besten Webseiten werden häufig nach Sekunden bis wenigen Minuten wieder verlassen. Es muss also ein gezieltes Interesse vorliegen und Bedarf an tiefergehenden Informationen -- oder echter Unterhaltungswert -- um länger auf einer Webseite zu verweilen.

Überlegen Sie, welche Anwendungs-Szenarien bezüglich 3D dazu gehören - virtuelle Haussuche? Ja. Virtuelle Weinsuche? Eher nicht.
Die Entscheidung für ein neues Automodell? Ja. Die Entscheidung für einen Zahlungsabwickler? Eher nicht.

Eine langsamere Ladezeit hat zudem Auswirkungen aufs Google Ranking!