Responsive Navigation Patterns

UX and

Guidelines@webinterface

UX Congress 2015

PETER ROZEKWork by ecx.io (Digital Agency)

SKILLS: UX

Usability Accessibility

Frontend

@webinterface

Users have a goal and are on a mission.

@webinterface

Focus

@webinterface

@webinterface

Responsive Navigation is more than one Content, Context or Component.

Bildnachweis: bradfrost.com@webinterface

@webinterface

49% use there Mobilephone everyday and everytime.

Paradigm change in the interaction.

@webinterface

http://www.digibarn.com/collections/screenshots/xerox-star-8010/@webinterface

@webinterface

@webinterface http://www.ubergizmo.com/2007/05/palm-unveils-new-bluetooth-keyboard/

@webinterface

2007

@webinterface

2010

Detachment of the GUI with their desktop metaphors.

@webinterface

@webinterface

See, point and clickGUI

To intuit usableNUI

@webinterface

Desktop metaphorGUI

StraightNUI

NUI:

@webinterface

Usability = Time saving

@webinterface

Responsive Navigation is the intersection from GUI and NUI.

Usability problems?

@webinterface

52% Users have a bad experience

57,9% Sites are confusing

36,4% Not usable

(Quelle: BVDW 2013)

@webinterface http://www.bvdw.org/

Help your users

@webinterface

love there usersbecause there arepeople

@webinterface

Respect

Design the Priority

@webinterface

„Don’t make me think.“Steve Krug

@webinterface

@webinterface

Using follow identify

false

true

Responsive Navigation Patterns…… Eierlegende Wollmilchsau?

Bildnachweis: de.wikipedia.org@webinterface

Hamburger Icon

@webinterface

@webinterface

„Do people understand the hamburger icon used for mobile navigation menus?“Luke Wroblewski, @lukew

@webinterface

A/B Testing Hamburger Icon

http://exisweb.net/mobile-menu-abtest@webinterface

12.684 308

12.660 347 +12,9%

12.900 331 +5,7%

13.017 246 -22.2%

Visitors Conversions Results

Menu

Menu

Menu

http://exisweb.net/mobile-menu-abtest@webinterface

Understood Did not understand

@webinterface

80,6 % 19,4 %

52,4 % 47,6 %

18-44

45-62

Understanding by age group

http://www.catalystnyc.com/2015/02/navigating-mobile-hamburger-menu-anyone-get/

@webinterface

This is not your grandma’s navigation.

http://onelshortofnormal.com/2013/01/26/grandmas-got-a-sassy-new-hairdo/

@webinterface

There is a different between simplicity and readability.

Pro and Cons Hamburger Icon

Understanding by age group

@webinterface

Using follow identify

Potential conflicts with other system

objects

Off-Canvas Menu

@webinterface

Complex pages with many navigation levels.

ConsNot capture the entire

screen

@webinterface

ProNavigation in deeper

levels

Guidelines

@webinterface

Perceivable

@webinterface

To group basic essentials of the navigation conformable, coherent and clear.

@webinterface https://www.otto.de/

@webinterface

Position of the search field coherent and clear.

https://www.jab.de/group/

@webinterface https://www.jab.de/group/

Avoid opposition to another navigation icons.

@webinterface

@webinterface

Accounting For Touch

@webinterface

@webinterface

Close Button

@webinterface

Operable

@webinterface

Occupy menu items with only one function.

@webinterface

By complex navigation Direct entry into sublevels

@webinterface https://www.otto.de/

@webinterface

@webinterface https://www.jab.de/group/

Help your users: Auto scroll to sublevels.

@webinterface https://www.otto.de/

Offer clear and finger-friendly links.

@webinterface http://www.zeit.de/index

Delay

@webinterface

@webinterface

@webinterface

Web Accessibility Standards

@webinterface

Keyboard focusable and operable

Clear indication a focus

Works without Javascript

@webinterface

UI, Data continuity and Layout Adaptability

Coherence

Make sure that the content structure of navigation should be the same and accessible in multiple places.

@webinterface

Clear and visual hierarchy

@webinterface https://www.otto.de/

@webinterface

@webinterface

Adapt your design to the space available.

@webinterface

@webinterface

Some designs works on all screen sizes.

http://www.zeit.de/index

Content continuity

Fluidity

@webinterface

Prioritize your content

@webinterface

Show high priority content at the top.

@webinterface http://www.worldwildlife.org/

Guidance notes

„visibility“

@webinterface

Focus on the position

@webinterface http://www.zeit.de/index

Breadcrumb for quick orientation

@webinterface https://www.jab.de/group/

@webinterface

Headings should be clearly, visible and address the content.

@webinterface

Future continuity

@webinterface

Progressive enhancement

@webinterface

Web Standards

Web Accessibility

@webinterface

Resumé

The vehicle that takes users where they want to go.

@webinterface

@webinterface

Brad Frost

https://www.youtube.com/watch?v=nE0CRMm59BY

„Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done.“

Designing forHumansnot Devices.

@webinterface

Design the interaction behaviors not the devices!

@webinterface

„Design the Priority not the Layout!“

@webinterface

Ethan Marcotte

Meta principle Fluid experience

@webinterface

BuildMeasureLearn

@webinterface

Thanks

@webinterface

…dear Ellen

peter.rozek@ecx.io@webinterface