Index
Note: Page numbers with “f” denote figures, “t” denote tables and “b” denote boxes.
A
intuitive benefits, 168
push buttons, 165f
Agile development, 285–286
Manifesto for Agile Software Development, 286
Manifesto for Communication-Driven UI Design, 287
Airline travel desktop site, 303
designing pages, 316–318
expert evaluation, 319–320
flight selection to destination, 312–314
getting right details, 318–319
human communication, 309–311
making choice and getting real, 319
planning phase, 303
problem determination, 308–309
questions for travelers, 311–312
sketching, 314–315
task flow design, 314–316
top scenarios, 307–308
task-based design comparison, 307
user stories comparison, 308
usability labl studies, 320
user-centered design, 304
frequent business traveler, 305
leisure travel bargain hunter, 306
occasional business traveler, 304
understanding of target users, 306
value proposition, 303–304
wrap-up, 321
Airline travel mobile app, 321
access travel information traveler, 326–327
advantage, 321
designing screens, 328
for small touch screens, 329
getting right details, 329–330
making choice and getting real, 330
mobile inductive, 329
planning phase, 322–326
refinement phase, 330–331
top scenarios, 326
value proposition, 323
Alternatives to communication-focused design, 293–294
by formal requirements, 298
pros and cons, 299
programmer design, 294–295
sketching, 296
pros and cons, 297
with user stories, 299
for airline travel app, 299–300
pros and cons, 300
starting design, 296f
designing
attention animation, 184f–185f
energetic personality, 184
feedback, 184
personality, 184
guidelines, 186
nonverbal communication
visual communication, 181
Anthropomorphism, 201
Asking intuitive questions, 43
accessories in buying product context, 55f
asking once, 48
asking real question directly, 47
choosing response, 52f
clarification, 46f
enough information to answer intelligently, 50–54
long list, 52f
phrasing questions, 48f
recommendations, 53f
response selection, 52f
stopping proceedings with idiocy, 44f
unnecessary questions, 43–47
B
Banner
Best design idea identification, 269
BladtBlaster, See Handheld package-tracking device
improved, 254f
project themes, 260f
scenario, 254f
value proposition, 252f
C
Capitalization, 91–92
CAPTCHA, 209f
design elements, 160
for designing with color, 164
recommendations, 164
selection, 165b
flexibility, 163
primary colors, 160f
product’s accessibility, 159
Commands
command-labeling patterns, 85
icon and text labels, 86
icon-only labels, 85–86
intuitive UI designs, 86
tooltips, 86f
controls, 78
discoverability, directness, and consolidation, 79f
in-place commands, 79
adornments change, 80f
links, 73
ribbons, 83
combinations, 83
Communication brainstorming, 265
rules for, 266
typical brainstorming session, 266f
Communication design
necessary and unnecessary consistency
designers, 28
intuitive attributes, 27
users’ expectations, 27
user interface, 11
conversation, 12f
principles, 11
advantages, 244–245
enabling task, 246
interpersonal communication skills, 244
iterative process, 244f
UI design, 243
definition, 248
problems in, 246–247
requirements and features, 247f
applying core UI, 276
example, 276f
feedback, 276–277
scenario-based review, 275
Communication to people
annoyances, 230
constant reminders, 231f
critical message, 232f
demanding attention, 230
interrupting, 231
necessary confirmations, 232f
unnecessary confirmations, 231f
building trustworthiness, 221–225
complex tasks, 198f
courageous design
well-designed UIs, 233
effort minimization
CAPTCHA, 209f
display objects, 210
using plans, 209
scrollbar, 211f
simple test, 212
techniques, 209–210
well-designed UIs, 208
emotional connection
easy-to-read visual design, 199
modern user experiences, 199
software interaction, 200
forgiveness
performing wrong interactions, 215
providing wrong data, typos, 216
rewriting UI text, 218
selecting text in most browsers, 213f
standard controls, 215f
Undo/Redo commands, 212
working in wrong order, 218
wrong password, 216f
human/computer interaction, 199
motivating users
company lost to Mint, 207b
Mint homepage, 208f
product’s benefits, 207
by providing obvious value, 206
personality, 200
anthropomorphism, 201
attributes, 203
casual applications, 202f
consequences, 202f
emotional reaction, 200
formal environments, 202
technical challenges, 200f
product intelligence
attention, 230
modern user interfaces, 227
special experiences, 235–237
user interface, 197
Confirmations, 109
Format Local Disk confirmation, 282
interruptions for, 112
notice, 113f
real issue, 113f
necessary, 232f
for risky actions, 112
for scanning, 283f
scanning read of, 282f
security concern, 21f
unnecessary, 231f
Consistency, 63
animation vocabulary, 181
capitalization rules for, 157
necessary and unnecessary
designers, 28
intuitive attributes, 27
users’ expectations, 27
reconsidering, 174
use of affordances, 166
Controls, 69
body language, 69–70
control choice, 70
drop-down lists, 71–72
input controls, 71
multiple-selection list boxes, 72
numeric textboxes, 71
radio buttons, 71
single-selection list boxes, 72
sliders, 71
tabs, 73
textboxes, 71
Conversation pattern form, 101
Conversations
airline travel desktop site, 309–311
and communication attributes, 21
concise vs. self-explanatory, 89–90
in flight selection to destination, 314
labels and instructions, 90–91
advantages, 140
logical order vs. out-of-sequence, 138f
out-of-sequence jumble, 138
progressive disclosure, 140f
speech, 101
with software, 16f
design decisions, 265
design process, 265f
effective communication, 264
natural and friendly conversation, 14f
user’s language, 17
Courageous design, 233–234
Cross-fade transition, 182
Cursors, 122
D
Data controls, 74
tables, 74
trees, 74
Deductive user interface
focused nature of mobile apps, 43f
intuitive mobile task flows, 43
mobile app screens, 42
Delight
happy animation with, 184
personas, 255
Wufoo application, 234
Delighters, 32
Demand attention
abuse and habituation
overwarning, 190f
using warning icons, 190
attention-getting techniques, 187
attention-getting presentation, 187
end call button, 188f
modal dialog boxes, 189f
overlays, 188f
breaking users’ flow, 187
recommendations, 191
interruption, 191f
using progressive escalation, 192
visual designs, 186
Design feedback
responsive feedback, 26
for flight, 295f
pros and cons, 295
Design principles, See Communication design
Design process, 248
agile development, 285–286
interpretation, 286
Manifesto for Agile Software Development, 286
Manifesto for Communication-Driven UI Design, 287
classic design process mistakes, 250
ineffective process, 249–250
product design blunders, 250
communication brainstorming, 265–267
conversation with target user, 262–265
design alternatives, 268–269
determining project goals, 262
getting right details, 272
identifying best design ideas, 269–271
sketching, 267–268
traditional UI design process, 262b
giving and receiving feedback, 285
personas, 255–260
project themes, 260–261
scenario-based design, 253–255
communication reviews, 275–277
expert-based evaluation, 273
highlighter reviews, 277–280
scanning reviews, 277–280
scenario-based reviews, 274–275
UI design, 272
user-based evaluation, 273
Direct commands, 78
Discoverability commands, 78
Double-clicking, 67–68
Dynamic elements
balance power and simplicity, 114–115
categories, 114
classic and modern UI, 114
direct manipulation, 119
advantage, 120
approaches, 120–123
discoverability problem solution, 124
dynamic interactions, 115
dynamic resizing, 116
dynamic secondary commands
commands with video players, 119f
progressive disclosure, 115
Dynamic secondary UI elements, 116
E
Error, 18
color, 160t–161t
handing, 272
interruptions for, 110
law enforcement tone, 205f
disabling, 76
giving, 77
removing, 76
overlay, 179t
preventing mistargeting, 213
symbol, 175t–178t
F
animations, 93–94
for deleting document, 93f
design feedback
responsive feedback, 26
progressive rendering, 93
Feedback technique, 134f
costs for, 30
performing wrong interactions, 215
providing wrong data, typos, 216
rewriting UI text, 218
selecting text in most browsers, 213f
standard controls, 215f
Undo/Redo commands, 212
working in wrong order, 218
wrong password, 216f
engaging, 234f
special experiences, 235–237
Wufoo’s fun personality and attitude, 235
G
intuitive icon designs
icon types, 171–173
labeled icon and experiments, 178
labels vs., 169
recommendation, 170
recognition vs. comprehension
standard icons, 170
target user’s comprehension, 171
visual recognition, 170
selection, 178b
Graphic designers, 132
disastrous collaboration, 133f
feedback technique, 134f
saving time and money, 132
tips, 134
UI design skills, 133
H
Handheld package-tracking device
for project themes, 260f
scenario-based design for, 254f
target user, 264
value proposition for, 252f
Hierarchical tree controls, 70
Highlighter reviews, 277
results of, 279
screen evaluating, 278f
Human-to-computer interaction, 16
I
Icon-only labels, 85
Icons, See Glyphs and icons
Inductive UI, 36
core principle, 38
design products, 38
main instructions, 38–41
mobile, 329
In-place commands, 79
adornments change, 80f
calculators, 80f
pros and cons, 79
Instructions, See Labels and instructions
Intelligence
attention, 230
modern user interfaces, 227
Interaction design
commands
buttons, 73
links, 73
controls, 69
control body language, 69–70
control choice, 70
drop-down lists, 71–72
input controls, 71
multiple-selection list boxes, 72
numeric textboxes, 71
radio buttons, 71
single-selection list boxes, 72
sliders, 71
tabs, 73
tables, 74
textboxes, 71
trees, 74
controls (mobile), 75
page indicators, 76
pickers, 75
segmented controls, 76
spinners, 76
switches, 76
table views and grids, 75
double-click objects, 67–68
animations, 93–94
for deleting document, 93f
progressive rendering, 93
remove vs. disable controls, 76
rich headings and layout, 98
mobile settings, 100f
practical approach, 99
setting/command, 76
task steps
paragraphs, 100–101
touch-based user interface, 68t
constituent parts, 66–67
Interruptions
for confirmations, 112
notice, 113f
real issue, 113f
for errors, 110
for notifications, 113–114
critical information, 114f
guidelines, 114
real-world interruptions, 109
situations, 109
for warnings, 111
Intuitive attributes, 25
costs for, 30
using in design discussions, 26
interaction life cycle, 25
Intuitive icon designs
icon types, 171–173
Intuitiveness levels
commands, 34
design strategy evaluation, 34f
keyboard shortcuts/gestures, 35
question, 36
affordances, 166
intuitive attributes, 25–26
universal design, 21
K
L
Label alignment, 143
left-aligned labels, 144f
mobile automatic zooming, 143f
right-aligned labels, 144f
top-aligned labels, 143f
Labels and instructions, 87
attributes, 90–91
capitalization, 91–92
contrast between, 88
design controls, 88f
ellipses, 91
examples, 87f
format without reading button label, 88f
main, 87
modern UI labeling, 90f
ordinary, 87
periods, 92
placeholders, 91
underlining, 92
Layout
attributes, 140
controls, 142f
focus, 140
grouping, 145
label alignment, 143
layout efficiency, 145
layout grids, 142
layout on left wastes lot of screen space, 146f
left-aligned labels, 144f
mobile automatic zooming, 143f
relationships, 145f
right-aligned labels with left-justified controls, 144f
top-aligned labels, 143f
UI elements, 141
vertical alignment grid lines, 142f
conversation patterns, 138
advantages, 140
logical order vs. out-of-sequence, 138f
out-of-sequence jumble, 138
progressive disclosure, 140f
M
Manifesto for Agile Software Development, 286
Manifesto for Communication-Driven UI Design, 287
nature of, 242
takeaways, 242
team performance, 242
UI design problems, 243
Maslow’s hierarchy, 198f
Mobile
in-place commands, 79
pop-up menus, 81
alternative technique, 329
layout efficiency, 145
photo-sharing app, 73
settings, 100
task flows, 43
Mobile controls, 75
page indicators, 76
pickers, 75
segmented controls, 76
spinners, 76
switches, 76
table views and grids, 75
Model for users
accessibility, 58
behaviour, 56
dislikes, 59
known things, 56–57
losing confidence, 59–61
motivation, 57
personas, 56
understanding users behavior, 56
Modern user interface labeling, 90f
organization and visual hierarchy, 102
pages, 103
present less stuff, 102
Multiple-selection lists, 70
N
Navigation, See Task navigation
overlay, 179t
P
Paragraphs
conversation patterns, 101
speech, 101
motivation, 101
age consideration, 259
characteristics, 257–258
decision making, 259
design teams using, 256
elastic user, 256
identifying classes of users, 255f
replacing elastic user, 257f
dk-travel mobile app, 323–325
frequent business traveler, 324
leisure travel bargain hunter, 325
occasional business traveler, 324
understanding of target users, 325
well-defined targets, 256
Personality, 200
anthropomorphism, 201
attributes, 203
product/feature personality, 203
software personality, 203
casual applications, 202f
consequences, 202f
emotional reaction, 200
formal environments, 202
technical challenges, 200f
tone, 204
combination, 204
error message, 205f
flippant tone, 204
friendly tone, 204
speaking user’s language, 206
Placeholders, 91
Presentation Zen, 36
controls, 115f
Progressive rendering, 93
Project themes, 260
benefit to using, 261
for handheld package-tracking device, 260f
identification, 261f
resource-based approach, 260
R
Reading patterns
scan path for small screens, 138f
scanning pattern for, 137f
small screens on smartphones, 137
strong and weak fallow area, 136
Visual user interface design
Reading rules, immersive, 282
Real-world interruptions, 109
Ribbons, 83
error message, 205f
feedback, 226f
tone, 204
S
Scanning, UI designing for
design pages, 147
layout for, 149
common UI elements, 150f
using steps, 149–150
model for, 148
focal point, 148
observation, 149
page by starting at focal point, 149f
scan path, 148
UI elements, 148
quick fixes to scanning problems
multiple focal points, 151
confirmation for scanning, 283f
immersive reading rules, 282
scanning read of same confirmation, 282f
scanning rules, 280
Scenario-based design, 253
context, 255
design greatness levels, 255
for handheld package-tracking device, 254f
task-based design, 253–254
usages, 254
mobile settings, 100f
practical approach, 99
Shade, 156
benefit to, 267
during idea generation phase, 268b
Sliders, 71
Surfaces
characteristics, 107
modal dialog box, 109f
modern UI, 109
using two bars, 108f
UI surfaces, 107
dialog boxes, 108
lightest to heaviest, 107
Windows, 108
T
design decisions, 265
design process, 265f
effective communication, 264
Task navigation
consistent navigation model, 107b
using navigation aids, 105
navigation model, 105
simplification, 105
Text, See User interface text (UI text)
Tone, 204
arrogant tone, 204
boastful tone, 204
combination, 204
condescending, 204
corporate tone, 204
encouraging tone, 204
error message, 205f
flippant tone, 204
friendly tone, 204
law enforcement tone, 204
lawyerly tone, 204
negative tone, 204
professional tone, 204
robotic tone, 204
salesman tone, 204
speaking user’s language, 206
design, 206
language, 206b
minimal vocabulary list, 206
combinations, 83
commands, 82
Touch-based user interface, 68t
Transitions, 180
designing
attention animation, 184f–185f
energetic personality, 184
feedback, 184
guidelines, 186
nonverbal communication
visual communication, 181
page transitions, 182
vocabulary, 183t
iOS, 183
Trustworthiness, 221–227
Typography
using modern fonts, 153
presentation, 153
subpixels, 153f
and system fonts
readable and legible, 154
Twitter, 235f
U
Unintuitive user interface
advanced, infrequent commands, 32
design basic commands, 30
full-screen video player’s controls, 31f
intuitive attributes, costs for, 30
multiple slides in PowerPoint for moving and deleting, 32f
power and simplicity, 33
communication, 3
communication-focused approach, 4
objective, 3
radio buttons/checkbox, 4f
translation, 3–4
conversation, 12f
definitions, 248
design challenges, 293
design situation
design proposal to team for first time, 13f
hypothetical situation, 13
using language, 13
natural and friendly conversation, 14f
questions, 12
technical approach, 14
using terms, 12
UX design consultants, 12
focuses on tasks, 197
inductive UI
design products, 38
main instructions, 38–41
intuitive UI, 21
intuitive attributes, 25–26
universal design, 21
iterative process, 249
principles, 11
problems in, 246–247
requirements and features, 247f
traditional brainstorming, 3
User interface IS communication
core principles, 15–16
effective communication, 16
attributes, 17
clear and natural, 17
communication-focused approach, 17
concise and efficient, 19
easy to understand, 18
good personality and tone, 20
in-person conversations, 21
inspires confidence, 19
interruption, 21
mechanical interaction, 17f
options and technology, 19f
purposeful, 17
restoration/interruption, 18f
using social network, 20f
specific and explicit, 18
useful, relevant, necessary information, 17
users experiment, 18f
emotional conversations with software, 16f
User interface text (UI text), 153
background guidelines
contrast ratio, 157–158
UI text on harsh gradients, 158f
using modern fonts, 153
presentation, 153
and system fonts
readable and legible, 154
text attribute guidelines
capitalization, 157
color, 155
visited-link color, 155f
User models, 257
UX, See User experience
V
by costs, 252
for handheld package-tracking device, 252f
identifying factors, 251
usage areas, 252
Visual design
intuitive benefits, 168
push buttons, 165f
background guidelines
contrast ratio, 157–158
UI text on harsh gradients, 158f
color red demands attention, 160f
design elements, 160
flexibility, 163
primary colors, 160f
product’s accessibility, 159
recommendations for designing with, 164
selection, 165b
designing for scanning, 147
layout for scanning, 149–150
model for scanning, 148–149
icon overlays, 179
intuitive icon designs, 171–173
labeled icon and experiments, 178
labels vs., 169–170
recognition vs. comprehension, 170–171
selection, 178b
standard, 175–179
quick fixes to scanning problems, 151–153
text attribute guidelines
capitalization, 157
color, 155
visited-link color, 155f
typography
using modern fonts, 153
presentation, 153
using subpixels, 153f
and system fonts, 154–155
W
color, 160t–161t
low-battery, 112f
overlay, 179t
overwarning, 190f
unnecessary, 112f
Web navigation, 105
elements, 106–107
model, 106f
Wireframe, 129
Wrong interactions, 215t
distinctions, 215
Shift+clicking link, 216f
touch-based UI, 215
Wufoo, 234
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.