Gestaltungsempfehlungen für Webprojekte
Intro
Übersicht
Konzept
Seitenaufbau
Seitengestaltung
Navigation
Gif oder Jpeg?
Schnelles Laden HTML
PlugIns
Glossar
Ressourcen
Druckversion

Navigation

Strukturell verschiedene Arten von Verweisen oder Links
Vier strukturell verschiedene Arten von Verweisen, auch Links genannt. Verweis ist nicht gleich Verweis. Je nach Gliederung der Themen können sich Hierarchien ergeben. Es geht "tiefer" in ein Thema hinein, oder man kommt auf eine Seite mit Zusatzinformationen wie Fußnoten. Man geht "hinauf" zur Homepage oder lässt Suchergebnisse nach Trefferquote oder "Ähnlichkeit" ordnen. All das geschieht mit einem Link, auch Verweis genannt. Die Funktion der einzelnen Verweise muß deutlich werden durch ihre Gestaltung oder Bezeichnung.

Navigationsverweis: Hierarchisch
Zur "Homepage"
Zur "Übersicht"
Zum "Seitenkopf" (bei langen Seiten zu empfehlen)
Die klassische Art vertikal durch ein Projekt zu navigieren. Die Verweise führen "rauf" zur Homepage oder zur Bereichsseite.
Homepage wäre die HdK Homepage (so es den eine gäbe) und die Bereichseite eben dieses Projekts "Intro". Abhängig vom Konzept sind Bereichseiten oft lange Listen mit den Verweisen zu den einzelen Seiten bzw. Themen. Wie etwa "Übersicht".

hierarchische Struktur

zur vorherigen Seite zur nächsten Seite zum Seitenkopf

Navigationsverweis: Heterarchisch
Zur "vorangehenden Seite"
Zur "nächste Seite".

Nie "Zurück" verwenden, da "Zurück" nicht immer auch wirklich zurück bedeutet.

Die klassische Art Seiten horizontal zu verknüpfen.

heterarchische Struktur

zur vorherigen Seite zur nächsten Seite

Bereichseite mit Verweisliste
"Übersicht" wäre so eine Seite. Ihr Inhalt sind die Verweise."

Hotlist Seite

inhaltlicher Verweis
"Im Gegensatz zu einem Gif braucht ein Jpeg weniger kb."

Der gemeine Inhaltsverweis: Kann auf dieselbe Seite oder irgendeine andere sonstwo im Netz verweisen.
Auch das Verweisen auf ein Programm, einen Sound oder Bild ist möglich. Das sollte dann aber deutlich gemacht werden.
Die Glossarbegriffe sind ein Beispiel dafür.

funktionaler bzw. dynamischer Verweis
"alphabetisch sortieren"
Finger, FTP, Telnet, Mailto:
Eine Applikation wird aufgerufen, der Inhalt umstrukturiert.

Führt auf eine Seite die dynamisch erzeugt wurde, wie etwa vieles das bei HotWired präsentiert wird, wenn man registrierter User ist, oder denselben Inhalt unter anderen Schwerpunkten etwa "alphabetisch sortieren" oder "nach Datum sortieren". Für gewöhnlich findet man sie bei Suchservices wie Lycos, Excite etc.
Die Seite wurde extra für den Benutzer erzeugt.

Andere Möglichkeiten sind auch Finger, Gopher, FTP und die Mailfunktion.
Oft ist es verwirrend wenn plötzlich ein andere Client "aufgeht". Der Verweis sollte deutlich gekennzeichnet sein.

dynamisch erzeugte Seite

Cluster
Ab einer gewissen Tiefe gibt es keine Hierachie mehr: Die Dateien sind gleichberechtigt

Cluster, gleichberechtigte Seiten

Verweisfarben
"frische" Verweise blau
"gebrauchten" Verweise violett

Die Möglichkeit die Farben der Verweise (link, a link, v link) zu verändern sollte nicht dazu gebraucht werden völlig mit der Konvention zu brechen, die "frischen" Verweisen blau und "gebrauchten" Verweisen violett zuweist. Das Spektrum der Rot/Violett und Blautöne ist weit.
Verweise in völlig anderen Farben verwirren nur.

Wo bin ich?
Auf dieser Seite sind Navigation und Orientierung dasselbe.

"Image Maps" bzw. "Clickable Maps" haben ihre Vor- und Nachteile

Der Benutzer sollte immer wissen "wo" in der Hypertext "Hierarchie", (strenggenommen ist es keine, alle WWW Seiten sind gleichberechtigt) er sich gerade befindet. Auf dieser Seite sind Navigation & Orientierung dasselbe.

Bei Umfangreichen Projekten ist dies nicht mehr so einfach möglich. Manche Anbieter arbeiten hier mit einer Ortsmetapher die auch tatsächlich oft mit einer richtigen Landkarte verbunden ist. Hier bietet sich eine Image Map an. Dies hat jedoch einige Nachteile: Zu den, per Mausklick ermittelten, Cursor Koordinaten muß die entsprechende URL aus dem Map Verzeichnis ermittelt werden. Das benötigt Zeit.
Zweitens erhält man beim kein Feedback beim auswählen des aktiven Bereichs und keinen aussagekräftigen Dateinamen da der Verweis in den cgi-bin des Servers führt: Die ausgewählte Seite wird irgendwann geladen. (Bei Client-Side Maps, wie sie ab Netscape 2.0 funktionieren, entfällt der Serverprozess, die URL wird in der Leiste unten dargestellt.) Alle Image Maps haben einen großen Nachteil. Hat der Browser eine langsame Verbindung und die "auto-load-images" Funktion abgeschaltet, kann er die Funktionalität nicht nutzen. Deswegen sollte man zu Image Maps immer alternativen Text anbieten. Da man einer Image Map auch nicht ansieht "wo", also auf welchem Bereich der auf der ihr dargestellten Seiten man sich gerade befindet sollte man so auch für jede Seite eine eigene Map anbieten, oder mit einem zusätzlichen Ikon kennzeichnen. Das kostet wiederrum Übertragungszeit.
Das alles sind Gründe die gegen Image Maps sprechen.

Wo komme ich hin?
Anzeigen wo der Verweis hinführt

z.B. (750kb!)

Der Benutzer sollte die Möglichkeit haben, zu erkennen wo der Verweis hinführt. Die Ungefähre kb Größe eines Bildes anzugeben ist nur ein Teil dieser Forderung:
Wichtig sind sinnfällige, aussagekräftige Begriffe und Möglicherweise Icons die die Länge der Seite anzeigen könnten, wieviele Bilder sie enthält, ob Statistiken oder andere Inhalte zu erwarten sind.
Würde ich gerne mal irgendwo sehen.

Icons
Icons besser redundant mit Text ausstatten.

Monastery Icons Monastery Icons Monastery Icons Monastery Icons Monastery Icons Monastery Icons

Ein Ikon allein ist oft nicht aussagekräftig genug, deswegen redundanten Text, also ergänzend zum Ikon, verwenden:

zur vorherigen Seite

click here
Verweise sollten etwas über ihr Ziel verraten. Mindestens den Titel der nächten Seite. Außerdem setzt "klicken" eine Maus vorraus. Manche Rechner habe diese jedoch nicht. Verweise sollten aus ihrem Kontext heraus berechtigt und klar sein. Immer einen inhaltlichen Bezugsrahmen oder mindestens den Titel der Seite anbieten. Bedenken muß man außerdem das ganze Zeilen, oder Blöcke markierten Texts wiederum eine Beliebigkeit herstellen und das Gegenteil dessen erreichen was man beabsichtigte, nämlich Klarheit über die Zielseite zu schaffen.

Alle Verweise testen
Eine Mindestanforderung sind Verweise die überprüft wurden.

Nach Abschluß des Projekts sollte man alle Verweise testen. Editoren wie BBedit 3.5 verfügen über die Möglichkeit ANCHOR und A HREF's testen zu lassen bzw. Geben bei Eingabe eines nicht vorhandenen Targets eine Fehlermeldung.
Sobald das Projekt auf dem Server liegt, gibt es nämlich genug Probleme ...


Intro
Übersicht
Konzept
Seitenaufbau
Seitengestaltung
Navigation
Gif oder Jpeg?
Schnelles Laden HTML
PlugIns
Glossar
Ressourcen
Druckversion

Kommentare oder Vorschläge ?
http://www.digital.hdk-berlin.de/~mhohl/styleguide/nav.html
© Hochschule der Künste Berlin
Michael Hohl
26-Juni-96
Gestaltungsempfehlungen für Webseiten