responsive webdesign, navigationskonzepte für mobile devices

102
RESPONSIVE WEBDESIGN Navigationskonzepte für Mobile Devices ...ich bin Peter Rozek, @Webinale 2012

Upload: peter-rozek

Post on 17-Nov-2014

3.978 views

Category:

Design


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

RESPONSIVE WEBDESIGNNavigationskonzepte für Mobile Devices

...ich bin Peter Rozek, @Webinale 2012

RESPONSIVENAVIGATION

Page 2: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

...ich bin Peter Rozek, @Webinale 2012

RESPONSIVENAVIGATION

Page 3: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

...ich bin Peter Rozek, @Webinale 2012

RESPONSIVENAVIGATION

Page 4: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Peter Rozek... bei ecx.io

Page 5: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

1. Was ist responsive Design? ... und was es nicht ist

2. Responsive Navigation Pattern Usability Konventionen

Page 6: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Was ist

RESPONSIVE WEBDESIGN?

Page 7: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Responsive Webdesign ist KEIN mobile Design!

Page 8: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Responsive vs. NativeFlexible vs. Kontext-Sensitiv

Page 9: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

„A flexible grid (width flexible images) that incorporates media queries to create a responsive, adaptive layout.“Ethan Marcotte

Page 10: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Adaptives Layout !

Page 11: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Layout = Design ?

Page 12: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Designer vs. Developer

Page 13: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Responsive Design ist mehr als nur Design...

Page 14: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Responsive ist die Gestaltung von visuellen Verhalten

Page 15: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Mobile Endgeräte unterliegen anderen Interaktionsprinzipien

Page 16: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Konsistentes Design

Page 17: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Konsistentes Design

Der grundlegende Aufbau und Navigationsmechanismen sollen für den Menschen erkennbar bleiben

Page 18: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Gute User Experience und Joy of Use von responsive Design ist abhängig vom Navigationsdesign!

Page 19: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

RESPONSIVENAVIGATION

Page 20: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Skalierbare Navigations PatternEntwurfsmuster (englisch: design patterns) sind bewährte Lösungsschablonen

Page 21: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Inszenierung und InteraktionNavigationsmechanismen brauchen eine Balance zwischen Erkennbarkeit und Funktion.

Page 22: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

„Joy of Use“, das ästetische-emotionale Erlebnis

Page 23: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

„An important function of aesthetics in engineering is the satisfaction of human requirements.“Lavie, T.; Tractinsky, N.

Page 24: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Navigation und Usability

Page 25: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Beispiele zum „mitnehmen“

Page 27: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 28: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 29: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 30: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• Flexibilität und Effizienz• Positionierung• nutzt Device UI

Page 31: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:• nur eine Ebene• braucht Javascript

Page 32: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Fly-out Menühttp://jasonweaver.name/lab/flexiblenavigation/

Page 33: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 34: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 35: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 36: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• bedienbar• Positionierung

Page 37: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:• braucht Javascript• Perfomance

Page 38: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Fly-out Menühttp://www.sony.com

Page 39: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 40: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 41: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 42: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 43: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 44: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• Übersichtlich• Ästhetisches Design• Animation folgt

hierarchischem Aufbau

Page 45: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:Funktioniert nicht mit einem Windows Phone.

Page 46: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Mega-Menüund fancy jQuery Sachenhttp://www.spelsberg.de/

Page 47: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 48: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 49: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 50: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 51: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 52: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 53: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 54: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 55: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 56: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 57: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 58: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 59: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 60: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 61: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 62: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 63: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 64: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• Minimalistisches Design• Positionierung

Page 65: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:Einige Elemente sind schwer zu erkennen

Page 66: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Sprungmarkenund ganz viel fancy stuffhttp://adam.co/

Page 67: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 68: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 69: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 70: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 71: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 72: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• Konsistenz und Standards• Ästhetisches und

minimalistisches Design• Device übergreifend

Page 73: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:• braucht Javascript• Perfomance

Page 74: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Usability-Konventionen für Navigation Iconsconventio = Übereinkunft, Zusammenkunft

Page 75: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Konventionen helfen Nutzern

Page 76: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Konventionen unterstützen Designer und Entwickler

Page 77: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Drei Linien

Page 78: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Drei Linien

Page 79: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Drei Linien Verständlich

Page 80: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Listensymbol

Page 81: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Listensymbol ?

Page 82: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Gridsymbol

Page 83: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Gridsymbol

Page 84: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Gridsymbol nicht eindeutig

Page 85: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Plussymbol

Page 86: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Plussymbol

Page 87: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Plussymbol Symbol besetzt

Page 88: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Wir brauchen Standards für Navigations-Icon• Sichtbarkeit• Verständlichkeit• Konventionen

Page 89: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Konventionen ein Beispiel

Page 90: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Facebook-App

Page 91: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Facebook-App auf dem iPad

Page 92: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

... was hat Barack Obama mit Facebook gemeinsam?

Page 93: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

http://www.barackobama.com

Kampangen-Website

Page 94: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 95: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 96: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 97: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 98: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
Page 99: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Vorteil:• Übersichtlich• Ästhetisches Design• Facebook Konvention

Page 100: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Nachteil:Navigations-Icon ist schwer verständlich

Page 101: RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices

Barack Obama = Yes we can