+ All Categories
Transcript
Page 1: A Field Guide to Interaction Design (IxD)

BY JAMES CARUSO, EXPERIENCE LEAD

INTERACTION DESIGNA FIELD GUIDE TO

Page 2: A Field Guide to Interaction Design (IxD)

W H A T I S I N T E R A C T I O N D E S I G N ?

Interaction design is about shaping digital things for human use. Engaging, well thought-out interfaces allow us to

interact with digital things by understanding and predicting our behaviors. Through this understanding, interactions

align to expectations and digital things made easier to use.

/// Page 1

Page 3: A Field Guide to Interaction Design (IxD)

H O W I S I T U S E D ?

Interaction design is used to execute “ideas that do,” or more precisely, “ideas that enable people do things.”

/// Page 2

Page 4: A Field Guide to Interaction Design (IxD)

W H Y I S I N T E R A C T I O N D E S I G N I M P O R T A N T ?

Interaction design is a big part of how we make things usable and enjoyable. As digital things become more and more

prevalent, ease of use becomes more and more expected.

/// Page 3

Page 5: A Field Guide to Interaction Design (IxD)

ToolsU S E T H E R I G H T O N E S F O R T H E J O B

Page 6: A Field Guide to Interaction Design (IxD)

A X U R E / / / P L A N

Plan your flows, create sitemaps, chart user journeys, and develop interactive wireframes with this planning tool.

/// Page 5

Page 7: A Field Guide to Interaction Design (IxD)

S K E T C H / / / D E S I G N

Craft your user interface, build from your wires, and refine your interaction points with this design tool.

/// Page 6

Page 8: A Field Guide to Interaction Design (IxD)

F R A M E R / / / R E F I N E

Prototype, explore, and refine complex and nuanced interactions with a physics-based framework.

/// Page 7

Page 9: A Field Guide to Interaction Design (IxD)

E T H O S

Each step of the process informs the other, both forward and backward. This is a fluid process based around

the idea of continual refinement.

/// Page 8

Page 10: A Field Guide to Interaction Design (IxD)

I N T E R A C T I O N D E S I G N

G O A L S

J O U R N E Y E X P E R I E N C E

/// Page 9

Page 11: A Field Guide to Interaction Design (IxD)

/// Page 10

Our choices in designing interactions are shaped by the

confluence of these basic components.

I N T E R A C T I O N D E S I G N

Page 12: A Field Guide to Interaction Design (IxD)

G O A L S

To craft ideas that do, we must first know the goals of the thing

and the people using it.

C L I E N T G O A L S

B U S I N E S S G O A L S

U S E R G O A L S

P L A T F O R M G O A L S

/// Page 11

Page 13: A Field Guide to Interaction Design (IxD)

J O U R N E Y

For a journey to be successful, it must tell a story—one with

the user at its heart as the protagonist. This story can be

both finite and infinite.

G O A L M A P P I N G

U S E R F L O W S

E X P E R I E N C E M A P S

/// Page 12

Page 14: A Field Guide to Interaction Design (IxD)

E X P E R I E N C E

The best experiences engage users by anticipating needs,

understanding behaviors, and moving to fulfill them.

D E F I N E F O R M

A N T I C I P A T E N E E D S

U N D E R S T A N D B E H A V I O R S

C R E A T E D I A L O G U E S

/// Page 13

Page 15: A Field Guide to Interaction Design (IxD)

Interactive WiresA key component and pertinent starting place for great

interaction design are interactive wireframes.

/// Page 14

Page 16: A Field Guide to Interaction Design (IxD)

M E D I U M

Since we are designing digital things, working within a digital medium will yield the truest representation of the

product, interface, or interactions.

/// Page 15

Page 17: A Field Guide to Interaction Design (IxD)

A T R U E E X P E R I E N C E

Interactive wires are built to get as close to the final user experience as possible. From function to journey, things

actually work.

/// Page 16

Page 18: A Field Guide to Interaction Design (IxD)

S O L V I N G R E A L P R O B L E M S

When you build with interactive wires, you are beginning to solve for real interactions. It’s a different thing to annotate how a search feature will work than it is to actually build it

out and take that journey.

/// Page 17

Page 19: A Field Guide to Interaction Design (IxD)

M A L L E A B I L I T Y

With interactive wires the distance between idea and execution is greatly reduced. Interactive wires are pliable,

flexible, adaptable, and testable.

/// Page 18

Page 20: A Field Guide to Interaction Design (IxD)

C O M P L E X I T Y

When deciding how far to take the level of interaction, it’s best to make only the most crucial or complex features

interactive. This is important when designing or planning for complex flows or user journeys.

/// Page 19

Page 21: A Field Guide to Interaction Design (IxD)

B U I L D B I G , P L A N S M A L L

As you design your core interactions, plan your micro-interactions. These are the small details that

surprise and delight users.

/// Page 20

Page 22: A Field Guide to Interaction Design (IxD)

Wires Inform DesignYour wireframes will directly influence and inform your

design decisions.

/// Page 21

Page 23: A Field Guide to Interaction Design (IxD)

S U B T R A C T I O N

Wires force you to pare your ideas and assumptions down to their most basic forms.

/// Page 22

Page 24: A Field Guide to Interaction Design (IxD)

Design Informs InteractionIt is through visual language —colors, typography, spacing—

that design shapes and refines our interactions.

/// Page 23

Page 25: A Field Guide to Interaction Design (IxD)

R E F I N E M E N T

Through design we continual plan for and refine our interactions. The more our ideas stew, the better they

become and better we can execute them.

/// Page 25

Page 26: A Field Guide to Interaction Design (IxD)

Interaction Informs ExperienceAs your interactions are refined through design, you’ll notice

the overall experience beginning to change.

/// Page 24

Page 27: A Field Guide to Interaction Design (IxD)

M A T U R A T I O N

It’s here that our ideas are transformed. Where visual play gives way to insight and epiphany. And where epiphany is sanded down and sculpted into something new, enticing,

beautiful, and usable.

/// Page 25

Page 28: A Field Guide to Interaction Design (IxD)

/// Page 26

MotionA N I M AT I O N & I N T E R A C T I V I T Y

Page 29: A Field Guide to Interaction Design (IxD)

T R A N S F O R M A T I O N

Our interfaces should be able to change and adapt to meet user needs. When components change from one state to

another, those changes need to feel fluid and natural.

/// Page 27

Page 30: A Field Guide to Interaction Design (IxD)

T R A N S I T I O N S

Well-designed transitions can help users through a long flow or process by guiding them

and never letting them feel lost or confused.

/// Page 28

Page 31: A Field Guide to Interaction Design (IxD)

C O N S I S T E N C Y

Consistency is key for maintaining and guiding user focus, as incoming and outgoing elements

enter and exit the screen.

/// Page 29

Page 32: A Field Guide to Interaction Design (IxD)

D E S I G N

Design helps us build continuity in transitions through the use of design patterns and persisting elements.

/// Page 30

Page 33: A Field Guide to Interaction Design (IxD)

U N D E R S T A N D I N G

Through well-choreographed transitions and coordinated design, users begin to understand the design

and grow with the experience.

/// Page 31

Page 34: A Field Guide to Interaction Design (IxD)

S E Q U E N C E A N D T I M I N G

Sequence and timing are important factors in deterring the choreography of transitioning

and transforming components.

/// Page 32

Page 35: A Field Guide to Interaction Design (IxD)

T I M E A N D R E S P O N S E

How long things take to respond can make an interface feel snappy or sluggish. Think about timing as you would think about using white space in a design or silence in a piece of

music or film.

/// Page 33

Page 36: A Field Guide to Interaction Design (IxD)

S T O R Y , O R I G I N , & H I E R A R C H Y

The order in which transition or transformation occur can tell a story, show a point of origin or

communicate hierarchy.

/// Page 34

Page 37: A Field Guide to Interaction Design (IxD)

A T T E N T I O N

Motion allows us to direct users’ attention to support our goals.

/// Page 35

Page 38: A Field Guide to Interaction Design (IxD)

D I S T R A C T I O N

Use motion judiciously and refrain from drawing unwanted attention to areas of the experience that aren’t important or

that will break continuity and cause confusion.

/// Page 36

Page 39: A Field Guide to Interaction Design (IxD)

F O C U S

Attention can best be held by allowing users to focus on one primary action at a time. That element entices the user,

taking hold and maintaining their attention.

/// Page 37

Page 40: A Field Guide to Interaction Design (IxD)

F E E D B A C K

Feedback is a crucial component of interaction design. It’s how users know that what they’re interacting with does

something—by reacting to their input.

/// Page 38

Page 41: A Field Guide to Interaction Design (IxD)

R E S P O N S I V E N E S S

Components should respond when interacted with, whether it’s through touch, click, tap, voice, or gesture.

User-initiated events need strong visual connections to the epicenter of the interaction to provide adequate feedback.

/// Page 39

Page 42: A Field Guide to Interaction Design (IxD)

O V E R S T I M U L A T I O N

Animating everything, and providing feedback for every interaction can become annoying to users. Be judicious in

your application of movement, focus, and feedback.

/// Page 40

Page 43: A Field Guide to Interaction Design (IxD)

C R A F T I N G D E L I G H T

We can achieve delight by creating interactions that add clarity, guide attention through cleverness, and

surprise users.

/// Page 41

Page 44: A Field Guide to Interaction Design (IxD)

/// Page 42

C L O S I N G T H O U G H T S

Interaction design is the culmination of the experience, of the design, of the choreographed transitions, of

transformations — it is the sum of all of these things. Interaction design is really the design of ideas that enable

people do things.

Page 45: A Field Guide to Interaction Design (IxD)

James Caruso ( [email protected])

Thanks!PRPL HQ 189 S. Orange Ave., Suite 2020 Orlando, FL 32801

@prplrckscssrs fb.com/prplrckscssrs

www.prpl.rs

Follow PRPL

QUESTIONS? Tweet #prplwebinar


Top Related