Intro to Interaction Design

1. Communicating Design I:
Task Flows
INTERACTION DESIGN | MAR. 29, 2016
WEEK 9

2. Today’s Objectives

3. ‣ Review the final project outline
‣ Learn about different design deliverables
‣ Learn about task flows

4. WEEK 9 - TASK FLOWS
Learn about creating a task flow
WEEK 10 - WIRESKETCHES / SITE MAP
Outline your product’s interface
WEEK 11 - WIREFRAMES
Refine your product’s interface and describe how it behaves
WEEK 12 - PROTOTYPING
Learn about different ways to prototype
WEEK 13 - VISUAL DESIGN
Learn about and define the visual look & feel of your product

5. Final Project Outline

6. The final project accounts for 40% of your final grade.
It’s done in your teams and includes the following:
THE BREAKDOWN
1. Presentation
2. Set of design artifacts
3. Peer evaluations

7. • 15 minutes to present your ideas – no more
• 10 minutes of Q&A afterwards
• Demonstrate how your idea improves the experience
• A comprehensive look at how you arrived at your idea
• Must include your user journey
THE PRESENTATION

8. • Largely based on assignments you have / will be working on
• Should be compiled into a single document (PDF)
• Submitted at the beginning of the last day of class
• Document organization is greatly appreciated
DESIGN ARTIFACTS

9. • Sketches (concepts and wiresketches)
• User Journey
• Task Flow
• Wireframes
• Screens in Visual Design
THE ARTIFACTS

10. • As a team project, everybody needs to pull their weight
• If someone was totally awesome, you should let me know!
• Sent out prior to the last day of class
• Highly recommended for everyone to fill out
PEER EVALUATIONS

11. How Do We Communicate Design?

12. SKETCHES
FLOWS / MAPS
WIREFRAMES
PROTOTYPES

13. • Outlines user movement across your product or service
• Shows the various destinations for your users
• Can uncover where users need to make decisions
• Communicates the breadth of your product experience
FLOWS / MAPS

16. • Used to document specific tasks or complex sets of actions
• Always includes a start and end point
• Arrow heads show direction of flow
• Conditions show how decisions can lead to different outcomes
• A useful shape to remember is the diamond (decision point)
TASK FLOWS

17. BOXES ARROWS
THE SHAPES

18. ORIGIN DESTINATION
SHOWING FLOW

19. If yes... If no...
Outcome A Outcome B
THE DECISION
POINT

20. No
No
Yes
Yes
Conductor gestures to change tempo
Conductor gestures
to play faster
Conductor gestures
to continue playing
Conductor gestures
to play slower
Conductor gestures
to end the piece
Conductor gestures
to play softer
Conductor gestures
to play louder
Conductor gestures to change loudness
Conductor cues
orchestra
Musicians
begins playing
their notes
Sections stop
playing
Section Lead
plays solo
Musicians wait
for further
instructions
Musicians stop
playing
(b)
(c)
No
Yes
No
Yes
No
No
Yes
(a)
(c)
(c)
(d)
Yes
Muscians play
faster
Musicians play
slower
Musicians play
softer
Musicians play
louder
End of the piece
Musicians
continue playing
Musicians
watch notes
and conductor
Playing an Orchestral Piece

21. Conductor gestures to change tempoConductor gestures
to continue playing
Conductor gestures to change loudness
Conductor cues
orchestra
Musicians
begins playing
their notes
Musicians stop
playing
No
No
Yes
(a)
(d)
Yes
Musicians
watch notes
and conductor
Key
(a) Conductor gestures to stop playing
(b) Conductor gestures for a solo performance
(c) It’s the end of the piece
(d) Conductor gestures differently from before
No
No
Yes
Yes
Conductor gestures
to play faster
Conductor gestures
to play slower
Conductor gestures
to end the piece
Conductor gestures
to play softer
Conductor gestures
to play louder
Key
(a) Conductor gestures to stop playing
(b) Conductor gestures for a solo performance
(c) It’s the end of the piece
(d) Conductor gestures differently from before
Sections stop
playing
Section Lead
plays solo
Musicians wait
for further
instructions
(b)
(c)
No
Yes
No
Yes
(c)
(c)
Muscians play
faster
Musicians play
slower
Musicians play
softer
Musicians play
louder
End of the piece
Musicians
continue playing

22. • Shows more intricate details of specific screens or elements
• Serves as a basis for other designers/engineers to work off of
• Quicker to create than visual boards - good for gut-checking
• Is the place to include functional specifications
WIREFRAMES

27. • Show how something will work rather than just describing it
• Can be quick to create (low-fi) or more complicated (high-fi)
• Stakeholders and other designers can play with it
• Feels more real than a static screen
PROTOTYPES

31. Homework Assignment

32. Create a task flow for withdrawing money from
an ATM. This is an individual, graded
assignment.

33. Workshop

34. Begin working on your task flow, and/or
meet with your team to continue
working on your ideas.