+ All Categories
Transcript
Page 1: Handbuch der Webnavigation
Page 2: Handbuch der Webnavigation

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . VIII

Teil IGrundlagen der Webnavigation

01Einführung in die Webnavigation . . . . . . . 2

Navigation verstehen 3Die Notwendigkeit von Navigation 5Webnavigationsdesign 19Zusammenfassung 22Übungsfragen 22Weiterführende Literatur 23

02Grundlagen der Navigation . . . . . . . . . . 24

Informationssuche 26Informationssuche online 31Benutzerverhalten beim Browsen im Web 33Informations-Gestalt 42Informationen erleben 46Zusammenfassung 52Übungsfragen 53Weiterführende Literatur 55

03Navigationselemente . . . . . . . . . . . . . . . . 56

Schrittweise Navigation 57Navigation mittels Nummerierung 58Brotkrümel-Navigation 62Navigationselemente mit Baumstruktur 65Sitemaps 65Webverzeichnisse 68Tag-Clouds 69A−Z-Indizes 69Menüleisten und -Reiter 71Vertikale Menüs 74Dynamische Menüs 75Drop-down-Menüs 78Navigation per Informationsvisualisierung 79Browsereigene Navigationsmechanismen 82Zusammenfassung 84Übungsfragen 84Weiterführende Literatur 85

04Navigationstypen . . . . . . . . . . . . . . . . . . . 86

Navigationskategorien 88Seitentypen 107Zusammenfassung 118Übungsfragen 119Weiterführende Literatur 120

Inhaltsverzeichnis

Page 3: Handbuch der Webnavigation

�I

05Navigation beschriften . . . . . . . . . . . . . 122

Das Vokabularproblem 123Was gute Beschriftungen ausmacht 125Das System der Beschriftungen 133Persuasive Linktexte 139Navigationsbeschriftungen übersetzen 141Quellen für Navigationsbeschriftungen 142Zusammenfassung 143Übungsfragen 144Weiterführende Literatur 145

Teil IIEin Framework für das Navigationsdesign

06Evaluierung . . . . . . . . . . . . . . . . . . . . . . . . 148

Merkmale einer wirksamen Navigation 149Evaluierungsmethoden 157Zusammenfassung 167Übungsfragen 168Weiterführende Literatur 169

07Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Unternehmensziele 171Den Inhalt der Website verstehen 176Die Technologien der Website verstehen 179Die Benutzer der Website verstehen 184Direkte Benutzeruntersuchungen 187Auswertung der Untersuchungsergebnisse 195Szenarios 200Zusammenfassung 202Übungsfragen 203Weiterführende Literatur 204

08Architektur . . . . . . . . . . . . . . . . . . . . . . . . 206

Persuasive Architektur 208Navigationskonzept 209Informationsstruktur 215Organisationsschemen 223Sitemaps 227Zusammenfassung 235Übungsfragen 236Weiterführende Literatur 237

I N h a lT s � e r z e I c h N I s

Page 4: Handbuch der Webnavigation

I N h a lT s � e r z e I c h N I s �II

09Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Die Navigationspfade bestimmen 240Visuelle Logik 243Templates 253Wireframes 259Zusammenfassung 262Übungsfragen 263Weiterführende Literatur 264

10Oberflächengestaltung . . . . . . . . . . . . . 266

Informationsdesign 267Interaktionsdesign 276Grafikdesign 282Die Navigation beschreiben 288Zusammenfassung 291Übungsfragen 292Weiterführende Literatur 293

Teil IIINavigation in speziellen Anwendungen

11Navigation und Stichwortsuche . . . . . 296

Navigation vor der Stichwortsuche 297Navigation nach der Stichwortsuche 300Facettennavigation 307Zusammenfassung 316Übungsfragen 317Weiterführende Literatur 318

12Navigation und Social-Tagging-Systeme . . . . . . . . . . . . 320

Tagging 321Tags und Navigation 325Zusammenfassung 345Übungsfragen 346Weiterführende Literatur 347

13Navigation und Rich Web Applications . . . . . . . . . . . . . . 348

Rich Web Applications 349Navigation von Rich Web Applications 353Design von Rich Web Applications 369Zusammenfassung 379Übungsfragen 380Weiterführende Literatur 381

Literaturnachweis . . . . . . . . . . . . . . . . . . 382

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

Page 5: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N86

Navigationstypen“Alles sollte so einfach wie möglich sein, aber nicht einfacher.”

wird albert einstein zugeschrieben

04in diesem kapiTel

strukturelle Navigation

assoziative Navigation

Utility-Navigation

seiteninterne links

Navigationsseiten

Inhaltsseiten

Funktionelle seiten

-

-

-

-

-

-

-

Page 6: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

87N a� I g a T I o N s K a T e g o r I e N

Nicht alle Navigationselemente einer website sind gleich. es ist Ihre auf-gabe, sie auszusuchen. sie müssen den zweck und die Bedeutung der Navi-gation innerhalb Ihrer website bestimmen, ähnliche optionen gruppieren und als zusammenhängende einheit darstellen. zwar gibt es gepflogen-heiten, mit denen sie beginnen können – Menüleisten und Tabs werden gewöhnlich für die hauptnavigation verwendet und vertikale Menüs auf der linken seite für die lokale Navigation –, aber es existieren keine festen anwen-dungsregeln und es gibt viele �ariationen.Um die passenden auszuwählen, müssen Sie wie ein Benutzer denken, nicht wie ein designer. nehmen Sie sich Zeit, um heraus-zufinden, wie die Benutzer die navigationselemente wahrnehmen. Benutzer können die nützlichkeit von links in einem menü leichter einschätzen und sich auf neuen Seiten schneller zurechtfinden, wenn sie den navigationstyp des menüs verstehen.

doch was macht eine hauptnavigation zur hauptnavigation? Was unterscheidet verwandte links von lokaler navigation?

navigationstypen unterscheiden sich durch mehrere aspekte:

die art des inhalts, auf den mit dem navigationselement zugegriffen wird

das Verhalten der links in der navigation und die Überleitung zur nächsten Seite

die vom navigationselement unterstützten Suchfunktionen und -modi

die visuelle aufbereitung der optionen in der navigation

die position eines navigationselements auf der Seite

darüber hinaus hängt der Zweck eines navigationsmenüs stark von der art der Seite ab, auf der das menü erscheint. die navi-gation auf Startseiten ist normalerweise anders als zum Beispiel auf produktseiten, und Benutzer erwarten ganz bestimmte navigationselemente auf Suchergebnisseiten. auch die rolle der Seite innerhalb der gesamten Website wirkt sich auf die zu verwendenden navigationstypen aus.

alle diese aspekte spielen zusammen und ermöglichen es den Benutzern, eine hauptnavigation auch wirklich als hauptnavi-gation zu erkennen und eine lokale navigation als lokale navigation. das ist die Voraussetzung für die interaktion mit der navi-gation und mit der Website als ganzes.

dieses Kapitel soll ihnen helfen, dafür zu sorgen, dass die navigationskonzepte auf ihren Websites den Benutzern sofort klar sind. es behandelt die verschiedenen navigationstypen und ihre Funktionen sowie die wichtigsten arten von Webseiten. Berücksichtigen Sie beim Weiterlesen bitte, dass es unter designern keine standardisierte Fachsprache gibt und die terminolo-gie bezüglich navigation und navigationstypen große abweichungen aufweisen kann. daher wurden in den Beschreibungen in diesem Kapitel wo immer möglich auch alternative Begriffe mit angegeben. dennoch kann es sein, dass in ihrem Unterneh-men oder ihrer institution noch andere (oder sogar entgegengesetzte) Begriffsverwendungen üblich sind. das Ziel bleibt jedoch in jedem Fall dasselbe: die rolle und den Zweck einer navigation zu verstehen.

Page 7: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N88

navigaTionskaTegorien

die meisten navigationstypen lassen sich in drei primärkategorien1 zusammenfassen (siehe abbildung 4-1):

Strukturell

Verbindet zwei Seiten basierend auf der hierarchischen Struktur der Website. Betrifft alle Seiten, auf denen Benutzer erwarten, dass sie sich zur übergeordneten Seite und zu den untergeordneten Seiten weiterbewegen können.

Assoziativ

Verbindet Seiten mit ähnlichen themen und inhalten unabhängig von ihrer position innerhalb der Website-Struktur. die navigations-links überschreiten dabei oft strukturelle grenzen.

Utility

Verbindet Seiten und Features, die bei der Benutzung der Website selbst helfen sollen. diese können außerhalb der haupthierarchie der Website liegen, und ihre einzige gemeinsamkeit ist ihre Funktion.

strukturell

assoziativ

Utility

Abbildung 4-1 / die drei primärkategorien der navigation (nach Fiorito und dalton)

S T R u K T u R E L L E N A V I G A T I O N

Wie der Begriff schon nahelegt, folgt die strukturelle navigation der Struktur einer Website. Sie ermöglicht den Benutzern, sich innerhalb der Website-hierarchie nach oben und unten zu bewegen. die strukturelle navigation kann weiter unterteilt werden in zwei typen: die hauptnavigation und die lokale navigation.

h A u P T N A V I G A T I O N

auch globale navigation oder primärnavigation genannt.

die hauptnavigation repräsentiert im allgemeinen die Seiten auf der obersten ebene der Website-Struktur bzw. die Seiten

1 siehe die präsentationen von David Fiorito und richard Dalton, �anguard group, auf den Ia summits in 2004 und 2005: »creating a consistent enterprise web Navigation solution« (www.iasummit.org/�00�/finalpapers/73/73_Handout_or__final__paper.ppt) und »Thinking Navigation« (www.iasummit.org/�005/finalpapers/101_Presentation.ppt).

Page 8: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

89N a� I g a T I o N s K a T e g o r I e N

unmittelbar unterhalb der Startseite. Bei den links in der hauptnavigation geht man üblicherweise davon aus, dass sie zu Seiten innerhalb der Website führen und sich sehr konsistent verhalten. die Benutzer erwarten, dass sie nicht auf völlig untypischen Seiten landen, wenn sie den links in der hauptnavigation folgen. innerhalb der hauptnavigation gibt es auf den verschiedenen Seiten normalerweise nur geringe Unterschiede.

insgesamt unterstützt die hauptnavigation eine Vielzahl von Benutzeraktionen und modi zur informationssuche, einschließ-lich der Suche mit klarem informationsziel, das Stöbern und auch das Wiederfinden von informationen. aus der Sicht der Benutzer spielt die hauptnavigation bei der nutzung der Website eine entscheidende rolle:

die hauptnavigation bietet einen Überblick und beantwortet wichtige Fragen von Benutzern, wenn sie die Website zum ersten mal besuchen, wie zum Beispiel »hat diese Website, wonach ich suche?«

die hauptnavigation hilft bei der orientierung. Vor allem auf großen, informationsreichen Sites ist ein über die ganze Website hinweg beständiges navigationselement für die Benutzer angenehm.

die hauptnavigation ermöglicht den Benutzern, zwischen den themen zu wechseln. Besucher der Website können mit den optionen der hauptnavigation schnell zu anderen rubriken der Site gelangen oder ihren bisherigen navigations-pfad »zurücksetzen« und neu beginnen.

die hauptnavigation hilft den Benutzern weiter, wenn sie in ihrer navigation unterbrochen worden sind, und erinnert sie, wo auf der Website sie sich gerade befinden.

Und schließlich verleiht die hauptnavigation einer Website auch profil und definiert auf verschiedene Weise, wie die Website sich von anderen Sites abgrenzt.

die hauptnavigation wird oft innerhalb eines globalen, die ganze Website übergreifenden navigationsbereichs dargestellt, der im allgemeinen auch das Website-logo und die Utility-navigation enthält. Wie der name »global« schon impliziert, erscheint dieser Bereich in der regel an einer einheitlichen Stelle auf allen oder fast allen Seiten einer Website.

Betrachten Sie zum Beispiel den globalen navigationsbereich der Website der Universität Valencia (www.uv.es, abbildung 4-2). links unter dem logo befinden sich die sechs optionen der hauptnavigation und rechts einige links zu hilfsseiten wie der Sitemap und der Suchfunktion der Website. typisch ist auch ein designelement wie ein Bild oder eine grafik zur Unterstützung des Brandings der Website.

Abbildung 4-2 / der globale navigationsbereich auf der homepage der Universität Valencia

Page 9: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N90

Kritiker einer immer präsenten globalen navigation verweisen auf die Verschwendung wertvollen Bildschirmplatzes. diese Bedenken sind vollkommen berechtigt. der globale navigationsbereich in abbildung 4-2 nimmt einen recht erheblichen teil der Seite im Browserfenster ein, und die designer würden gut daran tun, ihn zu reduzieren, vor allem auf den inhaltsseiten unterhalb der homepage. es geht aber nicht darum, ob eine globale navigation verwendet werden sollte oder nicht, sondern wie prominent und beständig sie sein sollte. dies hängt von mehreren Faktoren ab:

Größe der Website

große Websites mit tausenden von Seiten profitieren eher von einem über alle Seiten hinweg beständigen navigations-element. Kleinere Seiten könnten auch alleine durch Breadcrumbs oder verwandte links navigierbar sein.

Benutzerverhalten und -bedürfnisse

erstellen Sie keine hervorstechende und immer gleichbleibende hauptnavigation nur um ihrer selbst willen. Sie müssen ihre Benutzer und deren informationsbedürfnisse verstehen und ihr design entsprechend daran ausrichten.

Bedürfnisse des Unternehmens

Unternehmen haben Ziele. einige optionen werden von natur aus stärker hervorgehoben werden müssen als andere. eine gut sichtbare, persistente globale navigation kann den Bedürfnissen der entscheidungsträger entgegenkommen.

Abläufe, die nicht unterbrochen werden sollten

es gibt Situationen, in denen die globale navigation gar nicht oder nur in abgewandelter Form angezeigt werden sollte. Bei abläufen wie einer online-Banktransaktion oder dem abwickeln eines online-einkaufs kann eine präsente hauptnavi-gation leicht dazu führen, dass Benutzer mittendrin zu einer anderen Seite springen und der prozess dadurch abgebro-chen wird.

Vergleichen Sie zum Beispiel die homepage der reise-Website opodo (www.opodo.co.uk) in abbildung 4-3 mit der ersten Seite eines Buchungsprozesses in abbildung 4-4. Bei letzterem wurde die hauptnavigation weggelassen, um Fehler zu vermeiden und die aufmerksamkeit des Benutzers ganz auf den Buchungsvorgang zu lenken.

Abbildung 4-3 / die opodo-homepage mit der (hervorgehobenen) hauptnavigation

Page 10: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

91N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-4 / ein Buchungsvorgang auf opodo – ohne die hauptnavigation

L O K A L E N A V I G A T I O N

auch Subnavigation und pagelevel-navigation genannt.

die lokale navigation wird für den Zugriff auf Seiten in den unteren ebenen der Website-Struktur, unterhalb der Seiten der hauptnavigation, eingesetzt. der Begriff »lokal« meint hier »innerhalb einer gegebenen Kategorie«. die lokale navigation auf einer Seite verlinkt üblicherweise auf Seiten derselben hierarchieebene oder darunter.

in der regel arbeitet die lokale navigation eng mit der hauptnavigation zusammen und ist gewissermaßen eine erweiterung der hauptnavigation. da die lokale navigation stärker variiert als die hauptnavigation, wird mit ihr oft unterschiedlich umgegangen.

Verbreitete anordnungen von lokaler und hauptnavigation sind unter anderem:

umgedrehtes L

auf vielen Websites ist die globale navigation entlang des oberen randes der Seite platziert und die lokale navigation als vertikale linkliste entlang der linken Seite, was die Form eines umgedrehten l ergibt.

horizontal

die lokale navigation kann auch als eine zweite reihe von optionen unterhalb der horizontalen hauptnavigation oder in Form von dynamischen menüs dargestellt werden.

vertikal eingebettet

ist die hauptnavigation ein vertikales menü auf der linken oder rechten Seite, wird die lokale navigation oft in einer baumartigen Struktur zwischen den optionen der hauptnavigation eingebettet.

in abbildung 4-5 sind diese drei typischen anordnungen skizziert. es sind natürlich auch andere anordnungen möglich, zum Beispiel mit der lokalen navigation auf der rechten Seite, sowie Kombinationen und hybride anordnungen.

Page 11: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N92

umgedrehtes L

Hauptnavigation

horizontal vertikal eingebettet

lokale Navi-

gation

lokale Navigation

Haupt-navi-

gation

lokaleNavi-

gation

Hauptnavigation

Abbildung 4-5 / drei verbreitete anordnungen von lokaler und hauptnavigation

die Übergänge von einer Seite zur anderen per lokaler navigation sind normalerweise reibungslos und gleichmäßig. Benutzer gehen in der regel davon aus, dass ein link in der lokalen navigation zu einer Seite auf derselben Website und sogar in dersel-ben Kategorie führt. Verglichen mit der hauptnavigation, kann die lokale navigation in einigen Fällen jedoch etwas unbestän-diger und für den Benutzer unberechenbarer sein. Sie könnte beispielsweise zu anderen Seitentypen und inhaltsformaten verlinken.

im allgemeinen bietet die lokale navigation auch selbst schon einiges an inhalt: Sie zeigt zum Beispiel an, welche themen zusammengehören, welche verwandten inhalte es gibt usw. in diesem Sinne spielt die lokale navigation eine Schlüsselrolle, wenn es darum geht, dem Benutzer einen eindruck von der thematischen Bedeutung der Website zu vermitteln. außerdem macht sie die granularität eines themas kenntlich: Wie detailliert oder allgemein sind die informationen zu dem thema auf dieser Website? Somit unterstützt die lokale navigation sowohl das Stöbern und indirekte Suchen nach informationen wie auch das zielgerichtete Suchen und das Wiederfinden von informationen. Und sie verweist auch auf inhalte, deren existenz einem Benutzer vielleicht noch gar nicht bewusst war.

die Website von philips (www.philips.de) stellt die lokale navigation mit dynamischen menüs dar, die wertvollen Bildschirm-platz sparen und dennoch schnellen Zugriff auf die optionen bieten. in abbildung 4-6 öffnet sich von der hauptnavigation aus ein dynamisches menü nach unten und zeigt Unteroptionen der hauptkategorie »Über philips« an. ein Klick auf eine dieser optionen führt zu einer Seite, auf der die lokale navigation auf der linken Seite als vertikales menü wiederholt wird (siehe abbildung 4-7). dabei wurden wiederum Unteroptionen vertikal eingebettet, die zu Seiten führen, die sich in der Website-hierarchie eine ebene unter der aktuellen Seite befinden. dies ist eine effiziente und platzsparende navigationsstrategie.

Abbildung 4-6 / dynamische menüs für die lokale navigation auf der philips-homepage

Page 12: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

93N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-7 / lokale navigation mit vertikal eingebetteten Unteroptionen auf der philips-Website

A S S O Z I A T I V E N A V I G A T I O N

die assoziative navigation sorgt für wichtige Querverbindungen über mehrere hierarchieebenen der Website hinweg. Wäh-rend sich ein Benutzer mit einem bestimmten thema beschäftigt, kann er direkt auf andere themen zugreifen. das ist generell eine grundeigenschaft von hypertext. allerdings ist dies auch der Kern des »embedded digression«-problems (siehe Kapitel 2), bei dem Benutzer durch eingebettete abschweifende links die orientierung oder den Sinn für den gesamtkontext verlieren.

die verbreitetsten arten von assoziativer navigation sind die Kontextnavigation, die adaptive navigation, Quick-links und die Footer-navigation. Sie werden in den folgenden abschnitten genauer beleuchtet.

Barrierefreiheit

Navigation überspringenGleichbleibende Navigationselemente haben für Benutzer von Screenreader-Programmen einen gewissen Nachteil: Jede Menüoption wird auf jeder Seite erneut laut vorgelesen. Auf der ersten Seite, die auf einer Website besucht wird, ist das noch nützlich, aber auf den folgenden Seiten nur noch zeitraubend und nervig.

Bei einer persistenten Navigation mit vielen Optionen könnte daher vor dem Navigationselement ein Link »Navigation überspringen« eingefügt werden, sodass Screenreader-Benutzer gleich zum Hauptinhalt der Seite springen können. Ein solcher Link kann mit CSS so codiert werden, dass er nur bei Screenreader-Pro-grammen wiedergegeben wird.

Ein anderer Ansatz für tastaturbasierte Browser besteht darin, das Navigationselement am Ende der Seite zu platzieren und am Anfang der Seite einen Link »Zur Navigation springen« einzusetzen. Am Ende der Navigation würde dann ein Link »Zurück zum Inhalt« ebendahin führen.

Barrierefreiheit

Navigation überspringenGleichbleibende Navigationselemente haben für Benutzer von Screenreader-Programmen einen gewissen Nachteil: Jede Menüoption wird auf jeder Seite erneut laut vorgelesen. Auf der ersten Seite, die auf einer Website besucht wird, ist das noch nützlich, aber auf den folgenden Seiten nur noch zeitraubend und nervig.

Bei einer persistenten Navigation mit vielen Optionen könnte daher vor dem Navigationselement ein Link »Navigation überspringen« eingefügt werden, sodass Screenreader-Benutzer gleich zum Hauptinhalt der Seite springen können. Ein solcher Link kann mit CSS so codiert werden, dass er nur bei Screenreader-Pro-grammen wiedergegeben wird.

Ein anderer Ansatz für tastaturbasierte Browser besteht darin, das Navigationselement am Ende der Seite zu platzieren und am Anfang der Seite einen Link »Zur Navigation springen« einzusetzen. Am Ende der Navigation würde dann ein Link »Zurück zum Inhalt« ebendahin führen.

Page 13: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N94

K O N T E x T N A V I G A T I O N

auch assoziative links oder verwandte links genannt.

Wie der name schon nahelegt, ist die Kontextnavigation situationsbedingt. Sie kann zu ähnlichen Seiten auf derselben hierar-chieebene innerhalb der Website führen, oft aber auch zu anderen inhaltsbereichen, zu anderen Seitentypen oder sogar zu anderen Websites.

im allgemeinen befindet sich die Kontextnavigation sehr nahe am inhalt der Seite. dadurch entsteht eine sehr starke Verbin-dung zwischen der Bedeutung des textes und den verlinkten Seiten. es gibt zwei typische anordnungen von Kontextnaviga-tion auf einer Seite (abbildung 4-8):

Eingebettete Navigation

in den inhalt eingebettete links, meist einfache text-links.

Verwandte Links

Separater abschnitt mit links, meist am ende oder neben dem Seiteninhalt.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit.Pellente squenec velit non felultrices iaculis.Mauris tempuadipisc ing pede. Phas ellusconsectetuer. Nam ut mauris.

eingebettete Navigation

Text

verwandte Links

Hauptnavigation

lokaleNavi-

gation

Lorem ipsum dolor sit amet,consectetuer adipiscing elit.Pellentesque nec velit non felisultrices iaculis. Mauris tempusadipiscing pede. Phasellusc onsect etuer . Nam ut mauris.Etiam sem. Morbi orci. Donecquis nisi non dui malesuadalobortis. Maecenas et sapien.

Text

Hauptnavigation

lokaleNavi-

gationPlacitoPedibusLaude

verwandte Links

Abbildung 4-8 / Zwei Formen von Kontextnavigation: eingebettete links und verwandte links

Falls die navigation in den text eingebettet ist und ein link zu einem anderen inhaltsformat oder zu einer anderen Website führt, kann der Benutzer explizit darauf vorbereitet werden, zum Beispiel durch einen kurzen vorangestellten oder nachgestell-ten text. abbildung 4-9 zeigt eine Seite auf der Website des information architecture institute (www.iainstitute.org). die links im text führen in der regel zu anderen Seiten auf der Website quer durch deren Strukturebenen. der erste link im letzten absatz verweist allerdings auf ein dokument im pdF-Format und der zweite link auf eine andere Website (amazon.com).

Page 14: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

95N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-9 / eingebettete Kontextnavigation auf der Website des information architecture institute

Für das zielgerichtete Suchen ist die Kontextnavigation nicht gut geeignet, dafür umso mehr für indirektes Suchen und entde-cken von neuen informationen. Unternehmen nutzen Kontextlinks gerne als gelegenheit für zusätzliche Verkäufe. produkt-seiten auf e-Commerce-Websites haben daher oft links zu verwandten produkten oder dienstleistungen.

Verwandte links werden auch auf nachrichten-Websites sehr wirksam eingesetzt und ermöglichen den lesern, direkt von einem artikel zu verwandten artikeln zu gelangen. So endet zum Beispiel jeder artikel auf der Website der Washington Post (www.washingtonpost.com) mit einem abschnitt mit verwandten links (siehe abbildung 4-10), der aus zwei teilen besteht:

links zu ein paar artikeln, die mit dem thema des aktuellen artikels verwandt sind. mit dem letzten link können Benutzer nach noch mehr artikeln zu diesem thema suchen.

links zu den vier meistgelesenen artikeln aus derselben Kategorie wie der aktuelle artikel (hier Sport). mit dem letzten link kann man sich die 35 meistgelesenen artikel dieser Kategorie anzeigen lassen.

Barrierefreiheit

Eingebettete bzw. assoziative Links müssen auch dann einen Sinn ergeben, wenn sie ohne Kontext vorgelesen werden. Stellen Sie sich eine Seite mit eingebetteten Links wie »Klicken Sie hier für weitere Informationen« vor, bei denen jeweils nur die Wörter »Klicken Sie hier« verlinkt sind. Wenn Benutzer von Screenreader-Programmen die Links auf dieser Seite durchgehen, würden sie immer nur »Klicken Sie hier«, »Klicken Sie hier«, »Klicken Sie hier« usw. hören. Es ist besser, für den Linktext (Ankertext) den ganzen Satz oder einen ausreichend aussagekräftigen Ausdruck zu verwenden.

Barrierefreiheit

Eingebettete bzw. assoziative Links müssen auch dann einen Sinn ergeben, wenn sie ohne Kontext vorgelesen werden. Stellen Sie sich eine Seite mit eingebetteten Links wie »Klicken Sie hier für weitere Informationen« vor, bei denen jeweils nur die Wörter »Klicken Sie hier« verlinkt sind. Wenn Benutzer von Screenreader-Programmen die Links auf dieser Seite durchgehen, würden sie immer nur »Klicken Sie hier«, »Klicken Sie hier«, »Klicken Sie hier« usw. hören. Es ist besser, für den Linktext (Ankertext) den ganzen Satz oder einen ausreichend aussagekräftigen Ausdruck zu verwenden.

Page 15: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N96

Abbildung 4-10 / ein abschnitt mit verwandten links zu einem artikel der Washington Post

A D A P T I V E N A V I G A T I O N

die links auf der rechten Seite der Kontextnavigation in abbildung 4-10 werden in abhängigkeit davon erstellt, welche artikel von den Website-Besuchern am meisten gelesen werden. dies wird adaptive navigation genannt.

adaptive navigation ist eine spezielle Form der Kontextnavigation. ihre links basieren auf einem prozess, der als »Collaborative Filtering« bzw. »Social Filtering« bezeichnet wird. dieser prozess nutzt eine art von ranking-algorithmus, der das Verhalten der Benutzer statistisch auswertet. das prinzip ähnelt dem von traditionellen Bestseller-listen: Wenn ein Buch von vielen men-schen gelesen wird, muss es gut sein. auch die relevanz von links im Web erweist sich als ein soziales phänomen.

adaptive navigation wird vor allem von e-Commerce-Websites gerne zur empfehlung weiterer produkte eingesetzt. das klas-sischste Beispiel hierfür ist das amazon-Feature »Kunden, die diesen artikel gekauft haben, kauften auch ...«. abbildung 4-11 zeigt das Feature in aktion für Jeffrey Zeldmans Buch Designing with Web Standards.2

2 Jeffrey zeldman: Designing with Web Standards, Second Edition (New riders, 2006).

Page 16: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

97N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-11 / adaptive navigation auf amazon.de

hierbei handelt es sich um die passive Form des Collaborative-Filtering: die Website sammelt automatisch daten über die Benutzeraktivitäten auf der Website und erzeugt daraus die linkliste. Bei der aktiven Form müssen die Benutzer explizit eine Wertung über ein produkt, einen dienst oder eine person abgeben. Sie kennen dies von online-magazinen oder anderen Web-sites, die eine liste mit den am höchsten bewerteten artikeln o. Ä. führen. das design-magazin Boxes and Arrows (www.boxesandarrows.com) beispielsweise lässt jeden artikel am ende des textes von den lesern bewerten (abbildung 4-12). Basie-rend auf allen Bewertungen aller artikel, werden dann die am höchsten bewerteten artikel in der adaptiven navigation angezeigt.

Abbildung 4-12 / Bewertung von artikeln auf Boxes and Arrows

mittels Collaborative-Filtering erzeugte linklisten können unter Umständen sehr lang sein, in manchen Fällen nahezu endlos. typischerweise werden aber nur die ersten einträge im Stil einer top-10-liste angezeigt. Falls notwendig, kann ein link einge-fügt werden, der zu einer umfangreicheren Version der liste führt. Wegen der dynamischen natur der adaptiven navigation ist die länge der linktexte in der regel nicht vorauszusagen. daher wird für die adaptive navigation meistens eine vertikale link-liste mit ausreichend platz für jeden linktext verwendet. eine horizontale anordnung der links in einer adaptiven navigation ist nur schwer vorstellbar.

Page 17: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N98

die Benutzernachrichten-Website digg.com zum Beispiel führt in jeder ihrer hauptkategorien eine top-10-liste der am höchs-ten bewerteten news-artikel. Beim design dieser liste musste berücksichtigt werden, dass die länge der artikeltitel sehr stark variieren kann (abbildung 4-13).

Abbildung 4-13 / die top-10-artikel in der Kategorie »technology« auf digg.com

Q u I c K - L I N K S

Quick-links bieten einen schnellen Zugriff auf wichtige inhalte oder Bereiche der Website, die in der globalen navigation mög-licherweise nicht berücksichtigt werden konnten. Quick-links ähneln zwar der Kontextnavigation, beziehen sich aber nicht nur auf den Kontext der aktuellen Seite, sondern auf den Kontext der ganzen Website. im allgemeinen verweisen sie auf häufig genutzte Bereiche der Website, oder sie machen auf Bereiche tiefer in der Website-Struktur aufmerksam. e-Commerce-Sites nutzen Quick-links gerne, um Benutzer zu zusätzlichen Käufen anzuregen.

die Übergänge von einer Seite zur anderen können bei einem Klick auf Quick-links sehr stark variieren. Quick-links tendieren von natur aus dazu herumzuspringen. Sie können zu einer verwandten Sub-Website führen, in einen online-Shopbereich und sogar zu einer völlig anderen Website.

Quick-links erscheinen oft oberhalb oder seitlich des inhalts. auf der homepage könnte ihnen ein eigener, prominenter platz zugewiesen werden, während man sich auf den anschließenden Seiten mit einem drop-down-menü oder einem dynamischen menü für die Quick-links begnügt.

auf der Website der princeton University (www.princeton.edu, abbildung 4-14) werden mit den Quick-links wichtige Bereiche der Website hervorgehoben, die nicht zu den toplevel-navigationsoptionen gehören. auf der in der abbildung gezeigten homepage wäre es allerdings für das schnelle erfassen der vorhandenen optionen besser, alle Quick-links direkt anzuzeigen und sie nicht in einem drop-down-menü zu verstecken.

Page 18: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

99N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-14 / die Quick-links in einem drop-down-menü auf der homepage der princeton University

F O O T E R - N A V I G A T I O N

die Footer-navigation befindet sich – wie der name unschwer vermuten lässt – am ende einer Webseite und besteht üblicher-weise aus text-links. Sie verweisen oft auf einzelne Seiten ohne weitere Website-Strukturebenen unter ihnen – auf Sackgassen sozusagen.

traditionell wird die Footer-navigation vor allem für den Zugriff auf Seiten eingesetzt, die für das hauptanliegen der Website nicht relevant sind, zum Beispiel impressum, Copyright-informationen und die allgemeinen geschäftsbedingungen für die Benutzung der Website. eine solche nutzung der Footer-navigation berücksichtigt in erster linie gesetzliche pflichten der Website-Betreiber und nicht so sehr spezifische Benutzerbedürfnisse. oft ist die Footer-navigation ein Sammelsurium ver-schiedenster inhalte, die sich andernorts nicht einordnen lassen.

die Footer-navigation muss aber nicht zwangsläufig nur auf drittrangige inhalte verweisen. Sie könnte zum Beispiel teile der Sitemap enthalten, wie wir schon in Kapitel 3 gesehen haben. auch verwandte links und Folgeschritte könnten eingebunden werden. eBay.com bietet am ende von artikelseiten beispielsweise einige optionen für diverse Benutzeraktionen (abbildung 4-15). diese führen zu verschiedenen Bereichen quer durch die Website-hierarchie. amazon zeigt am ende von produktseiten sogar einen abschnitt »Kürzlich angesehene artikel« mit den anderen vom Benutzer in der aktuellen Session aufgerufenen produktseiten. Weitere mögliche Bestandteile einer Footer-navigation sind unter anderem Features zum Weiterempfehlen, Kommentieren oder Bewerten der Seite und links zur druckansicht und zu den hilfe-Seiten.

Abbildung 4-15 / Folgeschritte in der Footer-navigation auf eBay.com

Page 19: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N100

der Vorteil der Footer-navigation besteht darin, dass sie dem hauptinhalt bzw. der hauptfunktionalität der Website nicht in die Quere kommt und effizient mit dem verfügbaren Bildschirmplatz umgeht. natürlich ist die Footer-navigation nicht so gut sichtbar wie navigationselemente an anderen Stellen einer Webseite, aber das Scrollen längerer Seiten ist für Webbenutzer auch kein wirkliches problem mehr. Webdesigner können daher von navigationselementen am ende einer Seite durchaus gebrauch machen.3

u T I L I T y - N A V I G A T I O N

die optionen in einer Utility-navigation verbinden den Benutzer mit speziellen Seiten, Werkzeugen und Features, die ihm bei der Benutzung der Website selbst helfen können. Solche Features werden im englischen Utilities genannt und gehören übli-cherweise nicht zur haupthierarchie einer Website. links zum Suchformular oder zu den hilfe-Seiten einer Website zum Bei-spiel sind weder teil der hauptnavigation noch der lokalen navigation. andere Utilities wie das ein- und ausloggen oder das Vergrößern der Schrift verfügen nicht einmal über eine eigene Seite, sondern sind Funktionen der Website.

die links in einer Utility-navigation können zu sehr unterschiedlichen arten von Webseiten oder Funktionen führen, und die Übergänge von einer Seite zur anderen können gravierend ausfallen. innerhalb ein und derselben Utility-navigation kann es zum Beispiel links zum Warenkorb, zum Suchformular und zum impressum der Website geben – alles sehr unterschiedliche Seiten, auf denen sich die Benutzer möglicherweise jedes mal neu orientieren müssen.

Utility-navigation wird meist kleiner als die primären navigationselemente dargestellt und erscheint am anfang oder ende von Webseiten oder seitlich des inhalts. globale Utility-navigation besteht oft aus einfachen text-links. Sie ist mitunter sehr eng mit der hauptnavigation verknüpft und bildet dann mit ihr zusammen einen globalen navigationsbereich, wie wir ihn schon in abbildung 4-2 gesehen haben.

abbildung 4-16 zeigt die Utility-navigation der Vitaminshoppe.com-Website. Sie befindet sich direkt über der hauptnaviga-tionsleiste und beinhaltet ein Such-eingabefeld, Kontaktinformationen, links zur Shopping-Cart und einiges mehr. diese anordnung und gruppierung der Utility-navigation ist recht verbreitet.

Abbildung 4-16 / Utility-navigation auf Vitaminshoppe.com

3 Informationen satt zum Thema Footer-Navigation gibt es in Jeff lashs artikel »More Than Just a Footer«, Digital Web Magazine (Februar 2004).

Page 20: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

101N a� I g a T I o N s K a T e g o r I e N

die optionen in der Utility-navigation müssen nicht zwangsläufig drittrangiger natur sein. der link zum Warenkorb dürfte zum Beispiel auf e-Commerce-Websites eine äußerst wichtige rolle spielen.

es gibt viele verschiedene Formen der Utility-navigation, unter anderem:

links zu externen Websites (extrasite-navigation)

toolboxen

verlinkte logos

Sprachauswahl und länderauswahl

seiteninterne links

Schauen wir uns jede dieser Formen im detail an.

L I N K S Z u E x T E R N E N W E B S I T E S

diese navigationsform führt bei großen Unternehmen mit unterschiedlichen produkt- oder geschäftsbereichen zu anderen Sub-Websites, verwandten Websites oder Firmen. dadurch können die Benutzer direkt zu den anderen Webpräsenzen des Unternehmens gelangen.

Solcherart navigation befindet sich meist rechts oben auf der Webseite und wird gewöhnlich in kleiner Schrift und mit einfachen text-links dargestellt. da diese links zu völlig anderen Websites führen, können die Übergänge in der navigation gravierend sein. die navigationselemente auf den diversen Websites eines Unternehmens sollten daher möglichst konsistent gehalten werden. leider sind diese links nicht immer reziprok, das heißt, dass die Ziel-Website nicht zur verweisenden Website zurücklinkt.

die beiden ausschnitte in abbildung 4-17 zeigen die links zu einigen Subsites von google.de, mit denen Benutzer leicht zwi-schen den verschiedenen diensten von google wechseln können. am ende der linkliste befindet sich eine option, mit der man sich weitere google-dienste anzeigen lassen kann.

Abbildung 4-17 / reziproke links auf den Sub-Websites von google Bilder und google maps

T O O L B O x E N

toolboxen (»Werkzeugkästen«) fassen die optionen einer Website in einem navigationsbereich zusammen, mit denen diverse Funktionen auf der Website ausgeführt werden können. toolboxen können zwar auch links zu inhaltsseiten oder zu naviga-tionsseiten enthalten, in der regel verweisen sie jedoch auf funktionelle Seiten. die Übergänge bei diesem navigationstyp

Page 21: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N102

können daher sehr groß und teilweise gravierend sein. die toolbox auf einer homepage könnte zum Beispiel auf eine Such-funktion, ein Kontaktformular und einen online-Shop verlinken, was vom Benutzer einen höheren orientierungsaufwand verlangt.

abbildung 4-18 zeigt die toolbox-navigationskomponente der britischen Website von toyota (www.toyota.co.uk). Zwischen den links in dieser toolbox gibt es keinen thematischen Zusammenhang. Sie wurden zusammen gruppiert, weil sie alle auf wichtige Funktionen oder Werkzeuge der Website verweisen.

Abbildung 4-18 / die toolbox, die sich auf vielen Seiten der britischen Website von toyota befindet

V E R L I N K T E L O G O S

auf vielen Websites befindet sich auf jeder Seite oben ein logo. inzwischen ist es üblich, das gesamte Bild des logos mit der Startseite (homepage) der Website zu verlinken. da nicht alle Benutzer mit dieser navigationsmöglichkeit vertraut sind, fügen manche Websites unter oder neben dem logo eine explizite navigationsbeschriftung hinzu. im allgemeinen bietet das ver-linkte logo eine leicht erkennbare möglichkeit, um zu einem vertrauten ausgangspunkt zurückzukehren und den navigations-prozess sozusagen »zurückzusetzen«.

da viele Websites in ihrer globalen navigation auch einen link zur homepage einbinden, haben einige Sites das logo und die globale navigation gleich miteinander vereint. apple gehörte zu den ersten, die so vorgegangen sind (abbildung 4-19). auch amazon, toyota und viele andere haben ihr logo in einen tab der hauptnavigation gesetzt. dies ist eine effiziente, platzspa-rende möglichkeit für ein einheitliches visuelles Branding über die ganze Website hinweg.

Page 22: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

103N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-19 / hauptnavigation mit integriertem logo auf apple.de

S P R A c h A u S W A h L

Bei Websites mit Versionen in verschiedenen Sprachen ermöglicht das Sprachauswahl-element den Benutzern, zwischen die-sen Versionen zu wechseln. meist handelt es sich um dieselbe Website, nur in einer anderen Sprache, manchmal aber auch um eine völlig verschiedene Website. die Übergänge zwischen den Sprachversionen können daher sowohl sehr gering als auch recht groß sein. Wenn es nur wenige Sprachen auszuwählen gibt, können einfache links am anfang oder ende der Seite aus-reichend sein.

Internationalisierung

Es ist eine schlechte Angewohnheit, für die Sprachauswahl Nationalflaggen zu verwenden. Viele Sprachen werden in mehr als nur einem Land gesprochen. Für eine Website-Version in portugiesischer Sprache könnte potenziell sowohl die Flagge von Portugal als auch die Flagge von Brasilien eingesetzt werden. Umgekehrt gibt es in zahlreichen Ländern mehr als nur eine offizielle Sprache, wie zum Beispiel in der Schweiz, in Belgien und Kanada.

Außerdem ist zu bedenken, in welcher Sprache die Optionen der Sprachauswahl selbst erscheinen sollen: in ihrer Originalsprache oder in der Sprache der aktuell besuchten Website? Das hat auch Einfluss auf die Rei-henfolge der Optionen. Nehmen wir als Beispiel die deutsche Version einer mehrsprachigen Website. Wenn Benutzer aus Frankreich in der Liste der Sprachauswahl-Optionen nach »Française« suchen, werden sie in der Regel leicht die alphabetisch nahegelegene Option »Französisch« sehen und verstehen. Aber würde ein Benutzer aus Finnland die Option »Finnisch« finden, wenn er nach »Suomi« sucht? Oder würden Spanier die Option »Spanisch« finden, wenn sie nach »Español« suchen? Im Allgemeinen ist es besser, die Sprach-auswahl-Optionen in ihrer Originalsprache darzustellen. Denken Sie bei dieser Vorgehensweise auch an die in anderen Sprachen sehr wichtigen diakritischen Zeichen wie Akzente und andere spezielle Zeichen.

Internationalisierung

Es ist eine schlechte Angewohnheit, für die Sprachauswahl Nationalflaggen zu verwenden. Viele Sprachen werden in mehr als nur einem Land gesprochen. Für eine Website-Version in portugiesischer Sprache könnte potenziell sowohl die Flagge von Portugal als auch die Flagge von Brasilien eingesetzt werden. Umgekehrt gibt es in zahlreichen Ländern mehr als nur eine offizielle Sprache, wie zum Beispiel in der Schweiz, in Belgien und Kanada.

Außerdem ist zu bedenken, in welcher Sprache die Optionen der Sprachauswahl selbst erscheinen sollen: in ihrer Originalsprache oder in der Sprache der aktuell besuchten Website? Das hat auch Einfluss auf die Rei-henfolge der Optionen. Nehmen wir als Beispiel die deutsche Version einer mehrsprachigen Website. Wenn Benutzer aus Frankreich in der Liste der Sprachauswahl-Optionen nach »Française« suchen, werden sie in der Regel leicht die alphabetisch nahegelegene Option »Französisch« sehen und verstehen. Aber würde ein Benutzer aus Finnland die Option »Finnisch« finden, wenn er nach »Suomi« sucht? Oder würden Spanier die Option »Spanisch« finden, wenn sie nach »Español« suchen? Im Allgemeinen ist es besser, die Sprach-auswahl-Optionen in ihrer Originalsprache darzustellen. Denken Sie bei dieser Vorgehensweise auch an die in anderen Sprachen sehr wichtigen diakritischen Zeichen wie Akzente und andere spezielle Zeichen.

Page 23: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N104

A u S W A h L V O N L A N D O D E R R E G I O N

in einigen Fällen unterscheidet sich das inhaltliche angebot einer Website je nach land oder markt. mit einer länderauswahl können sich Benutzer die für ihren markt bestimmte Website-Version anzeigen lassen. dabei sind die Sprachauswahl und die länderauswahl keineswegs dasselbe. So sind zum Beispiel die eBay-Websites in den USa, in großbritannien und in australien alle in englischer Sprache, die angebotenen produkte sind aber auf allen drei Website-Versionen völlig verschieden. auch Unterschiede in den gesetzlichen Bestimmungen der einzelnen länder können sich auf die Website-Versionen auswirken.

große internationale Unternehmen oder institutionen unterhalten möglicherweise dutzende von lokalisierten Websites, was die länderauswahl komplizierter machen kann. in manchen Fällen wird die länderauswahl in Form einer klickbaren Weltkarte angeboten. dies setzt allerdings voraus, dass alle Benutzer das land oder die region, die sie suchen, auf einer Weltkarte auch lokalisieren können. anders als bei der Sprachauswahl können hier durchaus auch nationalflaggen in die lösung einbezogen werden.

Bei der länderauswahl auf der Website von Coca-Cola (www.cocacola.com, abbildung 4-20) wurde ein doppelter ansatz ver-folgt: auf einer Weltkarte lassen sich die regionen anklicken und in der alphabetischen liste auf der rechten Seite können län-der ausgewählt werden.

Abbildung 4-20 / die länderauswahl auf der Coca-Cola-Website

Barrierefreiheit

Beachten Sie bei mehrsprachigen Websites, dass auf jeder einzelnen HTML-Seite die jeweilige Sprache im <head>-Bereich deklariert sein muss, zum Beispiel:

<html lang=”de” xml:lang=”de” xmlns=”http://www.w3.org/1999/xhtml”>

Außerdem müssen Sie daran denken, auch die alt-Texte für Bilder, die Titel von Frames und alle anderen Texte zu übersetzen, die zur besseren Barrierefreiheit in den Code eingebaut worden waren.

Barrierefreiheit

Beachten Sie bei mehrsprachigen Websites, dass auf jeder einzelnen HTML-Seite die jeweilige Sprache im <head>-Bereich deklariert sein muss, zum Beispiel:

<html lang=”de” xml:lang=”de” xmlns=”http://www.w3.org/1999/xhtml”>

Außerdem müssen Sie daran denken, auch die alt-Texte für Bilder, die Titel von Frames und alle anderen Texte zu übersetzen, die zur besseren Barrierefreiheit in den Code eingebaut worden waren.

Page 24: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

105N a� I g a T I o N s K a T e g o r I e N

Internationalisierung

Da in vielen Ländern mehrere Sprachen gesprochen werden, kann es bei mehrsprachigen Websites sinnvoll sein, die Länderauswahl um Optionen zur Sprachauswahl zu ergänzen. Abbildung 4-21 zeigt das Länder-auswahlmenü am Ende der Seiten auf Google News (http://news.google.com). Die Optionen sind jeweils in der Sprache des Landes beschriftet. Bei Ländern mit mehr als einer Sprache gibt es im Menü für jede Sprache eine eigene Option, zum Beispiel »België« und »Belgique« für Belgien und »Canada English« und »Canada Français« für Kanada. Für die USA gibt es sogar auch eine spanische Version: »Estados Unidos«. Das Menü ist nach dem lateinischen Alphabet sortiert; Länder mit Sprachen mit einem anderen Alphabet erscheinen am Ende der Liste in ihren Originalzeichen (und dem englischen Landesnamen in Klammern).

Abbildung 4-21 / länderauswahl auf google news

S E I T E N I N T E R N E L I N K S

auch anker-links oder Sprungmarken genannt.

Bei sehr langen Webseiten kann es sinnvoll sein, seiteninterne links hinzuzufügen, mit denen Benutzer direkt zu bestimmten abschnitten springen können. technisch gesehen wird die Seite dabei einfach automatisch an die entsprechende Stelle nach unten oder oben gescrollt, was den Benutzern das Bewegen auf der Seite erleichtert. es ist üblich, bei den anzuspringenden abschnitten einen reziproken link zum anfang der Seite zu setzen; seiteninterne Verlinkung erscheint daher oft in linkpaaren.

Seiteninterne links bieten aber nicht nur schnellen Zugriff auf die abschnitte einer Seite, sondern oft auch einen guten Über-blick über den gesamtinhalt einer Seite, ähnlich einem inhaltsverzeichnis. Benutzer können sich so viel einfacher einen eindruck vom inhalt der Seite machen, als wenn sie die ganze Seite herunterscrollen müssten, um die einzelnen abschnittsüberschriften lesen zu können. gelegentlich erscheinen seiteninterne links auch als teil der lokalen navigation einer Seite.

die Spezifikationen des World Wide Web Consortium (W3C, www.w3c.org) sind oft sehr lang, wie das Beispiel der Spezifikation CSS 2.1 zeigt (abbildung 4-22). mit den seiteninternen links können Benutzer direkt zu dem gewünschten abschnitt springen, ohne dass eine Seite neu geladen werden müsste.

Page 25: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N106

Abbildung 4-22 / Seiteninterne links für die Spezifikation CSS 2.1 auf der W3C-Website

Seiteninterne links sind aber auch mit einigen potenziellen problemen verbunden:

Browser unterscheiden nicht zwischen seiteninternen links und links zu anderen Seiten. Benutzer rechnen möglicher-weise mit dem Übergang zu einer anderen Seite, wenn sie einen link anklicken, während in Wirklichkeit nur die aktuelle Seite nach unten bewegt wird.

ob seiteninterne links als besuchte links dargestellt werden können, ist abhängig vom linkaufbau und vom benutzten Browser. in einigen Fällen werden seiteninterne links nie als besucht gekennzeichnet, und in anderen Fällen erscheinen alle seiteninternen links als bereits besuchte links.

der einheitlichkeit halber werden meist alle abschnitte einer längeren Seite mit internen links versehen. das betrifft dann allerdings auch den ersten abschnitt der Seite, der aber möglicherweise schon im Browserfenster sichtbar ist, wie das Beispiel der W3C-Seite in abbildung 4-22 zeigt.

Seiteninterne links am anfang einer Seite verbrauchen kostbaren Bildschirmplatz.

Wenn für die gesamte Website festgelegt wurde, dass jeder intern verlinkte abschnitt mit einem reziproken »Zurück nach oben«-link versehen wird, kann es vorkommen, dass diese links auch auf (kurzen) Seiten erscheinen, die nicht scrollen.

Wenn der letzte abschnitt einer Seite recht kurz ist, kann es vorkommen, dass der seiteninterne link die Seite nicht exakt an den abschnittsanfang scrollt. der abschnitt ist dann zwar im Browserfenster sichtbar, aber nicht ganz oben im Browserfenster, sondern eher weiter unten.

Page 26: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

107N a� I g a T I o N s K a T e g o r I e N

seiTenTypen

navigationstyp und Seitentyp sind eng miteinander verbunden. ein bestimmter navigationstyp kann auf verschiedenen Seiten-typen auch einen verschiedenen Zweck haben. Zum Beispiel könnten die Benutzer bei Kontext-links auf der homepage einer Website davon ausgehen, dass sie zu Seiten innerhalb dieser Website führen. auf Seiten tiefer in der Website-Struktur führen die Kontext-links in Form von verwandten links dann aber möglicherweise zu anderen Websites oder anderen inhaltsformaten. Webbenutzer schließen auf den Zweck eines navigationselements zum teil auch vom inhalt der entsprechenden Seite.

Jede Seite auf ihrer Website sollte einen Zweck und existenzgrund haben. Beim Strukturieren einer Website ist es von entschei-dender Bedeutung, den Zweck jeder Seite genau zu bestimmen, um unnötige Strukturebenen zu vermeiden. darüber hinaus sollte den Benutzern die Bestimmung einer Seite unmittelbar klar werden können. Benutzer erkennen unterschiedliche Seiten-typen schnell und leiten daraus annahmen über die navigation auf der Seite ab. das hat auswirkungen darauf, wie die Benut-zer mit der Website interagieren.

traditionell gibt es drei haupttypen von Webseiten:

Navigationsseiten

die Bestimmung von navigationsseiten liegt darin, die Website-Besucher zum gesuchten inhalt zu leiten. Beispiele hierfür sind Startseiten (homepages), landing-pages und galerieseiten.

Inhaltsseiten

die inhaltsseiten sind die Substanz ihrer Website und letztlich der grund, warum ihre Website besucht wird. Beispiele sind artikelseiten und produktseiten.

Funktionelle Seiten

Funktionelle Seiten ermöglichen den Benutzern die ausführung bestimmter handlungen wie die durchführung einer Suche oder das abrufen von e-mails. Beispiele sind unter anderem Formularseiten und applikationsseiten.

in der praxis lassen sich die Webseiten natürlich oft nicht so scharf abgrenzen. die hier genannten Kategorien von Seitentypen verweisen insofern eher auf den hauptzweck einer Seite beziehungsweise auf ihre primäre Bestimmung innerhalb der gesamt-Website.

N A V I G A T I O N S S E I T E N

navigationsseiten leiten die Website-Besucher zu ihrem eigentlichen Ziel: inhaltsseiten und funktionelle Seiten. Sie sind das Sprungbrett in der informationssuche. designer mögen versucht sein, diese Seiten zu reduzieren, um die Benutzer näher am inhalt der Website zu halten. aber navigationsseiten sind nicht einfach nur ein notwendiges Übel. Sie spielen eine wichtige rolle dabei, dem Benutzer einen eindruck zu vermitteln, was ihre Website ihm anzubieten hat. Sie unterstützen verschiedene arten der informationssuche, helfen bei der orientierung und beeinflussen sogar Kaufentscheidungen. Zu den wichtigsten Beispielen für navigationsseiten gehören homepages, landing-pages und galerieseiten.

h O M E P A G E S

homepages bieten einen Überblick über den inhalt einer Website und leiten die Besucher zu den hauptbereichen der Site wei-ter. ein verbreiteter ansatz besteht darin, auch tiefer gelegene navigationsebenen bereits auf der homepage anzuzeigen. dadurch können sich die Benutzer einen besseren Überblick verschaffen und direkt auf inhalte zugreifen, die ansonsten nicht sofort zum Vorschein kommen würden. die homepage der University of California, Berkeley (www.berkeley.edu, abbildung 4-23), ist zum Beispiel einfach ein portal zu allen anderen Seiten und zu den übrigen von der Universität unterhaltenen Websites.

Page 27: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N108

Abbildung 4-23 / die navigation auf der homepage der University of California, Berkeley

eine homepage kann auch textinhalt oder Funktionalität beinhalten, üblicherweise aber nur in verkürzter Form. nachrichten-Websites zum Beispiel geben auf der homepage die ersten Zeilen der top-nachrichten wieder und verlinken dann auf die Sei-ten mit dem vollständigen nachrichtenartikel. e-Commerce-Websites könnten auf der homepage kurz auf ausgewählte produkte hinweisen, jeweils mit einem link zu der produktseite mit den vollständigen details. Und reise-Websites könnten ihren Besuchern ermöglichen, Buchungsvorgänge und andere Funktionen direkt von der homepage aus durchzuführen.

oft wird die homepage als möglichkeit angesehen, produkte zu vermarkten oder den Bekanntheitsgrad eines Unternehmens zu steigern. Website-Besucher mit konkreten informationsbedürfnissen wollen aber möglichst schnell und direkt zu den gesuchten informationen gelangen. aus diesem grund empfiehlt Forrester research, die homepage und die Sitemap zusammenzuführen:

“ Homepages werden oft mit dem allerneuesten Marketing-Jargon vollgestopft, den die Benutzer mitunter nur mühsam entschlüsseln können. Sitemaps dagegen ordnen die Links meist mit einfachen Beschriftungen wie ›Produkte‹, ›Service‹ und ›Hilfe‹ – genau die Art von Sprache, die die Kunden verstehen.�

„Selbst wenn Sie den kostbaren platz auf ihrer homepage nicht für eine ganze Sitemap opfern wollen, sollten Sie immer daran denken, dass ihre Besucher die homepage nichtsdestotrotz als navigationsseite ansehen werden. Stellen Sie auf der home-page die navigations- und orientierungsmöglichkeiten zur Verfügung, die die Benutzer erwarten, oder Sie riskieren, die Besu-cher ihrer Website gleich wieder zu verlieren.

� Iris cremers: »Merge your site Map with your home page«, Forrester report (18. November 2005, frei übersetzt).

Page 28: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

109N a� I g a T I o N s K a T e g o r I e N

L A N D I N G - P A G E S

auch als Kategorieseiten, Überblicksseiten oder abteilungsseiten bekannt.

landing-pages geben einen Überblick über den Website-inhalt innerhalb der einzelnen hauptkategorien. diese entsprechen oft den optionen in der hauptnavigation. dabei kann es sich beispielsweise um die diversen abteilungen eines online-Shops oder die rubriken einer Web-tageszeitung handeln. So wie die homepage einen Überblick über die ganze Website vermittelt, bieten die landing-pages eine Übersicht über den inhalt des jeweiligen teils der Website.

Berücksichtigen Sie dabei, dass Benutzer auf ganz verschiedenen Wegen auf ihre Website gelangen können, zum Beispiel über lesezeichen oder Suchmaschinen. nicht selten bekommen Besucher ihre homepage gar nicht erst zu gesicht, sondern »lan-den« gleich auf einer Seite mitten in der Website-Struktur. aus diesem grund müssen solche landing-pages sowohl lokale als auch globale navigationsmöglichkeiten bereitstellen.

navigationselemente wie dynamische menüs mögen dazu verführen, gänzlich auf landing-pages zu verzichten und die Benut-zer stattdessen direkt zu den detailseiten weiterzuleiten, die den optionen im menü entsprechen. Bedenken Sie aber die nach-teile, die ein Verzicht auf landing-pages mit sich bringt. Vor allem verlieren Sie (und auch wohlgesonnene andere Websites) dann die möglichkeit, direkt auf Überblicksseiten der einzelnen Kategorien bzw. abteilungen einer Website zu verlinken.

gateway, ein großer Versandhändler für Computer und Zubehör in den USa, bietet auf seiner Website (www.gateway.com) eine große produktpalette an. Über die option »Computers« in der hauptnavigation gelangt man zu der entsprechenden landing-page, die einen Überblick über die verfügbaren arten von Computern bietet (abbildung 4-24).

Abbildung 4-24 / landing-page für die Computer-abteilung auf gateway.com

Page 29: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N110

G A L E R I E S E I T E N

galerieseiten sind mit den landing-pages vergleichbar, bieten aber eher einen Überblick über eine bestimmte gruppe von produkten oder inhalten als über eine ganze abteilung. galerieseiten fungieren dabei nicht nur als navigationssprungbrett zu den einzelnen produktseiten: Sie enthalten bereits wichtige informationen für den einkauf und sind für die Benutzer eine mög-lichkeit, die produkte zu vergleichen. Kunden können sich sogar schon von galerieseiten aus für den Kauf eines produkts ent-scheiden und bestätigen dann auf der entsprechenden detaillierten produktseite ihre entscheidung.

abbildung 4-25 zeigt eine galerieseite für damenblusen auf der britischen Website des Versandhändlers lands’ end (www.landsend.co.uk). obwohl sie bereits galeriebilder und preisinformationen enthält, könnten ein paar mehr grundinformationen zu jeder Bluse die Seite etwas effektiver machen. positiv zu bewerten ist, dass fast alle angebote in der Kategorie auf einen Blick erfasst werden können. galerieseiten wie diese sind für e-Commerce-Websites und online-Shops unerlässlich.

Abbildung 4-25 / eine galerieseite mit damenblusen auf landsend.co.uk

S u c h E R G E B N I S S E I T E N

Suchergebnisseiten ähneln galerieseiten, werden aber basierend auf den Suchbegriffen der Benutzer dynamisch erzeugt. die daraus resultierenden ergebnislisten haben nicht unbedingt den Vorteil der maßgeschneiderten Kategorien wie auf galerie-seiten. Je nach Suchbegriff können die ergebnisse mehr als nur einen produkttyp oder inhaltstyp umfassen.

Vergleichen Sie zum Beispiel abbildung 4-25 mit abbildung 4-26, die die ergebnisseite für den Begriff »shirts« auf derselben Website von lands’ end zeigt. hier enthalten die ergebnisse auch männerhemden, und darstellung und Format jedes Sucher-gebnisses unterscheiden sich von der darstellung auf der galerieseite. auf der Suchergebnisseite werden mehr produktdetails angezeigt, dafür bekommen Benutzer aber einen schlechteren Überblick über alle verfügbaren hemden.

Page 30: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

111N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-26 / die ergebnisseite für die Suche nach »shirts« auf landsend.co.uk

Kapitel 11 befasst sich noch ausführlicher mit der navigation auf Suchergebnisseiten.

I N h A L T S S E I T E N

auf informationsreichen Websites sind die inhaltsseiten die eigentlichen Seiten, auf die die Besucher der Website aus sind: texte, artikel, Blogs, nachrichten, Firmenchroniken und Bedienungsanleitungen, um nur einige Beispiele zu nennen. inhalts-seiten sind der grundstock des Webs. entsprechend sollte bei inhaltsseiten der Schwerpunkt auch wirklich auf dem inhalt lie-gen und nicht auf unnötigen grafiken und navigationselementen, die die Seite vollstopfen.

A List Apart, ein führendes englischsprachiges online-magazin für Webdesign und Webentwicklung, widmet den meisten platz auf inhaltsseiten dem artikeltext (www.alistapart.com, abbildung 4-27). die navigation ist auf ein minimum beschränkt und unnötige grafiken sucht man vergebens. dadurch können sich die leser ganz ungestört auf den text konzentrieren.

Page 31: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N112

Abbildung 4-27 / ein Beitrag auf A List Apart

P R O D u K T S E I T E N

produktseiten sind naheliegenderweise für e-Commerce-Websites von entscheidender Bedeutung. typische elemente von produktseiten sind unter anderem:

produktbilder

produktbeschreibung

details

Verwandte produkte

außerdem enthalten produktseiten oft auch mehrere funktionelle elemente wie zum Beispiel:

Zum Warenkorb hinzufügen

auf meinen Wunschzettel

Bild vergrößern

andere Farbe auswählen

einem Freund weiterempfehlen

abbildung 4-28 zeigt ein Beispiel für eine informationsreiche produktseite auf der Website von rei, einem großen online-händler für outdoor-artikel in den USa (www.rei.com). abgesehen von den vielen üblichen elementen einer produktseite, wurde in der mitte der Seite auf gelungene Weise Kontextnavigation eingesetzt, um auf verwandte oder ergänzende produkte hinzuweisen. außerdem kann man sich die produkte in einem separaten pop-up-Fenster von allen Seiten in nahaufnahme ansehen (abbildung 4-29), was der Shopping-erfahrung im outdoor-laden um die ecke nahekommt.

Page 32: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

113N a� I g a T I o N s K a T e g o r I e N

Abbildung 4-28 / eine produktseite für Wanderschuhe auf der rei-Website

Abbildung 4-29 / 3-d-manipulation eines produktfotos auf der rei-Website

Page 33: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N114

F u N K T I O N E L L E S E I T E N

Funktionelle Seiten ermöglichen es den Website-Besuchern, bestimmte aufgaben oder Vorgänge online zu erledigen, zum Beispiel nach einem Begriff zu suchen oder eine e-mail zu versenden. Wie die inhaltsseiten sind auch die funktionellen Seiten oft das eigentliche Ziel eines Website-Besuchers.

Funktionelle Seiten haben oft nur wenig oder gar keinen text und daher auch oft keine eingebettete navigation oder ver-wandte links. Kontextnavigation und Querverlinkungen können auf funktionellen Seiten problematisch sein, da sie den Benutzer von der korrekten, vollständigen abwicklung des aktuellen Vorgangs ablenken können. das kann zum abbruch eines Buchungsvorgangs führen oder zum Verlust aller bisher in einem Formular eingegebenen daten. Versuchen Sie daher auch, die von Benutzern eingegebenen daten so vorzuhalten, dass sie nicht erneut eingegeben werden müssen, wenn ein Benutzer die Seite zwischenzeitlich verlassen oder versehentlich den Formularinhalt gelöscht hat.

S u c h F O R M u L A R E

das Such-Feature einer Website erscheint typischerweise oft als kleines eingabefeld auf der homepage oder gar auf allen Sei-ten der Website. manchmal ist jedoch eine detailliertere Suche notwendig, üblicherweise »erweiterte Suche« genannt. Wie der name impliziert, bietet sie mehr Filtermöglichkeiten als eine einfache Suche. die Benutzerschnittstelle für eine erweiterte Suche verlangt daher auch mehr platz und macht eine separate Seite notwendig: das Suchformular.

die navigation auf einem Suchformular ist oft auf ein minimum beschränkt. denkbar sind links zu Suchtipps und hilfe-Seiten oder links, mit denen optionen ein- und ausgeblendet werden können. Zwei weitere navigationstypen, die bei der Suche behilflich sein können und auf die in Kapitel 11 noch näher eingegangen wird, sind die Wortergänzung und die optionen zur eingrenzung des Suchbereichs. davon abgesehen, ist es auf Suchformularseiten durchaus sinnvoll, hauptnavigationselemente zu minimieren oder ganz zu entfernen.

abbildung 4-30 zeigt die »erweiterte Web-Suche« auf yahoo.de mit ihren vielen speziellen Suchoptionen. die navigation ist auf einige wenige links zu den hilfe-Seiten, zur Suchstartseite und zur yahoo!-homepage beschränkt.

Abbildung 4-30 / der obere teil des Suchformulars von yahoo.de für die erweiterte Suche

Page 34: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

115N a� I g a T I o N s K a T e g o r I e N

B E N u T Z E R F O R M u L A R E

Webformulare ermöglichen, dass Benutzer informationen an eine Website übermitteln und transaktionen ausführen können, zum Beispiel, um ein online-Konto einzurichten, ein persönliches profil anzulegen, sich für einen Job zu bewerben oder ein auto zu reservieren. Wie bei Suchformularen ist auch auf Benutzerformularen von assoziativer navigation abzuraten, um die Benutzer nicht vom vollständigen ausfüllen des Formulars abzulenken. Bei Formularen im Web ist das besonders wichtig, weil hier die eingegebenen daten nur durch einen expliziten Vorgang gespeichert werden können. Wenn Sie auf ihren Formularen die möglichkeit einrichten, während des ausfüllens zu anderen Seiten zu navigieren, sollten Sie sicherstellen, dass die Benutzer-eingaben noch vorhanden sind, wenn der Benutzer zur Formularseite zurückkehrt. es ist extrem nervig, wenn man das ganze Formular noch einmal ausfüllen muss, nachdem man sich die agBs oder einen hinweis zum Formular angesehen hat.

abbildung 4-31 zeigt das anmeldeformular für die Social-networking-Website Facebook (www.facebook.com). die navigation ist auf einige wenige links zu den nutzungsbedingungen, datenschutzbestimmungen, hilfe-Seiten u.a. beschränkt.

Abbildung 4-31 / das registrierungsformular von Facebook

W E B A N W E N D u N G E N

Webanwendungen bezeichnen einen typ von Webseiten, die interaktive Features und Funktionalität bereitstellen, die desk-top-programmen ähnlich sind. Benutzer können auf ihnen die unterschiedlichsten aufgaben erledigen: e-mails schreiben, eine tabellenkalkulation bearbeiten, projekttermine verwalten usw. Je besser und stabiler die Webtechnologien werden, umso mehr Verbreitung werden auch die Webanwendungen finden.

Webbasierte e-mail-dienste sind ein bekanntes und typisches Beispiel. Wahrscheinlich haben auch Sie mindestens einen e-mail-account bei hotmail, yahoo! oder google mail. aber auch fortgeschrittenere Webanwendungen, die die Funktionalität ganzer desktop-programme bereitstellen, finden immer mehr Verbreitung. abbildung 4-32 zeigt eine online-tabellenkalkula-tion, die mit dem kostenlosen Webservice numSum (www.numsum.com) erstellt worden ist. die menüleisten oben ähneln sehr stark der navigation bei Software-programmen. Zusätzlich gibt es oben rechts und unter der tabelle einige links, die zu ande-ren Seiten führen. Falls Benutzer ihre Änderungen noch nicht gespeichert haben, erhalten sie einen Warnhinweis, bevor sie die Seite verlassen können.

Page 35: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N116

Abbildung 4-32 / Beispiel einer online-tabellenkalkulation mit numSum

ausführliche informationen über die navigation bei Webanwendungen finden Sie in Kapitel 13.

S E I T E N L ä N G E

Wann sollten aus einer Seite zwei werden? Werden die Benutzer bereit sein zu scrollen? Je kürzer die Seiten, umso mehr Seiten werden es – und umso mehr Klicks und zu ladende Seiten für die Benutzer. Je länger die Seiten, umso weniger Seiten sind not-wendig – aber die Benutzer müssen mehr scrollen. es gibt keine goldene regel für die beste Seitenlänge, stattdessen spielen viele Faktoren eine rolle:5

die Bildschirmgröße ist ein problem, weil es keine einheitliche Bildschirmgröße gibt, für die man designen kann. Wie viel von einer Webseite tatsächlich im Viewport des Browsers zu sehen ist, variiert je nach Bildschirmauflösung, größe des Browserfensters und anzahl und größe der vom Benutzer verwendeten menüleisten und Sidebars im Browser.

inhalte können eine andere Bedeutung bekommen, wenn sie auf mehrere kleinere Seiten aufgeteilt werden. Stellen Sie sich vor, beim rei-Beispiel in abbildung 4-28 wäre jedes element dieser Seite – das Foto, die produktbeschreibung, die produktdaten, die verwandten produkte usw. – auf einer separaten Seite. die Benutzererfahrung würde eine ganz andere sein. Wenn informationen zusammen dargestellt werden, entsteht ein natürlicher Zusammenhang zwischen den informationsteilen.

5 patrick lynch und sara horton: Web Style Guide, www.webstyleguide.com.

Page 36: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

117N a� I g a T I o N s K a T e g o r I e N

lange texte werden nicht gerne auf dem Bildschirm, sondern lieber gedruckt gelesen. lange textseiten sind akzeptabel, wenn Sie davon ausgehen, dass die Benutzer sie sowieso ausdrucken.

es ist nicht sehr effizient, wenn Benutzer selbst für kleinste happen an inhalt eine Seite herunterladen sollen. mehr informationen pro Seite (z.B. auf längeren Seiten) kann die anzahl der Serveraufrufe reduzieren. aber es gibt lange Seiten und lange Seiten. ab einem bestimmten punkt ist es sinnvoller, große informationsmengen aufzuteilen. ein ganzes Buch zum Beispiel als einzelne Seite bereitzustellen würde zu Serverproblemen führen.

abbildung 4-33 zeigt eine Seite auf der Website des legal information institute of the Cornell law School (www.law.cornell.edu) mit einer gerichtsentscheidung des obersten gerichts der USa. auf dieser Website werden die Fälle im allgemeinen auf einer einzelnen Seite präsentiert. anhand der Scrollbar rechts können Sie erahnen, dass die Seite zig Bildschirme lang ist. der Cha-rakter des Seiteninhalts verlangt jedoch nach einer einzelnen Seite. Bei juristischen nachforschungen im Web müssen die leser das gesamte dokument sehen, selbst wenn sie dann nur einen einzigen Satz für ihre eigene arbeit verwenden. außerdem kann man davon ausgehen, dass die leser die Seite ohnehin zum lesen herunterladen oder ausdrucken werden.

Abbildung 4-33 / die online-Version einer gerichtsentscheidung des obersten gerichts der USa

auch der Seitentyp ist ein wichtiger Faktor bei der Festlegung der Seitenlänge. im allgemeinen sind kurze Seiten am besten, wenn die Seite schnell zu überblicken sein soll oder wenn eine aufgabe mit einer Webanwendung abzuschließen ist. längere Seiten wiederum eignen sich gut für inhalte, deren Zusammenhang deutlich bleiben soll. Website-Besucher profitieren von längeren produktseiten wie der in abbildung 4-28, die einen Überblick bieten und alle für die Kaufentscheidung relevanten informationen bereitstellen.

Page 37: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N118

Zusammenfassung

mehrere navigationselemente kommen auf einer Website zusammen, um ein umfassendes navigationssystem zu bilden. Jeder teil spielt dabei eine unterschiedliche rolle. einige verlinken auf die hauptkategorien einer Website, andere verweisen auf ver-wandte Seiten und wiederum andere ermöglichen den Zugriff auf nützliche Features für die Benutzung der Website, wie zum Beispiel die Website-Suche oder hilfe-Seiten. denken Sie an die drei hauptkategorien der navigation, wenn Sie ihr naviga-tionssystem entwerfen:

die strukturelle navigation besteht aus der hauptnavigation und der lokalen navigation und folgt den Strukturebenen der Website.

die assoziative navigation verlinkt quer durch die Website-Struktur hinweg und schafft dadurch semantische Bezie-hungen zwischen verwandten informationen und inhalten. Beispiele sind die Kontextnavigation und die Quick-links.

die Utility-navigation macht Funktionalitäten einer Website und informationen über die Website selbst verfügbar, wie zum Beispiel die hilfe-Seiten, die Website-Suche, tools und die extrasite-navigation.

Wie die verschiedenen navigationstypen auf einer Seite angeordnet werden, hat große auswirkungen darauf, wie die Benutzer sie wahrnehmen und benutzen. der Zweck eines navigationstyps sollte für eine effiziente Benutzerinteraktion klar und offen-sichtlich sein. Von den links in einer horizontalen navigationsleiste oben auf der Seite erwarten die Benutzer zum Beispiel, dass sie zu den hauptkategorieseiten der Website führen. Werden solche erwartungen beim navigationsdesign ignoriert, können probleme beim orientieren und navigieren entstehen. Weitere aspekte des Seitenlayouts werden in Kapitel 9 behandelt.

die rolle eines navigationselements wird auch vom typ der Seite bestimmt, auf der es erscheinen soll. Berücksichtigen Sie in ihrer arbeit die drei haupttypen:

Navigationsseiten sind das Sprungbrett bei der informationssuche. Sie verweisen die Benutzer auf die inhaltsseiten und die funktionellen Seiten. Beispiele sind die homepage, landing-pages und galerieseiten.

Inhaltsseiten enthalten text, artikel und Bilder. Beispiele sind die produktseiten auf e-Commerce-Websites.

Funktionelle Seiten ermöglichen den Benutzern, bestimmte aufgaben und Vorgänge online abzuwickeln. Beispiele sind Suchformulare, Benutzerformulare und Webanwendungen.

Für einen schlüssigen gesamtfluss innerhalb einer Website sollte jede einzelne Seite auch einen ganz bestimmten primären Zweck haben. Wie dies in der architektur-phase zu berücksichtigen ist, wird in Kapitel 8 behandelt.

Page 38: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

119N a� I g a T I o N s K a T e g o r I e N

ÜBungsfragen

in abbildung 4-34 sehen Sie eine Webseite der tschechischen technischen Universität prag (www.cvut.cz). Zeichnen Sie auf einem Blatt papier eine tabelle mit zwei Spalten und acht nummerierten Zeilen. die Spalten überschreiben Sie mit navigationstyp und navigationselement. tragen Sie dann für alle acht im Screenshot markierten navigationsbestand-teile den navigationstyp ein und welches navigationselement verwendet worden ist.

1

2

3 45

6

7

8

Abbildung 4-34 / eine Webseite der tschechischen technischen Universität prag

ist das die homepage? Woran erkennen Sie, um welchen Seitentyp es sich handeln könnte? Wie würden Sie zurück zur homepage gelangen?

Was denken Sie (auch wenn Sie kein tschechisch verstehen), worum es auf dieser Seite geht? Welche anhaltspunkte haben Sie für ihre annahme?

1.

a)

b)

Page 39: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009

N a� I g a T I o N s T y p e N120

Besuchen Sie eine bekannte Shopping-Website und suchen Sie nach einem produkt, das Sie demnächst zu kaufen beabsichtigen. Finden Sie dieses produkt zunächst durch Stöbern auf der Website und dann mittels der Website-Such-funktion.

notieren Sie bei beiden Vorgehensweisen alle arten von navigationsseiten, auf die Sie stoßen, einschließlich:

homepage

galerieseiten

landing-pages

ist der Zweck jeder dieser Seiten leicht zu erkennen? Was haben die designer getan oder unterlassen, um den Zweck der Seite deutlich zu machen? Was könnten sie besser machen?

identifizieren Sie auf jeder Seite alle vorkommenden navigationstypen. Vergessen Sie auch nicht die Bereiche am ende der Seiten. Wie wird jeder dieser navigationstypen dargestellt? Wie konsistent ist ihre darstellung auf den verschiedenen Seiten?

weiTerfÜhrende liTeraTur

»Navigation Systems«, Kapitel 7 in Information Architecture for the World Wide Web von peter morville und louis rosenfeld (o’reilly, 2006).

dieses Buch ist ein Klassiker der literatur über informationsarchitektur. Kapitel 7 beschreibt ausführlich die verschiedenen navigationstypen. die von den autoren definierten typen unterscheiden sich leicht von denen in meinem Buch, aber die grundlegenden prinzipien sind dieselben. dieses Kapitel enthält auch gute erläuterungen von Sitemaps, Website-indexie-rung, Visualisierung und sozialer navigation.

2.

a)

b)

Page 40: Handbuch der Webnavigation

Dies ist ein A

uszug aus dem B

uch "Handbuch der W

ebnavigation", ISB

N 978-3-89721-865-9

http://ww

w.oreilly.de/catalog/handbuchw

ebger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2009


Top Related