06 using the elements - skeleton

UXD

UXD

using the elements:skeleton

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

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

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

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:

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?

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?

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?

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.

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.

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

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

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:

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

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)

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)

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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...

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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!)

UXD

S U R F A C E

S K E L E T 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)

UXD

S U R F A C E

S K E L E T 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)

UXD

S U R F A C E

S K E L E T 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)

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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’

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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).

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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)

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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.”

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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. 

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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. 

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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:

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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!

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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).

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T 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?

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T 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.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

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

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

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.

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.

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.

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

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:

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?

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?

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?

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?

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?

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?