You are previewing Axure RP 6 Prototyping Essentials.
O'Reilly logo
Axure RP 6 Prototyping Essentials

Book Description

Creating highly compelling, interactive prototypes with Axure that will impress and excite decision makers

  • Quickly simulate complex interactions for a wide range of applications without any programming knowledge

  • Acquire timesaving methods for constructing and annotating wireframes, interactive prototypes, and UX specifications

  • A hands-on guide that walks you through the iterative process of UX prototyping with Axure

  • In Detail

    Wireframes, interactive prototypes, and UX specifications are among the fundamental deliverables of every UX project. They are also the most labor and time intensive to produce due to constant changes in business requirements. Given these circumstances, Axure is quickly taking over as the preferred tool for prototyping. However, prototyping in Axure is strikingly different from the conventional method of producing static wireframes and to rapidly develop interactive prototypes in Axure, you’ll need to have a good understanding of the tool and its features.

    Whether you are an individual practitioner or a member of a UX team, a consultant, or an employee, this book will teach you how to use Axure, one of the leading UX tools. You will learn to use Axure for producing top-quality deliverables and tackling the demands of rapid iterative UX projects of any complexity and size, and for any platform and device.

    Axure RP 6 Prototyping Essentials takes a very pragmatic approach to showing you how to use Axure and produce impressive deliverables while saving labor and time. You may not be in a position to change how projects are scheduled, budgeted, and managed, but you can be more creative and productive by mastering one of the leading UX tools in the market.

    After an initial introduction to Axure’s user interface, terminology, and features, this book walks you through a medium-size UX project: a digital library that sells books, newspapers, and movies. Although some aspects of the prototyping process are simplified for the sake of clarity and efficiency, the demo project is an opportunity to discuss in context and in sequence topics such as addressing business and technical requirements, handling use cases and flow diagrams, low and high fidelity wireframe construction, interactivity, writing annotations, generating detailed UX specifications, and traceability.

    For the most part, Axure 6 RP Prototyping Essentials can be read in sequence or used as a reference guide.

    Table of Contents

    1. Axure RP 6 Prototyping Essentials
    2. Credits
    3. Foreword
    4. About the Author
    5. Acknowledgement
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
      2. Why Subscribe?
      3. Free Access for Packt account holders
      4. Instant Updates on New Packt Books
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Prototyping Fundamentals
      1. The art of UX prototyping
        1. Prototyping interaction
      2. The prototyping checklist
        1. The project
          1. Simple websites
          2. Web applications and portals
          3. Mobile apps
          4. Heuristic evaluation
          5. User validation
        2. Deliverables: Prototype and specifications
      3. Balancing act: What stakeholders have to say
        1. Business stakeholders
          1. Management
          2. Business process architects
        2. Project management
        3. Visual design
        4. Development stakeholders
      4. The UX perspective
        1. The UX practitioner
        2. The UX team lead
          1. The challenge
          2. Team structure
          3. Process
          4. Extending the process
          5. Axure: The Good
          6. Axure: The Bad
          7. Tips for using Axure on large design projects
      5. Axure around the world
      6. The Axure perspective
      7. Summary
    10. 2. Axure Basics—the User Interface
      1. Getting started
        1. Working with multiple project files
      2. The Axure workspace
        1. Customizing the workspace
      3. The Sitemap pane
        1. Wireframe pages
        2. Flow pages
      4. The Page Properties pane
        1. Page notes
          1. Managing notes
        2. Page interactions
        3. Page formatting
          1. Sketch effects
      5. The Widgets pane
        1. Wireframe Widgets
        2. Flow widgets
        3. Creating your own widget library
        4. Third party widget libraries
      6. The Widget Properties pane
        1. Annotation tab
          1. Annotation fields
          2. Annotation views
        2. Interactions tab
          1. Interactions
          2. Events
          3. Cases
          4. Actions
        3. Formatting tab
          1. Location and size
          2. Font
          3. Alignment + Padding
          4. Style
          5. Ordering
          6. Fills, Lines, + Borders
      7. The Wireframe pane
        1. Grid and Guides
      8. The Masters pane
        1. Master behavior
          1. Normal
          2. Place in Background
          3. Custom Widget
        2. Usage Report
      9. The Dynamic Panel Manager
      10. The toolbar and menu bar
      11. Axure file formats
        1. The .RP file format (stand-alone)
        2. The RPPRJ file format (shared project)
      12. Summary
    11. 3. Prototype Construction Basics
      1. Prototyping principles
      2. Alexandria, the Digital Library Project
      3. Getting started—productivity in 30 minutes
        1. Initial requirements and use cases
        2. Use case diagram page
        3. Saving the project file
        4. First wireframe pages
        5. Task flow diagram page
          1. Browse path flow diagram
          2. Search path flow diagram
        6. Link use cases to flow diagrams
        7. Generating the HTML prototype
      4. Getting started with masters and dynamic Panels
        1. The first wireframe
          1. The quick and dirty approach
          2. The quick but structured approach
        2. First masters: navigation systems
          1. Global navigation bar
          2. Secondary navigation system
        3. The first dynamic panel
          1. Adding states to a dynamic panel
      5. Adding visual effects
      6. Adding sketch effects
      7. Updating task flow diagrams
      8. Practitioner's corner—Axure prototyping for mobile devices
        1. Mobile-friendly websites and mobile apps
          1. Different device resolutions and aspect ratios
          2. Using the Viewport Tag
          3. Using a full screen browser
          4. Landscape and portrait page versions
          5. Event and gesture compatibility
          6. Browser limitations
          7. Using widget libraries
          8. Loading prototypes onto the device
      9. Summary
    12. 4. Interactivity 101
      1. Interaction design—brief history
        1. The 1950–60s
        2. The 1970–80s
        3. The 1990–2000s
        4. The present, future, and Axure interactions
      2. Axure interactions primer
      3. Guided example
        1. Step 1: Defining the interaction in simple words
        2. Step 2: The Axure interface
        3. Step 3: Translating this requirement into an Axure interaction
        4. Step 4: Annotating the interaction (optional?)
      4. Axure events
        1. Events triggered on OnPageLoad
        2. Guided example: Changing the default landing page
        3. Simulating contextual navigation
          1. OnPageLoad events and dynamic panels
          2. OnPageLoad event in detail
      5. User triggered events
        1. Guided example: Sign-in
        2. Construction strategy
          1. Adding the interaction
          2. Organizing actions
          3. Widget, Events, and Context
          4. Widget Events in detail
      6. Axure cases
        1. Guided example: Construction and interactions
          1. Part 1: Construction tweaks
          2. Part 2: Adding interactions
          3. Axure actions
        2. Links actions
        3. Dynamic panel actions
        4. Widgets and variables actions
        5. Miscellaneous actions
      7. Summary
    13. 5. Advanced Interactions
      1. Conditions
        1. If-Then-Else
        2. Guided example—conditions and dynamic panels
          1. Step 1: Defining the interaction
          2. Step 2: Constructing Wireframe
          3. Step 3: Setting the first condition
          4. Step 4: Adding the first interaction
          5. Step 5: Completing the interaction
      2. The Condition Builder
        1. Guided example—multiple conditions
          1. Step 1: Defining the interaction
          2. Step 2: Constructing Wireframe
          3. Step 3: Interaction tweaks
          4. Step 4: Evaluating multiple conditions
            1. Satisfy all or any
          5. Step 5: Final conditional touches
      3. Troubleshooting conditions
      4. Raised events
        1. Guided example
          1. Step 1: Creating a raised event on the master
          2. Step 2: Applying interaction to raised events on a page
        2. Nested masters: Amplifying the raised event
      5. Variables
        1. Guided example—creating context with variables
          1. Step 1: Defining the interaction
          2. Step 2: Construction considerations: Dynamic panel or pages?
          3. Step 3: Adjusting existing conditions
          4. Step 4: Variables and the order of actions
          5. Step 5a: Setting variables (and possible snags)
          6. Step 5b: Setting and initializing variables
            1. Initializing, passing, and resetting variables
          7. Step 6: Using variable values to determine appropriate cases
      6. Variable types
        1. Global variables
          1. Axure's built-in variable
          2. Create your own variables
        2. Special variables
        3. Usage examples
        4. Local variables and functions
      7. Naming variables
      8. How variables can help in usability testing
        1. Guided example—contextual usability testing
      9. Pros and cons of using variables
      10. Tips and techniques from the experts
        1. Hiding and showing list elements, by Jeff Harrison
          1. The approach
          2. Step 1: Creating the row template
          3. Step 2: Moving rows together
          4. Step 3: Repeating as desired
          5. Step 4: Adding controls
        2. Keyboard Shortcuts by Loren Baxter
          1. High-level Interaction
          2. Detailed steps
          3. Notes
        3. Axure tricks by Fred Beecher
          1. Trick 1: Debugging your Logic
          2. Trick 2: Passing variable values between pages
          3. Trick 3: Hidden link to clear variables
          4. Trick 4: Text fields masquerading as text panels
      11. Summary
    14. 6. Widget Libraries
      1. Axure's built-in libraries
      2. Axure and community libraries
      3. Your own widget library
        1. Guided example: Widget library to support prototype
          1. Step 1: Create the library file
          2. Step 2: Creating a custom widget (lorem ipsum)
          3. Step 3: Refresh the library in the project file
      4. Expanding the library—design patterns
        1. Example 1: A confirmation/alert box widget
          1. Step 1: Defining the pattern
          2. Step 2: Construction
        2. Example 2: An incremental search widget
          1. Step 1: Defining the pattern
          2. Step 2: Construction
          3. Step 3: Interactions
      5. Managing widget libraries
      6. Local masters or external widget libraries?
        1. Using RPLIB
        2. Using masters in a PR or RPPRJ file
      7. Practitioner's corner
        1. Why widgets?
        2. Pixel-perfect icons
        3. Clear widget label and tool tips for extra help
      8. Summary
    15. 7. Managing Prototype Change
      1. From vision to reality
      2. Aligning expectations
        1. UX and software development models
          1. Waterfall
          2. Agile
            1. Jargon
            2. Agile flavors
      3. Estimating Axure work
        1. Calculating your time
        2. Expectation alignment
      4. Transitioning from concept to detailed design
        1. From vision mode
        2. From sketch mode
      5. Foundations and scaffoldings
        1. Determining the Wireframe width
        2. Guides
          1. Global guides
          2. Page guides
        3. The grid
          1. Customizing the grid
        4. Page templates
          1. Page style editor
            1. Home page template
            2. Category page template
            3. Detail page template
      6. Widget style editor
        1. Default widget styles
      7. Style painter
      8. Integrating with the project style guide and CSS
        1. The style guide
      9. To sync or not to sync?
        1. Prototype with existing visual design
      10. Summary
    16. 8. Functional Specifications
      1. Collaboration with the development team
        1. Aligning expectations
      2. Capturing UI specifications
        1. Global specifications
        2. Generators and outputs: Specifications and prototypes
        3. Customizing the Word specifications generator
        4. Page notes
          1. One note section versus many
        5. Annotation fields
        6. Annotation views
      3. Generating specifications
        1. The General section
        2. The Pages section
        3. The Masters section
        4. The Page Properties section
        5. The Screenshot section
        6. The Widget Properties section
        7. The Layout section
        8. The Word Template section
      4. Summary
    17. 9. Collaboration
      1. Shared projects
        1. The environment
        2. Check out/in status
        3. Setting up a shared repository
        4. Loading from a shared repository
        5. The Share menu
          1. Creating and loading
          2. Updating the entire file
          3. Updating a single page or master
          4. Manage Shared Project...
          5. Browse Shared Project History...
          6. Repoint to Moved Shared directory...
          7. Clean Up Local Copy...
      2. Best practices for UX Axure teamwork
        1. Attributes of the UX team
      3. Feedback from stakeholders—the Discussion tab
        1. Discussions hosted on AxShare
        2. Discussions not hosted on AxShare
          1. Step 1: In AxShare.com
          2. Step 2: In Axure
          3. Step 3: In the browser
      4. Summary