06 using the elements - skeleton
DESCRIPTION
TRANSCRIPT
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?