12/05/2017 Marc CMS, Frontend, SEO

Navigation und Struktur einer Webseite bestimmen

Die Struktur einer Webseite ist ein wichtiger Faktor für deren Erfolg. Über die Navigation muss der Nutzer mit wenigen Klicks sein Ziel erreichen können. Dabei sollte er stets wissen, wie er zu den gewünschten Inhalten gelangt und wo er sich gerade befindet. Doch wie ist das zu bewerkstelligen? Wie sollen die vielen Inhalte nur untergebracht werden? Wodurch zeichnet sich eine gute Struktur aus? Gibt es hierfür gewisse Regeln? Wir werden Ihre Fragen beantworten.

Die Motivation

Noch bevor mit dem Design einer Webseite begonnen wird, sollte erstmal feststehen, was überhaupt auf der Webseite angezeigt werden soll und warum? Welche Inhalte möchte ich auf meiner Webseite präsentieren und für wen? Hier gilt: weniger ist manchmal mehr. Versuchen Sie nicht Wikipedia zu kopieren. Beginnen Sie mit der Zielsetzung Ihrer Webseite.

Das Ziel meiner Webseite

Definieren Sie das Ziel Ihrer Webseite. Möchten Sie Ihr Unternehmen repräsentieren oder möglichst viele Zugriffe generieren? Wollen Sie Ihre Einnahmen steigern oder Ihre Reichweite?

Beschränken Sie sich hier auf einen konkreten Satz. Das ist vielleicht nicht immer einfach, aber es hilft, dass dieses Ziel während der gesamten Erstellungsphase immer präsent ist. Formulieren Sie das Ziel so, dass es am Ende des Projekts auch gemessen werden kann.

Hierzu ein paar Beispiele:

1. Über unsere Webseite möchten wir hauptsächlich neue Stellen im Unternehmen besetzen.
2. Das oberste Ziel unseres neuen Internetauftritts ist es, unsere Einnahmen zu steigern und mehr Verkäufe zu generieren.
3. Mit dem Relaunch unserer Unternehmenswebseite, möchten wir mehr Kontaktanfragen von potentiellen Kunden erhalten.
4. Die Nutzer unserer Internetseite sollen selbständig die gut aufbereiteten Informationen finden können, sodass unser Kunden-Support entlastet wird.

Zielgruppen definieren

Als zweiten Schritt ist es ungemein wichtig, seine Zielgruppe zu kennen. Orientieren Sie sich an Ihren Nutzern. Liefern Sie ihnen aussagekräftige sowie kompakte Informationen. Hierfür ist die Erstellung von Personas ein bewehrtes Mittel.

Zielgruppen mit Personas spezifieren

Personas sind frei erfundene Personen. Sie repräsentieren Ihre verschiedenen Zielgruppen. Personas können auf verschiedene Arten angelegt und festgehalten werden. Wir empfehlen eine Tabelle aufzustellen. Dabei ist nicht unbedingt wichtig, wie detailliert Personas beschrieben sind. Wichtig ist, dass Sie nun im ganzen weiteren Prozess der Webseitenerstellung berücksichtigt werden.

Ein Beispiel hierzu: Die Stadtverwaltung eines Kurorts möchte eine neue Webseite erstellen. Vorher definierte Zielgruppen sind Bürger, Touristen und Unternehmen. Je nachdem wie umfangreich und in sich unterschiedlich die jeweilige Zielgruppe ist, lassen sich verschieden viele Personas erstellen. Zum Beispiel:

Lisa Müller

• 44 Jahre aus dem Kurort
• Friseuse
• geschieden, 2 Kinder im Schulalter
• Hobbies: Zeit mit ihren Kindern, Joggen, Basteln
• EDV-Kenntnisse: Erfahren im Online-Shopping und Social Media

Elfride Waldmann

• 74 Jahre aus Leipzig
• Rentnerin
• verheiratet mit Heinz Waldmann, 3 Kinder und 4 Enkel
• Hobbies: Unternehmungen mit Familie, Spaziergänge, Theater und Oper
• EDV-Kenntnisse: Nutzt mittlerweile ein Smartphone und dort hauptsächlich WhatsApp, um mit der Familie in Kontakt zu bleiben.

Augustus Maler

• 32 Jahre, wohnt im Kurort
• ehem. Angestellter im Malerbetrieb, möchte nun selbständig werden
• ledig, keine Kinder
• Hobbies: Fußball, PC-Spiele
• EDV-Kenntnisse: gut

Geben Sie Ihren Personas ein Gesicht. Mit einem Foto aus dem Netz werden sie noch greifbarer. Nutzen Sie hierzu Portale wie die Google Bildersuche oder flickr.

Falls Sie sich nicht sicher sind, wie Ihre Zielgruppe aussieht, können Sie sich bei ähnlichen Webseiten inspirieren lassen. Wenn die Personas nicht den Ihren Nutzern entsprechen, sind sie wertlos. Hier finden Sie weitere Informationen zum Thema Personas: http://usability-toolkit.de/usability-methoden/personas/ und http://www.gruenderszene.de/operations/persona-personas-entwickeln.

User Story

Nun gilt es für die verschiedenen Personas bestimmte Szenarien zu erstellen. Beispielsweise möchte Lisa Müller schauen, was sie dieses Wochenende mit ihren Kindern hier unternehmen kann. Frau Waldmann möchte eine Übernachtungsmöglichkeit finden. Herr Maler möchte Werbung für seinen Betrieb machen. Die Navigation der Webseite muss dafür sorgen, dass alle Personen schnell an ihr Ziel gelangen.

Wichtig: Nicht mehr als 3 Klicks. Für umfangreiche Seiten ist das sicherlich schwer zu realisieren. Aber gerade hier liegt die Herausforderung bei der Strukturierung.

Strukturierung von Webseiten

Haben Sie alle Ihre Inhalte weitestgehend sowie Ihre Nutzergruppe erfasst, gilt es die Inhalte in eine Struktur zu bringen. Es gilt nun systematisch Kategorien festzulegen und zu klassifizieren. Dabei wird unterschieden zwischen der hierarchischen und der Facettenklassifikation.

Hierarchische Klassifikation

Die hierarchische Klassifikation spiegelt sich in der Navigation der Webseite wieder. Der Nutzer gelangt hier von einem allgemeineren Thema zu immer spezifischeren. Wie wenn Sie den Ordner Dokumente auf Ihrem PC öffnen, danach auf Steuererklärung klicken und danach auf 2017. Schon haben Sie mit 3 Klicks Ihre gewünschten Unterlagen gefunden. So sollte es sich auch auf der Webseite verhalten.

!Wichtig: Nicht mehr als 7 Punkte auf einer Ebene. Wirklich aller höchstens 9 Seiten auf einer Ebene. Machen Sie selbst den Test. Erfassen Sie hier mal den Punkt Amtsblatt.

• Aktuelle Meldungen
• Neu 2017
• Bekanntmachungen
• Immobilien­angebote
• Haushaltsplan
• Rathaus
• Soziale Medien
• Amtsblatt
• Handlungsprogramm
• Galerie
• Webcam
• Termine

Und hier sind es nur 12 Punkte. Hingegen leicht zu erfassen gelten maximal 7 Punkte. Werden es mehr, werden die einzelnen Inhalte überlesen. Versuchen Sie jetzt den Punkt Termine zu erfassen:

• Rathaus
• Soziale Medien
• Amtsblatt
• Termine
• Haushaltsplan
• Webcam
• Aktuelle Meldungen

Wichtig: Vermeiden Sie nicht aussagekräftige Punkte wie Sonstiges oder Weitere Informationen. Hier kann sich alles oder nichts verbergen. Der Nutzer wird es jedenfalls nicht erahnen können.

Facettenklassifkation

Die Facettenklassifikation ist nur möglich, wenn die Inhalte ähnliche Eigenschaften aufweisen mit denen sie klassifiziert werden können. Ein Beispiel hierfür sind Autos. Sie haben Eigenschaften wie Marke, Baujahr, PS usw. Ein anderes Beispiel sind Immobilien mit Quadratmeter, Miethöhe, Anzahl der Zimmer usw. Hier macht es wenig Sinn die Immobilien in eine hierarchische Struktur zu packen. Nach den einzelnen Facetten kann der Nutzer filtern und gelangt so zu seinem gewünschten Inhalt.

Card Sorting

Card Sorting klingt in der Ausführung simpel, ist aber durchaus effektiv. Die Inhalte werden auf Karteikarten geschrieben. Nun gilt es mit diesen Karteikarten Stapel zu bilden. Das erledigen im besten Fall Personen aus Ihrer Zielgruppe. Somit ist auch das Vokabular der Zielgruppe erkennbar. Ähnliche Begriffe kommen auf den selben Stapel. Anschließend werden die einzelnen Stapel benannt und so klassifiziert. Mit den Oberbegriffen kann der Vorgang wiederholt werden usw. Bis eine fertige Struktur entstanden ist.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

Das Video ist zwar auf englisch, aber verdeutlicht auch so die Vorgehensweise und den Mehrwert vom Card Sorting. Weitere Informationen hierzu finden Sie hier: https://www.usability.de/leistungen/methoden/card-sorting.html

XMind

Xmind ist ein von uns genutztes, kostenloses Programm, um die Struktur einer Webseite festzuhalten. Mit der Software lassen sich einfach Mindmaps erstellen und exportieren. Hier sehen Sie ein einfaches Beispiel, welches mit XMind erstellt wurde:

Sicherlich gibt es auch weitere Programme. Falls Sie ein ähnliches oder gar besseres Programm kennen, schreiben Sie es gerne als Kommentar.

Noch Fragen?

Hier nochmal das Wichtigste auf einen Blick:

• Sie müssen Ihre Zielgruppe kennen!
• Personas und User Stories helfen, die Zielgruppe nicht außer Acht zu lassen
• Beschränken Sie sich auf aussagekräftige Inhalte und Navigationspunkte
• Nicht mehr als 3 Klicks, um zum Ziel zu gelangen
• Nicht mehr als 7 Punkte auf einer Navigationsebene
• Card Sorting und Programme wie XMind dienen als Hilfsmittel für die hierarchische Strukturierung
• Bei Inhalten mit vergleichbaren Eigenschaften nutzen Sie die Facettenklassifikation

Die Struktur einer Webseite ist nicht in Stein gemeißelt. Sie sollte dynamisch erweiterbar sein. Ungeachtet dessen gilt es sie am Anfang der Erstellung zu definieren. Nur so ist sichergestellt, dass das Design und die Programmierung ebenfalls dafür sorgen, dass Ihre Inhalte gefunden werden.

Wie Sie Ihre Inhalte für externe Suchmaschinen aufbereiten, erfahren Sie u.a. in unserem Artikel für SEO-Metadaten. Haben Sie weitere Fragen zu dem Thema, kontaktieren Sie uns gerne oder hinterlassen Sie uns einen Kommentar.