Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
•
7 gostaram•1,364 visualizações
Talk zum Responsive Design Day auf der Webinale 2015 in Berlin.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (7)
Semelhante a Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Semelhante a Responsive Navigation Patterns, UX und Guidelines (Webinale 2015) (20)
Mais de Peter Rozek
Mais de Peter Rozek (20)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
- 1. Responsive Navigation Patterns Peter Rozek@webinterface UX und GuidelinesWebinale 2015, 07. - 11. Juni 2015
- 2. PETER ROZEK Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX Usability Accessibility Frontend Peter Rozek@webinterface
- 3. @webinterface Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
- 4. @webinterface@webinterface Bildnachweis: bradfrost.com Nutzungszenarien haben sich verändert, Navigationsprinzipien müssen für viele Touchpoints ausgelegt sein.
- 5. Früher war man in einer gewohnten Umgebung und Haltung Online. Lean Forward @webinterface
- 6. Heute ist man überall und immer Online. Bildnachweis: Instragram gingergibson 49% Prozent nutzen ihr Smartphone immer und überall @webinterface
- 7. 70% Bahnhof, Haltestellen, Flughafen 92% zu Hause 65% In öffentlichen Verkehrsmitteln 65% In Geschäften, beim einkaufen Auszug: http://de.statista.com/infografik/1083/app--internet-nutzung-von-smartphones/ 60% Im Restaurant/Cafe @webinterface
- 8. @webinterface Bildnachweis: www.cision.com Wünsche der Nutzer gehen über einfache Bedienbarkeit hinaus.
- 9. @webinterface „Don’t make me think.“ Steve Krug
- 11. gulf of execution (Ausführungskluft) gulf of evaluation (Auswertungskluft) Zwei wesentliche Hürden bei der Benutzung. @webinterface
- 12. Usability Probleme? @webinterface Bildnachweis: datenschutzbeauftragter-info.de
- 13. Für Desktop Websites haben sich allgemein gültige Usability- Heuristiken etabliert. @webinterface
- 14. Welche Best Practice haben sich für eine responsive Navigation durchgesetzt? Gibt es bereits verbindliche Usability-Konventionen? @webinterface
- 15. 52% 57,9% 36,4% Der Nutzer machen mindestens einmal schlechte Erfahrungen. Websites sind unübersichtlich. Nicht benutzerfreundlich. (Quelle: BVDW 2013) @webinterface
- 17. Die Eierlegende Wollmilchsau? @webinterface Responsive Navigation Patterns Bildnachweis: de.wikipedia.org
- 22. Navigation? @webinterface Navigation Modell von: mitsubishi-motors.com.au/ MENU
- 23. @webinterface Bildnachweis: cdn.pocket-lint.com Digitale Avantgarde Early Adopter … verstanden!
- 24. @webinterface Bildnachweis: taz.de Digitale Aussenseiter ?
- 25. „Do people understand the „hamburger“ icon used for mobile navigation menus?“ Luke Wroblewski, @lukew @webinterface
- 26. http://exisweb.net/mobile-menu-abtest A/B Testing Hamburger Icon @webinterface
- 27. 12.684 308 12.660 347 +12,9% 12.900 331 +5,7% 13.017 246 -22.2% Besucher Conversions Ergebnis Menü Menü Menü @webinterface http://exisweb.net/mobile-menu-abtest
- 28. 12,9% bessere Conversion bei der Bezeichnung Menü als Hamburger Icon. @webinterface http://exisweb.net/mobile-menu-abtest
- 29. @webinterface Benutzung folgt erkennen Mögliche Konflikte zu anderen Systemobjekten Vorteile/Nachteile von Interaction Pattern:
- 31. • Vorteil: Schrittweise Navigation in tiefere Ebenen ohne die Seite neu zu laden. • Nachteil: Off-Canvas Navigation sollte nicht den gesamten Bildschirm einnehmen. Off-Canvas Menü für Komplexe Seiten mit vielen Navigationsebenen. @webinterface
- 33. @webinterface Off-Canvas Navigation und „Hamburger Icon“ haben sich als Pattern für eine Navigation konventionalisiert.
- 34. Guidelines @webinterface KEEP CALM AND FOLLOW THE Bildnachweis: huber-verlag.de
- 37. 2012.dconstruct.org/ mitsubishi-motors.com.au/ Konkurrenz zu anderen Navigationsicons vermeiden. @webinterface Verständlich und Erwartungskonform Fehlende Abgrenzung
- 38. Flughafen Düsseldorf@webinterface Suche erkennbar positionieren.
- 40. hammer-heimtex.de@webinterface Bieten Sie eine Schließenfunktion durch drücken oder wischen an. Das gilt insbesondere für die Off-Canvas Navigation.
- 42. hammer-heimtex.de Direkten Einstieg in Unterebenen. @webinterface
- 43. hammer-heimtex.de@webinterface Stellen Sie sicher, dass sich der Zurück-Button vorhersehbar verhält. Dies gilt insbesondere für die Drill-down Navigation.
- 44. Unterschiedlche Funktionen Menüpunkte mit nur einer Funktion belegen. @webinterface
- 46. Stellen Sie sicher, dass Links leicht anzuvisieren und zu treffen sind. @webinterface
- 47. @webinterface Eine Instanz, skalierbar und robust in der Technik. <nav class=“mainnav desktop“>…</nav> <nav class=“mainnav tablet“>…</nav> <nav class=“mainnav mobile“>…</nav> <nav class=“mainnav“>…</nav>
- 49. Darstellung „Übereinstimmung zwischen System und Wirklichkeit“ @webinterface
- 51. huk24.de@webinterface Klare Symbolik und visuelle Hierarchie
- 53. Alternative Einstiege @webinterface „Konsistenz aber nicht Konkurrenz“
- 54. Flughafen Düsseldorf@webinterface Konkurrenz zur Hauptnavigation vermeiden.
- 55. @webinterface Wichtige Themen im sichtbaren Bereich anordnen.
- 57. Flughafen Düsseldorf Informieren Sie den Nutzer innerhalb der Navigation wo er sich befindet. @webinterface
- 58. @webinterface Flughafen Düsseldorf Breadcrumb zur Orientierung
- 59. @webinterface Flughafen Düsseldorf Überschriften sollen den Seiteninhalt adressieren.
- 61. @webinterface Ermöglichen sie dem Nutzer eine positive UX und Usability bei der Navigation.
- 62. @webinterface Nutzer erwarten eine konsistente UX und Usability bei der Navigation.
- 65. Vielen Dank und Merci email: peter.rozek@ecx.io Peter Rozek@webinterface Speaker Deck: https://speakerdeck.com/peterrozek Slideshare: http://de.slideshare.net/peterrozek
- 68. Peter Rozek@webinterface Responsive Navigation Patterns UX und Guidelines Peter Rozek, 08.6.2015 Berlin