Webdesign-Tutorial: Planung Website-Struktur und Navigation

Es ist wichtig, schon vor dem Entwurf einer Site die Struktur zu definieren: Welche Seiten werden benötigt? Wieviele werden es insgesamt? In welche Themenbereiche lassen sich die Webseiten aufteilen? Wie lassen sich diese gruppieren? Werden weitere Sub- Unterteilungen benötigt? Dieser Workshop hilft beim Finden der korrekten Struktur für Ihre Website.

Welche Seiten werden benötigt? Eine Homepage besteht aus zwei Arten von Webseiten: zum einen die Inhaltsseiten, die der Betreiber zum Vermitteln seines Angebotes braucht, zum anderen aus sogenannten Service-Seiten. Sie ergänzen das funktionelle und inhaltliche Angebot einer Website. Fangen Sie bei der Struktur-Planung der Website am besten immer mit den Site Services an. Die wichtigste Service-Seite ist das gesetzlich vorgeschriebene Impressum (TK-Gesetz Deutschland) mit einem rechtlichen Hinweis externe Links betreffend. Auch eine Kontaktseite (Formular und Adresse / Telefonnummer) wird auf praktisch jeder Website benötigt. Eine Sitemap (übersicht aller im Web vorhandenen Seiten) empfiehlt sich ab mittlere Seitengrößen (ab ca. 20 Seiten). Weitere mögliche Serviceseiten sind Website-Suche, Gästebuch oder ähnliches. Zu diesen Service-Seiten kommen die eigentlichen Inhaltsseiten. Zur Planung der Struktur einer Website benötigt man eine sinnvolle Gruppierung.

Wieviele Webseiten brauche ich? Das hängt von Ihrem Angebot ab. Verwenden Sie keine zu kurzen Seiten, aber auch keine zu langen. Zu kurze Seiten bieten nicht genug Inhalt für Suchmaschinen. Zu lange Webseiten erschlagen den Leser mit Masse und verscheuchen zur nächst besseren Website. Eine gute Seitengröße soll nur zwei bis vier Bildschirmhöhen belegen. Je nach verwendetem Layout und der gewählten Schriftgröße passen auf diese 2 Bildschirmseiten 200 bis 1200 Worte. Am Bildschirm lassen sich lange Texte bedeutend schlechter lesen, als auf Papier, fassen Sie also die Texte kürzer als für Printmedien. Navigationspunkte Haben Sie Ihre Texte in sinnvolle Blöcke unterteilt und reduziert, dann folgen als nächstes auch schon die Gedanken zur Gruppierung der einzelnen Inhalte. Aus der Gruppierung ergibt sich die Sitemap einer Homepage. Die Sitemap stellt schematisch die Zusammenhänge und Gruppierungen der einzelnen Webseiten im Projekt dar. Für Homepages unter 20 Seiten reicht in der Regel eine zweistufige Navigation: Die Hauptnavigationsebene bleibt immer sichtbar, die Subnavigation wird ergänzend zu dem jeweils geklicktem Hauptnavigationspunkt angezeigt. Eine sinnvolle Struktur für eine kleine Website könnte also folgendermaßen aussehen:

Navigationspunkte Haben Sie Ihre Texte in sinnvolle Blöcke unterteilt und reduziert, dann folgen als nächstes auch schon die Gedanken zur Gruppierung der einzelnen Inhalte. Aus der Gruppierung ergibt sich die Sitemap einer Homepage. Die Sitemap stellt schematisch die Zusammenhänge und Gruppierungen der einzelnen Webseiten im Projekt dar. Für Homepages unter 20 Seiten reicht in der Regel eine zweistufige Navigation: Die Hauptnavigationsebene bleibt immer sichtbar, die Subnavigation wird ergänzend zu dem jeweils geklicktem Hauptnavigationspunkt angezeigt. Eine sinnvolle Struktur für eine kleine Website könnte also folgendermaßen aussehen:

Die glorreichen Sieben Beachten Sie beim Gruppieren der Seiten und Entwerfen der Navigation Ihrer Homepage, dass zu viele auf einmal sichtbare Links sehr schnell verwirren. Bemühen Sie sich, möglichst genau sieben Hauptnavigationspunkte zu erhalten, mit jeweils maximal sieben Subnavigationspunkten. Sollten sich irgendwo mehr ergeben, dann bemühen Sie sich um eine andere Gruppierung oder weitere Zerteilung. Ab 30 HTML-Seiten benötigen viele Homepages schon eine dritte Navigationsbene: Hauptnavigation, darunter Subnavigation, darunter wiederum Subnavigation 2. Ebene.

Größe und Unterteilung der Textblöcke Bemühen Sie sich, Ihre Homepage weder zu klein zu zerstückeln, noch in zu umfangreichen Themenblöcken zu gruppieren. Eine zu kleine Zerteilung lässt den Benutzer den Überblick verlieren. Suchmaschinen finden möglicherweise nicht mehr genug Text, um die jeweilige Seite für wichtig zu erachten.
Allerdings gilt auch: Je mehr Seiten in einer Homepage vorhanden sind, desto mehr verschiedene Keywords können für getrennte Seiten eingesetzt werden. Zu große Themenblöcke bewirken ebenfalls Orientierungsverlust. In einem Medium, in dem Wissen in dermaßen großem Umfang zur Verfügung steht, wie dem Internet, ist jede bessere Homepage nur einen Klick entfernt.

Das Internet ist nicht linear aufgebaut! Beachten Sie beim Unterteilen der Texte stets, dass das Internet kein lineares Medium ist. Die Information muss nicht der Reihe nach von A bis Z übermittelt werden. Der Besucher kann immer auf Links klicken, die im bisher unbekannte Informationen auf seinem Weg durch das Web vermitteln. Es gilt somit, die Texte so effektiv wie möglich zu unterteilen. Weiterreichende Informationen werden an den entsprechenden Textstellen der allgemeinen Texte verlinkt.

Schreiben Sie kurz und eindeutig! Beim Texten für das Web ist die wichtigste Regel, alle Sätze immer so kurz und eindeutig wie möglich zu formulieren. Diese Regel entsteht aus der schlechteren Lesbarkeit von Texten am Bildschirm und der ständigen Verfügbarkeit potentieller Konkurrenz-Seiten. Schreiben Sie aus der Sicht des Kunden! Vermeiden Sie Fachbegriffe, wo immer möglich. Umgehen Sie jegliche Art von Negationen und verwenden Sie möglichst keine Nebensätze! Der Besucher Ihrer Homepage soll immer erst einen kurze Zusammenfassung, dann einen ausführlichen Text, und schließlich über weitere Links vertiefende Informationen erhalten.

Texte prüfen Sobald Sie erst Ihre Texte in Themenbereiche geordnet und sinnvolle Blöcke unterteilt haben, sollten Sie prüfen, ob Sie in den vorhandenen Texten noch Schwachstellen sehen: Fehlt etwas? Sind die Formulierungen kurz, einfach und aussagekräftig? Korrigieren Sie solche Fehler unbedingt vor der Ausarbeitungsphase der Homepage.

Navigationsformen Die Navigation einer guten Homepage ergibt sich größtenteils aus den durch die Struktur gesetzte Vorgaben. Die fett gedruckten Hauptnavigationspunkte werden immer auf jeder Seite des Projekts sichtbar sein, z.B. wie bei www.ih-berlin.de vertikal auf der linken Seite. Klickt man auf einen Hauptnavigationspunkt, der noch weitere Subseiten beherbergt, so setzen wir auf die betreffenden Seiten zusätzliche Zeilen unter den Hauptnavigationspunkt.

Platz für die Navigation Die wichtigste Frage die Navigation betreffend ist im Webdesign immer: wieviel Platz benötige ich? Eine Navigationsfläche, die keine Abstände zu anderen Seitenelementen einhält, ist zu klein geplant. Andererseits sieht man manchmal auch Navigationsflächen, die dermaßen ungenutzt sind, dass man die solitären Links nicht als Navigation wahrnimmt. Dadurch, dass Sie sich schon vor dem Design des Layouts Ihrer Homepage Gedanken über deren Struktur und Navigation machen, vermeiden Sie später überflüssige Korrekturen.

Horizontale oder vertikale Navigation? Eine horizontale Navigation am Kopf der Seite wirkt dezenter und feiner als ein vertikaler Balken auf der linken oder rechten Seite Ihrer Website. Allerdings hat man auf 780 Pixel Breite auch nicht allzuviel Platz für Erweiterungen. Steht die Struktur Ihrer Homepage sicher fest, spricht nichts gegen den Einsatz einer horizontalen Navigation. Wollen Sie flexibler bei den Inhalten und Erweiterungen Ihrer Homepage sein, empfehle ich einen vertikalen Navigationsbalken. Auch Mischformen aus beiderlei Orientierungen lassen sich sinnvoll verwenden.

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesign-Download-Bereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf- Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop- Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.