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
Slide 32
Slide 32 text
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/
Slide 33
Slide 33 text
@webinterface
This is not your grandma’s
navigation.
http://onelshortofnormal.com/2013/01/26/grandmas-got-a-sassy-new-hairdo/
Slide 34
Slide 34 text
@webinterface
There is a different
between simplicity and
readability.
Slide 35
Slide 35 text
Pro and Cons Hamburger Icon
Understanding
by age group
@webinterface
Using follow
identify
Potential
conflicts with
other system
objects
Slide 36
Slide 36 text
Off-Canvas Menu
@webinterface
Slide 37
Slide 37 text
Complex pages with many
navigation levels.
Cons
Not capture the entire
screen
@webinterface
Pro
Navigation in deeper
levels
Slide 38
Slide 38 text
Guidelines
@webinterface
Slide 39
Slide 39 text
Perceivable
@webinterface
Slide 40
Slide 40 text
To group basic
essentials of the
navigation
conformable,
coherent and clear.
@webinterface https://www.otto.de/
Slide 41
Slide 41 text
@webinterface
Position of the
search field
coherent and clear.
https://www.jab.de/group/
Slide 42
Slide 42 text
@webinterface https://www.jab.de/group/
Slide 43
Slide 43 text
Avoid opposition to
another navigation icons.
@webinterface
Slide 44
Slide 44 text
@webinterface
Slide 45
Slide 45 text
Accounting For Touch
@webinterface
Slide 46
Slide 46 text
@webinterface
Slide 47
Slide 47 text
Close Button
@webinterface
Slide 48
Slide 48 text
Operable
@webinterface
Slide 49
Slide 49 text
Occupy menu items with only one
function.
@webinterface
Slide 50
Slide 50 text
By complex
navigation
Direct entry
into sublevels
@webinterface https://www.otto.de/
Slide 51
Slide 51 text
@webinterface
Slide 52
Slide 52 text
@webinterface https://www.jab.de/group/
Slide 53
Slide 53 text
Help your
users:
Auto scroll to
sublevels.
@webinterface https://www.otto.de/
Slide 54
Slide 54 text
Offer clear and
finger-friendly links.
@webinterface http://www.zeit.de/index
Slide 55
Slide 55 text
Delay
@webinterface
Slide 56
Slide 56 text
@webinterface
Slide 57
Slide 57 text
@webinterface
Slide 58
Slide 58 text
Web Accessibility Standards
@webinterface
Keyboard focusable and operable
Clear indication a focus
Works without Javascript
Slide 59
Slide 59 text
@webinterface
UI, Data continuity and Layout
Adaptability
Coherence
Slide 60
Slide 60 text
Make sure that the content
structure of navigation should be
the same and accessible in
multiple places.
@webinterface
Slide 61
Slide 61 text
Clear and visual
hierarchy
@webinterface https://www.otto.de/
Slide 62
Slide 62 text
@webinterface
Slide 63
Slide 63 text
@webinterface
Slide 64
Slide 64 text
Adapt your design to the space
available.
@webinterface
Slide 65
Slide 65 text
@webinterface
Some designs works
on all screen sizes.
http://www.zeit.de/index
Slide 66
Slide 66 text
Content continuity
@webinterface
Slide 67
Slide 67 text
Prioritize your content
@webinterface
Slide 68
Slide 68 text
Show high priority
content at the top.
@webinterface http://www.worldwildlife.org/
Slide 69
Slide 69 text
Guidance notes
@webinterface
Slide 70
Slide 70 text
Focus on the position
@webinterface http://www.zeit.de/index
Slide 71
Slide 71 text
Breadcrumb for
quick orientation
@webinterface https://www.jab.de/group/
Slide 72
Slide 72 text
@webinterface
Slide 73
Slide 73 text
Headings should be clearly, visible
and address the content.
@webinterface
Slide 74
Slide 74 text
Future continuity
@webinterface
Slide 75
Slide 75 text
Progressive enhancement
@webinterface
Web Standards
Web Accessibility
Slide 76
Slide 76 text
@webinterface
Resumé
Slide 77
Slide 77 text
The vehicle that takes
users where they want
to go.
@webinterface
Slide 78
Slide 78 text
@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.“
Slide 79
Slide 79 text
Designing for
Humans
not Devices.
@webinterface
Slide 80
Slide 80 text
Design the interaction
behaviors
not the devices!
@webinterface
Slide 81
Slide 81 text
„Design the Priority
not the Layout!“
@webinterface
Ethan Marcotte