Cracking Responsive Navigation
-
Upload
adam-beizsley-pycroft -
Category
Design
-
view
245 -
download
2
description
Transcript of Cracking Responsive Navigation
![Page 1: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/1.jpg)
#SWUX
Cracking Responsive Navigation
![Page 2: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/2.jpg)
OUR BENEVOLENT SPONSORS
MASSIVE THANKS TO fOR SPONSORSING TONIGHT’s SWUX.
#SWUX
![Page 3: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/3.jpg)
OUR BENEVOLENT SPONSORS
TRUE ARE HIRING. Uxers, DESIGNERS, DEVELOPERS, PROJECT MANAGERS, COPYWRITERS, PERMENANT OR FREELANCE GET IN TOUCH at Truedigital.co.uk
#SWUX
![Page 4: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/4.jpg)
KATHRYN HEGARTY
UX DESIGNER AT TRUE @kythryn
#SWUX
![Page 5: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/5.jpg)
ADAM B-P
UX Director AT NATURAL INTERACTION @adam_UX
#SWUX
![Page 6: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/6.jpg)
A BRIEF HISTORY OF NAV
#SWUX
![Page 7: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/7.jpg)
HELLO 1997
#SWUX
![Page 8: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/8.jpg)
Feeling LUCKY?
#SWUX
![Page 9: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/9.jpg)
Feeling LUCKY?
#SWUX
![Page 10: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/10.jpg)
Feeling LUCKY?
“Always show the user where they are and where they can go.”
#SWUX
![Page 11: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/11.jpg)
Hansel & Gretel
#SWUX
![Page 12: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/12.jpg)
Hansel & Gretel
#SWUX
![Page 13: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/13.jpg)
TOP & TAIL
#SWUX
![Page 14: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/14.jpg)
TOP & TAIL
#SWUX
![Page 15: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/15.jpg)
AND RELAX
#SWUX
![Page 16: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/16.jpg)
BUT WAIT
#SWUX
![Page 17: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/17.jpg)
HAHAHAHA
#SWUX
![Page 18: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/18.jpg)
ELEMENTS OF RESPONSIVE NAV
#SWUX
![Page 19: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/19.jpg)
HAMBURGER
#SWUX
![Page 20: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/20.jpg)
HAMBURGER
#SWUX
![Page 21: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/21.jpg)
HAMBURGER
#SWUX
![Page 22: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/22.jpg)
HAMBURGER
Norm Cox invented it in the late 70s early 80s.
#SWUX
![Page 23: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/23.jpg)
APP STYLE
#SWUX
![Page 24: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/24.jpg)
TAKEOVER
#SWUX
![Page 25: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/25.jpg)
FILTERS
#SWUX
![Page 26: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/26.jpg)
FILTERS
#SWUX
![Page 27: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/27.jpg)
SEARCH
#SWUX
![Page 28: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/28.jpg)
HICK’S LAW
the more options a user has to choose between and, if they are not grouped, the longer it will take to select an option.
#SWUX
![Page 29: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/29.jpg)
FITTS’S LAW
the further the distance a user has to travel to make a selection, and the smaller the area available to click on, the long time it will take to make a selection.
#SWUX
![Page 30: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/30.jpg)
THE CHALLENGE
#SWUX
![Page 31: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/31.jpg)
THE CHALLENGE
Break INTO GROUPS OF 3 Create a new responsive nav approach on paper.
#SWUX
![Page 32: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/32.jpg)
THE CHALLENGE
QUICK! IN YOUR GROUPS, EACH PICK A ROLE
1. Moderator 2. Note taker 3. CAPYBARA
#SWUX
![Page 33: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/33.jpg)
BUY CAPYBARA UX
![Page 34: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/34.jpg)
CHEAP PLUG
![Page 35: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/35.jpg)
BUY CAPYBARA UX
![Page 36: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/36.jpg)
THE CHALLENGE
QUICK! IN YOUR GROUPS, EACH PICK A ROLE
1. Moderator 2. Note taker 3. GUINEA PIG
#SWUX
![Page 37: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/37.jpg)
THE CHALLENGE
ALL OF THE GUINEA PIGS SWAP GROUPS NOW RUN A QUICK USER TEST AND SEE WHAT YOU LEARN. YOU HAVE 5 EARTH MINUTES.
#SWUX
![Page 38: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/38.jpg)
THE CHALLENGE
WHAT DID YOU FIND OUT?
#SWUX
![Page 39: Cracking Responsive Navigation](https://reader030.fdocuments.us/reader030/viewer/2022020306/555dad5fd8b42a63328b47b2/html5/thumbnails/39.jpg)
ANY QUESTIONS?
#SWUX