Kind vor Bücherregal, Navigation und Struktur einer Webseite

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.

Am Anfang war der Inhalt

Noch bevor mit dem Design einer Webseite begonnen wird, sollte erstmal feststehen, was überhaupt auf der Webseite angezeigt werden soll. Welche Inhalte möchte ich auf meiner Webseite präsentieren?

Hier gilt: weniger ist manchmal mehr. Versuchen Sie nicht Wikipedia zu kopieren.

Sehr wichtig ist es, 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.

Personas

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:

Persona 1

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

Persona 2

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.

Persona 3

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.

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:

XMind Sitemap Beispiel

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.

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht.