Kapitel 5 Die Struktur der Webseite

5.1 Metaphern
5.2 Die Struktur festlegen
5.3 Die Navigation festlegen


Nun wissen Sie bereits sehr viel über Ihre Projekt, Sie kennen die Ziele, Sie wissen wer die primären, sekundären Zielgruppen sind und aus dem letzten Kapitel wissen Sie, was für Inhalte und inhaltsrelevante Funktionen auf Ihrer Seite notwendig sind. Zeit also, sich mit dem Aufbau, der Struktur Ihrer Seite zu beschäftigen. Die Seiten-Struktur können Sie mit einem Skelett, dem Knochengerüst vergleichen, das den Körper zusammenhält. Ohne Ihre Skelettstruktur wären Sie ganz schön aufgeschmissen, eine aufrechte Fortbewegung wäre nicht möglich - ähnlich verhält es sich mit Webseiten, ohne Struktur und Aufbau gäbe es nur ein heilloses Durcheinander. Haben Sie aber eine solide inhaltsrelevante Struktur geschaffen, fällt allem anderen nahezu mühelos automatisch der vorgesehene Platz zu. Mit einer soliden Struktur ergeben sich fast zwangsläufig die Navigationsmöglichkeiten, sind diese in die Seite integriert, haben Sie keine Mühe mehr ein solides Layout zu vollenden.


Metaphern
Auf der Suche nach der richtigen Seitenstruktur ist es interessant und  nützlich Metaphern auszuprobieren. Metaphern veranschaulichen einen Sachverhalt, sie senden eine sinnbildliche Botschaft. Eine gute Metapher kann eine Navigation und Bedienung einer Webseite ohne viel Erklärung intuitiv vorgeben. Der Einkaufswagen auf dem Weg zur Kasse ist eine solche Metapher, die in Online-Shops zum Standard geworden ist. Nicht immer gibt es für jede Idee eine Metapher, gut beraten mag derjenige sein, der nur sparsam, Andeutungen sinnbildlicher Anweisungen auf seiner Seite vereint - vielleicht gibt es auch im Moment gar keine passende Metapher für Ihr Vorhaben!

Drei Typen von Metaphern können nützlich sein für Ihre Anwendung:

Organisations-Metaphern
Diese Metaphern veranschaulichen bekannte Strukturen eines Systems, z.B. eines Unternehmens, einer Organisation, einem Verein. Konstruieren Sie eine Seite die z.B. Weine verkauft, könnten Sie sinnbildlich einen Ausflug in die Anbaugebiete vornehmen, das Lager, den Weinkeller nach den Anbaugebieten logisch unterteilt und einen kleinen Fachmarkt mit persönlicher Beratung typisch für die Region veranschaulichen. Das sind bekannte zum Thema passende Metaphern, die der Seite Charakter und Struktur verleihen.

Funktions-Metaphern
Funktionsorientierte Metaphern sind Anweisungen (Befehle), die Sie auf einer Webseite ausführen, die bekannt aus anderen Arbeitsumgebungen sind. Grafikprogramme, wie Photoshop, erlauben Ihnen Bilder mit Scherensymbolen auszuschneiden, Schnipsel zusammen zu kleben oder transparente Blätter übereinander zu legen.

Visuelle Metaphern
Visuelle Metaphern basieren auf allgemein gültige Symbole, die Sie zu einer Anweisung veranlassen. Stopp- oder Gefahrenschilder aus dem Verkehrswesen gehören dazu, genauso wie die bekannten „Start“ „Stopp“ „Pause“ Symbole eines CD Players.

Anhand der erarbeiteten Inhaltssektionen aus dem vorherigen Kapitel liegt vielleicht der Gebrauch von Metaphern nahe, versuchen Sie aus dem Inhaltsbestand weitere Veranschaulichungen hinzu zu fügen. Finden Sie keine passenden Metaphern für die gesamte Struktur der Seite reicht es mitunter die Navigation oder kleinere Bereiche Ihrer Seite mit Metaphern zu veranschaulichen.


Die Struktur festlegen
Die gewichteten Inhaltssektionen geben Ihnen einen festen Anhaltspunkt für die Struktur Ihrer Seite.  Ihre Metaphern verwenden Sie mit den Sektionen. Sie haben einen Inhaltsbestand, den Sie Ihren Sektionen zuordnen und können damit eine hierarchische Aufteilung vornehmen.

struktur_listing

 

 

 

 

 

 

 



Als nächstes stellen Sie diese Struktur bildlich in Form eines Organigramms dar.

organigram

Fügen Sie eine Legende hinzu, wie die verschiedenen Komponenten und die dafür vorgesehenen Funktionen dargestellt sind. Sie können unterscheiden zwischen Seiten, die reine Inhaltsdarstellungen zeigen (Beispiel:Sektion1 + 1.ff) und Seiten die vor dem Benutzen einer Funktion unterliegen. (Beispiel:Sektion 3: Erst Registrierung dann Besuch zugelassen zu 3.ff)
Ist Ihre Seite umfangreich nehmen Sie die Darstellung jeweils per Hauptsektion vor und fügen Sie ein Übersichtsdiagramm ein.

Die Navigation festlegen

Wie können die Leser die Seite benutzen? Wie kommen Sie von einem Inhalt zu dem nächsten? Wie können Sie verhindern, dass sie die Orientierung verlieren? In dem Sie das Navigations-System festlegen können Sie diese Probleme lösen.

Wenn Sie Ihre Strukturorganisation betrachten bekommen Sie bereits eine Vorstellung wie Sie die Navigation organisieren. Die Hauptsektionen Ihres Inhalts sind die idealen Punkte Ihres globalen Navigationsmenüs, das auf jeder Seite Ihrer Homepage zu finden ist und es dem Leser gestattet schnell von einer Sektion zur nächsten zu wechseln. Versuchen Sie wenn möglich nicht mehr als 5-7 globale Menüpunkte zu verwenden. Gebräuchlich ist es, das Logo Ihres Unternehmens in das globale Menü zu integrieren, als ein link zu der Startseite. Die lokale Navigation können Sie auf verschiedene Art darstellen, der sog. bullettree zeigt eine meist vertikal angeordnete Baumstruktur, der sog. suckerfish klappt horizontal seine Menüstruktur nach einem hover(rollover) Befehl des Mauszeigers auf. (vergl. Alpine-Design Navigation).

Orientieren Sie sich an gebräuchlichen Formen der Navigation, beachten Sie de facto Standards und die in westlichen Kulturkreisen vorherrschende Links nach Rechts Leseart. So findet sich der link zu der Startseite zumeist links oben als erster Menüpunkt, es folgen die Menüpunkte nach Ihrer im Ranking festgelegten Wichtigkeit.

Ist es aus Ihrem Strukturorganigramm nicht ohne weiteres ersichtlich, weil Sie z.B. mehrere Seiten benutzt haben, erläutern Sie das Navigationssystem separat in Ihrer Dokumentation.

Design Dokument Plan A

Zeit das Design Dokument zu ergänzen. Schreiben Sie eine kurze Zusammenfassung der Inhaltsstruktur, schildern Sie den Gebrauch Ihrer Metaphern. Fügen Sie die Strukturauflistung und das Organigramm hinzu. Dokumentieren Sie die globalen und lokalen Navigationsschemata.

 

5. Die Struktur der Webseite

5.1 Metaphern
5.2 Die Struktur
5.3
Die Navigation


Anhang B: Strukturliste, Organigram der Seitenstruktur