Layout Navigation. KP Ludwig John. Layout + Navigation

Transkript

1 Layout Navigation

2 Papier-Prototypen-Tests Ergebnisse Interface design

3 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 Interface design

4 Ergebnisse Papier-Prototypen-Tests Strukturen zur Auswahl Interface design

5 Konzeption einer neuen Site siehe online Seite Genralthema

6 Layout Navigation

7 Navigation + Usability

8 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:

9 Navigation - usabiliity Forderung 1: Benennungen und Begrifflichkeit: kurz, prägnant, verständlich Beispiel: Rubrik Stellenausschreibung Quelle: Krug: Don t make me think!

10 Navigation - usabiliity Forderung 2: Links deutlich herausstellen, Buttons als Buttons kennzeichnen Link / Button? Startseite Startseite

11 Navigation - usabiliity Forderung 2: Links deutlich herausstellen, Buttons als Buttons kennzeichnen Link / Button? Artikel Anfang Artikel Ende

12 Link / Button? Startseite Artikel

13 Navigation - usabiliity Forderung 2: Links deutlich herausstellen, Buttons als Buttons kennzeichnen Link / Button? Durchgängig gleich kennzeichnen z.b. durch: - Schriftschnitt / Farbigkeit - Symbole - Position auf Seite Konsistente Gestaltung der Interaktionselemente über die gesamte Site

14 Navigation - usabiliity Forderung 2:

15 Navigation - usabiliity Forderung 3: Suche möglichst unkompliziert zulassen Eher die Intelligenz des Systems ausbauen, als dem Nutzer eine Vielzahl von Angaben abverlangen Beispiele:

16 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 Startseite

17 Mobile Web: Suche = Kernfunktionalität bei komplexen Sites Layout + Navigation small screen Querformat

18 Navigation + Layout

19 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)

20 Layout SPON + Navigation Large Screen

21 Überblick über Gesamtumfang? Layout SPON + Navigation Small Screen

22 Überblick über Gesamtumfang Layout SPON + Navigation Small Screen

23 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?

24 Navigation - Layout Wie suchen wir? Kettensäge?

25 Navigation - Layout Wie suchen wir? Analogien Virtuelle Welt - Physische Welt Webseite versus Baumarkt 2 Herangehensweisen: (Verschiedene Suchende bevorzugen unterschiedliche Methoden) Kettensäge? - 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

26 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:

27 Quelle: Krug: Don t make me think!

28 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.

29 Navigation - Layout Im Web muss die Navigation diese Orientierungsfunktion übernehmen! Deshalb:

30 Navigation - Layout HOME immer erreichbar machen! Über HOME kann von jeder Unterseite wieder die Startseite erreicht und ggf. von vorne begonnen werden.

31 Konventionen

32 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

33 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

34 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:

35 Konventionen Positionierung von Navigationslementen global (die gesamte Site betreffend): - Sitekennung (Logo, Firmenname)

36 Konventionen Positionierung von Navigationslementen global (die gesamte Site betreffend): - Sitekennung (Logo, Firmenname) - Rubriken (Politik, Wirtschaft, Kultur)

37 Konventionen Positionierung von Navigationslementen global (die gesamte Site betreffend): - Sitekennung (Logo, Firmenname) - Rubriken (Politik, Wirtschaft, Kultur) - Utilities (Log In, Suchen, RSS-Feed, Einkaufswagen)

38 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

39 Konventionen Positionierung von Navigationslementen lokal (nur die aktuellen Unterseiten betreffend) - Untersektionen

40 Konventionen Positionierung von Navigationslementen lokal (nur die aktuellen Unterseiten betreffend) - Untersektionen - einzelne Artikel (Seiten)

41 Konventionen Globale Navigation persistent anlegen, also auch auf allen Unterseiten immer und in gleicher Form zur Verfügung stellen!

42 Konventionen Globale Navigation persistent anlegen, also auch auf allen Unterseiten immer und in gleicher Form zur Verfügung stellen!

43 Konventionen Sitekennung Wie gehen aktuelle Mobile-Web-Sites >> nicht Apps! << damit um? - Oben links? (Andere Position? Welche?) - Mit Home-Button-Funktion belegt?

44 SPON Small Screen Startseite

45 SPON Small Screen Artikel

46 WIRED Small Screen Artikel

47 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

48 Konventionen aljazeera.net ( ) - Sitekennung mit Homefunktion oben aber rechts - Rubriken oben rechts / Suche oben links

49 Konventionen Huanqui.com ( ) - Sitekennung mit Homefunktion oben links - Rubriken oben (???) / Suche oben rechts

50 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)

51 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?)

52 Konventionen Sektionen / Rubriken

53 Konventionen Sektionen / Rubriken Wie gehen aktuelle Mobile-Web-Sites >> nicht Apps! << damit um?

54 m.faz.net Startseite 2012 m.faz.net Startseite 2013

55 m.faz.net 2013 Rubriken + Suchfeld m.faz.net Startseite 2013

56 m.faz.net 2013 Rubriken + Suchfeld m.faz.net 2013 Rubriken + Suchfeld am Ende der Rubrikenübersicht

57 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

58 Konventionen Utilities / Specials

59 Konventionen Benennung der Unterseite (Rubrik) - wiederum Orientierungsfunktion, auf jeder Seite anbieten! - Positionierung oberhalb des direkten Seiteninhalts Quelle: Krug: Don t make me think!

60 Konventionen Benennung der Unterseite (Rubrik) Seitenbenennung muss identisch sein mit Benennung geklickter Button! Quelle: Krug: Don t make me think!

61 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

62 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

63 Konsistente Benennung m.faz.net Small Screen Startseite mitte

64 Konsistente Benennung m.faz.net Small Screen Artikel oben

65 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:

66 Konventionen

67 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. letztes item fett setzen (Name der aktuellen Seite)

68 Konventionen Social Media Functions Positionierung und Gestaltung Artikel Ende (Icon + Text) Artikel Kopf (mittels Icons) Artikel (Weave) Ende (Icons)

69 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

70 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

71 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