You are previewing Prototyping Essentials with Axure Second Edition.
O'Reilly logo
Prototyping Essentials with Axure Second Edition

Book Description

A comprehensive strategy and planning guide for the production of world-class UX artifacts such as annotated wireframes, immersive prototypes, and detailed documentation

In Detail

Designing the user experience has never been more exciting, while prototyping it has never been more challenging. Whether you are an individual practitioner or a member of a UX team, a consultant, or an in-houseUX resource, this book will teach you how to plan, construct, and document top-quality, device/OS-agnostic artifacts and deliverables such as task and user flows, persona briefs, wireframes, prototypes, and specifi cations with Axure 7, the leading UX industry design tool.

Axure 7 is used worldwide by tens of thousands of UX professionals, business analysts, and product managers in global corporations, governments, large institutions, leading interactive agencies, and consultancies.

Prototyping Essentials with Axure Second Edition is a detailed, practical primer on Axure 7.0 and is a complete rewrite of the previous edition due to the numerous new features in Axure 7.0. Demand for skilled Axure professionals is high and familiarity with Axure is an expected prerequisite skill for UX designers worldwide.

What You Will Learn

  • Plan and construct compelling interactive prototypes that impress and excite decision-makers, stakeholders, and users
  • Quickly simulate complex interactions for Web and mobile without programming knowledge. If you can program, the sky is the limit
  • Acquire effective time-saving methods to construct annotated wireframes, interactive prototypes, and UX specifi cations
  • Follow the iterative, collaborative process of UX prototyping as an individual designer or member of a team
  • Keep UX on schedule and budget through planning, effort estimation and risk assessment
  • Maximize your investment in Axure 7, the leading UX tool, with this comprehensive coverage of workflow and features
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Prototyping Essentials with Axure Second Edition
      1. Table of Contents
      2. Prototyping Essentials with Axure Second Edition
      3. Credits
      4. Foreword
      5. About the Author
      6. Acknowledgments
      7. About the Author
      8. Acknowledgments
      9. About the Reviewers
      10. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      11. 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
      12. 1. Prototyping Fundamentals
        1. The Times They Are A-Changin'
        2. The Axure Option
        3. UX Prototyping by UX Designers
          1. Prototyping Interaction
        4. Project-level Forecasting
          1. A Weighted Risk Checklist for UX Projects
            1. The Heuristics
            2. The Score
            3. Your Employment Type
              1. Risk Factors for UX Consultants
              2. Opportunities
            4. The Client
              1. Risk Factors
              2. Opportunities
            5. UX Reporting To...
              1. Risk Factors
              2. Opportunities
            6. Enterprise Grade
              1. Risk Factors
              2. Opportunities
            7. New Product or a Redesign
              1. Risk Factors
              2. Opportunities
            8. Transactional
              1. Risk Factors
              2. Opportunities
            9. Responsive
              1. Risk Factors
              2. Opportunities
            10. Localization
              1. Risk Factors
            11. Business Requirements Exist
              1. Risk Factors
              2. Opportunities
            12. UX Resources
              1. Risk Factors
              2. Opportunities
            13. Communication and Collaboration Tools
              1. Risk Factors
              2. Opportunities
            14. UX Documentation and Traceability
              1. Risk Factors
              2. Opportunities
        5. Axure Construction Strategy Checklist
          1. Showcasing Opportunities
          2. Considering Risks
        6. Practical Axure
          1. Small Projects
          2. Web Applications and Portals
          3. Heuristic Evaluation
          4. User Validation
          5. Deliverables – Prototypes and Specifications
        7. Tips for Using Axure on Large-design Projects
        8. UX and Stakeholders' Perspectives
          1. Leadership
          2. Project Management
          3. Engineering
          4. Visual Design
          5. The UX Perspectives
        9. The Axure Perspective
        10. Summary
      13. 2. Axure Basics – the User Interface
        1. Getting Started
          1. Axure File Formats
            1. The RP File Format (Standalone Files)
            2. The RPPRJ File Format (Team Project)
            3. Team Projects
        2. Environment
          1. Customizing the Workspace
          2. The Sitemap Pane
          3. The Widgets Pane
            1. Wireframe Widgets
            2. Selecting a Widget Shape – Option 1
            3. Selecting a Widget Shape – Option 2
            4. Selecting a Widget Shape – Option 3
            5. Shapes – Highlights
            6. Form Fields – Highlights (New!)
            7. Dynamic Panels – Highlights
            8. The Repeater Widget (New!)
          4. Style
            1. Location and Size
            2. Base Style
              1. The Style Editor – Default Styles
              2. The Style Editor Dialog – Custom Styles
            3. Font
            4. Fills, Lines, + Borders
              1. Outer and Inner Shadow
            5. Alignment + Padding
              1. Line Spacing
        3. The Design Area
          1. Adaptive Views (New!)
            1. Adding Adaptive Views
            2. Adaptive View Definitions
        4. The Page Properties Pane
          1. Page Notes
            1. Manage Notes
          2. Page Interactions
          3. Page Formatting
          4. Sketch Effects
          5. Flow Widgets
        5. The Widget Interactions and Notes Pane
          1. The Interactions Tab
            1. Interactions
          2. The Notes Tab
          3. Note Sets
        6. Grid and Guides
          1. Setting Guides
        7. The Masters Pane
          1. Master Drop Behavior
            1. Place Anywhere
            2. Lock to Master Location
            3. Break Away from Master
          2. Usage Report
        8. The Widget Manager Pane
          1. Widgets Manager Functionality
            1. Widgets Manager – Filter
          2. Web Fonts Mappings (New!)
            1. Step 1 – Assign/Tag the Font
            2. Step 2 – The Web Font
            3. Step 3 – Copy the Code into Axure
        9. The Toolbars and the Menu Bar
        10. The Generated Prototype
        11. Summary
      14. 3. Prototype Construction Basics
        1. Aligning UX with Prototyping Principles
        2. Getting Started with Prototyping in Axure
          1. Key Design Activities
          2. Assumptions and Disclaimers
          3. Objectives and Artifacts
          4. Naming Conventions, Labeling, and Unique IDs
          5. The Farm2Table Sample Project in a Nutshell
          6. Interactive Concept Models
            1. The Axure Edge
          7. On Capabilities and Requirements
            1. Initial, High-level Requirements
              1. Home Page
            2. Axure and Requirement Management
            3. Use Cases
          8. Use Case Diagram Page
            1. Step 1 – Adding a Flow Page to the Sitemap
              1. Showing the Grid
            2. Step 2 – Creating the Use Case Diagram
              1. Refine Diagram
              2. Axure's Selection Modes
              3. Working with Widgets
            3. Staying Organized with Sitemap Folders
          9. Saving the Project File
            1. The RP Route
            2. The RPPRJ Route – Convert to Team Project
        3. Task Flow Diagram Pages
          1. Task Flow Diagrams (Sans Visio)
          2. Flow Diagram – New Subscription
          3. Flow Diagram – Assemble My Weekly Box
        4. Linking Use Cases to Flow Diagrams while Keeping Your Naming Conventions Intact
        5. Generating an HTML Prototype
        6. The Sitemap Diagram
        7. A Device/OS-agnostic UI Framework
          1. First Wireframe – Produce [Visitor, User Not Logged In]
            1. A Quick but Structured Construction Approach
        8. Getting Started with Masters and Dynamic Panels
          1. Global Elements as Masters
          2. Axure Masters and Why to Use Them
            1. The Global Navigation Bar
            2. Adding Wireframe Pages
            3. Creating Your First Master
            4. Basic Interactions
          3. Dynamic Panels to the Rescue
            1. States Construction in a Dynamic Panel
            2. Automatically Resizing a Dynamic Panel and Associated States
        9. Adding Visual Effects
        10. Adding Sketch Effects
        11. Summary
      15. 4. Creating Basic Interactions
        1. Axure Interactions
        2. Axure Events
          1. Page-level Events
          2. Widget-level Events
        3. Axure Cases
        4. Axure Actions
        5. Things to Keep in Mind
          1. Widgets, Events, and Context
          2. Labeling
        6. Example 1 – Controlling Styles
          1. Step 1 – Navigation Bar Setup
          2. Step 2 – Setting the Navigation to Reflect the Current Page
          3. Step 3 – Setting the Remaining Tabs
        7. Example 2 – Hide and Show
          1. Construction Strategy
          2. Step 1 – Assigning Styles to the LOG IN Tab
          3. Step 2 – Creating the Login Layer
          4. Step 3 – Show or Hide the Login Panel
        8. Example 3 – Utility Actions
          1. Step 1 – the Lightbox Widget
          2. Step 2 – Interaction
        9. Summary
      16. 5. Advanced Interactions
        1. Conditions
          1. IF-THEN-ELSE
            1. A Basic Set
            2. How Statements Relate to Each Other
            3. AND and OR
            4. Sandbox Files for Learning and Experimenting
            5. Guided Example – Conditions
            6. Step 1 – Defining the Interaction
            7. Step 2 – Wireframe Construction
            8. Step 3 – Setting the First Condition
            9. Step 4 – Adding an Interaction to the Condition
            10. Step 5 – Testing the Interaction
            11. Step 6 – Tweak and Iterate
          2. The Condition Builder in Detail
            1. Guided Example – Higher Fidelity with Multiple Conditions
              1. Step 1 – Define the Interaction and Desired Fidelity
                1. From Low to High
              2. Step 2 – Wireframe Construction
              3. Step 3 – Evaluating Conditions
                1. Divide and Conquer – Part 1
                2. Counter Conditions
                3. Divide and Conquer – Part 2
                4. Toggle IF/ELSE IF and Order of Execution
                5. Satisfy ALL or ANY
                6. Negative Thinking
                7. More Than Meets the Eye
                8. Time Estimation for Conditional Work
          3. Troubleshooting Conditions
        2. Raised Events
          1. Guided Example
            1. Step 1 – Creating a Raised Event on the Master
            2. Step 2 – Applying an Interaction to Raised Events on a Page
              1. Wireframe Construction
              2. Binding the Raised Event with an Action
              3. Same Master but Different Behaviors
          2. Amplifying Raised Events in Nested Masters
            1. Construction
            2. Amplifying a Raised Event
            3. Completion
        3. Variables
          1. Guided Example – Tracking Items in a Shopping Cart
            1. Step 1 – Defining the Interaction
            2. Step 2 – Constructing the Interaction
              1. The Repeater Wireframe
              2. The Repeater Dataset
              3. Repeater Item Interactions
              4. Repeater Formatting
            3. Step 3 – Introducing Variables
              1. Identifying Needed Variable(s)
              2. Adding Variables to the Prototype
                1. Creating and Managing the Variables
                2. Getting Variables to Work – Step 1
                3. Getting Variables to Work – Step 2
                4. Getting Variables to Work – Step 3 (Preview)
              3. Finishing the Interaction
              4. Points to Remember about Variables
        4. 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
        5. Naming Variables
        6. Pros and Cons of Using Variables
        7. Summary
      17. 6. Widget Libraries
        1. When to Use a Widget Library
        2. Library Types
          1. Axure's Built-in Libraries
          2. Axure and Community Libraries
            1. Submitting a Widget Library
          3. Create Your Own Widget Library
          4. How to Create a Widget Library
            1. Step 1 – Creating the Library File
            2. Step 2 – Creating a Custom Widget
            3. Step 3 – Refreshing a Library in the Project File
        3. Managing Widget Libraries
        4. Masters or External Widget Libraries?
          1. Using RPLIB
            1. Pros
            2. Cons
          2. Using Masters in an RP or RPPRJ file
            1. Pros
            2. Cons
        5. When to Begin Creating Patterns
          1. Wireframe Global Patterns
        6. Summary
      18. 7. Managing Prototype Change
        1. From a Vision to Reality
          1. The Change-readiness Checklist
        2. Expectations, Paradigms, and Change
          1. UX and Software Development Models
            1. Traditional (Waterfall)
            2. Agile
              1. Agile Flavors
        3. Estimating Axure Work
          1. Where Does Time Go?
          2. Account for Responsive Web Design (RWD)
          3. Account for Refactoring an Axure File
          4. More on Expectation Alignment
        4. Construction for Change
          1. Cascade Change and Rollback Change
          2. Rollback Change with Team Project
          3. Cascade Change with Masters and Libraries
          4. Cascade Change with Custom Styles
            1. Widget Properties' Cheat Sheets
              1. Font Properties
              2. Shape Properties
              3. Alignment and Spacing Properties
            2. Default Widget Styles
            3. Local Changes with Style Painter
            4. Alignment with the Project Style Guide and CSS
            5. Have a Style Guide?
            6. Axure Custom Styles
              1. Axure Style Editor Versus CSS
            7. Impact of Alignment of the Prototype with Visual Design
            8. Alignment with Existing Visual Design
            9. The Page Style Editor
          5. Guides
            1. Global Guides
            2. Page Guides
            3. Grid
              1. Customizing the Grid
        5. Summary
      19. 8. UI Specifications
        1. Importance of Collaboration
          1. Aligning Expectations
        2. The 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. Adaptive Views
          7. The Widget Tables Section
          8. The Layout Section
          9. The Word Template Section
          10. Formatting-applied Word Styles
        4. Quick Tips to Improve the Layout
          1. Setting up the Wireframe with OnPageLoad
        5. Summary
      20. 9. Collaboration
        1. Team Projects (Pro Version Only)
          1. Understanding the Team Projects Environment
          2. Understanding the Check Out/In Status
          3. Setting Up a Shared Repository
          4. Loading from a Shared Repository
          5. The Team Menu
            1. Creating and Loading
            2. Updating the Entire File
            3. Updating Single Page or Master
            4. Managing Team Projects
              1. Check Out/In Use Case – Team Member A
              2. Check Out/In Use Case – Team Member B
            5. Browse Team Projects History…
            6. Repoint to Moved Shared Directory…
            7. Clean Up Local Copy... and Dealing with a Working Copy Locked Alert
        2. Best Practices for the UX Axure Teamwork
          1. Attributes of the UX Team
        3. axureShare – Axure's Cloud Solution for Sharing
          1. Creating an axureShare Account
        4. Feedback from Stakeholders – the Discussion Tab
          1. Discussions Hosted on axureShare
            1. Prototype ID and Other Features
          2. Discussions Not Hosted on axureShare
          3. Publishing to Axure Share
        5. Summary
      21. A. Practitioners' Corner
        1. Survey of Axure Users
        2. Troubleshooting Interactions Checklists
          1. The General Approach
          2. Questions to Ask when Debugging
          3. Common Hurdles
        3. Construction Tutorials
          1. Shira Luk-Zilberman – Simulating a Type-ahead Search Experience
            1. Practitioner Profile
            2. The Tutorial
            3. 1. Creating a Google-like Type-ahead Search Interface
              1. 1.1 Configuring the Repeater
              2. 1.2 Simulating Search
              3. 1.3 Tweaking the Borders
              4. 1.4 Dealing with No Text
            4. 2. Creating a Facebook-like Type-ahead Search Interface
            5. 3. Creating a LinkedIn-like Type-ahead Search Interface
              1. 3.1 Updating the Data
              2. 3.2 Ensuring that Category Items Always Show
              3. 3.3 Applying the Correct Design to Category Fields
              4. 3.4 Dealing with the Gaps
            6. Summary
          2. Svetlin Denkov – Building a Form-factor Viewer/Emulator to Support Effective RWD Demos on the Desktop
            1. Practitioner Profile
            2. The Tutorial
            3. 1. Setup and Assumptions
            4. 2. Constructing the Representation
              1. 2.1 Setting Up the View
              2. 2.2 Adding Interactivity
              3. 2.3 Testing the Prototype
            5. 3. Possible Limitations
            6. Takeaways
          3. Reusing Cases Across Different Widgets and Events
            1. Practitioner Profile
            2. The Tutorial
            3. The Problem
            4. The Solution
            5. Discussion, Takeaways, and Next Steps
          4. Marc-Oliver Gern – Using the Axure UI Kit, a Widget Library
            1. Practitioner Profile
            2. 1. Ideate and Define
            3. 2. Build
            4. 3. Contextualize
            5. 4. Test
            6. 5. Iterate
        4. Collaboration
          1. Ildikó Balla – Collaboration in Small Teams
            1. Practitioner Profile
            2. Reflections on Team Projects
          2. Susan Grossman – Enterprise Team Sharing
            1. Practitioner Profile
            2. Reflections on Team Projects
            3. Why Have an Existing Online Product Outside the Firewall?
            4. Process and Convention
            5. Always Get the Latest
            6. Size
            7. Enterprise Naming Conventions
            8. Names and Dynamics
            9. Team Skillsets
            10. Publishing and Prototyping Pages and Settings Updates
            11. Setting Expectations
            12. So What Are You Boarding/Framing/Prototyping?
            13. Look And Feel (L&F) in Wires
              1. High-fidelity Wireframes Really Get the Point Across!
              2. High-fidelity Wireframes Can Lead to Extreme Frustration
              3. It's Kind of Sketchy
          3. Orbitz Worldwide – Axure As a Document Base
            1. Practitioner Profiles
            2. Background
            3. Why Axure
              1. Process Improvements
              2. Enriches Interaction Design (IxD)
              3. Maintains Current Information Architecture (IA)
            4. Investigation and Implementation of Axure as a Document Base
            5. Proof of Concept
            6. Project Document Improvements with Axure
            7. Lean-down Documentation
            8. Effort/Estimation
              1. Effort Calculation
            9. Internal Documentation Process
              1. Workflow Details
                1. Process A – Project Kick-off
                2. Process B – Project Updates
                3. Process C – Usability Testing
                4. Process D – Merging
            10. Storing/Sharing Files
            11. Demo to UX Team and Management
            12. Training/Change Management
            13. Axure Migration
      22. Afterword
      23. Index