06 using the elements - skeleton

445
UXD

Upload: joe-natoli

Post on 27-Jan-2015

108 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 06   using the elements - skeleton

UXD

Page 2: 06   using the elements - skeleton

UXD

using the elements:skeleton

Page 3: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 4: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 5: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given form

Page 6: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

Page 7: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

➡ what form will the product take?

Page 8: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

➡ what form will the product take?

➡ how will users move around and do things?

Page 9: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

➡ what form will the product take?

➡ how will users move around and do things?

➡ how will content be presented and manipulated?

Page 10: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

➡ what form will the product take?

➡ how will users move around and do things?

➡ how will content be presented and manipulated?

the skeleton plane is created through interface design, which provides users with the ability to do things.

Page 11: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

function is given formthe skeleton plane focuses on concrete issues of presentation:

➡ what form will the product take?

➡ how will users move around and do things?

➡ how will content be presented and manipulated?

the skeleton plane is created through interface design, which provides users with the ability to do things.

it’s also comprised of navigation design, which provides users with the ability to go places.

Page 12: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 13: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiences

Page 14: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

Page 15: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

➡ rapidly establish the product’s value in the user’s mind

Page 16: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

➡ rapidly establish the product’s value in the user’s mind

➡ lead user toward continuing the experience (and furthering the relationship)

Page 17: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

➡ rapidly establish the product’s value in the user’s mind

➡ lead user toward continuing the experience (and furthering the relationship)

➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship)

Page 18: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

➡ rapidly establish the product’s value in the user’s mind

➡ lead user toward continuing the experience (and furthering the relationship)

➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship)

➡ every click should add immediate value

Page 19: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

enabling positive experiencesour work on the skeleton plane has to enable several key principles of positive user experience:

➡ rapidly establish the product’s value in the user’s mind

➡ lead user toward continuing the experience (and furthering the relationship)

➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship)

➡ every click should add immediate value

➡ every interaction should add positively to the overall experience over time

Page 20: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 21: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 22: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y few

feat

ures

m

any

feat

ures

Page 23: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Ypoor usability good usability

few

feat

ures

m

any

feat

ures

Page 24: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Ypoor usability good usability

few

feat

ures

m

any

feat

ures

Page 25: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

features vs. usability

poor usability good usability

few

feat

ures

m

any

feat

ures

Page 26: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

features vs. usabilityat any given point in time, the number of functions available onscreen has a direct effect on how useful the product is.

poor usability good usability

few

feat

ures

m

any

feat

ures

Page 27: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

features vs. usabilityat any given point in time, the number of functions available onscreen has a direct effect on how useful the product is.

the more functions, the less useful.

poor usability good usability

few

feat

ures

m

any

feat

ures

Page 28: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 29: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventions

Page 30: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionshabit and reflex account for much of our daily interactions.

Page 31: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionshabit and reflex account for much of our daily interactions.

our ability to do anything depends on the accumulation of reflexes, most of which are pretty small.

Page 32: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionshabit and reflex account for much of our daily interactions.

our ability to do anything depends on the accumulation of reflexes, most of which are pretty small.

convention is what allows us to use those reflexes.

Page 33: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionshabit and reflex account for much of our daily interactions.

our ability to do anything depends on the accumulation of reflexes, most of which are pretty small.

convention is what allows us to use those reflexes.

conventions often match our expectations of what something is supposed to do or be like.

Page 34: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionshabit and reflex account for much of our daily interactions.

our ability to do anything depends on the accumulation of reflexes, most of which are pretty small.

convention is what allows us to use those reflexes.

conventions often match our expectations of what something is supposed to do or be like.

Page 35: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventions

Page 36: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionsthe only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so.

Page 37: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionsthe only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so.

Page 38: 06   using the elements - skeleton

UXDdefining the skeleton

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

conventionsthe only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so.

Page 39: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 40: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

interfacedesign

Page 41: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing act

Page 42: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing actsuccess in user interface (UI) design is determined by the degree of balance between visual form & technical function.

Page 43: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing actsuccess in user interface (UI) design is determined by the degree of balance between visual form & technical function.

and that means:

Page 44: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing actsuccess in user interface (UI) design is determined by the degree of balance between visual form & technical function.

and that means:

➡ you have to give people the things they want or need.

Page 45: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing actsuccess in user interface (UI) design is determined by the degree of balance between visual form & technical function.

and that means:

➡ you have to give people the things they want or need.

➡ you have to give it to them when andwhere they want it.

Page 46: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designthe balancing actsuccess in user interface (UI) design is determined by the degree of balance between visual form & technical function.

and that means:

➡ you have to give people the things they want or need.

➡ you have to give it to them when andwhere they want it.

➡ you have to deliver it in a visual format that ensures they can—and want to—access all of it.

Page 47: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

Page 48: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element counts

Page 49: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

Page 50: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

➡ organization of content

Page 51: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

➡ organization of content

➡ layout of the screen

Page 52: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

➡ organization of content

➡ layout of the screen

➡ use of audio and video

Page 53: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

➡ organization of content

➡ layout of the screen

➡ use of audio and video

➡ the ways people use their hands and fingers to move through data

Page 54: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designevery element countsalthough the functionality of an app or site is important, the form used to deliver that functionality is equally important.

➡ organization of content

➡ layout of the screen

➡ use of audio and video

➡ the ways people use their hands and fingers to move through data

no matter how technically superior the code is or how deep its functionality, the bottom line is...

Page 55: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

Page 56: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

an app or site whose interface is difficult to use

Page 57: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

an app or site whose interface is difficult to use won’t be used.

featurefeaturefeaturefeaturefeaturefeaturefeaturefeature

featurefeaturefeaturefeaturefeaturefeaturefeaturefeature

Page 58: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface design

Page 59: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rules

Page 60: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rulesto most people, the UI is the system.

Page 61: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rulesto most people, the UI is the system.

a well designed interface allows people to start using something immediately.

Page 62: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rulesto most people, the UI is the system.

a well designed interface allows people to start using something immediately.

interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will.

Page 63: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rulesto most people, the UI is the system.

a well designed interface allows people to start using something immediately.

interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will.

inappropriate design is the number one killer of great product ideas.

Page 64: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interface designa few ground rulesto most people, the UI is the system.

a well designed interface allows people to start using something immediately.

interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will.

inappropriate design is the number one killer of great product ideas.

it’s better to perfectly meet the needs of the critical few than to poorly meet the needs of many.

Page 65: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 66: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 67: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictablilty

Page 68: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictabliltylabels, instructions, icons, and images can all be used to set expectations about:

Page 69: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictabliltylabels, instructions, icons, and images can all be used to set expectations about:

➡ what to do (touch here!)

Page 70: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictabliltylabels, instructions, icons, and images can all be used to set expectations about:

➡ what to do (touch here!)

➡ what will happen (open this, drag this over there)

Page 71: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictabliltylabels, instructions, icons, and images can all be used to set expectations about:

➡ what to do (touch here!)

➡ what will happen (open this, drag this over there)

➡ where the visitor will go (foster a sense of place)

Page 72: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI designpredictabliltylabels, instructions, icons, and images can all be used to set expectations about:

➡ what to do (touch here!)

➡ what will happen (open this, drag this over there)

➡ where the visitor will go (foster a sense of place)

➡ how the screen will respond (do X and Y will happen)

Page 73: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 74: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistency

core principles of good UI design

Page 75: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

core principles of good UI design

Page 76: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

core principles of good UI design

Page 77: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

➡ familiar meaning & action

core principles of good UI design

Page 78: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

➡ familiar meaning & action

➡ navigational reference points

core principles of good UI design

Page 79: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

➡ familiar meaning & action

➡ navigational reference points

➡ simplifies usability

core principles of good UI design

Page 80: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

➡ familiar meaning & action

➡ navigational reference points

➡ simplifies usability

➡ increases intuitive learning

core principles of good UI design

Page 81: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consistencyusability is improved when similar parts are expressed in similar ways.

functional consistency leverages existing knowledge about how something works.

➡ familiar meaning & action

➡ navigational reference points

➡ simplifies usability

➡ increases intuitive learning

core principles of good UI design

Page 82: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 83: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosure

core principles of good UI design

Page 84: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

core principles of good UI design

Page 85: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

only the necessary or requested information is displayed at any given time.

core principles of good UI design

Page 86: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

only the necessary or requested information is displayed at any given time.

this helps people manage complexity without becoming confused, frustratedor disoriented.

core principles of good UI design

Page 87: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

only the necessary or requested information is displayed at any given time.

this helps people manage complexity without becoming confused, frustratedor disoriented.

Information presented to a person who isn’t interested – or ready to process it– is noise.

core principles of good UI design

Page 88: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

only the necessary or requested information is displayed at any given time.

this helps people manage complexity without becoming confused, frustratedor disoriented.

Information presented to a person who isn’t interested – or ready to process it– is noise.

core principles of good UI design

Page 89: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

progressive disclosureeverything should progress naturally, from simple to complex.

only the necessary or requested information is displayed at any given time.

this helps people manage complexity without becoming confused, frustratedor disoriented.

Information presented to a person who isn’t interested – or ready to process it– is noise.

core principles of good UI design

Page 90: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 91: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitiveness

core principles of good UI design

Page 92: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

core principles of good UI design

Page 93: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

we learn behaviors from experiences across the web, devices, and real-world places and objects.

core principles of good UI design

Page 94: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

we learn behaviors from experiences across the web, devices, and real-world places and objects.

interactions should be easy to learn and easy to remember.

core principles of good UI design

Page 95: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

we learn behaviors from experiences across the web, devices, and real-world places and objects.

interactions should be easy to learn and easy to remember.

➡ ideally people use it once, learnit rapidly, remember it forever

core principles of good UI design

Page 96: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

we learn behaviors from experiences across the web, devices, and real-world places and objects.

interactions should be easy to learn and easy to remember.

➡ ideally people use it once, learnit rapidly, remember it forever

➡ in reality they use it a few times, learn it, and hope they remember it for next time

core principles of good UI design

Page 97: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitivenessintuitive really means “single trial learning.”

we learn behaviors from experiences across the web, devices, and real-world places and objects.

interactions should be easy to learn and easy to remember.

➡ ideally people use it once, learnit rapidly, remember it forever

➡ in reality they use it a few times, learn it, and hope they remember it for next time

core principles of good UI design

Page 98: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 99: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy

core principles of good UI design

Page 100: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy➡ are items that are functionally or

logically connected grouped together visually?

core principles of good UI design

Page 101: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy➡ are items that are functionally or

logically connected grouped together visually?

➡ is the information presented in order of importance to the user?

core principles of good UI design

Page 102: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy➡ are items that are functionally or

logically connected grouped together visually?

➡ is the information presented in order of importance to the user?

➡ does the visual hierarchy on the screen and functional behavior match what the user expects to do first? second? third?

core principles of good UI design

Page 103: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy➡ are items that are functionally or

logically connected grouped together visually?

➡ is the information presented in order of importance to the user?

➡ does the visual hierarchy on the screen and functional behavior match what the user expects to do first? second? third?

➡ is the visual layout consistent with the mental model of the person using it – and is the approach used consistently?

core principles of good UI design

Page 104: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

context & hierarchy➡ are items that are functionally or

logically connected grouped together visually?

➡ is the information presented in order of importance to the user?

➡ does the visual hierarchy on the screen and functional behavior match what the user expects to do first? second? third?

➡ is the visual layout consistent with the mental model of the person using it – and is the approach used consistently?

core principles of good UI design

Page 105: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of good UI design

Page 106: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s law

core principles of good UI design

Page 107: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s lawevery additional choice increases the time required to make a decision.

core principles of good UI design

Page 108: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s lawevery additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

core principles of good UI design

Page 109: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s lawevery additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

“it’s not information overload – it’s filter failure.” - Clay Shirky

core principles of good UI design

Page 110: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s lawevery additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

“it’s not information overload – it’s filter failure.” - Clay Shirky

in the era of infinite choice, people need better filters!

core principles of good UI design

Page 111: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hick’s lawevery additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

“it’s not information overload – it’s filter failure.” - Clay Shirky

in the era of infinite choice, people need better filters!

core principles of good UI design

Page 112: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 113: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation design

navigationdesign

Page 114: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation design

Page 115: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designwhere the sitemap meets design

Page 116: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designwhere the sitemap meets designthe navigational system – along with content and context – should help a visitor understand where they are.

Page 117: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designwhere the sitemap meets designthe navigational system – along with content and context – should help a visitor understand where they are.

navigation design typically starts with a site map.

Page 118: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designwhere the sitemap meets designthe navigational system – along with content and context – should help a visitor understand where they are.

navigation design typically starts with a site map.

Page 119: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation design

Page 120: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’

Page 121: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

Page 122: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

Page 123: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

Page 124: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

Page 125: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

correct answers to all four mean the navigation design:

Page 126: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

correct answers to all four mean the navigation design:

➡ provides a strong sense of place

Page 127: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

correct answers to all four mean the navigation design:

➡ provides a strong sense of place

➡ sets the correct expectations

Page 128: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation designpassing the ‘trunk test’➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

correct answers to all four mean the navigation design:

➡ provides a strong sense of place

➡ sets the correct expectations

➡ makes it possible for people to accurately predict outcomes of interactions

Page 129: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 130: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 131: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want

core principles of navigation design

Page 132: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

core principles of navigation design

Page 133: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

core principles of navigation design

Page 134: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

core principles of navigation design

Page 135: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

➡ use pagination controls to provide:

core principles of navigation design

Page 136: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

➡ use pagination controls to provide:

- location information

core principles of navigation design

Page 137: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

➡ use pagination controls to provide:

- location information

- sense of depth/breadth

core principles of navigation design

Page 138: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

➡ use pagination controls to provide:

- location information

- sense of depth/breadth

- the ability to move around within a large information set

core principles of navigation design

Page 139: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

finding what you want➡ browsing via a navigation system

➡ searching via keywords/phrases

➡ using filters to narrow large lists and sets of information

➡ use pagination controls to provide:

- location information

- sense of depth/breadth

- the ability to move around within a large information set

core principles of navigation design

Page 140: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 141: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depth

core principles of navigation design

Page 142: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

core principles of navigation design

Page 143: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

core principles of navigation design

Page 144: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

core principles of navigation design

Page 145: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

Both provide feedback along with a clear sense of place.

core principles of navigation design

Page 146: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

Both provide feedback along with a clear sense of place.

use indicators and context to provide a sense of place – all elements of the page contribute to this!

core principles of navigation design

Page 147: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

Both provide feedback along with a clear sense of place.

use indicators and context to provide a sense of place – all elements of the page contribute to this!

core principles of navigation design

Page 148: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

Both provide feedback along with a clear sense of place.

use indicators and context to provide a sense of place – all elements of the page contribute to this!

core principles of navigation design

Page 149: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

revealing depthhow can we reveal depth of site content before people navigate?

➡ dynamic sub-menus on main navigation menu (mouseover)

➡ search results: volume, filtering and pagination

Both provide feedback along with a clear sense of place.

use indicators and context to provide a sense of place – all elements of the page contribute to this!

core principles of navigation design

Page 150: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 151: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information scent

core principles of navigation design

Page 152: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information scentpeople typically estimate – based on what they see – how much useful information they’re likely to find on a given path.

core principles of navigation design

Page 153: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information scentpeople typically estimate – based on what they see – how much useful information they’re likely to find on a given path.

after going down the path, they compare the actual outcome with their predictions.

core principles of navigation design

Page 154: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information scentpeople typically estimate – based on what they see – how much useful information they’re likely to find on a given path.

after going down the path, they compare the actual outcome with their predictions.

when a visitor no longer expects to find useful info on the current path, they move to another source or path.

core principles of navigation design

Page 155: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information scentpeople typically estimate – based on what they see – how much useful information they’re likely to find on a given path.

after going down the path, they compare the actual outcome with their predictions.

when a visitor no longer expects to find useful info on the current path, they move to another source or path.

core principles of navigation design

Page 156: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 157: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely direct

core principles of navigation design

Page 158: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

core principles of navigation design

Page 159: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.

core principles of navigation design

Page 160: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.

although nav bars are common, they’re not the only method for finding your way.

core principles of navigation design

Page 161: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.

although nav bars are common, they’re not the only method for finding your way.

search, filters, tags and contextual links can all be used to find information.

core principles of navigation design

Page 162: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.

although nav bars are common, they’re not the only method for finding your way.

search, filters, tags and contextual links can all be used to find information.

core principles of navigation design

Page 163: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the path is rarely directpeople meander and follow links based on contextual relevance, interest, and whim.

when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.

although nav bars are common, they’re not the only method for finding your way.

search, filters, tags and contextual links can all be used to find information.

core principles of navigation design

Page 164: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 165: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labels

core principles of navigation design

Page 166: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labelsrepresentational icons have clear meanings based on their similarity to familiar objects and/or actions.

core principles of navigation design

Page 167: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labelsrepresentational icons have clear meanings based on their similarity to familiar objects and/or actions.

abstract icons typically require context and experience to learn their meanings.

core principles of navigation design

Page 168: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labelsrepresentational icons have clear meanings based on their similarity to familiar objects and/or actions.

abstract icons typically require context and experience to learn their meanings.

➡ how important is it that someone can recognize and act on an icon-based cue?

core principles of navigation design

Page 169: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labelsrepresentational icons have clear meanings based on their similarity to familiar objects and/or actions.

abstract icons typically require context and experience to learn their meanings.

➡ how important is it that someone can recognize and act on an icon-based cue?

➡ is there additional context that tells them what to do or what this is?

core principles of navigation design

Page 170: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

icons and labelsrepresentational icons have clear meanings based on their similarity to familiar objects and/or actions.

abstract icons typically require context and experience to learn their meanings.

➡ how important is it that someone can recognize and act on an icon-based cue?

➡ is there additional context that tells them what to do or what this is?

➡ is there time for them to figure it out?

core principles of navigation design

Page 171: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 172: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation that works

core principles of navigation design

Page 173: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation that worksuse meaningful labels for the navigation, links and buttons.

core principles of navigation design

Page 174: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation that worksuse meaningful labels for the navigation, links and buttons.

reduce memory load by ensuring the navigation and links are visible, findable and informative.

core principles of navigation design

Page 175: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation that worksuse meaningful labels for the navigation, links and buttons.

reduce memory load by ensuring the navigation and links are visible, findable and informative.

reduce cognitive friction by ensuring that people don’t need to study or decode the navigation system.

core principles of navigation design

Page 176: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

navigation that worksuse meaningful labels for the navigation, links and buttons.

reduce memory load by ensuring the navigation and links are visible, findable and informative.

reduce cognitive friction by ensuring that people don’t need to study or decode the navigation system.

you want them to find things quickly and use the information – not spend time looking for it.

core principles of navigation design

Page 177: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 178: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

no scavenger hunts

core principles of navigation design

Page 179: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

no scavenger huntsthe navigation system isn’t a treasure map – so it shouldn’t be cryptic.

core principles of navigation design

Page 180: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

no scavenger huntsthe navigation system isn’t a treasure map – so it shouldn’t be cryptic.

don’t force people to search for or chase the information, features and functionality they need.

core principles of navigation design

Page 181: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

no scavenger huntsthe navigation system isn’t a treasure map – so it shouldn’t be cryptic.

don’t force people to search for or chase the information, features and functionality they need.

bring information and interactivity – contextually meaningful content – to the person when (and how) they need it.

core principles of navigation design

Page 182: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

core principles of navigation design

Page 183: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistent

core principles of navigation design

Page 184: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

core principles of navigation design

Page 185: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

core principles of navigation design

Page 186: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

core principles of navigation design

Page 187: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

core principles of navigation design

Page 188: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

➡ move to a different location

core principles of navigation design

Page 189: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

➡ move to a different location

even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.

core principles of navigation design

Page 190: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

➡ move to a different location

even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.

core principles of navigation design

Page 191: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

➡ move to a different location

even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.

core principles of navigation design

Page 192: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

be consistentuse the same interactions, behaviors and visual styles throughout the site or app.

elements of navigation should never:

➡ appear and disappear

➡ rearrange their order

➡ move to a different location

even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.

core principles of navigation design

Page 193: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 194: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphor

Page 195: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standards

Page 196: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standardsthe appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation).

Page 197: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standardsthe appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation).

those conventions tell us what to look for and where to look when we need them.

Page 198: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standardsthe appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation).

those conventions tell us what to look for and where to look when we need them.

putting them in a standard place lets us locate them quickly.

Page 199: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standardsthe appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation).

those conventions tell us what to look for and where to look when we need them.

putting them in a standard place lets us locate them quickly.

standardizing their appearance makes it easy to pick them out among everything else.

Page 200: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

convention and metaphorsetting (and keeping) standardsthe appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation).

those conventions tell us what to look for and where to look when we need them.

putting them in a standard place lets us locate them quickly.

standardizing their appearance makes it easy to pick them out among everything else.

how frustrating is it when one of these conventions is broken?

Page 201: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 202: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 203: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 204: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

site ID

web conventions

Page 205: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

site ID

search

web conventions

Page 206: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

site ID

searchmain nav

web conventions

Page 207: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

site ID

searchmain nav

site utilities

web conventions

Page 208: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

site ID

searchmain nav

site utilities

shopping cart

web conventions

Page 209: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 210: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

local navigation (things at the current level)

Page 211: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 212: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

page name

web conventions

Page 213: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 214: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Ycurrent / new feature

web conventions

Page 215: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

web conventions

Page 216: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Ysocial proof

web conventions

Page 217: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 218: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the value of conventions

Page 219: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflex

the value of conventions

Page 220: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

the value of conventions

Page 221: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

convention allows us to apply those reflexes in different circumstances.

the value of conventions

Page 222: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

convention allows us to apply those reflexes in different circumstances.

conventions often become standard for devices that have nothing to do with the one which started the idea.

the value of conventions

Page 223: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

convention allows us to apply those reflexes in different circumstances.

conventions often become standard for devices that have nothing to do with the one which started the idea.

your interface design should be consistent with others your users are already familiar with.

the value of conventions

Page 224: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

convention allows us to apply those reflexes in different circumstances.

conventions often become standard for devices that have nothing to do with the one which started the idea.

your interface design should be consistent with others your users are already familiar with.

it should also be consistent with itself.

the value of conventions

Page 225: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

habit and reflexif not for both, we’d accomplish a lot less every day.

convention allows us to apply those reflexes in different circumstances.

conventions often become standard for devices that have nothing to do with the one which started the idea.

your interface design should be consistent with others your users are already familiar with.

it should also be consistent with itself.

the value of conventions

Page 226: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 227: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

using metaphors

Page 228: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obvious

using metaphors

Page 229: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

using metaphors

Page 230: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

using metaphors

Page 231: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

using metaphors

Page 232: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

gaming or entertainment apps benefit greatly from metaphor.

using metaphors

Page 233: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

gaming or entertainment apps benefit greatly from metaphor.

using metaphors

Page 234: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

gaming or entertainment apps benefit greatly from metaphor.

using metaphors

Page 235: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

gaming or entertainment apps benefit greatly from metaphor.

using metaphors

Page 236: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

intuitive and obviousjust like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use

intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.

these are called affordances, visual cues for what you can do and how you can do it.

gaming or entertainment apps benefit greatly from metaphor.

using metaphors

Page 237: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 238: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

(ab)using metaphors

Page 239: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with caution

(ab)using metaphors

Page 240: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

(ab)using metaphors

Page 241: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

metaphors require mental effort.

(ab)using metaphors

Page 242: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

metaphors require mental effort.

metaphors can obscure the nature of the feature instead of revealing it.

(ab)using metaphors

Page 243: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

metaphors require mental effort.

metaphors can obscure the nature of the feature instead of revealing it.

metaphors that have universal understanding are hard to come by.

(ab)using metaphors

Page 244: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

metaphors require mental effort.

metaphors can obscure the nature of the feature instead of revealing it.

metaphors that have universal understanding are hard to come by.

(ab)using metaphors

Page 245: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

use with cautionmetaphors are culturally subjective.

metaphors require mental effort.

metaphors can obscure the nature of the feature instead of revealing it.

metaphors that have universal understanding are hard to come by.

(ab)using metaphors

Page 246: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 247: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information design

Page 248: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the glue

Page 249: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the glue

Page 250: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the glue

Page 251: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the gluehow do we present information so people understand it more easily?

Page 252: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the gluehow do we present information so people understand it more easily?

information design is visual, but doesn’t mean we’re focused on the finished look & feel.

Page 253: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the gluehow do we present information so people understand it more easily?

information design is visual, but doesn’t mean we’re focused on the finished look & feel.

our focus is on the effectiveness of the form – does it communicate clearly?

Page 254: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the gluehow do we present information so people understand it more easily?

information design is visual, but doesn’t mean we’re focused on the finished look & feel.

our focus is on the effectiveness of the form – does it communicate clearly?

think of it as “sense-making.”

Page 255: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

information designit’s the gluehow do we present information so people understand it more easily?

information design is visual, but doesn’t mean we’re focused on the finished look & feel.

our focus is on the effectiveness of the form – does it communicate clearly?

think of it as “sense-making.”

good information design supports the goals of both user and creator.

Page 256: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 257: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 258: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontext is everything

Page 259: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontext is everythinggroup and arrange information elements in ways that:

Page 260: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontext is everythinggroup and arrange information elements in ways that:

➡ reflect how users think

Page 261: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontext is everythinggroup and arrange information elements in ways that:

➡ reflect how users think

➡ match what they expect

Page 262: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontext is everythinggroup and arrange information elements in ways that:

➡ reflect how users think

➡ match what they expect

➡ support their tasks and goals

Page 263: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 264: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

stateemail addressjob titlephone numberstreet addressnamezip codecompanycity

Page 265: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

stateemail addressjob titlephone numberstreet addressnamezip codecompanycity

Page 266: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

stateemail addressjob titlephone numberstreet addressnamezip codecompanycity

namejob titlecompanystreet addresscitystatezip codephone numberemail address

Page 267: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 268: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationalphabetical

Page 269: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationalphabetical

➡ information is referentiale.g. dictionary, encylopedia

Page 270: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationalphabetical

➡ information is referentiale.g. dictionary, encylopedia

➡ efficient, non-linear access to specific items is requirede.g. contact list

Page 271: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationalphabetical

➡ information is referentiale.g. dictionary, encylopedia

➡ efficient, non-linear access to specific items is requirede.g. contact list

➡ no other organizing strategy is appropriate

Page 272: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 273: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcategorical

Page 274: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcategorical

➡ clusters of similarity exist within the informatione.g. college catalog, statistical report

Page 275: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcategorical

➡ clusters of similarity exist within the informatione.g. college catalog, statistical report

➡ people will naturally seek out information by categorye.g. department store, ecommerce site

Page 276: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 277: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontinuum

Page 278: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontinuum

➡ organizing by magnitude: lowest to highest, worst to beste.g. search engine results, baseball stats

Page 279: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationcontinuum

➡ organizing by magnitude: lowest to highest, worst to beste.g. search engine results, baseball stats

➡ comparing things using a common measuree.g. search engine results, baseball stats

Page 280: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 281: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationlocation

Page 282: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationlocation

➡ orientation and wayfinding are importante.g. emergency exit maps, travel guides

Page 283: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationlocation

➡ orientation and wayfinding are importante.g. emergency exit maps, travel guides

➡ information is contextually related to geographye.g. historic site

Page 284: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organization

Page 285: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationtime

Page 286: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationtime

➡ presenting and comparing events over fixed durationse.g. historical timeline, channel guide

Page 287: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate organizationtime

➡ presenting and comparing events over fixed durationse.g. historical timeline, channel guide

➡ a time-based sequence is involvede.g. step-by-step procedure

Page 288: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 289: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate form

Page 290: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formwhat’s the best representation?

Page 291: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formwhat’s the best representation?

Page 292: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formwhat’s the best representation?

Page 293: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formwhat’s the best representation?

Page 294: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formwhat’s the best representation?

Page 295: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate form

Page 296: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

Page 297: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

Page 298: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

Page 299: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

Page 300: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

Page 301: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

Page 302: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

Page 303: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

Page 304: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

Page 305: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

Page 306: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

inverted pyramid

Page 307: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

inverted pyramid

Page 308: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

inverted pyramid

Page 309: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

inverted pyramid

Page 310: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

nice to know(unnecessary)

information

inverted pyramid

Page 311: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

nice to know(unnecessary)

information

inverted pyramid

Page 312: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

nice to know(unnecessary)

information

inverted pyramid

dominant visual elements

Page 313: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

nice to know(unnecessary)

information

inverted pyramid

dominant visual elements

focal points; items of equal importance

Page 314: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formfive part essay

introduction

narration

affirmation

negation

conclusion

most critical information

helpful (but not critical)

information

nice to know(unnecessary)

information

inverted pyramid

dominant visual elements

focal points; items of equal importance

details for those who want more

Page 315: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate form

Page 316: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

Page 317: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

the simplest solution is usually best.

Page 318: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

the simplest solution is usually best.

simple is always better than the opposite.

Page 319: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

the simplest solution is usually best.

simple is always better than the opposite.

Page 320: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

the simplest solution is usually best.

simple is always better than the opposite.

Page 321: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formoccam’s razor

the simplest solution is usually best.

simple is always better than the opposite.

Page 322: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate form

Page 323: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

Page 324: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

information presented to a person who isn’t interested – or ready to process it – is noise.

Page 325: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

information presented to a person who isn’t interested – or ready to process it – is noise.

only necessary or requested information is displayed at any given time.

Page 326: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

information presented to a person who isn’t interested – or ready to process it – is noise.

only necessary or requested information is displayed at any given time.

helps people manage complexity.

Page 327: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

information presented to a person who isn’t interested – or ready to process it – is noise.

only necessary or requested information is displayed at any given time.

helps people manage complexity.

Page 328: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formprogressive disclosure

information presented to a person who isn’t interested – or ready to process it – is noise.

only necessary or requested information is displayed at any given time.

helps people manage complexity.

Page 329: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate form

Page 330: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

Page 331: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

Page 332: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

Page 333: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 334: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 335: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 336: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 337: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 338: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

appropriate formhick’s law

every additional choice increases the time required to make a decision.

the more choice you give people, the easier it is to choose nothing.

In the era of infinite choice, people need better filters!

Page 339: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 340: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframes

Page 341: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?

Page 342: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

Page 343: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

Page 344: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

Page 345: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

wireframes reflect the designer's ideas about:

Page 346: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

wireframes reflect the designer's ideas about:

➡ placement of elements on the page

Page 347: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

wireframes reflect the designer's ideas about:

➡ placement of elements on the page

➡ labeling of those elements

Page 348: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

wireframes reflect the designer's ideas about:

➡ placement of elements on the page

➡ labeling of those elements

➡ navigation

Page 349: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswhat’s a wireframe?a wireframe is a skeleton of a screen. 

it shows priority and the organization of things on the screen.

it details how users will get to other parts of the site or app. 

wireframes reflect the designer's ideas about:

➡ placement of elements on the page

➡ labeling of those elements

➡ navigation

➡ functionality, behavior and feedback

Page 350: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframes

Page 351: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes vary in their level of detail

Page 352: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes vary in their level of detail

Page 353: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes vary in their level of detail

Page 354: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes vary in their level of detail

Page 355: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframes

Page 356: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes don’t show

Page 357: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes don’t show

➡ colors

Page 358: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes don’t show

➡ colors

➡ typography

Page 359: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes don’t show

➡ colors

➡ typography

➡ images

Page 360: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

wireframeswireframes don’t show

➡ colors

➡ typography

➡ images

➡ visual style of any kind

Page 361: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 362: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?

Page 363: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?design has to consider:

Page 364: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?design has to consider:

➡ how each screen fits in with the site/app/system as a whole

Page 365: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?design has to consider:

➡ how each screen fits in with the site/app/system as a whole

➡ what content, links, and interactions are needed to meet both user and business goals

Page 366: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?design has to consider:

➡ how each screen fits in with the site/app/system as a whole

➡ what content, links, and interactions are needed to meet both user and business goals

➡ how all of these elements relate to each other

Page 367: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

so why bother with wireframes?design has to consider:

➡ how each screen fits in with the site/app/system as a whole

➡ what content, links, and interactions are needed to meet both user and business goals

➡ how all of these elements relate to each other

Page 368: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 369: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell us

Page 370: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

Page 371: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

Page 372: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

➡ how the content is organized

Page 373: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

➡ how the content is organized

➡ which content is most important

Page 374: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

➡ how the content is organized

➡ which content is most important

➡ a given screen’s location in the system

Page 375: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

➡ how the content is organized

➡ which content is most important

➡ a given screen’s location in the system

➡ where users can go and what they can do

Page 376: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

what wireframes tell uswhat to look for

➡ what content will be included

➡ how the content is organized

➡ which content is most important

➡ a given screen’s location in the system

➡ where users can go and what they can do

➡ how users will move around the system

Page 377: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 378: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process

Page 379: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

Page 380: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

➡ why is this valuable to my intended user?

Page 381: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

➡ why is this valuable to my intended user?

➡ what can it do to make their life better?

Page 382: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

➡ why is this valuable to my intended user?

➡ what can it do to make their life better?

➡ how can I make it easier for them to act?

Page 383: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

➡ why is this valuable to my intended user?

➡ what can it do to make their life better?

➡ how can I make it easier for them to act?

➡ what actions are most valuable on each screen? across the entire system?

Page 384: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process1. revisit needs and goals

➡ why is this valuable to my intended user?

➡ what can it do to make their life better?

➡ how can I make it easier for them to act?

➡ what actions are most valuable on each screen? across the entire system?

➡ how can I measure the impact of this action?

Page 385: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process

Page 386: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

Page 387: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

Page 388: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

Page 389: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 390: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 391: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 392: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 393: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 394: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 395: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process2. establish cores and paths

cores are the primary pieces of content and functionality you want users to see and interact with.

users take paths to enter and leave each screen.

the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen.

Page 396: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process

Page 397: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

Page 398: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

you’ll be tempted to skip this phase. DON’T.

Page 399: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

you’ll be tempted to skip this phase. DON’T.

➡ quickly generate thumbnail sketches

Page 400: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

you’ll be tempted to skip this phase. DON’T.

➡ quickly generate thumbnail sketches

➡ goal is to get down several decent ideas of what the screen(s) should look like

Page 401: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

you’ll be tempted to skip this phase. DON’T.

➡ quickly generate thumbnail sketches

➡ goal is to get down several decent ideas of what the screen(s) should look like

➡ don’t think about usability or information hierarchy – just get as many different ideas out of your head as possible.

Page 402: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process3. start sketching!

you’ll be tempted to skip this phase. DON’T.

➡ quickly generate thumbnail sketches

➡ goal is to get down several decent ideas of what the screen(s) should look like

➡ don’t think about usability or information hierarchy – just get as many different ideas out of your head as possible.

Page 403: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process

Page 404: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process4. rapid prototyping

Page 405: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process4. rapid prototyping

first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc.

Page 406: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process4. rapid prototyping

first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc.

DON’T use powerpoint, illustrator, indesign, etc.

Page 407: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

the wireframing process4. rapid prototyping

first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc.

DON’T use powerpoint, illustrator, indesign, etc.

try not to use “lorem ipsum” text – content is just as important to the design as button placement and navigational elements.

remember that what you’re creating is not final design (or anything close to it).

Page 408: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 409: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframes

Page 410: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

Page 411: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ is anything important missing?

Page 412: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ is anything important missing?

➡ is the most important content noticed first?

Page 413: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ is anything important missing?

➡ is the most important content noticed first?

➡ is there anything that shouldn't be here?

Page 414: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ is anything important missing?

➡ is the most important content noticed first?

➡ is there anything that shouldn't be here?

➡ which content is related and how?

Page 415: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ is anything important missing?

➡ is the most important content noticed first?

➡ is there anything that shouldn't be here?

➡ which content is related and how?

➡ can you get to all of the major areasfrom here? should you be able to?

Page 416: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

Page 417: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ do all of the labels make sense?

Page 418: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ do all of the labels make sense?

➡ do you know what all of the elements are?

Page 419: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ do all of the labels make sense?

➡ do you know what all of the elements are?

➡ is the purpose of each element clear?

Page 420: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ do all of the labels make sense?

➡ do you know what all of the elements are?

➡ is the purpose of each element clear?

➡ does the flow of tasks or information match the user’s need or expectation?

Page 421: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

reviewing wireframesquestions to ask

➡ do all of the labels make sense?

➡ do you know what all of the elements are?

➡ is the purpose of each element clear?

➡ does the flow of tasks or information match the user’s need or expectation?

➡ are additional features or functions needed?

Page 422: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 423: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to remember

Page 424: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to rememberthe skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places.

Page 425: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to rememberthe skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places.

good interface design uses progressive disclosure to maximize signal and minimize noise.

Page 426: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to rememberthe skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places.

good interface design uses progressive disclosure to maximize signal and minimize noise.

a product with a poorly designed interface won’t be used – no matter how technically superior the code is or how deep its functionality may be.

Page 427: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

things to remember

Page 428: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to remember

Page 429: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to remembergood navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction.

Page 430: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to remembergood navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction.

good information design is the glue that holds things together – supporting the goals of both user and creator.

Page 431: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

skeleton takeawaysthings to remembergood navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction.

good information design is the glue that holds things together – supporting the goals of both user and creator.

the only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so.

Page 432: 06   using the elements - skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 433: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 434: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

labeling for navigation

Page 435: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

labeling for navigationFind a website of a large, complex organization, such as a news site or a university website.

Page 436: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

labeling for navigationFind a website of a large, complex organization, such as a news site or a university website.

Find an example of particularly good or bad labeling within the main menu system.

Page 437: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

labeling for navigationFind a website of a large, complex organization, such as a news site or a university website.

Find an example of particularly good or bad labeling within the main menu system.

For example, the sub-navigation within a specific category.

Page 438: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

Page 439: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

Page 440: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

Page 441: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

➡ are they distinct from one another?

Page 442: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

➡ are they distinct from one another?

➡ can you predict and remember which labels are under which top-level category?

Page 443: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

➡ are they distinct from one another?

➡ can you predict and remember which labels are under which top-level category?

➡ can you tell where you are in the hierarchy when you are several levels down?

Page 444: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

➡ are they distinct from one another?

➡ can you predict and remember which labels are under which top-level category?

➡ can you tell where you are in the hierarchy when you are several levels down?

➡ do the navigation labels also serve as page titles?

Page 445: 06   using the elements - skeleton

UXDskeleton exercise

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

consider the following:

➡ are the words chosen for the labels meaningful?

➡ are they distinct from one another?

➡ can you predict and remember which labels are under which top-level category?

➡ can you tell where you are in the hierarchy when you are several levels down?

➡ do the navigation labels also serve as page titles?

➡ if not, should they?