At the core of all usability is a design—the one being used by your customer. The blueprint or foundation of that design is found in the interaction design. Over the years, I’ve worked with many people, from clients to co-workers, who are involved in design but who don’t consider themselves “designers”. They usually have good design instincts, but don’t have a “design” background—and they are always asking me how they can become better “designers”.In this presentation, I distill the concepts of interaction design down to just the basics, to focus on what is most useful for non-interaction designers. Using the design process as a framework, I’ll provide an overview of the basic building blocks, design principles, and underlying structure of interaction design, and illustrate them using familiar real-world examples. Through these basic elements, I’ll discuss how design decisions are made, how to evaluate them at each level of an interaction design, and more importantly, what makes a “good” design decision. I will also discuss one or two emerging trends in interaction design and show how these basic elements can also be used to understand and evaluate them.This presentation won’t turn everyone into an interaction designer, but it will give you an understanding of the basics, and hopefully move you further along the road to being a better “designer”.

1. May, 2009
Understanding Interaction Design
David Rondeau, Design Chair
InContext Design
david.rondeau@incontextdesign.com Karen Holtzblatt, CEO
Hugh Beyer, CTO
Twitter: dbrondeau

2. What is Interaction Design?
Interaction Design (IxD) is the discipline of defining the
behavior of products and systems that a user can interact
with.
Interaction design defines the behavior (the "interaction")
of an artifact or system in response to its users.
-from IxDA.org
Just the basics: designing how people interact with a
screen

3. The Design Process
1. Identify the goal or problem to be addressed
2. Use available design materials
3. In accordance with the “laws of design”
4. To create potential solutions
5. Then evaluate and iterate

4. Think of it like Legos
1. Identify the goal or problem
2. Use available design materials
3. According to ―laws of design‖
4. Build
5. Evaluate and iterate

5. First, understand the problem
For all stakeholders
System
At each level of the design
Understan Screen
d
Goals
Criteria
Header Title
Constraints Loremipsumdolore quid
alora fugit nisi
veniamverosedsciurusquis
dolor autemblandit in
Component
diamveroesseipsumdolore
quid alora
Technology Control

6. Using the raw materials
 Line
 Text
 Controls
 Structure
There are more, but this is the foundation

7. Use existing building blocks and paradigms
Controls
 Allow user to control system Control
 Buttons, checkboxes, and text entry fields
Components Header Title
 Collection of controls and information that Loremipsumdolore quid
support an activity
alora fugit nisi
veniamverosedsciurusquis
dolor autemblandit in
Component
diamveroesseipsumdolore
quid alora
 News, Alerts, Manage list
System structures
 Collection of screens, sections, and
components Screen
 Search, Dashboard, Navigation
Interaction paradigms
 The input method used to access an interface
System
 Web hyperlinks, drag and drop, ―soft‖ buttons,
touchscreen

8. According to principles of design: Structure
Relationship
 Between controls, components, and
sections
 Clear hierarchy of elements
Prominence
 Important elements are obvious and
easy to find
 Secondary elements are ignorable
until I need them
 There should be one area of primary
focus
Structure is CRITICAL

9. Structure of the whole system

10. Relationship and Prominence
Header Section System Nav Simple Search
1st Level Nav
2nd Level Nav
Primary Content Filter Related Section
Section
Featured summary item
Ad
Call to
action
Summary item
Secondary actions and info
Call to
action
Summary item
Secondary actions and info
Call to
action
Summary item Most Popular
Content
Secondary actions and info
Call to
action
Summary item
Secondary actions and info
Call to
action Summary item
Secondary actions and info Recommended
Content
Call to
action
Summary item
Secondary actions and info
Call to
action
Summary item Featured Content
Secondary actions and info

11. Relationship and Prominence

12. Principles of design: Interaction
Usability
 System is easy and efficient to use
Learnability
 Easy to learn—complicated manual should not be required
 Even highly technical users prefer easy to learn
Credibility
 Trust earned through use over time
Navigability
 Always know where you are
 And easily get where you need

13. Navigability

14. Navigability

15. Principles of design: Quality
Simplicity
 All controls and content are necessary
 Based on user, business, or technology
 Always ask yourself, ―Is this content necessary?‖
Consistency
 Structure
 Interaction paradigms and controls
 Style and usage of elements
 Labels and instructions
 Alignment

16. Simplicity

17. Simplicity

18. Simplicity
“A designer knows he has achieved perfection not when there is nothing left to add, but
when there is nothing left to take away.”—Antoine De Saint-Exupery

19. Consistency

20. Key principles
 Relationship
 Prominence
 Navigability
 Simplicity
 Consistency
Principles are related and overlap

21. Create and Evaluate Designs
By making “good” design decisions

22. What makes a design “good”?
Satisfies the problem
 Achieves the stated design goals
 Meets given design criteria
 Works within known business and technology constraints
 Addresses key issues from customer data
According to our key design principles
 Relationship
 Prominence
 Navigability
 Simplicity
 Consistency
Good design requires good design decisions
How do we make good design decisions?

23. Start at the top
Always tackle higher level problems first

24. Make trade-offs
Some pieces of
the puzzle are
more important
than others

25. Make trade-offs
Sometimes there isn’t a
“good” choice—so choose
what is least “bad”

26. Make trade-offs
The problem should
be worth the amount
of time you spend
solving it

27. Make trade-offs
Don’t be
consistent when
there is a good
reason to be
inconsistent

28. Use clear, explicit design reasoning
Always know what you don’t know
 Don’t make design choices and trade-offs when you don’t have all
the information
 Don’t make design decisions based on guesses
Clearly articulate and explain your reasoning
 If you can’t explain the design clearly, how can you evaluate
if it’s ―good‖?
Be willing to be wrong
 Validate your ideas and iterate
 Test in paper with stakeholders

29. When evaluating a design
You are evaluating the design decisions made:
 Look at what the design is actually solving—not just what it was
supposed to solve
 Assess how well problems are satisfied according to the key
design principles
 Determine if higher-level problems still need to be addressed
 Examine the trade-offs that were made
Evaluate “goodness” of
 Your company’s designs
 Competitor’s designs
 Building blocks and paradigms you want to ―borrow‖

30. New Interaction Design Trends

31. Contextual controls

32. Everything in one place

33. Touch and motion
By SlipstreamJC

34. Quick summary
1. Identify the goal or problem to be addressed
 For all stakeholders, at each level of design
2. Use available design materials
 Line, text, controls, structure
 Existing building blocks and paradigms
3. In accordance with the “laws of design”
 Relationship, prominence, navigability, simplicity, consistency
4. Create potential solutions by making “good” design
decisions
 Start at the top
 Make trade-offs
 Use clear, explicit design reasoning
5. Then evaluate and iterate

35.  We developed the industry-leading
customer-centered design process
 Our clients are industry leaders –
including other design firms
 Our experience spans a wide range
of work practices, industries and
technologies
 We have a proven track record creating
solutions for the people who use them
“The only method I have seen that really tells you how to go
out and collect customer data, and then what to do about it.”
- Don Norman
“The only generative method in the field”
-Ben Shneiderman
David Rondeau david.rondeau@incontextdesign.com
www.incontextdesign.com Twitter: dbrondeau
Copyright © 2009 InContext Enterprises, Inc. All rights reserved