(Conceptual Design) - Navigation Model

[mai-space]

GanttStart: 2020-12-08T17:00:00+01:00
GanttDue: 2020-12-11T17:00:00+01:00

Basierend auf #35 Content Model durchführen

• [x] Draw.io Dokument anlegen

• [x] Cluster aus #35 importieren

• [x] Navigationsbeziehungen zwischen einzelnen Clustern festlegen (OneWay TwoWay Beziehungen und Bezeichnung)

• [x] Draw.io als WS2020_CobanMai_NavigationModel.drawio in Artefakte/NavigationModel/ hochladen

• [x] PDF als WS2020_CobanMai_NavigationModel_v1.pdf in Artefakte/NavigationModel/ hochladen

• [x] Navigationpatterns recherchieren

• [x] Navigationpatterns in den Kommentaren diskutieren

Begründung für Navigation Model hier in die Kommentare

[deryacbn]

Link zum Navigationmodel

[deryacbn]

7 Mobile Navigation Patterns, die mal mehr oder weniger häufig auf mobilen Webseiten anzutreffen sind:

• Hamburger Menu
• Tab Bar
• Priority+ Pattern
• Simple Menu
• Horizontal Scrolling Menu
• Floating Action Button
• Fullscreen Navigation

[deryacbn]

1. Hamburger Menu : Nur durch drei horizontale Striche gekennzeichnet (der „Hamburger“), öffnet sich auf Touch von oben, rechts oder links ein Menü.

Vorteile:

• Kennt jeder
• Platzsparend im Design (daher auch von vielen Nicht-UX-Designern bevorzugt)
• Geeignet für viele Navigationspunkte
• Flexibel

Nachteile:

• Nicht immer selbsterklärend (siehe UX-Tipp)
• Nicht immer gut umgesetzt, z.B. wenn man im offenen Menü scrollt, scrollt man auch auf der Webseite „dahinter“
• Nicht in der Thumb Zone, zudem verstärkt sich der negative Effekt für Rechtshänder, wenn das Hamburger Icon auf der linken Seite positioniert ist (und umgekehrt für Linkshänder)
• Navigation ist nicht „direkt“ sichtbar, erst nachdem man das Hamburger Icon berührt

[deryacbn]

2. Tab Bar - kennt man von Apps: Die Tab Bar ist bei „richtigen“ mobile Apps eigentlich der Standard, auf mobilen Webseiten aber irgendwie der Underdog. Warum das so ist? Ich kann es mir nicht erklären. Wichtige Info jedenfalls: Die Tab Bar erscheint im responsive Design nur bei Mobile, bei Desktop kann die Navigation gewohnt oben stehen. HTML und CSS machen es möglich. Ja, genau, man benötigt noch nicht mal Javascript dafür.

Vorteile:

• Ideal bei 4-5 Navigationspunkten (kombiniert mit dem Priority+ Pattern theoretisch auch mehr möglich)
• Stört beim Scrollen nicht, wenn fixiert
• Alle Navigationspunkte sind „direkt“ sichtbar
• Kombination aus Icon und Text sehr klickstark
• Gewohnt von mobilen „Apps“
• In der Thumb Zone (Icons am Rand eventuell schon schwieriger, aber besser als oben zu erreichen)

Nachteile:

• Eignet sich primär für eine kompakte Navigation (siehe Vorteile)
• Bei mobilen „Webseiten“ sehr selten
• Macht die Navigation sehr prominent, was z.B. bei Landingpages explizit nicht gewünscht sein kann

[deryacbn]

3. Priority+ Pattern - Der Außenseiter

Beim Priority+ Pattern werden bei ausreichend Platz alle Menüpunkte angezeigt. Verkleinert sich der Bildschirm, werden nach und nach (meist von der rechten Seite aus) Menüpunkte ausgeblendet und hinter einem „Mehr“ oder Hamburger Icon „versteckt“.

Vorteile:

• Wichtige Navigationspunkte sind „direkt“ sichtbar (wenn diese möglichst weit links stehen)
• Funktioniert auch mit langen Menüs
• Pattern auch für Desktop verwendbar

Nachteile:

• Nur wenige Menüpunkte werden „direkt“ angezeigt
• Nicht immer eindeutig („Sehe ich schon das ganze Menü?“)
• Relativ komplex in der Umsetzung

[deryacbn]

4. Simple Menu - Das Minimalistische

Das „Simple Menu“, so habe ich es mal getauft, ist ein Nobrainer. Es hat einfach so wenig Menüpunkte, das es sich auch Mobile 1- bis max. 2-zeilig darstellen lässt.

Vorteile:

• Ideal für 2-3 Navigationspunkte
• Einfach, aber effektiv
• Alles direkt anklickbar

Nachteile:

• 2-zeilig nicht mehr ganz so schick
• Funktioniert nicht gut mit mehr als 3 Menüpunkten

[deryacbn]

5. Horizontal Scrolling Menu - Schnell umgesetzt

Das Horizontal Scrolling Menu ist ähnlich dem Simple Menu, kann aber viel mehr Links beinhalten, die dann bei Mobile durch horizontales Scrollen sichtbar werden. Es ähnelt daher dem Priority+ Pattern, nur das hier durch Scrollen die weiteren - -Menüpunkte sichtbar werden.

Vorteile:

• Die ersten Menüpunkte sind „direkt“ sichtbar
• Keine Begrenzung
• Relativ leicht umzusetzen

Nachteile:

• Nur sinnvoll bei voller Breite, z.B. unterhalb des Logos
• Nicht immer klar, dass man Scrollen kann, insbesondere wenn ein Hinweis wie z.B. ein Pfeil fehlt

[deryacbn]

6. Floating Action Button - Kennt man von Google

Google hat mit Material Design den Floating Action Button ins Spiel gebracht. Wie der Name schon sagt, eignet sich das rechts unten floatende Element primär für Aktionen, wie z.B. einen Beitrag teilen. Es ist daher kein Mobile Navigation Pattern für die primäre Navigation, kann aber auch dafür verwendet werden.

Vorteile:

• In der Thumb Zone
• Für den Nutzer immer erreichbar
• Bekannt durch Material Design und diverse Google Produkte

Nachteile:

• Was der Button macht, wird meist erst nach der Berührung klar
• Ein weiteres Element, das den Content verdeckt (z.B. in Kombi mit Tab Bar nicht sinnvoll)
• Für die primäre Navigation weniger geeignet

[deryacbn]

7. Fullscreen Navigation - Old school

Die Fullscreen Navigation bietet auf der Startseite allein oder zu allererst die Navigation. Das macht auf Webseiten Sinn, auf denen neben der Suche Kategorien zum Inhalt führen. Man findet dieses Navigation Pattern häufig in Verzeichnissen oder Onlineshops.

Vorteile:

• Voll und ganz auf die Navigation fokussiert
• Der Nutzer trifft eine Auswahl, damit er passenderen Inhalt angezeigt bekommt
• Thumb Zone freundlich

Nachteile:

• Funktioniert in der Form nur auf einer Start- oder Kategorieseite, nicht auf Inhaltsseiten