39
#SWUX Cracking Responsive Navigation

Cracking Responsive Navigation

Embed Size (px)

DESCRIPTION

The slides from the workshop I delivered with Kathyrn Hegarty at SWUX in Bristol on 1/4/2014. The intention was to encourage participants to produce paper prototypes of different ideas around navigation for a 4 tier, retail based information architecture. If you'd like us to deliver the workshop again (or the next evolution of it), somewhere else then please get in touch.

Citation preview

Page 1: Cracking Responsive Navigation

#SWUX

Cracking Responsive Navigation

Page 2: Cracking Responsive Navigation

OUR BENEVOLENT SPONSORS

MASSIVE THANKS TO fOR SPONSORSING TONIGHT’s SWUX.

#SWUX

Page 3: Cracking Responsive Navigation

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

KATHRYN HEGARTY

UX DESIGNER AT TRUE @kythryn

#SWUX

Page 5: Cracking Responsive Navigation

ADAM B-P

UX Director AT NATURAL INTERACTION @adam_UX

#SWUX

Page 6: Cracking Responsive Navigation

A BRIEF HISTORY OF NAV

#SWUX

Page 7: Cracking Responsive Navigation

HELLO 1997

#SWUX

Page 8: Cracking Responsive Navigation

Feeling LUCKY?

#SWUX

Page 9: Cracking Responsive Navigation

Feeling LUCKY?

#SWUX

Page 10: Cracking Responsive Navigation

Feeling LUCKY?

“Always show the user where they are and where they can go.”

#SWUX

Page 11: Cracking Responsive Navigation

Hansel & Gretel

#SWUX

Page 12: Cracking Responsive Navigation

Hansel & Gretel

#SWUX

Page 13: Cracking Responsive Navigation

TOP & TAIL

#SWUX

Page 14: Cracking Responsive Navigation

TOP & TAIL

#SWUX

Page 15: Cracking Responsive Navigation

AND RELAX

#SWUX

Page 16: Cracking Responsive Navigation

BUT WAIT

#SWUX

Page 17: Cracking Responsive Navigation

HAHAHAHA

#SWUX

Page 18: Cracking Responsive Navigation

ELEMENTS OF RESPONSIVE NAV

#SWUX

Page 19: Cracking Responsive Navigation

HAMBURGER

#SWUX

Page 20: Cracking Responsive Navigation

HAMBURGER

#SWUX

Page 21: Cracking Responsive Navigation

HAMBURGER

#SWUX

Page 22: Cracking Responsive Navigation

HAMBURGER

Norm Cox invented it in the late 70s early 80s.

#SWUX

Page 23: Cracking Responsive Navigation

APP STYLE

#SWUX

Page 24: Cracking Responsive Navigation

TAKEOVER

#SWUX

Page 25: Cracking Responsive Navigation

FILTERS

#SWUX

Page 26: Cracking Responsive Navigation

FILTERS

#SWUX

Page 27: Cracking Responsive Navigation

SEARCH

#SWUX

Page 28: Cracking Responsive Navigation

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

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

THE CHALLENGE

#SWUX

Page 31: Cracking Responsive Navigation

THE CHALLENGE

Break INTO GROUPS OF 3 Create a new responsive nav approach on paper.

#SWUX

Page 32: Cracking Responsive Navigation

THE CHALLENGE

QUICK! IN YOUR GROUPS, EACH PICK A ROLE

1.  Moderator 2.  Note taker 3.  CAPYBARA

#SWUX

Page 33: Cracking Responsive Navigation

BUY CAPYBARA UX

Page 34: Cracking Responsive Navigation

CHEAP PLUG

Page 35: Cracking Responsive Navigation

BUY CAPYBARA UX

Page 36: Cracking Responsive Navigation

THE CHALLENGE

QUICK! IN YOUR GROUPS, EACH PICK A ROLE

1.  Moderator 2.  Note taker 3.  GUINEA PIG

#SWUX

Page 37: Cracking Responsive Navigation

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

THE CHALLENGE

WHAT DID YOU FIND OUT?

#SWUX

Page 39: Cracking Responsive Navigation

ANY QUESTIONS?

#SWUX