Designing Rules ~ IA Summit 2009

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
6. Not these kinds of rules 3 Monday, March 23, 2009
8. 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. Deﬁning the Damn Thing 9 Monday, March 23, 2009
22. Deﬁning 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
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 » Speciﬁed 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

Editor's Notes

Documentation survey

What you should and should not do.
What kind of person you should be
Means for living with other humans.

Authors like: Doctorow Gaiman
Subjects like: Human behavior, Small business
Toys like: Thomas trains
Not that it picked things I’m interested in, but of all the things I’m interested in, it picked these.

▼
What is a rule?

plainview.files.wordpress.com—moses1.jpg

•Wireframe: what goes on the screen
•Rule: how the screen changes in different circumstances
•CORE IDEA:

▼Enginewww.drivingenthusiast.net—MAZDA3_engine_HR.jpg
•Not quite: while rules are crucial for \"driving\" the user experience, they aren't the heartbeat
or the central nervous system. Rules also are not a single cohesive system with lots of
moving parts. Rules are applied here and there as necessary.
Rules make use of the language of a web site without defining it.

▼Recipeslh4.ggpht.com—p0002180.jpg
•Not quite: while rules provide direction, rules aren't linear instructions -- they feel more like
mechanisms for selecting ingredients
Rules must apply in specific situations with clear criteria regarding presentation. The metaphor breaks down quickly.
I can use the same recipe when I want to make a dish.
Different circumstances call for different rules.
Doesn’t help us understand rules.

▼Editorwww.hadesign.net—WTVI QC room.jpg
•Help us make choices about what's seen and how we see it
•Director: overall experience
•Actor: content itself
Editor crafts one aspect of the experience: within the format of the medium and the parameters of the director’s vision, we get the editor

Editor: starts with piles of footage, pulls out the stuff that works best

We’ll consider some other metaphors later

For now, let’s see how rules fit into IA

▼A new-ish definition (more like a description) of IA, in decreasing tangibility:
•Templates: How content is arranged on the screen
•Navigation and classification: How people find content
•Content Types: set of content structures that give us a meaningful language for talking about the range of information on the site (functional content types vs. format content types)
•Rules: they're what stitch the experience together, like an editor

▼Why IAs should care about rules
•Rules are germane to the user experience
•IA work gets more abstract: talking about contnet in terms of it’s type
•IA needs a way to integrate real-world \"instances\" into abstract structures
•Rules are, in a sense, a structure that governs the implementation of content, that bridge the gap between the abstract structures we create to form context (Hinton) and the way those structures are populated
•They describe how everything fits together

Small amount of literature on this stuff: I struggled to find any thinking on the mechanisms behind the display, as related to user experience.

Rules govern different aspects of the user experience: Content.

▼Govern the display of content: Content Rules
•Conditional Display Rules -- Whether to show the box
•Filtering Rules -- What content to show in the box
▼Responsibility -- who controls the content
•Editorial Guidelines vs. Application Logic: rules followed by humans vs. rules implemented
by a system
▼Examples

•

cooksillustrated.com

Strong editorial influence here. Decisions that in other media might be left up to humans, we leave up to the machine, But we provide a set of guidelines to make sure it chooses wisely.

For cooks, you can imagine the range of considerations: latest, magazine, theme, categories
(Aside: tools for helping content editors do their jobs better)

Perhaps a little more obscure, a little more meta
Rules that govern how people experience the information
Imagine you could say, in rooms of this type, always show 3 exits

▼Govern the range of experience: Navigation Rules
•What menu options to display/facets
▼Examples

•

reviews.cnet.com—mp3-players

•

reviews.cnet.com—digital-cameras

Facets are the same, but the values vary
Clicking one yields the same result
Rules help select appropriate values
Highly mathematical/algorithmic

Not really editorial, not really about navigation

Kind of rudimentary example, but illustrates exactly what I’m talking about.

This is a foaming attachment for my Krups I bought recently.

Crucial information that might vary in different circumstances.

▼Govern the rendering of information
•Business rules around calculating price/shipping
•Business rules about options available to users
•Business rules about login/account information display
▼Filtering infinite information space
•Search results
•Flight searches
▼Example
•Offering different shipping options depending on destination
•Calculating shipping charge based on supplied ZIP code

ALSO: Decision Points

▼BUT: things are getting ambiguouswww.checkout.org.cn—platypus3_h.jpg
•The taxonomy here can not address every situation
•Products are becoming more complex
Some things in common:
Criteria for selecting behaviors or responses within the context of a presentation

▼Patternsfarm4.static.flickr.com—3267227227_660b6ab4f4_b.jpg
•Generalized approaches to common problems
•BUT: rules expressed as generalizations (choose latest content) without specific
applications
•AND: a pattern can describe the kinds of rules needed
•Example: developer.yahoo.com—pattern.php

▼Componentsfarm3.static.flickr.com—2314610838_beecd46647_o.jpg
•Layout of content specific to a design system
•BUT: one component can support multiple rules
•AND: a component can specify the kinds of rules needed
•Examples: www.sun.com—g39.html

▼Ruleswww.gutenberg.org—p1.jpg
•For a specific area of a specific interface, rules describe what content is to appear
•Rules use the language established for a specific web site: content types, metadata,
components
How do we structure rules?
What do we need to think about for each rule?

For any given rule, there are five things you need to think about.

Show/Display

Which content type

How select content from content type?
Separate from content type because dependency between filter and content type

How many items are you going to show?

What fields of the content will you show?

What’s the default?

http://www.flickr.com/photos/jamesjordan/2226419650/sizes/o/

Which category will serve as the navigation mechanism?

How will users select value? (menu, slider)

What are the upper and lower limits?

How does changing the value affect the display?

Can users see all content within the category?

Chooses content meaningful to the user

Leads to specific choices

Leverages existing IA parameters

Clear on how rule is enforced

Addresses all possible scenarios

Has a good default

Rules may not govern how we interact with people, but they do govern how our products behave relative to users
Another possibel metaphor: if not the soul of the product, then certainly its frontal lobe

Designing Rules ~ IA Summit 2009

You are reading a preview.

Designing Rules ~ IA Summit 2009

More Related Content

Featured

Related Books

Related Audiobooks