UXD

the elements of user experience

UXD

S U R F A C E

S K E L E T 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 five planes of UX

web pages or app screens; images, text, things you can click

the optimized organization and arrangement of onscreen elements

the number of places you can go, organized contextually

features and functions contained within the site, system or app

the site, system or app’s reason for being, to the creator and to users

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

concrete

abstract

the elements of user experience

visual design

interfacedesign

interactiondesign

functionalspecification

navigationdesign

informationarchitecture

contentrequirements

user needsbusiness objectives

T A S K S I N F O

UXD

S T R A T E G Y

the strategy plane

user needs come from the people who will use the product.

what do they want from us?

how does that fit in with their other goals?

business objectives define success, and typically mean making money, saving money or both.

how will we know if we have succeeded?

user needsbusiness objectives

UXD

S C O P E

the scope plane

strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality

functional specifications describe the feature set of the product – what are we creating?

content requirements detail what information is required to provide value to users – images? audio? video? dynamic real-time data?

functionalspecification

contentrequirements

how the customer explained it

how the project manager heard it

how the designer designed it

how the engineer & developer built it

how the customer really wanted it

UXD

S T R U C T U R E

the structure plane

scope is given structure when we define how the system responds to the user’s actions.

interaction design creates a structured experience of patterns and sequences that present appropriate options to users.

information architecture defines the volume of content, along with how it’s arranged and organized – on each screen as well as across the entire product.

interactiondesign

informationarchitecture

UXD

S K E L E T O N

the skeleton plane

structure informs the skeleton of the system – specifically, what it may look like and how users move through tasks and information.

interface design determines how to best arrange and present visual elements for the user to interact with.

navigation design provides onscreen elements that allow the user to move through tasks and information in an intuitive way.

interfacedesign

navigationdesign

UXD

S U R F A C E

the surface plane

visual design uses colors, images, typography and effects, each specifically chosen to:

a) support and reinforce the meaning of the content being presented

b) guide the user where applicable through data, tasks or information

c) reduce cognitive load and enable recognition and intuitive learning

d) be culturally/socially appropriate

visual design

UXDthese planes are interdependent

S K E L E T O N

S T R U C T U R E

choices made on each plane affect the choices available on other planes.

UXDUXD elements must be flexible

requiring work involved with each plane to finish before work on the next can start is problematic – and results in a frustrating user experience.

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

effo

rt

time

UXD

a better approach is to have work on each plane finish while work on the next plane is in progress, so the two inform each other.

effo

rt

time

ST

RA

TE

GY

SC

OP

E

ST

RU

CT

UR

E

SK

EL

ET

ON

SU

RF

AC

E

UXD elements must be flexible

UXDadditional factorsit’s not always that clear cutit can be difficult to tell which element is responsible for a UX problem.

‣ is the visual design inappropriate?

‣ is the underlying navigation the problem?

‣ is the browser interpreting the code incorrectly?

sometimes it’s more than one thing, and sometimes it’s multiple things combined.

UXDadditional factorscontent is still kingit’s why users come to a site or open an app

is what the user wants available?

is the variety appropriate?

is the content relevant to the reason they’re here?

do we have ways to catalog, track and present the content when, where and how the user wants it?

UXD

dev

design

additional factorsappropriate technologythe right platform is critical in experience delivery

technology enables UXD to extend across multiple OS, browsers, devices and form factors

technology can’t be seen as an add-on or a nice to have – it needs to be inherent in how we design

touchscreen interaction, for example, has changed the way we navigate digital information

ux