Navigationsbutton
1. Navigationsbutton »Text«
Der Vorteil von reinen Textbuttons ist, dass man dirtekt weiß – sofern die Bezeichnung eben eindeutig gewählt wurde – was einen bei einem Klick darauf zu erwarten hat. Klickt man auf »Impressum« bekommt man eben die Impressumsinformationen. Aber dabei stößt man unter Umständen schnell an Sprachgrenzen. Was sich über verschiedene Seiten für die jeweiligen Sprachen lösen lässt. Aber auch manche Informationen lassen sich nicht so knapp und eindeutig wie »Impressum« wiedergeben
Grafische Buttons mit piktogrammeartiger Darstellung sind platzsparend und – im Idealfall – international verständlich. Hier hängt jedoch vieles von der visuellen Qualität des Piktogramms und von seiner bisherigen Einführung bei Usern ab. Ein Briefumschlag ist hat zwar kaum etwas mit der realen E-Mail zu tun, ist aber mittlerweile über Jahrzehnte eingeführt und allseits anerkannt. Neue Symbole müssen eindeutiger sein um verstanden zu werden.
3. Kombination beider Darstellungsformen
Verbindung der Vorteile beider Darstellungsformen
4. Kombination von Navigationsbutton mit Audio
Noch selten in der Anwendung, aber man kennt es vom Computer-Interface. Schiebt man eine Datei in den Papierkorb – besser gesagt auf das Papierkorb-Icon – so hört man das Geräusch eines zusammengeknüllten Papierblattes. Hier findet man die Kombination von grafischer, textlicher und auditiver Information.
Ich habe auch noch etwas zusammengetragen - vielleicht ist ja etwas nützliches dabei... :-)
Viele Grüße, chicksatwork
Navigationsbutton
Navigationselemente sollten mühelos und ohne langes nachdenken durch unbekannte Sites navigieren. Dazu müssen sie auf einen Blick aufzufinden sein und zweifelsfrei als Navigationsbutton erkennbar sein.
Übliche Standards für eine Navigation:
- Klare Trennung von Navigation und Inhalt
- Navigationsspalte am linken oder rechten Rand
- Navigationsspalte am Kopf der Seite
Eine gut gestaltete Navigation sollte zudem Antworten auf die
5-W-Fragen geben:
- Wo bin ich?
- Woher komme ich (Wie geht es wieder zurück?)
- Wo ist das was ich suche
- Was gibt es sonst noch?
Insgesamt gilt:
- gute Lesbarkeit und Erkennbarkeit der Einzelelemente
- klare und erkennbare Funktionalität
- Mouse-Over-Effekte sollten mit ausreichend Kontrast angelegt sein
- Farben müssen deutlichen Interaktionscharacter haben
- Cursoränderung für versteckte Navigationstools zur Erleichterung
- Anlegen von einheitlichen Naviagtionselementen führt zur Navigationsgewohnheit und ermöglicht mehr Konzentration auf den Inhalt
- andere Navigationselemente wie Schieberegler, Lautstärkentasten, versteckte Navigationstools oder Spieleelemente usw. müssen so angelegt werden dass sie für ungeübte Benutzer noch anzuwenden sind
Navigationsbutton sollten durch Veränderung signalisieren, dass etwas geschehen ist oder wird. Ein guter Navigationsbutton kennt folgende Zustände, wobei er mindestens 3 haben sollte:
- Normalzustand (a:link) = Verweise zu noch nicht besuchten Seiten
- Rolloverzustand (a:hover) = für Elemente, während der Anwender mit der Maus darüber fährt
- Gedrückter Zustand (a:active) = für gerade angeklickte Elemente
- besuchte Seiten (a:visited) = für Verweise zu bereits besuchten Seiten
- Tabulatoren-Hilfe (a:focus) = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulatoren Taste
Quellen: Kompendium der Mediengestaltung, Selfhtml, Prüfungsbuch Mediengestalter. Einige Textpassagen habe ich zusammengefasst, einige der Einfachheit halber übernommen. :-)