1.
Designing Rules
The Engine of User
Experience
by Dan Brown, EightShapes
IA Summit 2009, Memphis, TN, USA
1
Monday, March 23, 2009

2.
1
Monday, March 23, 2009

3.
Please tag with:
#rules
#ias09
2
Monday, March 23, 2009

4.
2
Monday, March 23, 2009

5.
3
Monday, March 23, 2009

6.
Not these kinds of rules
3
Monday, March 23, 2009

7.
4
Monday, March 23, 2009

8.
These kinds of rules
4
Monday, March 23, 2009

9.
These kinds of rules
4
Monday, March 23, 2009

10.
These kinds of rules
4
Monday, March 23, 2009

11.
These kinds of rules
4
Monday, March 23, 2009

12.
5
Monday, March 23, 2009

13.
What is a rule?
5
Monday, March 23, 2009

14.
6
Monday, March 23, 2009

15.
An engine?
6
Monday, March 23, 2009

16.
7
Monday, March 23, 2009

17.
A recipe?
7
Monday, March 23, 2009

18.
8
Monday, March 23, 2009

19.
An editor?
8
Monday, March 23, 2009

20.
9
Monday, March 23, 2009

21.
Defining the Damn Thing
9
Monday, March 23, 2009

22.
Defining the Damn Thing
9
Monday, March 23, 2009

23.
10
Monday, March 23, 2009

24.
What We Do
10
Monday, March 23, 2009

25.
What We Do
10
Monday, March 23, 2009

26.
11
Monday, March 23, 2009

27.
What I Do
11
Monday, March 23, 2009

28.
What I Do
11
Monday, March 23, 2009

29.
What I Do
11
Monday, March 23, 2009

30.
What I Do
11
Monday, March 23, 2009

31.
What I Do
11
Monday, March 23, 2009

32.
What I Do
more
abstract
11
Monday, March 23, 2009

33.
What I Do
more
abstract
11
Monday, March 23, 2009

34.
12
Monday, March 23, 2009

35.
Content Rules
12
Monday, March 23, 2009

36.
13
Monday, March 23, 2009

37.
cooksillustrated.com
13
Monday, March 23, 2009

38.
cooksillustrated.com
13
Monday, March 23, 2009

39.
14
Monday, March 23, 2009

40.
Navigation Rules
14
Monday, March 23, 2009

41.
15
Monday, March 23, 2009

42.
cnet.com » mp3 players
15
Monday, March 23, 2009

43.
cnet.com » mp3 players
15
Monday, March 23, 2009

44.
16
Monday, March 23, 2009

45.
cnet.com » digital cameras
16
Monday, March 23, 2009

46.
cnet.com » digital cameras
16
Monday, March 23, 2009

47.
17
Monday, March 23, 2009

48.
“Business Rules”
17
Monday, March 23, 2009

49.
18
Monday, March 23, 2009

50.
Ecommerce Product Page
18
Monday, March 23, 2009

51.
Ecommerce Product Page
18
Monday, March 23, 2009

52.
19
Monday, March 23, 2009

53.
Taxonomy Insuficient
19
Monday, March 23, 2009

54.
Taxonomy Insuficient
Criteria for selecting
behaviors or responses within
the context of a presentation
19
Monday, March 23, 2009

55.
20
Monday, March 23, 2009

56.
Rules are not...
20
Monday, March 23, 2009

57.
21
Monday, March 23, 2009

58.
Patterns
21
Monday, March 23, 2009

59.
22
Monday, March 23, 2009

60.
Carousel Pattern
Yahoo Pattern Library
22
Monday, March 23, 2009

61.
23
Monday, March 23, 2009

62.
Components
23
Monday, March 23, 2009

63.
24
Monday, March 23, 2009

64.
Accordion Component
Sun WebDesign
24
Monday, March 23, 2009

65.
25
Monday, March 23, 2009

66.
IA is a web site’s
“language”
25
Monday, March 23, 2009

67.
26
Monday, March 23, 2009

68.
Content Rules
26
Monday, March 23, 2009

69.
27
Monday, March 23, 2009

70.
Content Rules »
Action
27
Monday, March 23, 2009

71.
28
Monday, March 23, 2009

72.
Content Rules »
Scope
28
Monday, March 23, 2009

73.
29
Monday, March 23, 2009

74.
Content Rules »
Filter
29
Monday, March 23, 2009

75.
30
Monday, March 23, 2009

76.
Content Rules »
Quantity
30
Monday, March 23, 2009

77.
31
Monday, March 23, 2009

78.
Content Rules »
Format
31
Monday, March 23, 2009

79.
32
Monday, March 23, 2009

80.
Content Rules »
Default
32
Monday, March 23, 2009

81.
33
Monday, March 23, 2009

82.
Navigation Rules
33
Monday, March 23, 2009

83.
34
Monday, March 23, 2009

84.
Navigation Rules »
Facets
34
Monday, March 23, 2009

85.
35
Monday, March 23, 2009

86.
Navigation Rules »
Options
35
Monday, March 23, 2009

87.
36
Monday, March 23, 2009

88.
Navigation Rules »
Range
36
Monday, March 23, 2009

89.
37
Monday, March 23, 2009

90.
Navigation Rules »
Eect
37
Monday, March 23, 2009

91.
38
Monday, March 23, 2009

92.
Navigation Rules »
See All
38
Monday, March 23, 2009

93.
39
Monday, March 23, 2009

94.
Documenting Rules
39
Monday, March 23, 2009

95.
40
Monday, March 23, 2009

96.
Wireframe Annotations
40
Monday, March 23, 2009

97.
41
Monday, March 23, 2009

98.
Wireframe Annotations »
Prose
41
Monday, March 23, 2009

99.
Wireframe Annotations »
Prose
41
Monday, March 23, 2009

100.
Wireframe Annotations »
Prose
If the customerʼs
state is nexus,
show sales tax.
41
Monday, March 23, 2009

101.
42
Monday, March 23, 2009

102.
Wireframe Annotations »
Pseudo-code
42
Monday, March 23, 2009

103.
Wireframe Annotations »
Pseudo-code
42
Monday, March 23, 2009

104.
Wireframe Annotations »
Pseudo-code
Display Conditions
• IF state=nexus
• THEN display tax
42
Monday, March 23, 2009

105.
43
Monday, March 23, 2009

106.
Wireframe Annotations »
Table
43
Monday, March 23, 2009

107.
Wireframe Annotations »
Table
43
Monday, March 23, 2009

108.
Wireframe Annotations »
Table
Area Content Type Quantity Criteria
1 Article 3-5 Latest
2 Comments 3 Most Useful
43
Monday, March 23, 2009

109.
44
Monday, March 23, 2009

110.
Wireframe Content
44
Monday, March 23, 2009

111.
Wireframe Content
44
Monday, March 23, 2009

112.
Wireframe Content
Latest Articles
• [Article Headline] • [Pub Date]
[Summary (160 chars)]
more...
• [Article Headline] • [Pub Date]
[Summary (160 chars)]
more...
• [Article Headline] • [Pub Date]
[Summary (160 chars)]
more...
44
Monday, March 23, 2009

113.
M996S!quot;###*
M996S!quot;###+
M996S!quot;###,
Z3*!quot;#$%BEDE..GD=(0**5EG Z3*!quot;#$%BEDE..GD=((3* Z3*!quot;#$%BEDE..GD=((3*(5
E))5*00*0Q1=?13E3*12?F(5?(()7 F-1G)132E3)EGG=?*-31=0Q1=?137 B(5*-31=0Q1=?13EF-1G)1327
P?*F-1G)132Q(-G)?E*1=0(Q3
!quot;#$%E0Q*GG7
`OGE2=?5(Q3Q?*3
A(B.E3D3EB*?E0F**3
! B(*)=(E))5*00G13*E3)
-./0123435quot;6578quot;97:quot;;=quot;7?@AB=Cquot;D3A:E03F -0*)=(BE,*BE=A?7
_IEA=
quot;O=?*E))5*00
.5(1)*)BE=A?*0
E=A?
*IEA=GD8=?*0D0=*B
Q1GG5*=-535*0-G=
]X6^
A()*X67
YD
'(B.E3D '(B.E3DKEB*
E..G1*)E0O1G=*5=(
B-G=1.G*BE=A?G10=7
-G=1.G*
quot;O=?*E))5*00AE3
(3GD.E5=1EGGDBE=A?8
E=A?
=?*0D0=*BQ1GGO1G=*5
5*0-G=0FE0*)(3
]MML%^
A(B.E3D3EB*7
45
Monday, March 23, 2009

114.
M996S!quot;###*
M996S!quot;###+
Flows M996S!quot;###,
Z3*!quot;#$%BEDE..GD=(0**5EG Z3*!quot;#$%BEDE..GD=((3* Z3*!quot;#$%BEDE..GD=((3*(5
E))5*00*0Q1=?13E3*12?F(5?(()7 F-1G)132E3)EGG=?*-31=0Q1=?137 B(5*-31=0Q1=?13EF-1G)1327
P?*F-1G)132Q(-G)?E*1=0(Q3
!quot;#$%E0Q*GG7
`OGE2=?5(Q3Q?*3
A(B.E3D3EB*?E0F**3
! B(*)=(E))5*00G13*E3)
-./0123435quot;6578quot;97:quot;;=quot;7?@AB=Cquot;D3A:E03F -0*)=(BE,*BE=A?7
_IEA=
quot;O=?*E))5*00
.5(1)*)BE=A?*0
E=A?
*IEA=GD8=?*0D0=*B
Q1GG5*=-535*0-G=
]X6^
A()*X67
YD
'(B.E3D '(B.E3DKEB*
E..G1*)E0O1G=*5=(
B-G=1.G*BE=A?G10=7
-G=1.G*
quot;O=?*E))5*00AE3
(3GD.E5=1EGGDBE=A?8
E=A?
=?*0D0=*BQ1GGO1G=*5
5*0-G=0FE0*)(3
]MML%^
A(B.E3D3EB*7
45
Monday, March 23, 2009

115.
46
Monday, March 23, 2009

116.
What makes a good rule?
46
Monday, March 23, 2009

117.
47
Monday, March 23, 2009

118.
Good Rules »
User-Centered
47
Monday, March 23, 2009

119.
48
Monday, March 23, 2009

120.
Good Rules »
Unambiguous
48
Monday, March 23, 2009

121.
49
Monday, March 23, 2009

122.
Good Rules »
Feasible
49
Monday, March 23, 2009

123.
50
Monday, March 23, 2009

124.
Good Rules »
Specified Responsibility
50
Monday, March 23, 2009

125.
51
Monday, March 23, 2009

126.
Good Rules »
Comprehensive
51
Monday, March 23, 2009

127.
52
Monday, March 23, 2009

128.
Good Rules »
Gracefully Degradeable
52
Monday, March 23, 2009

129.
53
Monday, March 23, 2009

130.
Do the right thing
53
Monday, March 23, 2009

131.
Thanks!
dan@eightshapes.com
social networks:
54
Monday, March 23, 2009

132.
Photo Credits
3 http://plainview.files.wordpress.com/2009/02/moses1.jpg
6 http://www.drivingenthusiast.net/SD-mazda/products/mazdaspeed3/engine/MAZDA3_engine_HR.jpg
7 http://lh4.ggpht.com/_o456qV7CNhQ/RhyHtSLCToI/AAAAAAAAAWw/__S_7cHPCmk/p0002180.jpg
8 http://www.hadesign.net/images/WTVI/WTVI%20QC%20room.jpg
19 http://www.checkout.org.cn/news/mmg/media/images/platypus3_h.jpg
21 http://farm4.static.flickr.com/3401/3267227227_660b6ab4f4_b.jpg
23 http://farm3.static.flickr.com/2210/2314610838_beecd46647_o.jpg
25 http://www.gutenberg.org/files/16352/16352-h/images/p1.jpg
28 http://www.flickr.com/photos/lencioni/2223801603/sizes/l/
30 http://www.creativecookware.com/images/measuring%20cups%20spoons.JPG
32 http://www.flickr.com/photos/jamesjordan/2226419650/sizes/o/
34 http://www.uncg.edu/rom/courses/dafein/civ/nude_no2.jpg
37 http://www.flickr.com/photos/mhartford/69673975/sizes/o/
49 http://www.meridian.net.au/Art/Artists/MCEscher/Gallery/Images/escher-relativity-woodcut-medium.jpg
50 http://www.flickr.com/photos/dystopos/17007801/sizes/o/
52 Canʼt find source. If this is your photo, please email me!
55
Monday, March 23, 2009