Axure RP 6 Prototyping Essentials

Table of Contents

• Preface

• Chapter 1: Prototyping Fundamentals
• The art of UX prototyping
• Prototyping interaction
• The prototyping checklist
• The project
• Simple websites
• Web applications and portals
• Mobile apps
• Heuristic evaluation
• User validation
• Deliverables: Prototype and specifications
• Balancing act: What stakeholders have to say
• Business stakeholders
• Management
• Business process architects
• Project management
• Visual design
• Development stakeholders
• The UX perspective
• The UX practitioner
• The UX team lead
• The challenge
• Team structure
• Process
• Extending the process
• Axure: The Good
• Axure: The Bad
• Tips for using Axure on large design projects
• Axure around the world
• The Axure perspective
• Summary

• Chapter 2: Axure Basics—the User Interface
• Getting started
• Working with multiple project files
• The Axure workspace
• Customizing the workspace
• The Sitemap pane
• Wireframe pages
• Flow pages
• The Page Properties pane
• Page notes
• Managing notes
• Page interactions
• Page formatting
• Sketch effects
• The Widgets pane
• Wireframe Widgets
• Flow widgets
• Creating your own widget library
• Third party widget libraries
• The Widget Properties pane
• Annotation tab
• Annotation fields
• Annotation views
• Interactions tab
• Interactions
• Events
• Cases
• Actions
• Formatting tab
• Location and size
• Font
• Alignment + Padding
• Style
• Ordering
• Fills, Lines, + Borders
• The Wireframe pane
• Grid and Guides
• The Masters pane
• Master behavior
• Normal
• Place in Background
• Custom Widget
• Usage Report
• The Dynamic Panel Manager
• The toolbar and menu bar
• Axure file formats
• The .RP file format (stand-alone)
• The RPPRJ file format (shared project)
• Summary

• Chapter 3: Prototype Construction Basics
• Prototyping principles
• Alexandria, the Digital Library Project
• Getting started—productivity in 30 minutes
• Initial requirements and use cases
• Use case diagram page
• Saving the project file
• First wireframe pages
• Task flow diagram page
• Browse path flow diagram
• Search path flow diagram
• Link use cases to flow diagrams
• Generating the HTML prototype
• Getting started with masters and dynamic Panels
• The first wireframe
• The quick and dirty approach
• The quick but structured approach
• First masters: navigation systems
• Global navigation bar
• Secondary navigation system
• The first dynamic panel
• Adding states to a dynamic panel
• Adding visual effects
• Adding sketch effects
• Updating task flow diagrams
• Practitioner's corner—Axure prototyping for mobile devices
• Mobile-friendly websites and mobile apps
• Different device resolutions and aspect ratios
• Using the Viewport Tag
• Using a full screen browser
• Landscape and portrait page versions
• Event and gesture compatibility
• Browser limitations
• Using widget libraries
• Loading prototypes onto the device
• Summary

• Chapter 4: Interactivity 101
• Interaction design—brief history
• The 1950–60s
• The 1970–80s
• The 1990–2000s
• The present, future, and Axure interactions
• Axure interactions primer
• Guided example
• Step 1: Defining the interaction in simple words
• Step 2: The Axure interface
• Step 3: Translating this requirement into an Axure interaction
• Step 4: Annotating the interaction (optional?)
• Axure events
• Events triggered on OnPageLoad
• Guided example: Changing the default landing page
• Simulating contextual navigation
• OnPageLoad events and dynamic panels
• OnPageLoad event in detail
• User triggered events
• Guided example: Sign-in
• Construction strategy
• Adding the interaction
• Organizing actions
• Widget, Events, and Context
• Widget Events in detail
• Axure cases
• Guided example: Construction and interactions
• Part 1: Construction tweaks
• Part 2: Adding interactions
• Axure actions
• Links actions
• Dynamic panel actions
• Widgets and variables actions
• Miscellaneous actions
• Summary

• Chapter 5: Advanced Interactions
• Conditions
• If-Then-Else
• Guided example—conditions and dynamic panels
• Step 1: Defining the interaction
• Step 2: Constructing Wireframe
• Step 3: Setting the first condition
• Step 4: Adding the first interaction
• Step 5: Completing the interaction
• The Condition Builder
• Guided example—multiple conditions
• Step 1: Defining the interaction
• Step 2: Constructing Wireframe
• Step 3: Interaction tweaks
• Step 4: Evaluating multiple conditions
• Step 5: Final conditional touches
• Troubleshooting conditions
• Raised events
• Guided example
• Step 1: Creating a raised event on the master
• Step 2: Applying interaction to raised events on a page
• Nested masters: Amplifying the raised event
• Variables
• Guided example—creating context with variables
• Step 1: Defining the interaction
• Step 2: Construction considerations: Dynamic panel or pages?
• Step 3: Adjusting existing conditions
• Step 4: Variables and the order of actions
• Step 5a: Setting variables (and possible snags)
• Step 5b: Setting and initializing variables
• Step 6: Using variable values to determine appropriate cases
• Variable types
• Global variables
• Axure's built-in variable
• Create your own variables
• Special variables
• Usage examples
• Local variables and functions
• Naming variables
• How variables can help in usability testing
• Guided example—contextual usability testing
• Pros and cons of using variables
• Tips and techniques from the experts
• Hiding and showing list elements, by Jeff Harrison
• The approach
• Step 1: Creating the row template
• Step 2: Moving rows together
• Step 3: Repeating as desired
• Step 4: Adding controls
• Keyboard Shortcuts by Loren Baxter
• High-level Interaction
• Detailed steps
• Notes
• Axure tricks by Fred Beecher
• Trick 1: Debugging your Logic
• Trick 2: Passing variable values between pages
• Trick 3: Hidden link to clear variables
• Trick 4: Text fields masquerading as text panels
• Summary

• Chapter 6: Widget Libraries
• Axure's built-in libraries
• Axure and community libraries
• Your own widget library
• Guided example: Widget library to support prototype
• Step 1: Create the library file
• Step 2: Creating a custom widget (lorem ipsum)
• Step 3: Refresh the library in the project file
• Expanding the library—design patterns
• Example 1: A confirmation/alert box widget
• Step 1: Defining the pattern
• Step 2: Construction
• Example 2: An incremental search widget
• Step 1: Defining the pattern
• Step 2: Construction
• Step 3: Interactions
• Managing widget libraries
• Local masters or external widget libraries?
• Using RPLIB
• Using masters in a PR or RPPRJ file
• Practitioner's corner
• Why widgets?
• Pixel-perfect icons
• Clear widget label and tool tips for extra help
• Summary

• Chapter 7: Managing Prototype Change
• From vision to reality
• Aligning expectations
• UX and software development models
• Waterfall
• Agile
• Estimating Axure work
• Calculating your time
• Expectation alignment
• Transitioning from concept to detailed design
• From vision mode
• From sketch mode
• Foundations and scaffoldings
• Determining the Wireframe width
• Guides
• The grid
• Page templates
• Page style editor

• Widget style editor
• Default widget styles

• Style painter
• Integrating with the project style guide and CSS
• The style guide

• To sync or not to sync?
• Prototype with existing visual design

• Summary

• Chapter 8: Functional Specifications
• Collaboration with the development team
• Aligning expectations
• Capturing UI specifications
• Global specifications
• Generators and outputs: Specifications and prototypes
• Customizing the Word specifications generator
• Page notes
• One note section versus many
• Annotation fields
• Annotation views
• Generating specifications
• The General section
• The Pages section
• The Masters section
• The Page Properties section
• The Screenshot section
• The Widget Properties section
• The Layout section
• The Word Template section
• Summary

• Chapter 9: Collaboration
• Shared projects
• The environment
• Check out/in status
• Setting up a shared repository
• Loading from a shared repository
• The Share menu
• Creating and loading
• Updating the entire file
• Updating a single page or master
• Manage Shared Project…
• Browse Shared Project History…
• Repoint to Moved Shared directory…
• Clean Up Local Copy…
• Best practices for UX Axure teamwork
• Attributes of the UX team
• Feedback from stakeholders—the Discussion tab
• Discussions hosted on AxShare
• Discussions not hosted on AxShare
• Step 1: In AxShare.com
• Step 2: In Axure
• Step 3: In the browser
• Summary

• Index