The Essential Guide to UI Design

download speed (bandwidth considerations)

device characteristics variability, 30 feedback, 596–598

minimizing download time, 236, 290, 291

response time variability, 32, 35, 37 dragging of mouse, 432

drawings, 681 drop shadows, 166

drop-down/pop-up combo boxes, 514–517, 549, 550

drop-down/pop-up list boxes, 503–509, 549, 550

dual code theory, 687

Dvorak layout of keyboard, 434

E

economy of detail (versus intricacy), 146–147

education, 86, 90 efficiency, 5–6, 23, 32, 35, 50 elaborative processing, 687 elapsed time messages, 601

electronic focus groups, 109–110 electronic surveys or questionnaires, 109 e-mail, bulletin boards, or guest books,

110

embedded menus, 356 emotional impact, 44 Engelbart, Doug, 431 English language, 625, 626 English speakers, 91

entry versus selection, 542–543 environment considerations, 112–113, 438 errors

detecting and preventing with feedback, 603–604

and forgiveness in design, 52 messages, 118, 571, 590–591 problem of disparities in strategies,

73–74 recovery, 55

reduced with graphical user interface, 20

safety with memory support, 56 European languages, 626–627 evaluation of design. See testing event-trapping menus, 313

exit disclaimers, 359, 360 expansion buttons, 455

expectations on part of users, 77, 87, 96 expert users, 88–90, 118, 332

extranets, 40, 259–260 eye movements, 15 eye tracking, 436

F

face-to-face interviews, 104–105 facial expressions, 15 facilitated team workshops, 106 familiarity

as aid to learning, 84

of objects depicted in icons, 654, 660 as user interface design principle, 51 in word choice, 566

feedback advantages, 20

blinking for attention, 601 contextual help, 613–617

dealing with time delays, 598–601 error prevention, 603–604 guidance and assistance, 606–608 help systems, 608–613

hints or tips, 622–623 instructions or prompting, 608 problem management, 604–606 reference help, 619–620 response time, 594–596

as responsiveness, 55 task-oriented help, 617–618 types of, 117–118

use of sound, 602–603

Web page download times, 596–598 wizards, 620–622

field studies, 106 fields, 185, 461

fingerprint recognition, 436 Fitts’ Law, 83

fixed (frozen) layouts (Web pages), 242–243

flexibility, 51, 73 flow charts, 283–284

fluid layouts (Web pages), 242–243 focus and emphasis, 162–165, 729

focus groups, 105–106, 109–110, 791–792 folded menus, 326, 327

folders, 25

fonts and typefaces backgrounds for text, 177

browser inconsistency issues, 289–290 case, 174–176

choosing, 579 consistency, 176–177 defaults, 176

difficulties of evaluation, 169–170 distinctiveness, 164 monospaced, 216

other considerations, 177 size, 172–173

standard alphabetic characters, 566 styles and weight, 173–174

types and families, 170–172 footers, 216

footprints, 355

foregrounds, color considerations, 708–709, 714–718

forgiveness, as user interface design principle, 45, 52

form fill-in interaction style, 14–15, 16 foveal and peripheral vision, 81 frames in browsers, 420–421, 756 frames or borders, 390–391, 392 frequency of use

task orientation of users, 86, 93

Web page versus application design, 40 frustration on part of users, 74, 76

G

gender issues, 87, 99 gesture recognition, 436, 632

GIF format (Graphics Interchange Format), 673–674

glosses (link labels), 588

GOMS (goals, operators, methods, selection rules) model, 609, 611

Gopher, 8

graphic tablets or trackpads, 427–428 graphical menus

cascading, 375–377, 381 examples, 382–383 iconic, 380, 381

menu bars, 369–371, 381 pie, 380

pop-up, 377–379, 381 pull-down, 371–374, 381 tear-off, 379–380, 381

graphical systems, 16–24, 284–287 graphics. See also icons

impact upon early screen designs, 10 miscellaneous options, 671–689 popularity and advantages, 16–17,

651–652

providing obvious starting point, 135–136

uses and limitations, 669–671 grayscale, 711–712

grid cells, 269 grids, 222

group boxes, 533–534 grouping of screen elements

advantages, 153–155

functional, and perceptual principles, 156–157

general guidelines, 730–732 in menus, 323–324

using backgrounds, 160 using borders, 158–160

using white space, 147, 157–158, 165, 755

groups, focus and user, 105–106, 109–110

guest books, 110

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

benefits of good design, 3, 4–6 characteristics, 24–28, 651

impact of inefficient screen design, 5t introduction of mouse, 7

pointing device, 16

GUI versus Web page design. See also Web page/site design

consistency, 33, 35 context, 32, 34 data/information, 30, 31 devices, 30, 31 integration, 33, 36 interaction, 32, 34–35

interaction styles, 14–16, 40, 42–43, 231–232

navigation, 32, 34

presentation elements, 31, 33–34 reliability, 33, 36

response time, 32, 35 security, 33, 36

system capability, 32, 35 task efficiency, 32, 35 user assistance, 33, 35–36 user focus, 30, 31

user tasks, 30, 31

user’s conceptual space, 31, 33 visual style, 32, 35

guidelines, standards, and consistency considerations. See also toolkits

allowing for for design consistency, 49 for business requirements collection,

111–112

for developing conceptual models, 115–118

examples of commercial style guides, 122

examples of industry-produced, 49 GUI versus Web page design, 33, 35 history of development, 122

need for experimentally derived, 21 for search services development,

250–257

style guide compatibility, 287

testing design for compatibility, 779–780 for Web page design, 37, 39

Web page versus application design, 43

H

hand gestures, in anthropomorphic interaction style, 15

hand printing, rate of human interaction, 100, 101

handedness, 87, 99 handwriting recognition, 436

hardware. See also input devices; output devices

for intranets, 40 limitations, 23, 389

HCI (human-computer interaction), 4, 7, 130–131

headings, 202–204, 215, 216, 217, 234–235, 589–590, 730

hearing, deterioration with age, 98 hearing disabilities, 636, 639

help command buttons, 614

help desk/technical support lines, 110 help systems for user assistance

GUI versus Web page design, 33, 35–36 providing feedback for, 608–613 reinforcing conceptual model, 118 Web page design, 237

Web versus applications, 40 help views, 27

heuristic evaluation of design, 780–786, 792–793, 794

Hick’s Law, 82 hierarchical organization

of controls or menus, 58, 310–311, 312 of screen elements, 57

highlighting, 166, 219, 240 hints or tips, 622–623 histograms, 262, 278, 279

history lists and trees, 355 homepages, 243–245, 258, 758–759 horizontal orientation, 741–745 hot zones, 659

HSL (hue, saturation, and lightness) color system, 694

HTML (HyperText Markup Language), 8–9, 28

human behavior. See also knowing users represented in anthropomorphic inter-

action style, 15

human considerations for design. See also knowing users

action cycle of interaction with computers, 71–72

color choices, 697–698, 701–702, 720–721 comprehension, limitations of, 22 goals, 131

how to discourage users, 128–130 human requirements trumping techni-

cal, 58

keying, rate of human interaction, 100, 101

limitations, and windowing systems, 389–390

limitations of comprehension, 22 limitations of differentiation, 656–657t what users do, 130–131

what users want, 130

Human Factors and Ergonomics Society, 49

human-computer interaction (HCI), 4, 7, 130–131

humor, 570 HyperCard (Apple), 9 hypermedia, 349 hypertext, 8, 237, 346 hyphenation, 567

I

IBM, 8, 10, 25, 27, 122 iconic menus, 380, 381

icons. See also images and symbols animation and audition, 665–666 characteristics, 654

choosing, 657–659 definition, 652–653 design process, 666–667 images for, 659–665

as less meaningful than text, 24 limitations of human comprehension,

22

need for research, design, and testing, 22

not always familiar, 22 not always preferred, 23

number of codes for human differentiation, 656–657t

replacing language-based systems, 20 representing objects or actions, 17, 651 screen presentation, 667–668 space-saving, 20

speeding up recognition, 19, 23 title bars, 391, 392

types, 652–653

usability issues, 654–656 image links, 357

image maps, 675–676

images and symbols. See also icons guidelines for use, 671–676

for icons, 659–665

importance of recognizability, 566 internationalization considerations,

631–633

need for recognizable, 22 special, 204–205

immersion, 52 incremental actions, 18 indirect devices, 424

indirect manipulation, 18–19 information collection, 14, 28, 81–82,

104–111, 231

information entry and modification (conversational) screens, 220–223

information presentation. See also writing text and messages

content of Web pages, 230

as goal of Web page design, 28 overview, 168–169, 728

page size, scrolling or paging, 178–184, 417

statistical graphics, 263–267 typography, 169–177

informational messages, 572 input, 4

input devices characteristics, 424–425

gestures, eye tracking, handwriting, etc., 436

graphic tablets or trackpads, 427–428 joysticks, 426–427

keyboards, 433–436 light pens, 429–430 mouse, 431–433, 436 overview, 423–424 pointers, 439–440 selecting, 436–440 touch screens, 428–429 trackballs, 425–426 voice, 430–431

inquiry fields, 461 instructions

feedback, 608

instructional messages, 571, 577–578 menus, 332

on menus, 332 to users, 205–206

integration, GUI versus Web page design, 33, 36

intent indicators

command buttons, 454–455 menus, 332–333

interaction devices. See input devices; output devices

interaction styles

application versus Web page, 41, 42–43 description and types, 13–16, 34–35

GUI versus Web design, 32, 34–35, 41, 42–43

on part of Web users, 231–232 problems with icons or graphic instruc-

tions, 23 varieties of, 13–16 Web users, 231–232

interactive paper prototypes, 774–775 interactive voice response (IVR) systems,

685–686 interactivity, 38 interface builders, 287

interface design. See user interface and screen design principles

interface options, restriction and WYSIWYG, 25

interference with information processing, 81–82

intermediate users’ system experience, 88–90

internationalization

color, sequence, and functionality, 633–634

cultural considerations, 627–628 images and symbols, 631–633, 674 localization, 626–627

requirements determination and testing, 635

words and text, 628–631 Internet, 8, 9, 99. See also the Web Internet Explorer, 9, 419 Internet hosts, 29

interviews, 104–105 Intranet design, 258–259 intranets, 39–40

iris recognition, 436

ISO (International Organization for Standardization), 123

ISO (International Standards Organization), 49

ISO 13407: Human-centered design processes for interactive systems, 123

ISO 14915: Software ergonomics for multimedia user interfaces, 123

ISO 9241: Ergonomic requirements for office work with visual display terminals, 123

ISO/CD 20282: Ease of operation of everyday products, 123

italics, 164

IVR (interactive voice response) systems, 685–686

J

jargon, 73, 566, 625 joysticks, 426–427

JPEG (Joint Photographic Experts Group) format, 673, 674, 677

justification. See alignment and/or justification

K

keyboard shortcuts, equivalents, and accelerators

check boxes, 486 command buttons, 456–457 control navigation, 748

general guidelines, 333–337, 435–436 radio buttons, 476

toolbars, 460 keyboards

considerations as input device, 433–436 considerations for disabled users,

638–639, 640

pick-and-click interaction, 24–25 keying, rate of human interaction, 100,

101

keying procedures, 211–214 keystrokes, number of, 211 kinematic performance load, 85 knowing users

human characteristics in design, 76–86 human considerations in design of busi-

ness systems

physical characteristics, 87, 96–101 psychological characteristics, 87, 95–96

tasks and needs, 47, 76, 86–87, 92–94 user’s knowledge and experience, 86,

88–92

importance to good design, 36 interaction with computers

antagonistic, unskilled task orientation, 76

human action cycle of interaction, 71–72

reasons people have trouble, 73–74 responses to poor design, 74–75 user technology profile, 292–293

methods for gaining understanding, 102 performance versus preference, 101–102

L

labels and captions. See captions and labels

laboratory testing for usability, 107. See also usability testing

language

native, 86, 91–92 problem of jargon, 73 prototype-oriented, 776 spoken and written, 7

language-based systems, 20, 22 learning

considerations of human characteristics, 83–84

difficulties because of inconsistencies, 22

dual code theory, 687 elaborative processing, 687

faster with graphical representations, 19 still necessary with graphical systems,

21

through visualization, 25 visual-audio combinations, 686–688

left-handedness, 87, 99 legibility, 168

lens of human eye, 701 light pens, 429–430

lighting bias, 77

line graphs, 262, 273–275 line spacing, 580

linear scale, 269 lines

as guides for eye, 169 receding, 167 rulings, 164

as separators in menus, 324–325 statistical graphics, 270–271

links and actions

command buttons and toolbars, 357 definitions, 342

image, 357 labels, 364 maintenance, 366

number of, 364–365, 586 other guidelines, 365–366 presenting, 358–361 textual phrase, 356–357 types, 355, 361–364 types to avoid, 361

list boxes, 493–503, 550, 551 list view controls, 503

listening, rate of human interaction, 100, 101

lists, 209–211, 239, 256, 580 literacy issues, 647–648

localization, 626–627. See also internationalization

locatability of Web sites, 257 long-term memory, 78–79 lowercase, 174–176 lowlighting, 166

lures, progressive, 54 Lycos, 9

M

Macintosh computers, 8, 651

Macintosh Human Interface Guidelines

(Apple), 49 main windows, 400

mandatory or discretionary use of computers, 92–93

manual dexterity, deterioration with age, 99

marketing and sales, as sources of business information, 110

match with medium, 44 maximize buttons, 393 media analysis, 111 media controls, 531 memory, 78–79

men as users (gender issues), 87, 99 mental models, 82–83, 114, 120 menu bars, 369–371, 381, 392, 393 menus

compared to buttons, 551–552 content, 314–315

defaults, 339

describing choices, 330–331 formatting

complexity, 320 consistency, 315 display screens, 316 groupings, 323–324 item arrangement, 321 line separators, 324–325 ordering, 321–323 organization, 317–320 presentation, 316–317

functions, 314 graphical

cascading, 375–377, 381 examples, 382–383 iconic, 380, 381

menu bars, 369–371, 381 pie, 380

pop-up, 377–379, 381 pull-down, 371–374, 381 tear-off, 379–380, 381

instructions, 332

intent indicators, 332–333

keyboard shortcuts, equivalents, and accelerators, 333–337, 435–436

mark toggles or settings, 340–341 pros and cons, 308

selecting items, 337–339 selection interaction style, 14, 16 selection support, 325–328 structure

connected, 311, 313 event-trapping, 313

hierarchical or sequential, 310–311, 312 sequential linear, 309, 310 simultaneous, 309, 310

single, 308–309 titles, 329

toggled items, 341–342 unavailable choices, 340

message area/message bar, 394 message box text and controls, 573–578 message boxes, 403, 411–412

message types, 570–573 metaphor development, 119–120 Microsoft, 8

Microsoft Windows operating system, 390

Microsoft Windows XP User Interface Guidelines, 122

minesweeping, 358 minimize buttons, 392–393

MIS (Management Information Services) intermediary, 108

mixed case, 175 mnemonics, 334, 630

modal and modeless windows, 404 monitor size and resolution, 289 monochromatic schemes, 704, 712–713 monospaced fonts and typefaces, 216 Mosaic, 9

motion change, 167 motor skills, 22 mouse

considerations as input device, 431–433, 436

considerations for disabled users, 640 for direct manipulation of screen

objects, 15

motor skills required for doubleclicking, 22

pick-and-click interaction, 24–25 movement control, 83

Mozilla, 9

Mozilla Firefox, 9, 419 multimedia, 669 multitasking, 27

N

native language and culture, 86, 91–92 natural language dialog, 15 navigation

with browsers, 28, 230

design considerations, 345–366, 728, 748, 757–758

dilemmas of impatient Web users, 230 flow, 139–141

goals, 344–345

GUI versus Web page design, 32, 34 maintaining sense of place, 367–368 as original goal of Web interface

design, 28

printed page compared to Web page, 38 problems, 343–344

as wayfinding, 342–343

NCSA (National Center for Supercomputing Applications), 9

Netscape Navigator, 9 NeXTStep, 8

nominal scales, 269 notebooks, 521 novice users

menu instructions, 332

promoting development of mental models, 118

system experience, 88–90

NSF (National Science Foundation), 9

O

object orientation, 25–27 object:action approach, 27

Object-Oriented Interface Design: IBM Common User Access Guidelines (IBM), 49

objects classes of, 25

collections, 26 composite, 26 constraints, 26 containers, 26 defining, 118–119 definition, 25

operable with standard resulting behaviors, 16

persistence, 26

principle of illusion of manipulable, 44 screen elements as, 15

size considerations, 83, 165, 167 and subobjects, 25

types, 26 objects’ size

attention-getting, 165 changes, 167

considerations for movement control, 83 icons, 658–659

observational field studies, 106 obviousness, 53, 73

older adults as computer users, 97

OPEN LOOK: Graphical User Interface Application Style Guidelines (Sun Microsystems), 49

Opera, 9 operability, 45, 53

operable controls. See controls operating systems, 292 option buttons, 469

optional fields, 461 ordering of data and content

for clarity and meaning, 133 general guidelines, 728

in lists, 209–211, 239, 256, 580

for logicality and meaning, 136–139 in menus, 321–323

as principle in visual groupings, 157

organization and structures guidelines check boxes, 481–483

command buttons, 453–454 display/read-only screens, 225–229 general guidelines, 728, 730–748 information entry and modification

(conversational) screens, 220–223 list boxes, 496–497, 507–508

menus, 308–313, 317–320 palettes, 491

radio buttons, 471–473

revealed, as principle of user interface design, 44

tasks, 86, 94

text entry from source document, 223–224

toolbars, 459

Web page layout, 751–757

Web page/site design, 230, 237–239 organizational environment considera-

tions, 113 orienteering, 246–247

OSF/MOTIF Style Guide (Open Software Foundation), 49

output, 4

output devices. See also input devices screens, 440–441

speakers, 441 overlapping

of screen elements, 166 windows, 397–398, 399

P

page breaks, 216

page independence, 38–39

page layout considerations, 37, 242–243 page length considerations, 240–242 page navigation. See navigation

page rendering, 37 page resolution, 37 page size, 37

paging and scrolling, 178–184, 417 palette windows, 403, 413 palettes, 394, 488–493, 550

panic on part of users, 74–75

paper prototypes, interactive, 774–775 paper surveys or questionnaires, 108–109 parent/child windows, 400

patience on part of users, 87, 95 pattern matching, 76, 157 percent complete messages, 601 perceptibility, 45, 53

perception on part of users, 76–77 performance load, 84–85 performance measures, 789–790 peripheral vision, 81

persistence of objects, 26 personalization and tailorability, 47–48 photographs/pictures, 676–677

physical environment considerations, 112 physical movement disabilities, 636,

639–640

pick-and-click interaction, 24–25 picking, 24–25 pictures/photographs, 676–677 pie charts, 262, 281–282

pie menus, 380

pilot tests, 802–803. See also usability testing

platform compatibility, 287, 289, 756 pointers, 439–440

points of prospect, 54 pop-up menus, 377–379, 381

pop-up windows, 403, 413–414 positive first impression, 54 pragmatics, 654

predictability. See also consistency problem of fine distinctions, 73

as user interface design principle, 20, 54, 144, 145

preemptive multitasking, 27 presentation controls. See controls

presentation elements, 31, 33–34 presentation styles, 43

presentation styles of windows, 395–399 preservation of object’s state, 26 primary windows, 400, 402

printed pages, comparison to Web pages, 36–39

printouts, 219

proactive interference with information processing, 82

problem solving, 19, 73–74 process measures, 790 Prodigy, 9

product compatibility, 47

productivity benefits of good design, 5–6 programmed facades as prototypes,

775–776

progress indicators, 539–540, 600 progressive disclosure, 56–57 progressive lures, 54

prompting messages, 571, 577–578, 608 properties of objects, 26

property inspectors, 403, 410–411 property sheets, 403, 408–410 proportion, 147, 149, 270

prose text, 579 protected/unprotected fields, 461 prototypes for testing, 106, 771–777 prototyping of business requirements,

106 proximity, 76, 156

pull-down menus, 371–374, 381 punctuation, 567

Q

qualitative scales, 269 quantitative scales, 269 question messages, 572 questionnaires, 108–109

QWERTY layout of keyboard, 433–434