WHAT IS INTERACTION DESIGN?
“For every action, there is an
equal and opposite reaction.”
SIR ISAAC NEWTON
WHAT IS INTERACTION DESIGN?
➡ Subset of UX Design

➡ Comes from HCI and ergonomics 

➡ Interrelated to UI Design
WHERE DOES IT FIT INTO?
➡ Macro-level:
• Concerned with flows
through the system 

➡ Micro-level:
• Concerned with affordances
on an interface
AFFORDANCE
SIGNIFIER
A quality that
makes a potential
action possible.
Some sort of
indicator, some
signal in the
physical or social
world that can be
interpreted
meaningfully.
“Design must seduce, shape, and more
importantly, evoke an emotional response.”
APRIL GREIMAN
“Don't even open
Photoshop until you've
prototyped and tested
your low-fidelity
concepts with your
users.”
THERESA NEIL
METHODS
1. Images with hotspots
๏ Convert paper sketches into prototypes 

๏ Convert high-fidelity mocks into prototypes

๏ Good workflow for visual designer
๏ Limited interaction fidelity 

2. “Pure” Prototypes
๏ Make wireframes clickable right away
๏ Good work flow for IAs
๏ Desktop and web based tools
๏ Many export HTML

THANKS SO MUCH!!!!!!

Interaction Design & Rapid Prototyping

  • 1.
  • 2.
    “For every action,there is an equal and opposite reaction.” SIR ISAAC NEWTON
  • 3.
    WHAT IS INTERACTIONDESIGN? ➡ Subset of UX Design
 ➡ Comes from HCI and ergonomics 
 ➡ Interrelated to UI Design
  • 4.
    WHERE DOES ITFIT INTO? ➡ Macro-level: • Concerned with flows through the system 
 ➡ Micro-level: • Concerned with affordances on an interface
  • 5.
    AFFORDANCE SIGNIFIER A quality that makesa potential action possible. Some sort of indicator, some signal in the physical or social world that can be interpreted meaningfully.
  • 6.
    “Design must seduce,shape, and more importantly, evoke an emotional response.” APRIL GREIMAN
  • 13.
    “Don't even open Photoshopuntil you've prototyped and tested your low-fidelity concepts with your users.” THERESA NEIL
  • 14.
  • 15.
    1. Images withhotspots ๏ Convert paper sketches into prototypes 
 ๏ Convert high-fidelity mocks into prototypes
 ๏ Good workflow for visual designer ๏ Limited interaction fidelity 

  • 16.
    2. “Pure” Prototypes ๏Make wireframes clickable right away ๏ Good work flow for IAs ๏ Desktop and web based tools ๏ Many export HTML

  • 22.