Schwartz E. - Axure RP 6 Prototyping Essentials [2012, PDF, ENG]

Preface 1
Chapter 1: Prototyping Fundamentals 7
The art of UX prototyping 10
Prototyping interaction 11
The prototyping checklist 13
The project 13
Simple websites 14
Web applications and portals 14
Mobile apps 15
Heuristic evaluation 16
User validation 16
Deliverables: Prototype and specifications 17
Balancing act: What stakeholders have to say 19
Business stakeholders 19
Management 20
Business process architects 21
Project management 25
Visual design 27
Development stakeholders 30
The UX perspective 32
The UX practitioner 33
The UX team lead 34
The challenge 34
Team structure 35
Process 35
Extending the process 35
Axure: The Good 36
Axure: The Bad 37
Tips for using Axure on large design projects 38
Axure around the world 38
The Axure perspective 40
Summary 42
Table of Contents
[ ii ]
Chapter 2: Axure Basics—the User Interface 43
Getting started 44
Working with multiple project files 45
The Axure workspace 46
Customizing the workspace 48
The Sitemap pane 49
Wireframe pages 52
Flow pages 52
The Page Properties pane 54
Page notes 55
Managing notes 56
Page interactions 57
Page formatting 57
Sketch effects 57
The Widgets pane 58
Wireframe Widgets 59
Flow widgets 60
Creating your own widget library 61
Third party widget libraries 62
The Widget Properties pane 63
Annotation tab 63
Annotation fields 65
Annotation views 66
Interactions tab 67
Interactions 68
Events 70
Cases 70
Actions 72
Formatting tab 73
Location and size 75
Font 76
Alignment + Padding 77
Style 78
Ordering 80
Fills, Lines, + Borders 80
The Wireframe pane 81
Grid and Guides 83
The Masters pane 86
Master behavior 88
Normal 89
Place in Background 90
Custom Widget 91
Usage Report 94
Table of Contents
[ iii ]
The Dynamic Panel Manager 95
The toolbar and menu bar 99
Axure file formats 101
The .RP file format (stand-alone) 101
The RPPRJ file format (shared project) 103
Summary
Chapter 3: Prototype Construction Basics 105
Prototyping principles 106
Alexandria, the Digital Library Project 106
Getting started—productivity in 30 minutes 107
Initial requirements and use cases 109
Use case diagram page 110
Saving the project file 114
First wireframe pages 115
Task flow diagram page 116
Browse path flow diagram 117
Search path flow diagram 118
Link use cases to flow diagrams 119
Generating the HTML prototype 120
Getting started with masters and dynamic Panels 123
The first wireframe 123
The quick and dirty approach 123
The quick but structured approach 124
First masters: navigation systems 125
Global navigation bar 127
Secondary navigation system 132
The first dynamic panel 135
Adding states to a dynamic panel 137
Adding visual effects 142
Adding sketch effects 145
Updating task flow diagrams 146
Practitioner's corner—Axure prototyping for mobile devices 146
Mobile-friendly websites and mobile apps 146
Different device resolutions and aspect ratios 147
Using the Viewport Tag 148
Using a full screen browser 149
Landscape and portrait page versions 150
Event and gesture compatibility 150
Browser limitations 152
Using widget libraries 153
Loading prototypes onto the device 153
Summary 154
Table of Contents
[ iv ]
Chapter 4: Interactivity 101 155
Interaction design—brief history 155
The 1950–60s 156
The 1970–80s 156
The 1990–2000s 158
The present, future, and Axure interactions 160
Axure interactions primer 161
Guided example 161
Step 1: Defining the interaction in simple words 162
Step 2: The Axure interface 162
Step 3: Translating this requirement into an Axure interaction 164
Step 4: Annotating the interaction (optional?) 165
Axure events 166
Events triggered on OnPageLoad 166
Guided example: Changing the default landing page 167
Simulating contextual navigation 168
OnPageLoad events and dynamic panels 172
OnPageLoad event in detail 174
User triggered events 175
Guided example: Sign-in 175
Construction strategy 177
Adding the interaction 179
Organizing actions 184
Widget, Events, and Context 185
Widget Events in detail 186
Axure cases 187
Guided example: Construction and interactions 188
Part 1: Construction tweaks 188
Part 2: Adding interactions 193
Axure actions 196
Links actions 197
Dynamic panel actions 197
Widgets and variables actions 197
Miscellaneous actions 198
Summary 198
Chapter 5: Advanced Interactions 199
Conditions 200
If-Then-Else 200
Guided example—conditions and dynamic panels 201
Step 1: Defining the interaction 201
Step 2: Constructing Wireframe 202
Step 3: Setting the first condition 203
Step 4: Adding the first interaction 204
Table of Contents
[ v ]
Step 5: Completing the interaction 205
The Condition Builder 208
Guided example—multiple conditions 210
Step 1: Defining the interaction 210
Step 2: Constructing Wireframe 212
Step 3: Interaction tweaks 214
Step 4: Evaluating multiple conditions 215
Step 5: Final conditional touches 217
Troubleshooting conditions 219
Raised events 219
Guided example 220
Step 1: Creating a raised event on the master 221
Step 2: Applying interaction to raised events on a page 226
Nested masters: Amplifying the raised event 228
Variables 232
Guided example—creating context with variables 233
Step 1: Defining the interaction 233
Step 2: Construction considerations: Dynamic panel or pages? 233
Step 3: Adjusting existing conditions 235
Step 4: Variables and the order of actions 238
Step 5a: Setting variables (and possible snags) 239
Step 5b: Setting and initializing variables 242
Step 6: Using variable values to determine appropriate cases 245
Variable types 247
Global variables 248
Axure's built-in variable 248
Create your own variables 248
Special variables 248
Usage examples 250
Local variables and functions 250
Naming variables 250
How variables can help in usability testing 251
Guided example—contextual usability testing 252
Pros and cons of using variables 254
Tips and techniques from the experts 255
Hiding and showing list elements, by Jeff Harrison 255
The approach 256
Step 1: Creating the row template 256
Step 2: Moving rows together 257
Step 3: Repeating as desired 258
Step 4: Adding controls 259
Keyboard Shortcuts by Loren Baxter 261
High-level Interaction 261
Detailed steps 262
Notes 263
Table of Contents
[ vi ]
Axure tricks by Fred Beecher 263
Trick 1: Debugging your Logic 263
Trick 2: Passing variable values between pages 263
Trick 3: Hidden link to clear variables 264
Trick 4: Text fields masquerading as text panels 264
Summary 264
Chapter 6: Widget Libraries 267
Axure's built-in libraries 270
Axure and community libraries 272
Your own widget library 274
Guided example: Widget library to support prototype 274
Step 1: Create the library file 274
Step 2: Creating a custom widget (lorem ipsum) 277
Step 3: Refresh the library in the project file 278
Expanding the library—design patterns 279
Example 1: A confirmation/alert box widget 279
Step 1: Defining the pattern 279
Step 2: Construction 281
Example 2: An incremental search widget 282
Step 1: Defining the pattern 282
Step 2: Construction 284
Step 3: Interactions 285
Managing widget libraries 286
Local masters or external widget libraries? 287
Using RPLIB 288
Using masters in a PR or RPPRJ file 289
Practitioner's corner 289
Why widgets? 290
Pixel-perfect icons 290
Clear widget label and tool tips for extra help 291
Summary 292
Chapter 7: Managing Prototype Change 293
From vision to reality 294
Aligning expectations 294
UX and software development models 295
Waterfall 296
Agile 297
Estimating Axure work 298
Calculating your time 300
Expectation alignment 301
Transitioning from concept to detailed design 302
From vision mode 303
From sketch mode 303
Table of Contents
[ vii ]
Foundations and scaffoldings 304
Determining the Wireframe width 304
Guides 306
The grid 308
Page templates 309
Page style editor 310
Widget style editor 314
Default widget styles 315
Style painter 316
Integrating with the project style guide and CSS 319
The style guide 319
To sync or not to sync? 328
Prototype with existing visual design 329
Summary 331
Chapter 8: Functional Specifications 333
Collaboration with the development team 336
Aligning expectations 338
Capturing UI specifications 339
Global specifications 339
Generators and outputs: Specifications and prototypes 341
Customizing the Word specifications generator 343
Page notes 344
One note section versus many 346
Annotation fields 347
Annotation views 351
Generating specifications 353
The General section 354
The Pages section 355
The Masters section 356
The Page Properties section 360
The Screenshot section 362
The Widget Properties section 365
The Layout section 368
The Word Template section 369
Summary 370
Chapter 9: Collaboration 373
Shared projects 375
The environment 375
Check out/in status 376
Setting up a shared repository 377
Loading from a shared repository 382
Table of Contents
[ viii ]
The Share menu 384
Creating and loading 384
Updating the entire file 385
Updating a single page or master 386
Manage Shared Project… 386
Browse Shared Project History… 388
Repoint to Moved Shared directory… 391
Clean Up Local Copy… 392
Best practices for UX Axure teamwork 393
Attributes of the UX team 393
Feedback from stakeholders—the Discussion tab 396
Discussions hosted on AxShare 397
Discussions not hosted on AxShare 401
Step 1: In AxShare.com 402
Step 2: In Axure 402
Step 3: In the browser 403
Summary 403
Index 405