UXD

using the elements:structure

UXDdefining structure

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

you are herestructure essentially defines how users get to a given screen and where they can go when they’re done.

structure also defines categories of information.

structure is created by interaction design, which presents information in a way people can interact with it.

structure is also created by information architecture – organization, labeling, search and navigation systems.

good structure organizes information in a way that provides intuitive access to content.

UXDstructure should be appropriate

complexeducated

audiences

simplebasic contenttraining sites

linear narrativepredictable structure

non-linear/hyperlinkedflexible, but possibly confusing

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

structure should be flexiblestructure accommodates change

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

structure should be flexibleM A R C H

UXDstructure should be flexible

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

A P R I L

UXDstructure should be flexible

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

J U N E

UXDstructure should be flexible

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

S E P T E M B E R

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

interaction design (IxD)

interaction design

dancing in stepinteraction design defines the structure and behavior of interactive systems.

it creates meaningful relationships between people and the things they use.

it effectively communicates interactivity and functionality.

it reveals both simple and complex workflows.

it informs users about state changes.

it prevents user error.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

five essential principles

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is consistent

don’t be different to be different; be different when it’s 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

IxD is consistent

components with similar behavior should have a similar appearance

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is consistentbehavior

➡ transitions, rollovers, tooltips, etc. should behave consistently

➡ leverage the visitor’s prior experience

voice

➡ labels and terms should be the same throughout – different labels mean different information or outcomes

➡ content and imagery – photos, illustrations, and icons – should have a stable and consistent style.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is consistentdesign patterns

➡ reusable solutions to recurring problems

➡ content may change, but interaction and process stays the same

➡ makes actions and results consistent (and predictable)

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is visiblediscoverability shouldn’t involve luck or chance.

people should be able to tell that an opportunity to interact is available.

use content hinting – avoid “false bottoms” when more content and interactivity exists below the fold or beyond the visible space.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is visibleclick and tap

➡ people attempt interaction with anything that could possibly be clickable or touchable

➡ standard UI components are understood to be interactive

➡ different text color, 3D, and icons invite 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

IxD is visibletouch and gesture

➡ there is no hover for touch screens.

➡ consider the lefties of the world by making interfaces “reversible”

➡ don’t make people reach over the interface and obstruct their view

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is learnableinteractions should be easy to learn and easy to remember.

ideally, people use it once, learn it rapidly, remember it forever.

in reality, they use it a few times, learn it, and hope they remember it next 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

IxD is learnableintuitive really means “single trial learning.”

even interfaces that are easy to use may require learning, and the more we use it, the easier it seems.

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

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD is learnablegestures can be arbitrary.

tap and release, tap and hold, tap and hold long, double-tap, multi-finger tap, tap/hold and drag, single finger drag, multi-finger drag, pinch, stretch, etc....!

why can I swipe to move an image in a window, but not move the whole 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

IxD is predictablecan users answer:

➡ where are you?

➡ how did you arrive here?

➡ what can you do here?

➡ where can you go from here?

if YES then you have:

➡ provided a strong sense of place

➡ set the correct expectations

➡ made 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

IxD is predictableuse previews to set user expectations for new or complex interactions.

➡ show what can be done while the interface loads

➡ show a high-level view of the structure to provide context (a “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

IxD is predictablelabels, 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

IxD provides feedbackfeedback provides:

➡ locationwhere am I?

➡ statuswhat’s happening? is it still happening?

➡ future (via previews) what will happen?

➡ outcomes/resultsit has happened

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD provides feedbackevery action should produce a visible, understandable and immediate reaction

➡ acknowledge interactionslet people know they have been heard (or felt or seen)

➡ failing to acknowledge an interaction can lead to unnecessary repetition of actions and errors –or mistakes

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

IxD provides feedbackerror prevention is the best error handling — complement, don’t complicate

error messages should:

➡ describe what happened

➡ explain why it happened

➡ suggest a fix

➡ never blame the person

UXD

S U R F A C E

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

consistency helps people use what they know.

visibility of opportunity can invite interaction.

learning is easier when predictions are accurate.

feedback facilitates learning.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

your marching ordersremember: you are not designing for yourself.

understand the goals and needs you’re designing for.

think hard about the design and the experience.

set the user’s expectations for the experience.

don’t hinder, obstruct, or interfere with the experience.

try to break your designs – be your own worst visitor.

remember: you are not designing for yourself.

UXD

S U R F A C E

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

information architecture

organize, categorize, prioritizeinformation architecture is the creation of organizational and navigational schemes.

a good IA allows people to move through content efficiently and effectively.

but it’s about more than just finding content.

it’s also about educating, informing and persuading, often in equal doses.

an effective IA is flexible, accommodating growth and adapting to change.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hierarchy

the hierarchy pattern is a standard site structure with an index page and a series of sub pages.

it’s good for organizing complicated structures that resemble a desktop site or system’s structure.

multi-faceted navigation structures can present a problem to people using small screens.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hub-and-spokethis gives users a central index; they’ll navigate out from here.

users can’t navigate between spokes – they have to return to the hub.

good for multi-functional tools, each with a distinct internal navigation and purpose.

not always good for users who want to multi-task.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

nested

this pattern leads users in a linear fashion to more detailed content.

nesting provides a quick, easy method of navigation under stress.

it also gives the user a strong sense of where they are.

good for apps or sites with singular or closely related topics.

can be a barrier to exploring – users won’t be able to quickly switch between sections.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

tabbed

this is a collection of sections tied together by a toolbar menu.

it allows the user to quickly scan and understand the complete functionality of the app or scope of content upon opening.

Good for tool-based apps with a similar theme or simple sites.

watch for complexity – this pattern is really meant for simple content structures.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

bento box (dashboard)

the dashboard pattern displays portions of related tools or content on a main screen.

this pattern is more suited to desktop or tablet vs. mobile – due to its complexity.

it allows the user to get key information at a glance, but relies heavily on a well-designed UI.

UXD

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

bento box (dashboard)

good for multi-functional tools and content-based tablet apps that have a similar theme.

the tablet screen gives you more space to utilize this pattern well.

it’s critical that you understand how a user will interact with and between each piece 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

filtered view

this pattern allows the user to use filtering options to create an alternative view of a specific set of information.

good for apps or sites with a high volume of content.

can be a good basis for magazine style apps or sites, or as a sub pattern within another navigational pattern.

can be trouble for mobile – filters and faceted search can be difficult to display on a small screen.

UXDorganizing principles

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

getting to know nodesa node is the basic unit of any information structure.

nodes can be as small as a single number.

nodes can be as large as an entire library.

nodes allow us to use a common language and a common set of ideas across different kinds of problems.

the organizing principles we use determine how the nodes in an information structure are arranged.

in other words, it tells us which nodes are grouped together, and which are kept separate.

UXDorganizing principles

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

corporate website

consumer business investorconsumer business investor

audience is the organizing principle

travel website

n. america europe africa

geography is the organizing principle

n. america europe africa

UXDorganizing principles

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

rules of thumbthe organizing principles used at the highest levels of the site or app should be those most closely tied to user needs and business objectives.

those used at lower levels are usually influenced by feature specs and content requirements.

every collection of information has a built-in conceptual structure – and in most cases it has more than one.

the hard part isn’t creating a structure – it’s creating the right structure for our objectives and our users’ needs.

UXDorganizing principles

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

facetsfacets are attributes of an information set that can provide a flexible set of organizing principles for nearly any kind of content.

however, using the wrong facets can be worse than using none at all.

when users have too many options to sort through, they often can’t find anything.

it’s our job – not the user’s – to identify the specific attributes of the information that will be most useful, usable and valuable to our users.

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

who does what?it’s still common for web dev teams to have no one explicitly responsible for structure.

so it typically lands in the lap of the developer, unless there’s a designer involved as well.

in ideal situations, an information architect is on the team to deal specifically with issues related to information organization and related interaction design.

whether you have a specialist to address structure or not isn’t important – but someone needs to do it.

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

communicating structuremethods vary based on the complexity of what’s being produced.

for projects with a high volume of content in a hierarchical structure, text outlines are often enough to document the architecture.

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

visual vocabulary www.jjg.net/ia/visvocab

jesse james garrett’s system for diagramming structures

home

productsmedia

press releases

home products

office products

filearchives

support

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

visual vocabularyjesse james garrett’s system for diagramming structures

www.jjg.net/ia/visvocab

technicalpapers

(1a)

continue to:member list

success?

continue from:home

login page

login flow latest news

N

Y

(1a) - conditional selector

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

hub-and-spoke diagramfor projects with a high volume of content in a hub-and-spoke structure, diagrams like this one are typically used.

UXDroles and processes

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Ydiagrams, no matter what kind, should focus on relationships between content: which categories go together? which don’t? how do the steps in an interaction sequence fit together?

UXDstructure takeawaysthings to remembergood structure organizes information in a way that provides intuitive access to content.

structure is created by interaction design, which means presenting information in a way people can understand it, or interact with it.

structure is also created by information architecture, which is the combination of organization, labeling, search and navigation systems within any digital product.

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXDstructure takeawaysthings to rememberstructure should be appropriate for the audience and flexible to accommodate change.

whether you have a specialist to address structure or not isn’t important – but someone needs to do it.

focus on relationships between content:

➡ which categories go together? which don’t?

➡ how do the steps in an interaction sequence fit together?

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

UXDstructure 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

information architecture exerciseYou have the same edition of a newspaper, both online and as a printed hard copy in your hands.

How would you go about looking for updated news about the trial of a famous athlete – from a different country than your own – in each version?

Think about how you would do this in each case, and write down a narrative of that process.

UXDstructure exerciseconsider the following:

S U R F A C E

S K E L E T O N

S T R U C T U R E

S C O P E

S T R A T E G Y

➡ which process allowed you to find the Information more easily?

➡ did that same process allow you to find the information more quickly?

➡ how could each IA be modified to improve speed/efficiency or ease of use?

➡ what significant differences do you see in the IA of each version of the newspaper?