About the Authors |
|
v | |
Credits |
|
vi | |
Authors' Acknowledgments |
|
viii | |
Contents |
|
ix | |
Introduction |
|
1 | (8) |
|
A summary of the documents |
|
|
2 | (5) |
|
Putting the documents into context |
|
|
7 | (1) |
|
|
8 | (1) |
|
|
9 | (34) |
|
What makes a good persona? |
|
|
11 | (7) |
|
|
11 | (1) |
|
What are you communicating? |
|
|
11 | (1) |
|
Use short descriptive bulleted points |
|
|
12 | (1) |
|
Base personas on real people |
|
|
12 | (1) |
|
Use descriptive photography |
|
|
12 | (2) |
|
|
14 | (1) |
|
|
14 | (1) |
|
|
14 | (1) |
|
|
14 | (1) |
|
|
14 | (1) |
|
|
14 | (1) |
|
|
15 | (1) |
|
|
15 | (1) |
|
|
16 | (1) |
|
|
17 | (1) |
|
Research and workshop ideas |
|
|
18 | (6) |
|
|
18 | (1) |
|
Research Technique: Listen in on call centers |
|
|
19 | (1) |
|
Research Technique: Conduct depth interviews |
|
|
20 | (1) |
|
Research Technique: Conduct ethnographic research |
|
|
20 | (1) |
|
Workshop Idea: Define your personas |
|
|
21 | (3) |
|
How To: Create personas in Power Point |
|
|
24 | (10) |
|
Creating and setting up the slide presentation |
|
|
24 | (1) |
|
Adding persona images and titles |
|
|
25 | (1) |
|
|
25 | (2) |
|
|
27 | (1) |
|
Adding icons, subheadings, and bulleted lists |
|
|
28 | (1) |
|
|
29 | (1) |
|
|
30 | (1) |
|
|
30 | (4) |
|
How To: Create personas in OmniGraffle Pro |
|
|
34 | (9) |
|
Creating and setting up the presentation |
|
|
34 | (1) |
|
Adding persona images and titles |
|
|
35 | (1) |
|
|
35 | (1) |
|
|
36 | (1) |
|
|
37 | (1) |
|
Adding subheadings and bulleted lists |
|
|
38 | (1) |
|
|
38 | (1) |
|
|
39 | (1) |
|
|
40 | (3) |
|
|
43 | (34) |
|
What makes a good task model? |
|
|
45 | (4) |
|
When to create a task model |
|
|
45 | (1) |
|
What are you communicating? |
|
|
45 | (2) |
|
|
47 | (1) |
|
|
47 | (1) |
|
|
47 | (1) |
|
|
48 | (1) |
|
Who or what are they interacting with? |
|
|
49 | (1) |
|
|
49 | (1) |
|
|
49 | (1) |
|
|
49 | (1) |
|
The anatomy of a task model |
|
|
49 | (4) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
51 | (1) |
|
|
52 | (1) |
|
Research and workshop ideas |
|
|
53 | (5) |
|
Research Technique: Conduct research |
|
|
53 | (1) |
|
|
53 | (1) |
|
Make contextual observations |
|
|
53 | (1) |
|
|
54 | (1) |
|
Workshop Idea: Analyze data |
|
|
55 | (1) |
|
|
55 | (1) |
|
|
55 | (1) |
|
|
55 | (1) |
|
Identify the user behavior |
|
|
55 | (1) |
|
|
56 | (2) |
|
How To: Create task models in OmniGraffle |
|
|
58 | (11) |
|
|
58 | (2) |
|
|
60 | (1) |
|
Creating a title for your document |
|
|
60 | (1) |
|
|
60 | (1) |
|
|
61 | (1) |
|
Creating a controlled evaluation |
|
|
62 | (2) |
|
Creating a complex evaluation |
|
|
64 | (1) |
|
|
65 | (3) |
|
|
68 | (1) |
|
How To: Create task models in PowerPoint |
|
|
69 | (8) |
|
|
69 | (1) |
|
|
70 | (1) |
|
|
70 | (1) |
|
|
70 | (2) |
|
Creating a controlled evaluation |
|
|
72 | (2) |
|
|
74 | (2) |
|
Adding the finishing touches |
|
|
76 | (1) |
|
|
77 | (26) |
|
What makes a good user journey? |
|
|
79 | (7) |
|
When to create a user journey |
|
|
79 | (1) |
|
|
79 | (1) |
|
|
80 | (1) |
|
What are you communicating? |
|
|
80 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
81 | (1) |
|
|
82 | (1) |
|
|
82 | (1) |
|
|
82 | (1) |
|
The anatomy of a user journey |
|
|
82 | (1) |
|
|
82 | (1) |
|
|
82 | (1) |
|
Start steps and end steps |
|
|
82 | (1) |
|
|
83 | (1) |
|
|
83 | (1) |
|
|
83 | (1) |
|
|
83 | (1) |
|
|
83 | (1) |
|
|
83 | (1) |
|
How to validate the user journey |
|
|
84 | (1) |
|
User testing of wireframes, designs, and live sites |
|
|
84 | (1) |
|
A/B testing and multivariate testing (MVT) |
|
|
85 | (1) |
|
Research and workshop ideas |
|
|
86 | (3) |
|
Research Technique: Process sorting |
|
|
86 | (1) |
|
Workshop Idea: Examine user journeys |
|
|
87 | (1) |
|
|
87 | (1) |
|
|
88 | (1) |
|
|
88 | (1) |
|
How To: Create a user journey in OmniGraffle |
|
|
89 | (9) |
|
|
90 | (1) |
|
|
91 | (1) |
|
|
92 | (1) |
|
|
92 | (1) |
|
Using magnetic shapes and arrows |
|
|
93 | (1) |
|
|
94 | (1) |
|
Styling the curved arrows |
|
|
95 | (1) |
|
|
96 | (2) |
|
How To: Create a user journey in PowerPoint |
|
|
98 | (5) |
|
|
98 | (2) |
|
|
100 | (1) |
|
|
100 | (1) |
|
|
101 | (1) |
|
|
102 | (1) |
|
|
102 | (1) |
|
Chapter 4 Content requirements |
|
|
103 | (20) |
|
What makes a good content requirements document? |
|
|
105 | (18) |
|
When to create a content requirements document? |
|
|
105 | (1) |
|
What are you communicating? |
|
|
105 | (1) |
|
|
105 | (1) |
|
Instructions and functionality |
|
|
106 | (1) |
|
Data and specification information |
|
|
106 | (1) |
|
|
106 | (1) |
|
|
106 | (1) |
|
What makes the perfect content requirements document? |
|
|
107 | (1) |
|
|
107 | (1) |
|
|
108 | (1) |
|
|
108 | (1) |
|
|
108 | (1) |
|
|
108 | (1) |
|
|
108 | (1) |
|
Required elements and suggestions |
|
|
108 | (1) |
|
|
109 | (1) |
|
|
109 | (1) |
|
Content testing in context |
|
|
109 | (1) |
|
Content variation testing |
|
|
110 | (1) |
|
Research and workshop ideas |
|
|
111 | (1) |
|
Research Technique: Immerse yourself in the topic |
|
|
111 | (1) |
|
Workshop Idea: Audit content |
|
|
112 | (1) |
|
Research Technique: Listen to and observe users |
|
|
113 | (1) |
|
Research Technique: Use benchmark testing |
|
|
114 | (2) |
|
How To: Create a content requirements document in Word |
|
|
116 | (1) |
|
|
116 | (1) |
|
|
116 | (1) |
|
|
116 | (1) |
|
|
117 | (1) |
|
|
118 | (3) |
|
|
121 | (2) |
|
|
123 | (37) |
|
What makes a good sitemap? |
|
|
125 | (6) |
|
|
125 | (1) |
|
When you need to audit your current content |
|
|
125 | (1) |
|
When you need to enhance or improve your current site structure |
|
|
125 | (1) |
|
When you are creating a new website |
|
|
126 | (1) |
|
What are you communicating? |
|
|
126 | (1) |
|
|
127 | (1) |
|
Wireframers and designers |
|
|
127 | (1) |
|
|
128 | (1) |
|
|
128 | (1) |
|
|
128 | (1) |
|
|
128 | (1) |
|
Different styles of sitemaps |
|
|
129 | (1) |
|
The anatomy of a spreadsheet sitemap |
|
|
130 | (1) |
|
|
130 | (1) |
|
Add a column to specify template numbers |
|
|
130 | (1) |
|
|
130 | (1) |
|
Use flags for non-existent content |
|
|
131 | (1) |
|
|
131 | (1) |
|
Use shading for visual grouping of navigation categories |
|
|
131 | (1) |
|
The anatomy of a visual sitemap |
|
|
131 | (3) |
|
1 Don't make your connecting lines too dark |
|
|
131 | (1) |
|
2 Use shading to show levels |
|
|
131 | (1) |
|
|
131 | (1) |
|
|
132 | (1) |
|
5 Separate logged in areas |
|
|
132 | (1) |
|
6 Flag non-existent content |
|
|
132 | (1) |
|
|
132 | (1) |
|
8 Visually differentiate other content types |
|
|
132 | (2) |
|
Research and workshop ideas |
|
|
134 | (8) |
|
Research Technique: Use site analytics and search logs |
|
|
134 | (1) |
|
Research Technique: Use open-card sorting |
|
|
135 | (2) |
|
Research Technique: Determine the pages you need |
|
|
137 | (1) |
|
Research Technique: Validate your sitemap |
|
|
138 | (1) |
|
|
138 | (1) |
|
Remote navigation testing |
|
|
139 | (3) |
|
How To: Create a sitemap in PowerPoint |
|
|
142 | (6) |
|
|
142 | (1) |
|
Creating and shading boxes |
|
|
142 | (2) |
|
|
144 | (1) |
|
|
145 | (1) |
|
|
146 | (2) |
|
How To: Create a sitemap in OmniGrafle |
|
|
148 | (5) |
|
|
148 | (1) |
|
Creating boxes with magnetic points |
|
|
148 | (2) |
|
|
150 | (1) |
|
|
151 | (2) |
|
How To: Create a sitemap in Excel |
|
|
153 | (7) |
|
Writing labels and wrapping text |
|
|
153 | (1) |
|
|
154 | (2) |
|
Adding new rows and columns |
|
|
156 | (4) |
|
|
160 | (103) |
|
What makes a good wireframe? |
|
|
162 | (16) |
|
When to create a wireframe? |
|
|
162 | (1) |
|
What are you communicating? |
|
|
162 | (1) |
|
|
162 | (1) |
|
|
162 | (1) |
|
|
162 | (1) |
|
|
163 | (1) |
|
|
163 | (1) |
|
|
163 | (1) |
|
|
163 | (1) |
|
|
164 | (1) |
|
|
165 | (1) |
|
Related business functions |
|
|
166 | (1) |
|
|
166 | (1) |
|
|
167 | (1) |
|
|
167 | (1) |
|
Write clear page titles and numbers |
|
|
167 | (1) |
|
Work in actual pixels when possible |
|
|
167 | (1) |
|
Use shading to show visual weighting |
|
|
168 | (1) |
|
Avoid black text lines or shapes |
|
|
168 | (1) |
|
|
169 | (1) |
|
Use real images where necessary |
|
|
169 | (1) |
|
Write descriptive image placeholders |
|
|
169 | (1) |
|
|
169 | (1) |
|
Clearly link the notes and wireframes |
|
|
169 | (1) |
|
|
169 | (1) |
|
|
169 | (1) |
|
|
169 | (1) |
|
|
170 | (1) |
|
|
171 | (1) |
|
Design principles for wireframes |
|
|
171 | (1) |
|
|
172 | (1) |
|
|
173 | (1) |
|
|
174 | (1) |
|
|
174 | (2) |
|
Stepping back to help give focus |
|
|
176 | (1) |
|
|
176 | (2) |
|
Research and workshop ideas |
|
|
178 | (8) |
|
Workshop Idea: Prioritize content |
|
|
179 | (2) |
|
Workshop Idea: Generate ideas |
|
|
181 | (1) |
|
Workshop Idea: Create a healthy perspective |
|
|
182 | (4) |
|
How To: Create wireframes in OmniGraffle |
|
|
186 | (54) |
|
|
188 | (1) |
|
|
188 | (1) |
|
|
188 | (1) |
|
|
189 | (1) |
|
|
190 | (1) |
|
|
191 | (1) |
|
|
192 | (1) |
|
|
193 | (2) |
|
Creating page titles with variables |
|
|
195 | (5) |
|
Working with the page outline |
|
|
200 | (3) |
|
Creating a custom page grid |
|
|
203 | (7) |
|
Creating LinkBack objects |
|
|
210 | (3) |
|
|
213 | (1) |
|
Using basic boxes to mark out content areas |
|
|
213 | (2) |
|
|
215 | (5) |
|
|
220 | (5) |
|
|
225 | (4) |
|
|
229 | (3) |
|
|
232 | (5) |
|
|
237 | (3) |
|
How To: Create wireframes in Axure |
|
|
240 | (16) |
|
|
240 | (2) |
|
|
242 | (1) |
|
Creating and styling basic shapes |
|
|
242 | (2) |
|
|
244 | (3) |
|
|
247 | (2) |
|
|
249 | (3) |
|
|
252 | (4) |
|
How To: Create wireframes in PowerPoint |
|
|
256 | (7) |
|
|
256 | (1) |
|
|
256 | (1) |
|
|
257 | (1) |
|
|
258 | (1) |
|
Creating the page outline |
|
|
258 | (1) |
|
Creating the tabbed navigation |
|
|
258 | (1) |
|
|
259 | (2) |
|
|
261 | (2) |
|
Chapter 7 Usability Test Reports |
|
|
263 | (28) |
|
What makes a good test report? |
|
|
265 | (7) |
|
When to create a test report |
|
|
265 | (1) |
|
What are you communicating? |
|
|
265 | (1) |
|
Anatomy of the perfect test report |
|
|
266 | (1) |
|
|
266 | (1) |
|
|
267 | (1) |
|
|
267 | (1) |
|
|
267 | (1) |
|
|
267 | (1) |
|
|
267 | (1) |
|
|
267 | (1) |
|
Additional slides to include in your test report |
|
|
267 | (5) |
|
|
272 | (1) |
|
Those who roll their sleeves up |
|
|
272 | (1) |
|
Those who just want the findings |
|
|
272 | (1) |
|
Those who trust your expertise |
|
|
272 | (1) |
|
Those who want the big picture |
|
|
272 | (1) |
|
Note-taking and research tips |
|
|
272 | (4) |
|
Taking notes for exploratory tests |
|
|
273 | (1) |
|
|
274 | (1) |
|
Taking notes for design validation tests |
|
|
274 | (2) |
|
Research and workshop ideas |
|
|
276 | (5) |
|
Workshop Idea: Identify themes |
|
|
276 | (1) |
|
Workshop Idea: Prioritize findings |
|
|
277 | (1) |
|
Conducting a prioritization workshop |
|
|
277 | (1) |
|
Workshop Idea: Practice presenting the findings |
|
|
278 | (3) |
|
How To: Create a report in PowerPoint |
|
|
281 | (10) |
|
|
281 | (1) |
|
|
281 | (2) |
|
|
283 | (1) |
|
Creating a custom color palette |
|
|
284 | (1) |
|
|
285 | (1) |
|
|
286 | (1) |
|
|
286 | (1) |
|
|
287 | (2) |
|
|
289 | (1) |
|
|
290 | (1) |
|
Chapter 8 Funnel Diagrams |
|
|
291 | (32) |
|
What makes a good funnel diagram? |
|
|
293 | (8) |
|
When to create a funnel diagram |
|
|
293 | (1) |
|
When you need to convince stakeholders that there is a problem |
|
|
293 | (1) |
|
When you need to conduct user testing |
|
|
294 | (1) |
|
What are you communicating? |
|
|
294 | (1) |
|
|
294 | (2) |
|
|
296 | (1) |
|
|
297 | (1) |
|
Anatomy of a funnel diagram |
|
|
298 | (1) |
|
1 Use a title that explains the purpose of the document |
|
|
298 | (1) |
|
2 Use blocks to show the number of users who visited each page |
|
|
298 | (1) |
|
3 Base the percentages on the number of users who started the process |
|
|
298 | (1) |
|
4 Use shading to emphasize visitor numbers |
|
|
299 | (1) |
|
5 Use text size to emphasize visitor numbers |
|
|
299 | (1) |
|
6 Include the key issues with each page |
|
|
299 | (1) |
|
|
300 | (1) |
|
|
300 | (1) |
|
The product managers and senior stakeholders |
|
|
300 | (1) |
|
Research and workshop ideas |
|
|
301 | (3) |
|
Research Technique: Get to the what |
|
|
301 | (1) |
|
Research Technique: Get to the why |
|
|
302 | (1) |
|
|
302 | (1) |
|
|
302 | (1) |
|
|
303 | (1) |
|
How To: Create a funnel diagram in OmniGraffle |
|
|
304 | (10) |
|
|
304 | (1) |
|
|
305 | (1) |
|
Representing the pages and percentages |
|
|
305 | (5) |
|
|
310 | (4) |
|
How To: Create a funnel diagram in PowerPoint |
|
|
314 | (9) |
|
|
314 | (1) |
|
|
314 | (1) |
|
Representing pages and percentages |
|
|
314 | (4) |
|
|
318 | (5) |
Index |
|
323 | |