1. Choosing the Right Tool
User Experience Week 2007 • Washington, DC
Dan Brown
Principal, EightShapes, LLC

2. 2

4. War is bad!

5. 5

6. Longitude
Latitude
Number of troops
Direction
Time
Temperature
5

7. • Define
• Elaborate
• Enhance

8. Anchors
Steps
Paths
Decision Points
• Define Step Distinctions
Step Variations
• Elaborate Step Groupings
Step Details
• Enhance Error Paths
Triggers
Scenarios
etc...

9. Anchors
Steps
Paths
Decision Points
• Define Step Distinctions
Step Variations
• Elaborate Step Groupings
Step Details
• Enhance Error Paths
Triggers
Scenarios
etc...

10. 7

11. 8

12. 9

13. Choice of Moment
❖
❖ Choice of Frame
❖ Choice of Image
❖ Choice of Word
❖ Choice of Flow
10

14. From BPRD: Garden of Souls #5 © Dark Horse Comics
11

15. From BPRD: Garden of Souls #5 © Dark Horse Comics
11

16. From BPRD: Garden of Souls #5 © Dark Horse Comics
11

17. From BPRD: Garden of Souls #5 © Dark Horse Comics
11

18. From Fallen Son: Iron Man #5 © Marvel Comics
12

19. From New Avengers #32 © Marvel Comics
13

20. 14
From Making Comics © 2006 Scott McCloud

21. What aspects of the user What level of detail are How are you going to
experience are you going you going to show? represent abstract
to show? concepts?
From Making Comics © 2006 Scott McCloud
How are you going to How are you going to work
describe the experience? within the constraints of
the medium?
14

22. • Purpose of document
• Document’s audience
• Project context
• Information on-hand

23. 16

24. Document detailed interactions
•
• Account for different user groups
• Show business rules
• Prioritize steps in flow
16

25. Aspects = steps, decisions, errors
•
• Detail = medium
• Description = labeling
• Abstraction = high
• Constraints = swimlanes
16

26. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & & ) quot;
[Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist
( Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE
Compare Export Label Compare Export Label Compare Export Label Compare Export Label
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy
NONE
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label...
&# [Name of Campaign] [Name of Page] [Name of Alert] [launch date] [Name of Item]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date] add to/remove from watchlist remove from watchlist
[page title] [alert title] [item title]
OR
[list of labels] [list of labels] [list of labels]
Grassroots Enterprises Dan Brown
client: prepared by:
Reports Module Redesign Thu Feb 22 2007
project: date:
Page 4 of 5
Speci cation 1.0
document: version:
17

27. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & & ) quot;
[Client name] [Client name] [Campaign name] [Client name] [Campaign name] [Client name] Watchlist
( Active By Label By Host All By Visits By Date By Label All By Date By Label All NONE
Compare Export Label Compare Export Label Compare Export Label Compare Export Label
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launched on: mm/dd/yyyy
NONE
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: select label...
Aspects = set of pages
•
&# [Name of Campaign] [Name of Page] [Name of Alert] [launch date] [Name of Item]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date] add to/remove from watchlist remove from watchlist
[page title] [alert title] [item title]
OR
• Detail = high
[list of labels] [list of labels] [list of labels]
• Description = minimal
• Abstraction = A LOT
• Constraints = highly abstract, limit detail
Grassroots Enterprises Dan Brown
client: prepared by:
Reports Module Redesign Thu Feb 22 2007
project: date:
Page 4 of 5
Speci cation 1.0
document: version:
17

28. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & &
[Client name] [Client name] [Campaign name] [Client name] [Campaign name]
( Active By Label By Host All By Visits By Date By Label All By Date By Label All
Compare Export Label Compare Export Label Compare Export Label
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launche
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: sele
&# [Name of Campaign] [Name of Page] [Name of Alert]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date]
[page title] [alert title]
[list of labels] [list of labels]
18

29. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & &
[Client name] [Client name] [Campaign name] [Client name] [Campaign name]
( Active By Label By Host All By Visits By Date By Label All By Date By Label All
Compare Export Label Compare Export Label Compare Export Label
Multiple audiences:
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launche
• Stakeholders
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: sele
• Technologists
&# [Name of Campaign] [Name of Page] [Name of Alert]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date]
[page title] [alert title]
[list of labels] [list of labels]
18

30. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & &
[Client name] [Client name] [Campaign name] [Client name] [Campaign name]
( Active By Label By Host All By Visits By Date By Label All By Date By Label All
Compare Export Label Compare Export Label Compare Export Label
one audience:
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launche
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: sele
&# [Name of Campaign] [Name of Page] [Name of Alert]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date]
[page title] [alert title]
[list of labels] [list of labels]
18

31. ॰‫ ݏ‬ԏ
৺ӹ৺ ‫ݏ‬
XXXXXX > XXXXXX > XXXXXX
• The LIST TEMPLATE provides a page structure for
ÿ XXX | XXX | XXX displaying lists of objects--campaigns, pages, or alerts.
• Each campaign has lists dedicated to pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Each campaign also has a quot;watchlistquot;, rendered in the same
XXXXXXXXX XXX | XXX | XXX
template, that combines both pages and alerts.
XXXXXXXXX XXX | XXX | XXX
• Users may add pages and alerts to the watchlist, though a
XXXXXXXXX XXX | XXX | XXX
campaign's watchlist is shared by all users of the system.
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
XXXXXXXXX XXX | XXX | XXX
& & &
[Client name] [Client name] [Campaign name] [Client name] [Campaign name]
( Active By Label By Host All By Visits By Date By Label All By Date By Label All
Compare Export Label Compare Export Label Compare Export Label
one audience:
By Label Filter by label: select label... By Date Show pages launched on: mm/dd/yyyy By Date Show alerts launche
By Host Filter by host: select host... By Label Filter by label: select label... By Label Filter by label: sele
•ME
&# [Name of Campaign] [Name of Page] [Name of Alert]
watch list alerts list page list [launch date] add to/remove from watchlist [launch date]
[page title] [alert title]
[list of labels] [list of labels]
18

32. Purpose = explain business rules
•
Audience = stakeholders, technologists, others?
•
Context = requirements elicitation
•
Information = meeting notes
•

33. Aspect = rules constraining interactions
•
Detail = as much as possible
•
Describe = rule “headline” and details
•
Abstractions = visualize
•
Constraints = incorporate pictures
•

34. Unused activation Passes expire at 23:59 CT
Activation codes expire Client can create passes
codes expire after on the third day after
after one use. for distribution.
predetermined date. activation.
Passes may be created by either the Marketing
Su M T W Th F Sa
Department or Customer Service, and each will be
coded uniquely for tracking purposes.

Passes created by Client may break any of the rules in
this row (expiration and duration).
Pass Activated Here Pass Expires Here
The system will be exible so Client can create passes The system will be exible so Client can create codes The system will be exible so Client can create passes
that can be used more than one. that have longer lifespans. that last longer than three days.
Every pass is a quot;childquot;
Guest registrations share Subscribers are allowed All dates and times are
account assigned to a
the namespace with ve invitations a day. in Central Time.
quot;super-parentquot; account.
regular subscriptions
Tuesday Wednesday Thursday
CHILD CHILD
SUBSCRIBER
CHILD
GUEST SUPER
PARENT
CHILD
CHILD
NAMESPACE
CHILD
21

35. ion Passes expire at 23:59 CT
Client
ter on the third day after
fo
ate. activation.
Passes may
Su M T W Th F Sa
Department o
coded u
Passes created
this ro
Pass Activated Here Pass Expires Here
n create codes The system will be exible so Client can create passes
s. that last longer than three days.
Every pass is a quot;childquot;
owed All da 22

36. Purpose = define scope of content
•
Audience = stakeholders, money
•
Context = direction-setting
•
Information = none
•

37. Aspect = relationship between key content
•
Detail = as little as possible
•
Describe = label concepts
•
Abstractions = line formatting, color coding
•
Constraints = limit depth and detail
•

38. 25

39. Thanks!
Dan Brown
dan@eightshapes.com
www.communicatingdesign.com