Layout Navigation

Layout
Navigation
KP Ludwig John
Layout + Navigation
Papier-Prototypen-Tests
Ergebnisse
KP Ludwig John
Interface design
Ergebnisse Papier-Prototypen-Tests
Wie verliefen die Tests?
Welche Probleme wurden gefunden?
Ergeben sich Notwendigkeiten für
Veränderungen in Struktur oder Benennung?
Auswertung
jetzt
KP Ludwig John
Interface design
Ergebnisse Papier-Prototypen-Tests
Strukturen
zur Auswahl
KP Ludwig John
Interface design
Konzeption einer neuen Site
siehe online Seite
Genralthema
KP Ludwig John
Layout + Navigation
Layout
Navigation
KP Ludwig John
Layout + Navigation
Navigation
+
Usability
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Steve Krug
Erstes Gesetz der Usability (Benutzbarkeit):
Don’t make me think!
Eliminieren möglichst sämtlicher Fragezeichen im Kopf des Nutzers
bezüglich der Bedienung der Webseite.
Webseite soll klar und leicht zugänglich sein.
3 generelle Forderungen zur guten Benutzbarkeit von Webseiten:
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Forderung 1:
Benennungen und Begrifflichkeit:
kurz, prägnant, verständlich
Beispiel: Rubrik “Stellenausschreibung”
Quelle: Krug: Don’t make me think!
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Forderung 2:
Links deutlich herausstellen
Buttons kennzeichnen
,
Buttons als
Link /
Button
?
KP Ludwig John
Startseite
Layout + Navigation
Startseite
Navigation - usabiliity
Forderung 2:
Links deutlich herausstellen
Buttons kennzeichnen
,
Buttons als
Link /
Button
?
KP Ludwig John
Artikel
Anfang
Layout + Navigation
Artikel
Ende
Link / Button?
Startseite
KP Ludwig John
Artikel
Layout + Navigation
Navigation - usabiliity
Forderung 2:
Links deutlich herausstellen
Buttons kennzeichnen
,
Buttons als
Link /
Button
?
Durchgängig gleich kennzeichnen
z.B. durch:
- Schriftschnitt / Farbigkeit
- Symbole
- Position auf Seite
Konsistente Gestaltung
der Interaktionselemente über die gesamte Site
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Forderung 2:
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Forderung 3:
Suche möglichst unkompliziert
zulassen
Eher die Intelligenz des Systems ausbauen,
als dem Nutzer eine Vielzahl von Angaben abverlangen
Beispiele:
KP Ludwig John
Layout + Navigation
Navigation - usabiliity
Forderung 3:
Suche möglichst unkompliziert
zulassen
Eher die Intelligenz des Systems ausbauen,
als dem Nutzer eine Vielzahl von Angaben abverlangen
Liste der ersten Suchergebnisse
KP Ludwig John
Startseite
Layout + Navigation
KP Ludwig John
Mobile Web:
Suche = Kernfunktionalität bei komplexen Sites
Layout
+ Navigation
small
screen
Querformat
Navigation
+
Layout
KP Ludwig John
Layout + Navigation
Navigation - Layout
Zweck der Navigation
Wozu brauchen wir sie?
Welche Funktionen muss sie erfüllen?
• Gesuchtes finden helfen
• leitet uns bei der Bedienung der Seite
• Auskunft geben, wo man sich gerade befindet (Orientierungsfunktion)
• Navigation gibt Überblick über den Inhalt / das Angebot
(was kann ich hier erwarten)
KP Ludwig John
Layout + Navigation
KP Ludwig John
Layout
+ Navigation
SPON
Large Screen
Überblick
über
Gesamtumfang?
KP Ludwig John
Layout
+ Navigation
SPON
Small Screen
Überblick
über
Gesamtumfang
KP Ludwig John
Layout
+ Navigation
SPON
Small Screen
Navigation - Layout
Wie suchen wir?
Analogien
Virtuelle Welt - Physische Welt
Webseite versus Baumarkt
Beispiel:
Besucher sucht eine bestimmte Sache (z.B. Kettensäge)
Wie vorgehen?
KP Ludwig John
Layout + Navigation
Navigation - Layout
Wie suchen wir?
KP Ludwig John
Layout + Navigation
Kettensäge?
Navigation - Layout
Wie suchen wir?
Analogien
Virtuelle Welt - Physische Welt
Webseite versus Baumarkt
2 Herangehensweisen:
Kettensäge?
(Verschiedene Suchende bevorzugen unterschiedliche Methoden)
- Selber Ausschau halten:
Suche der vermutlichen Abteilung (Werkzeuge)
dann: innerhalb der Abteilung die entsprechende Kategorie (Sägen)
dann: entweder es wird gefunden oder Suche beginnt von Neuem
- Jemanden fragen (Suchmaschine)
führt dann ggf. direkt zum richtigen Regal
KP Ludwig John
Layout + Navigation
Navigation - Layout
Wie suchen wir?
Analogien
Virtuelle Welt - Physische Welt
Webseite versus Baumarkt
Beispiel:
Besucher sucht eine bestimmte Sache (z.B. Kettensäge)
Im Vergleich dazu:
Vorgehen auf einer Website:
KP Ludwig John
Layout + Navigation
KP Ludwig John
Quelle: Krug: Don’t make me think!
Layout + Navigation
Navigation - Layout
Suchen auf einer Website:
Neben Analogien auch
signifikante Unterschiede:
• Kein Gefühl für die Größenverhältnisse
möglicherweise bleiben wichtige Teile der
Webseite ungesehen, obwohl sie von Interesse
sein könnten
• kein Gefühl für eine Richtung
Das Gesuchte kann sich überall befinden und
wir können direkt dort hin springen
(insbesondere durch Nutzung von Suchfunktion,
weiter führenden Links, Bookmarks)
• kein Gefühl der räumlichen Orientierung
Kettensäge wird beim nächsten Baumarktbesuch
aufgrund der räumlichen Gegebenheiten
schnell wieder gefunden.
KP Ludwig John
Layout + Navigation
Navigation - Layout
Im Web muss die
diese
Navigation
Orientierungsfunktion übernehmen!
Deshalb:
KP Ludwig John
Layout + Navigation
Navigation - Layout
HOME immer erreichbar machen!
Über HOME kann von jeder Unterseite wieder die Startseite erreicht
und ggf. von vorne begonnen werden.
KP Ludwig John
Layout + Navigation
Konventionen
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
Navigationslemente auch aus anderen Zusammenhängen bereits vertraut:
Buch / Zeitschriften
- Seitenzahlen
- Kapitelüberschriften
- Inhaltsverzeichnis
- Index
Konventionen über Art und Positionierung dieser Navigationselemente
haben sich im Laufe der Zeit - medienspezifisch - entwickelt.
Navigationslemente:
Auffinden an standardisierten Orten
- erleichtert schnelle Orientierung mit einem Minimum an Aufwand
- erleichtert Unterscheidung von allen anderen Inhalten der Publikation
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
Bsp. Straßenschilder
Positionierung und äußere Erscheinung
- an der Straßenecke
- oberhalb des Kopfes (nach oben Schauen, um sie zu finden)
- horizontal angebracht (Lesbarkeit)
- einheitliches Aussehen
Bsp. Hausnummern
- oberhalb oder neben der Eingangstür des Gebäudes
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
Web - wichtige Elemente der Navigation
Welche gibt es?
Generell zu unterscheiden:
-
globale Navigation
steht innerhalb der Seitenstruktur überall gleich zur Verfügung
auch persistente Navigation genannt
-
lokale Navigation
Navigation durch einzelne Rubriken und Unterinhalte
veränderlich, je nach augenblicklichem Kontext
muss nur in bestimmten Teilbereichen angeboten werden
Die einzelnen Elemente
am Beispiel von Spiegel online:
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
global (die gesamte Site betreffend):
- Sitekennung (Logo, Firmenname)
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
global (die gesamte Site betreffend):
- Sitekennung (Logo, Firmenname)
- Rubriken (Politik, Wirtschaft, Kultur)
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
global (die gesamte Site betreffend):
- Sitekennung (Logo, Firmenname)
- Rubriken (Politik, Wirtschaft, Kultur)
- Utilities (Log In, Suchen, RSS-Feed, Einkaufswagen)
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
global (die gesamte Site betreffend):
- Sitekennung (Logo, Firmenname) mit Home-Button-Funktion
- Rubriken (Politik, Wirtschaft, Kultur)
- Utilities (Log In, Suchen, RSS-Feed, Einkaufswagen)
- Name der aktuellen Seite
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
lokal (nur die aktuellen Unterseiten betreffend)
- Untersektionen
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
lokal (nur die aktuellen Unterseiten betreffend)
- Untersektionen
- einzelne Artikel (Seiten)
KP Ludwig John
Layout + Navigation
Konventionen
Globale Navigation persistent
anlegen, also auch auf allen Unterseiten immer und in gleicher Form
zur Verfügung stellen!
KP Ludwig John
Layout + Navigation
Konventionen
Globale Navigation persistent
anlegen, also auch auf allen Unterseiten immer und in gleicher Form
zur Verfügung stellen!
KP Ludwig John
Layout + Navigation
Konventionen
Sitekennung
Wie gehen aktuelle Mobile-Web-Sites
>> nicht Apps! <<
damit um?
- Oben links? (Andere Position? Welche?)
- Mit Home-Button-Funktion belegt?
KP Ludwig John
Layout + Navigation
KP Ludwig John
SPON
Layout + Navigation
Small Screen
Startseite
KP Ludwig John
SPON
Layout + Navigation
Small Screen
Artikel
KP Ludwig John
WIRED
Layout + Navigation
Small Screen
Artikel
Konventionen
Sitekennung
Warum auf jeder Seite anbieten?
- Orientierungsfunktion;
(Bewegung noch in der gewünschten Seitenstruktur bestätigen)
- Belegung mit Home-Funktion hat sich eingebürgert
entspricht deshalb einer allg. Erwartungshaltung
Wo positionieren?
-
oben (entspricht der inhaltlichen Hierarchie)
- im europäischen Sprachraum entsprechend der Leserichtung
meist
links oben (oder Format füllend).
Vgl. Konventionen im arabischer Sprachraum
KP Ludwig John
Layout + Navigation
Konventionen
aljazeera.net (01.12.10)
KP Ludwig John
- Sitekennung mit Homefunktion
oben aber rechts
- Rubriken oben rechts / Suche oben links
Layout + Navigation
Konventionen
Huanqui.com (14.12.11)
KP Ludwig John
- Sitekennung mit Homefunktion
oben links
- Rubriken oben (???) / Suche oben rechts
Layout + Navigation
Konventionen
Sitekennung
Wie kennzeichnen?
Anforderungen wie an ein Markenzeichen / Logo;
soll sich von der übrigen Navigation abheben, deshalb:
•
•
•
•
charakteristische Schriftart
Verwendung von Symbolen / grafischen Elementen
auffallende Größe
in sich geschlossenen Form (Buttonfunktion)
KP Ludwig John
Layout + Navigation
Konventionen
Sektionen / Rubriken
Lokale Navigation
wird oft gemeinsam mit persistenter Navigation Sektionen gruppiert
über:
- Klappmenüs
- kontextabhängige Unterzeile
Wie gehen aktuelle Nachrichtenseiten
(desk top) damit um?
oben? / links? / rechts? / (unten?)
KP Ludwig John
Layout + Navigation
Konventionen
Sektionen / Rubriken
KP Ludwig John
Layout + Navigation
Konventionen
Sektionen / Rubriken
Wie gehen aktuelle Mobile-Web-Sites
>> nicht Apps! <<
damit um?
KP Ludwig John
Layout + Navigation
KP Ludwig John
m.FAZ.net
Startseite 2012
m.FAZ.net
Startseite 2013
Layout + Navigation
KP Ludwig John
m.FAZ.net 2013
Rubriken + Suchfeld
m.FAZ.net
Startseite 2013
Layout + Navigation
KP Ludwig John
m.FAZ.net 2013
Rubriken + Suchfeld
m.FAZ.net 2013
Layout + Navigation
Rubriken + Suchfeld
am Ende der Rubrikenübersicht
Konventionen
Utilities / Specials
(Service -) Angebote, die keiner inhaltlichen Rubrik zuzuordnen sind.
z.B. auch Impressum, Kontakt, Hilfe, FAQs, Site Map, RSS-Feed
Utilities:
- weniger prominent dargestellt, als die Sektionen
- als visuelle Einheit in der persistenten Navigation gruppieren
Positionierung:
- mobile >> drei Balken, bzw. am Ende der Rubriken
- Desktop >> oben (rechts) klein
KP Ludwig John
Layout + Navigation
Konventionen
Utilities / Specials
KP Ludwig John
Layout + Navigation
Konventionen
Benennung der Unterseite (Rubrik)
- wiederum Orientierungsfunktion, auf jeder Seite anbieten!
- Positionierung oberhalb des direkten Seiteninhalts
Quelle: Krug: Don’t make me think!
KP Ludwig John
Layout + Navigation
Konventionen
Benennung der Unterseite (Rubrik)
Seitenbenennung muss identisch sein
mit Benennung geklickter Button!
Quelle: Krug: Don’t make me think!
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
Persistente Navigation
Benennung der Seite (Rubrik)
sueddeutsche.de
Rubrik Kultur
Klick auf: Online-Journalismus / Artikel “Du auch!”
führt zu Seite mit der Überschrift
Online-Journalismus / “Du auch”
KP Ludwig John
Layout + Navigation
Konventionen
Positionierung von Navigationslementen
Persistente Navigation
Benennung der Seite (Rubrik)
sueddeutsche.de
Rubrik Kultur
Klick auf: Online-Journalismus / Artikel “Du auch!”
führt zu Seite mit der Überschrift
Online-Journalismus / “Du auch”
KP Ludwig John
Layout + Navigation
Konsistente
Benennung
KP Ludwig John
m.FAZ.net
Layout + Navigation
Small Screen
Startseite mitte
Konsistente
Benennung
KP Ludwig John
m.FAZ.net
Layout + Navigation
Small Screen
Artikel oben
Konventionen
Kennzeichnung der gegenwärtigen Position
- erweist sich insbesondere auch bei direkter Verlinkung
auf untere Seitenebenen als hilfreich
- Anzeige der Navigationsunterstruktur im oberen Teil der Seite
- in Anlehnung an Hänsel und Gretel
breadcrumbs genannt
Beispiele:
KP Ludwig John
Layout + Navigation
Konventionen
KP Ludwig John
Layout + Navigation
Konventionen
Kennzeichnung der gegenwärtigen Position
breadcrumbs:
• ganz oben platzieren
• zwischen den Levelbezeichnungen
> verwenden
• inzwischen erübrigt sich durch Einhalten dieser medienspezifischen Konventionen die
vorangestellte Textzeile: „Sie befinden sich hier:“
• evtl.
KP Ludwig John
letztes item fett setzen (Name der aktuellen Seite)
Layout + Navigation
Konventionen
Social Media Functions Positionierung und Gestaltung
KP Ludwig John
Artikel
Ende (Icon + Text)
Layout + Navigation
Artikel
Kopf (mittels Icons)
Artikel (Weave)
Ende (Icons)
Zusammenfassung
Forderungen an die
Gestaltung der Navigation
Benennung: kurz, prägnant, verständlich
Stringente Benennung von Links und Inhalten
Links und Buttons klar erkennbar und konsisten gestaltet
Suche anbieten: schnell erreichbar; einfach zu handhaben
Orientierungsfunktion:
Home immer erreichbar machen, erwartungskonform platzieren
Rubriken leicht erreichbar
Desktop: breadcrumbs verwenden
Social Media Funktionen in den einzelnen Artikeln
KP Ludwig John
Layout + Navigation
Weiteres Vorgehen
Entscheiden Sie sich nun definitiv
für eine der erarbeiteten Strukturen.
Entwickeln Sie die Navigationselemente für Ihre Site.
Entwerfen Sie
die Navigationsanordnung Ihrer Site
unter Beachtung der Unterscheidung von
- globaler Navigation
- lokaler Navigation
KP Ludwig John
Layout + Navigation
Nächste Termine
10. Januar 2014
Prof. John
Vortrag Gestaltunghinweise
17. Januar 2014
Prof. John
Diskussion einzelner Entwürfe
Abgabe
bis
27. Januar 2014; 07:00 Uhr:
Funktionierende Webstruktur ins Netz bringen
Link ins Moodle
KP Ludwig John
Layout + Navigation