responsive webdesign, navigationskonzepte für mobile devices
Post on 17-Nov-2014
3.978 Views
Preview:
DESCRIPTION
TRANSCRIPT
RESPONSIVE WEBDESIGNNavigationskonzepte für Mobile Devices
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
...ich bin Peter Rozek, @Webinale 2012
RESPONSIVENAVIGATION
Peter Rozek... bei ecx.io
1. Was ist responsive Design? ... und was es nicht ist
2. Responsive Navigation Pattern Usability Konventionen
Was ist
RESPONSIVE WEBDESIGN?
Responsive Webdesign ist KEIN mobile Design!
Responsive vs. NativeFlexible vs. Kontext-Sensitiv
„A flexible grid (width flexible images) that incorporates media queries to create a responsive, adaptive layout.“Ethan Marcotte
Adaptives Layout !
Layout = Design ?
Designer vs. Developer
Responsive Design ist mehr als nur Design...
Responsive ist die Gestaltung von visuellen Verhalten
Mobile Endgeräte unterliegen anderen Interaktionsprinzipien
Konsistentes Design
Konsistentes Design
Der grundlegende Aufbau und Navigationsmechanismen sollen für den Menschen erkennbar bleiben
Gute User Experience und Joy of Use von responsive Design ist abhängig vom Navigationsdesign!
RESPONSIVENAVIGATION
Skalierbare Navigations PatternEntwurfsmuster (englisch: design patterns) sind bewährte Lösungsschablonen
Inszenierung und InteraktionNavigationsmechanismen brauchen eine Balance zwischen Erkennbarkeit und Funktion.
„Joy of Use“, das ästetische-emotionale Erlebnis
„An important function of aesthetics in engineering is the satisfaction of human requirements.“Lavie, T.; Tractinsky, N.
Navigation und Usability
Beispiele zum „mitnehmen“
Dropdownhttp://css-tricks.com/convert-menu-to-dropdown/http://www.fivesimplesteps.com/
Vorteil:• Flexibilität und Effizienz• Positionierung• nutzt Device UI
Nachteil:• nur eine Ebene• braucht Javascript
Fly-out Menühttp://jasonweaver.name/lab/flexiblenavigation/
Vorteil:• bedienbar• Positionierung
Nachteil:• braucht Javascript• Perfomance
Vorteil:• Übersichtlich• Ästhetisches Design• Animation folgt
hierarchischem Aufbau
Nachteil:Funktioniert nicht mit einem Windows Phone.
Mega-Menüund fancy jQuery Sachenhttp://www.spelsberg.de/
Vorteil:• Minimalistisches Design• Positionierung
Nachteil:Einige Elemente sind schwer zu erkennen
Vorteil:• Konsistenz und Standards• Ästhetisches und
minimalistisches Design• Device übergreifend
Nachteil:• braucht Javascript• Perfomance
Usability-Konventionen für Navigation Iconsconventio = Übereinkunft, Zusammenkunft
Konventionen helfen Nutzern
Konventionen unterstützen Designer und Entwickler
Drei Linien
Drei Linien
Drei Linien Verständlich
Listensymbol
Listensymbol ?
Gridsymbol
Gridsymbol
Gridsymbol nicht eindeutig
Plussymbol
Plussymbol
Plussymbol Symbol besetzt
Wir brauchen Standards für Navigations-Icon• Sichtbarkeit• Verständlichkeit• Konventionen
Konventionen ein Beispiel
Facebook-App
Facebook-App auf dem iPad
... was hat Barack Obama mit Facebook gemeinsam?
Vorteil:• Übersichtlich• Ästhetisches Design• Facebook Konvention
Nachteil:Navigations-Icon ist schwer verständlich
Barack Obama = Yes we can
Fragen ?
twitter: @webinterfaceE-Mail: peter.rozek@ecx.io
http://www.flickr.com/photos/markushuck/3263065399/http://www.flickr.com/photos/7187533724_035e67fa7c_b
top related