The Essential Guide to UI Design

R

radio buttons, 468–477, 546, 547, 549 readability, 168, 564–565

reading level, 86, 91, 100, 101 read-only fields, 461

real time interaction, 40 recall, 14, 19

receding lines, 167 recognition memory, 27 recognition versus recall, 14 recovery, 55

reference help, 619–620 regularity, 144 relevance, 118

relevance-ordered lists, 256 reliability, 33, 36

report formats, 215–216 required fields, 461 requirements prototyping, 106 resolution

monitor capability, 289, 292

printed page compared to Web page, 37 screen, 286

response time

feedback considerations, 594–596 GUI versus Web page design, 32, 35

responsiveness, 55 restore buttons, 393

retina of human eye, 701–702 retroactive interference with information

processing, 82 reverse polarity, 163–164

reversibility of actions, 18, 20, 55

RGB (red, green blue) color system, 694 rich-text boxes, 468

right-handedness, 87, 99 rows in tables, 216

S

Safari, 9 safety, 56

safety environment considerations, 112 sales and marketing, as sources of busi-

ness information, 110

sample boxes, 540 scale markings, 269

scales and scaling statistical graphics, 268–270

scannability, 586 scatterplots, 262, 276–277 scenarios, 115, 772–774

screen composition. See also screen elements

alignment, 738–745 balance, 142–143, 745–748 borders, 732–736

control navigation, 748 dependent controls, 737–738 economy, 146–147

examples good and bad, 761–765 general guidelines, 728–729, 749 groupings, 153–160, 730–732 overview, 141–142 predictability, 144, 145 proportion, 147, 149

regularity, 144 sequentiality, 144, 146

simplicity versus complexity, 46, 56–57, 149–153

symmetry, 143

unity versus fragmentation, 147, 148 Web site design visual style, 161

screen controls. See controls screen density, 181–183

screen elements. See also captions and labels; icons; screen composition

completion aids, 206–208 considerations for users with seizure

disorders, 641–642 data output, 214–219 headings, 202–204 instructions, 205–206 keying procedures, 211–214 lists, 209–211, 239, 256, 580 overview, 184–185

special symbols, 204–205 titles, 185–186

screen resolution. See resolution

screen size, 285, 637–638

screens. See also screen composition; screen elements; windows

considerations as input device, 440–441 versus paper, data output, 214–215 versus paper, reading, 184

problem of graphical overuse, 23 variability for GUI versus Web page

design, 30 scroll arrows, 529

scroll bars, 392, 394, 526–531 scrolling, 457

scrolling and paging, 178–184, 417 scrolling tickers, 542

secondary windows, 401–407 security issues, GUI versus Web page

design, 33, 36

seizure disabilities, 636, 641–642 selection criteria, 547–548 selection support, menus, 325–328 senior citizens, accessibility issues,

648–649

sense of place, 38, 367–368 sensory storage, 79

sentences, 581. See also writing text and messages

sequence scales, 269

sequential linear menus, 309, 310 sequential or hierarchical menus,

310–311, 312

sequentiality, 144, 146, 633–634 settings views, 27

shading of alternate rows in tables, 218–219

Shift key, avoiding, 214

Sholes, Christopher Latham, 433 short-term memory, 78

signals versus noise, 77, 132, 133 similarity, 76, 156

simplicity

for icons, 655, 662

as user interface design principle, 45, 56–57, 149–153

simultaneous menus, 309, 310 single menus, 308–309

site maps, 353, 354 size grips, 392, 395 sizing buttons, 392–393

sketches as prototypes of screens, 772–774

Sketchpad program, 7 skill levels, 76, 84 sliders, 517–521, 547 sniffers, 290

social environment considerations, 112 software, intranets, 40

Solitaire game, 23 sound

auditory graphics, 665–666, 683–686 use for feedback purposes, 602–603

spatial linkage, 315

spatial relationships, 19, 167 speakers, 441

speaking, rate of human interaction, 100, 101

speech/language disabilities, 636, 640–641

speed of recognition, graphics versus text, 23

spell-checkers, 641

spin boxes, 509–512, 547, 549, 551 split boxes or bars, 394

split menus, 326 spoken language, 15

squares, double squares, and square roots, 148–149

stability, recovery from mistaken actions, 55

STAR system (Xerox), 7, 8, 44–45, 651 starting point placement on screen,

135–136

static text fields, 532–533 statistical graphics

axes, 268

choosing graph type, 282–283 color choices, 718–721

statistical graphics (continued) components, 262–263

data presentation, 263–267 flow charts, 283–284

labeling, legends, and keys, 271–273 lines, 270–271

proportion, 270

scales and scaling, 268–270 types, 273–282

use, 261

status bar messages, 614–615 status bars, 392, 394

status messages, 572 step charts, 278, 279

stoop interference with information processing, 82

storage, sensory, 79

stress level of users, 74–75, 87, 96 structure. See organization and structures

guidelines

studies of user interfaces and conclusions, 21, 23–24

colors, 700–701

cultural considerations, 627 GUI controls, 544–546

help systems, 609 input devices, 436–437

voice recognition systems, 431 Web page download times, 596–597

style of writing, 581–582, 585–586. See also writing text and messages

subobjects, 25 subtractive design, 57

succinctness as perceptual characteristic, 77

Sun Microsystems Java Look and Feel Design Guidelines, 122

support lines, 110

surface charts, 262, 275–276 surveys, 105, 108–109 Sutherland, Ivan, 7 switches, 479

symbol recognition, 19, 22

symbols. See images and symbols symmetry, 143

syntactics, 654

System Application Architecture Common User Access Advanced Interface Design Reference (SAA CUA), 25, 27

System Application Architecture Common User Access (IBM), 49

system capability, GUI versus Web page design, 32, 35

system experience, 88–90 system messages, 570, 571 system power, 285 system testing, 111

T

tabbing, 212–213 table formats, 217–219 tablets, 427

tabs, 521–524

task analysis, 114–115 task experience, 90

task orientation of users

abandonment, partial use, or misuse of system, 75

antagonism and skill levels, 76 compensatory activity, 75 completion ratios study, 85–86 direct reprogramming, 75 feedback, 617–618

frequency of use, 86, 93

GUI versus Web page design, 30, 31 input device selection, 438

job category, 87, 94 lifestyle, 87, 94

mandatory or discretionary use, 92–93 menu wording, 331

primary training, 87, 94

response time considerations, 594–596 social interactions, 86, 94

task or need importance, 86, 93 task structure, 86, 94

turnover rate, 87, 94

task/job compatibility, 47 team workshops, 106 tear-off menus, 379–380, 381

technical support lines, as sources of business information, 110

technological considerations graphical systems, 284–287 user technology profile, 292–293 Web systems, 287–292

telephone interviews or surveys, 105 telephone voice menus, 14 teleporting, 246

templates, use in search engines, 253 temporal menus, 327

terminology, 22. See also writing text and messages

testing. See usability testing

text. See text displays; writing text and messages

text boxes, 185, 461–468, 547 text displays

augmenting graphics, 20 color choices, 712, 714–718 line length, 756

as more meaningful than icons, 24 providing obvious starting point, 135

text entry

from source document, 223–224 when to permit, 548–549

texture changes, 167

The Windows Interface Guidelines for Software Design (Microsoft), 49

think-aloud evaluations, 788–789 three-dimensional appearance, 77,

165–166, 167, 709–710 thumbnails, 598, 673, 677 tick boxes, 478

tick marks, 269

tiled windows, 396–397, 399

time delays, feedback for, 598–601 time-out periods, 641

tinkering and time-wasting, futz and fiddle factor, 23

title bars, 391, 392, 573–574 titles. See also captions and labels

graphics, 272 menus, 329 screens, 185

Web pages, 186, 589 windows, 582–584

toggle buttons, 479

toggled menu items, 340–342 toolbar buttons, 446, 447 toolbars

color use, 718 description, 394–395, 446

general guidelines, 458–461 for performing actions, 357 pros and cons, 447

toolboxes, 394

toolkits. See also guidelines, standards, and consistency considerations

for consistency, 35 description, 287 for integration, 36

for standardization, 31, 32, 33, 34 ToolTips

description and guidelines, 535–537, 616 labels for, 446, 458

as pop-ups, 414

top-down lighting bias as perceptual characteristic, 77

touch screens, 428–429 touchpads or touch tablets, 427 trackballs, 425–426

trackpads or graphic tablets, 427–428 trade shows, 110

trade-offs, as user interface design principle, 57–58

training considerations, 87, 94, 126 Training-Wheels System, 57

translation issues, 630–631. See also internationalization

transparency, as user interface design principle, 18, 57

tree views, 525–526

two-state nonexclusive settings, 479 typeface design, 22. See also fonts and

typefaces typing skills

as consideration in design, 86, 91 eliminating with pointing and selection

devices, 20

human interaction speeds, 100 keyboard faster than mouse for experi-

enced typists, 22

U

underlining, 164, 174, 359 Undo command, 55 unfolding windows, 404–407

uniformity, 57. See also consistency units of measurement, 215

unity

versus fragmentation, 147, 148 as perceptual characteristic, 77

UNIX-based GUIs, 8 up-down control, 510 uppercase, 174–176, 187 usability, 169, 654–656, 768

usability laboratory testing, 107 usability testing

choosing methods, 792–795 color choices, 718

developing and conducting, 795–806 evaluation of working system, 807–808 internationalization considerations, 635 kinds of, 777–792

location considerations, 800–802 participant considerations, 798–800, 805 pros and cons, 789–790

prototypes, 106, 771–777

purposes, importance, and scope, 107, 132, 768–771

resources and additional reading, 809 results analysis, modification, and

retest, 806–807

user compatibility, 47 user control, 29, 49–50

user experience of Web pages, 232–237 user focus. See also knowing users

GUI versus Web page design, 30, 31

as principle of user interface design, 44 printed page compared to Web page,

37–38 user groups, 110

user interaction styles. See interaction styles

user interface. See also GUI (graphical user interface); user interface and screen design principles

definition, 4, 16 improvements, 3

studies and conclusions, 21, 23–24 Web page versus application design, 40

user interface and screen design principles. See also screen elements; screens; Web page/site design

brief history, 10–12 complexity, 21

depth or three-dimensional appearance, 77, 165–166, 167, 709–710

design requirements, 4–5 examples good and bad, 293–306 general principles, 44–58 groupings, 153–160

human considerations, 128–131 impact of design on processing time,

5–6, 23

importance of good design, 3–6, 24 information presentation, 168–184 limitations of human comprehension,

22

navigation and flow, 139–141 ordering of data and content, 136–139

organization and structures guidelines, 223–229

screen elements, 185–219 signals versus noise, 133

simplicity, 149–153

technological considerations, 284–293 test for good design, 132

visual clarity, 133

visually pleasing composition, 141–149, 161

for Xerox STAR, 44–45

user interface management system (UIMS), 287

user support environment considerations, 113

user tasks. See task orientation of users user-interface prototyping, 106

user’s conceptual space, GUI versus Web page design, 31, 33

V

verbal linkage, 315

vertical orientation, 738–741 video, 677–678

views, 27 virtual reality, 18

visibility, 17–18, 58, 117

vision, deterioration with age, 97–98 visual acuity, 80

visual clarity, 133

visual clutter factor, 23, 57, 729 visual disabilities, 636, 637–639 visual presentation, 24, 44 visual style

GUI versus Web page design, 32 Web page/site design, 161

visual style, GUI versus Web page design, 35

visual thinking, 19 visualization, 25

visually pleasing composition. See aesthetics

voice recognition systems, 14, 430–431, 640

W

wait times, dealing with time delays, 598–601

warning messages, 572 wayfinding. See navigation

the Web. See also Web page/site design comparison to Internet, 9

data trustworthiness and privacy issues, 30, 31

description, 9, 30, 651 extranets, 40 intranets, 39–40

merging with graphical business systems, 39–43

popularity, 8–9, 28

Web application design, 28

Web page/site design. See also usability testing

accessibility issues, 642–650 browsing and searching, 245–258

business definition interview questions, 105

card sorting for information collection, 107–108

color choices, 721–723

comparison to application design, 40–43 comparison to printed pages, 36–39 component and link possibilities,

759–761 currency, 291 definition, 28 difficulties of, 28–29

dilemmas of impatient navigation, 230 download speed considerations, 30, 32,

35, 37, 236, 290, 291

feedback for download times, 596–598 headings, 234–235

home pages, 243–245, 258, 758–759 information content, 230

multiple versions, 290 navigation issues, 230, 757–758

ordering of data and content, 138–139

Web page/site design (continued) page layout considerations, 242–243,

750–757

page length considerations, 240–242, 755–756

platforms and screen size/resolution issues, 235, 756

productivity benefits, 6 structure, 230, 237–239

system experience considerations, 90 technological considerations, 287–292 titles, 186, 589

user experience, 232–237

user interaction styles, 231–232 as victim of poor foundation, 29 visual style, 161

writing and presentation guidelines, 239–240

writing text and messages, 584–591 Web site resources, 122–123

Web systems browsers, 288–290

other considerations, 290–292 overview, 287–288

Weblog design, 260–261

What’s This? buttons, 392, 393, 613, 616–617

white space, 147, 157–158, 165, 730, 755 widgets. See controls

WIMP interface (windows, icons, menus, and pointing devices), 17

windows. See also screen elements; screens

characteristics, 385–386 components

command areas, 395

frames or borders, 390–391, 392 menu bars, 392, 393

scroll bars, 392, 394 size grips, 395

sizing buttons, 392–393 split boxes or bars, 394 status bars, 392, 394

title bars and icons, 391, 392 toolbars, 394–395

What’s This? buttons, 392, 393 work areas, 395

design constraints, 388–390 excessive and repetitive handling

required, 22 organizing functions, 749

number, 415–416 placement, 417–418 size, 416–417

task orientation, 414–415 presentation styles

cascading, 398 choosing, 399

overlapping, 397–398, 399 tiled, 396–397, 399

titles, 582–584 types

cascading and unfolding, 404–407 dialog boxes, 407–408

message boxes, 411–412 modal and modeless, 404 palette, 413

pop-up, 413–414 primary, 400, 402

property inspectors, 410–411 property sheets, 408–410 secondary, 401–407

value of windowing, 386–388

The Windows Interface: An Application Design Guide (Microsoft), 49

Windows operating system, 8, 25, 89 wizards, 620–622

women as users (gender issues), 87, 99 word choice

internationalization considerations, 628–631

writing text and messages, 565–568 work areas, 25, 395

workbooks, 521 working domain, 22 workplace, 25

workshops for teams, 106 World Wide Web. See the Web

World Wide Web Consortium (W3C), 9, 49, 646–647

writing text and messages. See also captions and labels; documentation; text displays; titles

box choices, 506 check box choices, 480

earliest known examples, 652 help systems, 612–613, 617–618

internationalization considerations, 628–631

message box text and controls, 573–578 message types, 570–573

radio button choices, 470–471 readability, 564–565

sentences and messages, 568–570 status bars, 615

text presentation and writing, 578–582 Web pages, 584–591

window titles, 582–584 wizards, 621, 622 word choice, 565–568

WYSIWYG (what you see is what you get), 18, 25, 30

X

X-axis (abscissa or category axis), 268 Xerox, 7

XUI Style Guide (Digital Equipment Corporation), 49

Y

Yahoo, 9

Y-axis (ordinal or value axis), 268 younger adults as computer users, 97