Display and Interface Design

Recommendations

Info

Design Principles: Visual Momentum 387 including orientation and distance of the rooms relative to each other, but would also have required larger amounts of valuable display real estate. The navigation bar constitutes an effective compromise: Key spatial relationships are retained (mitigating the keyhole phenomenon) while valuable display real estate is conserved. 15.3.2 The iPhone Interface The second set of examples illustrating support for visual momentum at the work space level will be drawn from the iPhone interface. The fundamental aspects of iPhone navigation were described in Chapter 13. To reiterate briefly, between-application navigation is accomplished via the navigation matrix (e.g., the 4 × 4 matrix of application metaphors in the middle of the screen in Figure 13.3 in Chapter 13), the navigation row (e.g., the row of metaphors at the bottom of the screen in Figure 13.3), and the home button. Withinapplication navigation (i.e., between application modes) is accomplished via mode metaphors that replace the application metaphors in the navigation row (see Figure 13.9). One aspect of the iPhone interface not discussed in Chapter 13 is the capability to add applications and additional home screens. An iPhone interface with one home screen and one navigation matrix (with 13 application metaphors) is illustrated in Figure 15.4a. A new home screen can be created either automatically (e.g., by exceeding 16 applications) or manually. The latter method is accomplished by pressing, holding, and then dragging a metaphor off the right edge of the screen. In Figure 15.4b the agent has applied this control input to the App Store icon and a new, second home screen has been created with a navigation matrix containing one metaphor (see Figure 15.4b). Transitions between multiple home screens is achieved via the drag gesture described in Chapter 13: The agent positions a finger on one side of the currently visible matrix and then drags it across the iPhone display to pull a new matrix into view. For example, a left-to-right drag across the new home screen depicted in Figure 15.4b would result in navigation back to the original home screen depicted in Figure 15.4c. Note the changes in this home screen (i.e., no App Store metaphor). The iPhone interface will now be analyzed in terms of the design strategies to support visual momentum. 15.3.2.1 Spatial Structure The single consistent real-world “cover story” that unifies the hierarchically nested metaphors in the BookHouse interface was discussed earlier. Mullet and Sano (1995) point out the possibility that the success of this approach may be the exception rather than the rule: The most spectacular failing of simplicity is often seen in those products trying most earnestly to simplify the GUI for non-technical users. © 2011 by Taylor & Francis Group, LLC
388 Display and Interface Design: Subtle Science, Exact Art (a) (b) (c) FIGURE 15.4 Navigation in iPhone interface via multiple home screens (i.e., between-application navigation). (a) The original interface configuration with one home screen. (b) Manual addition of a new home screen and the appearance of the dot indicator for multiple home screens. (c) Navigation back to original home screen (note change in dot indicator display). Applications … attempting to leverage users’ knowledge about the physical world through a “3D Office” (or 3D world) metaphor are beginning to reach the marketplace. This approach has always been something of a rite of passage for GUI designers … . The extremely literal translation of the “real” world … virtually ensures that users will find the resulting environments cumbersome and inefficient. (p.36) The iPhone interface avoids these difficulties by providing a nested hierarchy of spatial structure and organization that is more general in nature. The spatial structure at the global level (i.e., work space) consists of the multiple home screens. The spatial structure at an intermediate level (i.e., views) consists of portions of the screen dedicated to navigational requirements (e.g., navigational matrix and row, home button) as well as the idiosyncratic structure of the various application modes that can be navigated to. The spatial structure at a local level (i.e., forms) consists of the icons and the spatial metaphors that represent these applications and modes (along with various other types of interface objects). Collectively, these structures in the interface provide a set of overarching spatial constraints that support navigation within the iPhone work space. To be sure, it is unlike the spatial structure provided in the BookHouse in the sense that it is not necessarily tied to a real-world setting. On the other hand, in many ways the spatial structure and navigational resources in the iPhone and BookHouse interfaces are very similar. The home screens of the iPhone provide global structure that is conceptually similar to that provided by the library; the various application modes provide intermediate spatial structure © 2011 by Taylor & Francis Group, LLC
Page 1 and 2:
Kevin B. Bennett John M. Flach Disp
Page 4 and 5:
Display and Interface Design Subtle
Page 6:
To Jens Rasmussen for his inspirati
Page 9 and 10:
viii Contents 3. The Dynamics of Si
Page 11 and 12:
x Contents 6.6 Ecological Interface
Page 13 and 14:
xii Contents 9.4.2.2 Visual Structu
Page 15 and 16:
xiv Contents 14. Design Tutorial: C
Page 17 and 18:
xvi Contents 16. Measurement.......
Page 20 and 21:
Preface This book is about display
Page 22:
Preface xxi human-computer interact
Page 25 and 26:
xxiv Acknowledgments that inspired
Page 28 and 29:
1 Introduction to Subtle Science, E
Page 30 and 31:
Introduction to Subtle Science, Exa
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40:
Page 43 and 44:
16 Display and Interface Design: Su
Page 45 and 46:
Page 47 and 48:
Page 49 and 50:
Page 51 and 52:
Page 53 and 54:
Page 55 and 56:
Page 57 and 58:
Page 59 and 60:
Page 61 and 62:
Page 63 and 64:
Page 65 and 66:
Page 67 and 68:
Page 69 and 70:
Page 71 and 72:
Page 73 and 74:
Page 75 and 76:
Page 77 and 78:
Page 79 and 80:
Page 81 and 82:
Page 83 and 84:
Page 85 and 86:
Page 87 and 88:
Page 89 and 90:
Page 91 and 92:
Page 93 and 94:
Page 95 and 96:
Page 97 and 98:
Page 99 and 100:
Page 101 and 102:
Page 103 and 104:
Page 105 and 106:
Page 107 and 108:
Page 109 and 110:
Page 111 and 112:
Page 113 and 114:
Page 115 and 116:
Page 117 and 118:
Page 120 and 121:
5 The Dynamics of Situation Awarene
Page 122 and 123:
The Dynamics of Situation Awareness
Page 124 and 125:
Page 126 and 127:
Page 128 and 129:
Page 130 and 131:
Page 132 and 133:
Page 134:
Page 137 and 138:
110 Display and Interface Design: S
Page 139 and 140:
Page 141 and 142:
Page 143 and 144:
Page 145 and 146:
Page 147 and 148:
Page 149 and 150:
Page 151 and 152:
Page 153 and 154:
Page 155 and 156:
Page 157 and 158:
Page 159 and 160:
Page 161 and 162:
Page 163 and 164:
Page 165 and 166:
Page 167 and 168:
Page 169 and 170:
Page 171 and 172:
Page 173 and 174:
Page 175 and 176:
Page 177 and 178:
Page 179 and 180:
Page 181 and 182:
Page 183 and 184:
Page 185 and 186:
Page 187 and 188:
Page 189 and 190:
Page 191 and 192:
Page 193 and 194:
Page 196 and 197:
8 Visual Attention and Form Percept
Page 198 and 199:
Visual Attention and Form Perceptio
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206 and 207:
Page 208 and 209:
Page 210 and 211:
Page 212 and 213:
Page 214 and 215:
Page 216 and 217:
Page 218 and 219:
Page 220 and 221:
Page 222:
Page 225 and 226:
Page 227 and 228:
Page 229 and 230:
Page 231 and 232:
Page 233 and 234:
Page 235 and 236:
Page 237 and 238:
Page 239 and 240:
Page 241 and 242:
Page 243 and 244:
Page 245 and 246:
Page 247 and 248:
Page 249 and 250:
Page 251 and 252:
Page 253 and 254:
Page 255 and 256:
Page 257 and 258:
Page 259 and 260:
Page 261 and 262:
Page 263 and 264:
Page 265 and 266:
Page 267 and 268:
Page 269 and 270:
Page 271 and 272:
Page 273 and 274:
Page 275 and 276:
Page 277 and 278:
Page 279 and 280:
Page 281 and 282:
Page 283 and 284:
Page 285 and 286:
Page 287 and 288:
Page 289 and 290:
Page 291 and 292:
Page 293 and 294:
Page 295 and 296:
Page 297 and 298:
Page 299 and 300:
Page 301 and 302:
Page 303 and 304:
Page 305 and 306:
Page 307 and 308:
Page 309 and 310:
Page 311 and 312:
Page 314 and 315:
12 Metaphor: Leveraging Experience
Page 316 and 317:
Metaphor: Leveraging Experience 289
Page 318 and 319:
Page 320 and 321:
Page 322 and 323:
Page 324 and 325:
Page 326 and 327:
Page 328 and 329:
Page 330 and 331:
Page 332 and 333:
Page 334 and 335:
Page 336 and 337:
Page 338 and 339:
13 Design Tutorial: Mobile Phones a
Page 340 and 341:
Design Tutorial: Mobile Phones and
Page 342 and 343:
Page 344 and 345:
Page 346 and 347:
Page 348 and 349:
Page 350 and 351:
Page 352 and 353:
Page 354 and 355:
Page 356 and 357:
Page 358 and 359:
Page 360 and 361:
Page 362 and 363:
14 Design Tutorial: Command and Con
Page 364 and 365: Design Tutorial: Command and Contro
Page 400: Design Tutorial: Command and Contro
Page 403 and 404: 376 Display and Interface Design: S
Page 413: 386 Display and Interface Design: S
Page 465 and 466:
Page 467 and 468:
Page 469 and 470:
Page 471 and 472:
Page 473 and 474:
Page 475 and 476:
Page 478 and 479:
18 A New Way of Seeing? 18.1 Introd
Page 480 and 481:
A New Way of Seeing? 453 This essen
Page 482 and 483:
A New Way of Seeing? 455 triadic pe
Page 484 and 485:
A New Way of Seeing? 457 The fundam
Page 486 and 487:
A New Way of Seeing? 459 (Chapter 4
Page 488 and 489:
A New Way of Seeing? 461 constraint
Page 490:
A New Way of Seeing? 463 Hutchins,
show all

Display and Interface Design

Create successful ePaper yourself

Delete template?

Save as template?