Integrating Axure Into Your Design Process Presented by Fred Beecher Lead User Experience Consultant @fred_beecher UX MARATHON 2011 | OCTOBER 28, 2011
Jan 27, 2015
Integrating Axure Into Your Design ProcessPresented by Fred BeecherLead User Experience Consultant
@fred_beecher
UX MARATHON 2011 | OCTOBER 28, 2011
@fred_beecher
What You’ll Learn Today…
• Iterative design & prototyping in software development
• How to configure Axure for integration into your process
• How to reuse design components & maintain consistency
• How to work with Axure efficiently & effectively
• How to document your designs
Part 1: Iterative Design & Prototyping in Software Development
Communication Breakdown
flickr: greghartmann
Success?
flickr: greghartmann
FAILURE!
flickr: greghartmann
innovation
flickr: greghartmann
STANDARDSOLUTIONS
flickr: greghartmann
Change hurts
flickr: greghartmann
Rework. Ugh.
flickr: greghartmann
@fred_beecher
Iterative design with prototyping…
• Maintains the vision
• Enables innovation
• Ensures quality
• Reduces risk
• Increases efficiency
• Decreases rework
@fred_beecher
Change Happens. Plan for it.
>
DESIGN ≠ DOCUMENTATION
flickr: sonrisaelectrica
Part 2: Configuring Axure for Integration
COLLABORATE!
@fred_beecher
Collaborating with…
Visual Designers• If a style guide exists, get it from the
visual designers
• Proactively keep up with changes
• Show designers how Axure represents styles
• Let them know when you think a new style might be needed
• If a style guide exists, prototype at high visual fidelity!
• Sketch effects & page styles allow you to degrade fidelity easily
@fred_beecher
Collaborating with…
Developers• Show them annotated prototypes &
functional specifications
• Find out what they need to know about a design to develop it
• Customize annotation & page notes fields to meet their needs
• Find out what needs to be shown
• Find out what can simply be told
• Make it clear that the prototype code will not be reusable
@fred_beecher
Collaborating with…
Business Analysts & Product Managers• Teach them how to
prototype basic interactivity
• Teach them how to document design elements
• Show them how to connect design elements to requirements
• Show them how to connect design elements to business rules
@fred_beecher
Collaborating with…
Content Strategists• Content development is
iterative too!
• Work with Content Strategists to obtain plausible (if not final) content to support design & usability testing
• Have them enter the content (in a shared prototype)
• Generate specifications with a separate annotation table that contains only content and ALT text
@fred_beecher
Collaborating with…
Stakeholders & Testers• Enable discussions
• You can do this on prototypes stored on Axure’s cloud server (AxShare)…
• Or on prototypes hosted internally
• Note: All discussions are actually hosted on AxShare even when prototypes aren’t
• Gather & respond to the feedback that is provided
@fred_beecher
Collaborating With Each Other – Shared Projects
Shared projects allow users to check parts of a prototype in and out rather than having to check the whole .RP file in and out
Internal• Set up a shared project on a
network drive
• Ensure that everyone has reliable access to the drive
External• Set up a shared project on a third-
party SVN (Subversion) host
• Evantage uses SourceRepo.com
For Details: http://axure.com/sharedprojects
@fred_beecher
Using Shared Projects Effectively
• Check out what you’ll be working on in the morning
• Checking out a lot at once is a lot more efficient
• Check it back in at the end of the day
• Get & Send changes throughout the day
• Communicate with your team members when you do
• Warn people when you need to check a large portion of the prototype out & go offline
@fred_beecher
Collaborating With Each Other – Gathering Feedback
Host the prototype on share.axure.com
@fred_beecher
Collaborating With Each Other – Gathering Feedback
Host the prototype locally
@fred_beecher
Gathering Feedback
Part 3: Reuse & Consistency
@fred_beecher
Keeping it Consistent
Masters• Best for reuse & consistency within a single prototype
Custom Widget Libraries• Best for reuse & consistency across multiple prototypes
Template .RP Files• Best for reuse & consistency across an entire organization
@fred_beecher
Different Types of Masters
Normal• Instances of the master change when
the master itself changes
• Placement of widgets in the master doesn’t matter
Place in Background• Makes instances of the master
unselectable, like elements on Visio background pages
• The placement of widgets on these masters is where they’ll be placed when instantiated on pages
Custom Widget• When you change a Custom Widget,
any instances of it in the prototype DO NOT change
Background MasterBa
ckgr
ound
Mas
ter Background M
aster
Master
Custom Widget Master
@fred_beecher
Custom Widget LibrariesCustom widget libraries are for retaining consistency throughout an entire system or platform
• Best used for objects that need to be customized each time
• Annotation values are pulled in if field names in the library file are the same as those in the .RP file
• Add a page notes field in the library field that details how to use the object
• Add a quick summary to the widget info
http://axure.com/customwidgetlibraries
@fred_beecher
Template .RP FilesTemplate .RP files best for retaining consistency throughout an entire organization. They store everything.
@fred_beecher
ImportingDo something great in an old prototype? Use the Import feature to import as much or as little of that prototype as you want.
Part 4: Doing the Work
@fred_beecher
Balance Prototyping With Documentation
Prototyping everything will slow you down. Prototype an example behavior; document every instance of a behavior.
What to prototype• One example of an error message
• One example of a complex interaction
• Screens or pages with plausible content
What to document• Every error message and the
condition that displays it
• Business rules and navigation flows that describe every aspect of a complex interaction
• Page Templates
@fred_beecher
Dividing the Work
If you’re integrating Axure into a process in which you collaborate with other UX designers, assigning roles helps things go smoothly
• Give the responsibility for maintaining custom widget libraries to one person
• One person should also be ultimately responsible for the prototype overall
• Divide the design work by page section, use case, or feature
• Overcommunicate!
There is no such thing as high or low fidelity… only
appropriate fidelity.
- Bill Buxton
@fred_beecher
Functional Fidelity“Functional Fidelity” refers to how close a prototype’s behavior is to that of the system that it represents
Appropriate functional fidelity is the minimum level of functionality required to answer the questions a prototype is intended to answer
@fred_beecher
Visual Fidelity“Visual Fidelity” refers to how close a prototype’s appearance is to that of the system that it represents
Appropriate visual fidelity is the minimum level of visual design required to answer the questions a prototype is intended to answer
@fred_beecher
Visual Fidelity“Visual Fidelity” refers to how close a prototype’s appearance is to that of the system that it represents
Appropriate visual fidelity is the minimum level of visual design required to answer the questions a prototype is intended to answer
@fred_beecher
Iterative Visual Fidelity With StylesAxure’s Page & Widget Styles allow you to increase or decrease visual fidelity easily to support earlier & later design iterations
With defined visual styles… • Make custom widget styles that
match your defined styles
• Prototype your first iteration using these styles!
• Create page styles with Sketch Effects to decrease visual fidelity at the click of a button!
Without defined visual styles…• Make everything a style!
• Update your existing styles to match visual styles once they have been defined
@fred_beecher
Prototyping for Usability Testing
If you will be testing your prototype with users, a little planning will help everything go smoothly…
• Identify the scenarios you will be testing in the prototype
• Obtain plausible content and data to support those scenarios
• Write the test plan. Yes, even before you begin prototyping!!!
• Build the content, data, and functionality into your prototype as you make it
Part 5: Documentation
@fred_beecher
Document Iteratively
Preparing detailed documentation for early iterations of a design can be a huge waste of time…
• Don’t bother documenting highly experimental iterations
• Document high-level page notes and simple annotations in mid-level iterations, e.g., – Content type– Possible values
• Document detailed page notes and annotations in the final iteration, e.g., – Description– Business rules– Error messages
• If you generate a spec, generate it as late in the process as possible
@fred_beecher
Document Details; Prototype Examples
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
• A spec that describes only masters…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
• A spec that describes only masters…
• A landscape spec with two uneven columns for the wireframe & annotations…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
• A spec that describes only masters…
• A landscape spec with two uneven columns for the wireframe & annotations…
• New functionality added to an existing prototype…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
• A spec that describes only masters…
• A landscape spec with two uneven columns for the wireframe & annotations…
• New functionality added to an existing prototype…
• Annotations from masters displayed on every page…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Generating a Functional Specification
• Content as a separate annotation table…
• A spec that describes only masters…
• A landscape spec with two uneven columns for the wireframe & annotations…
• New functionality added to an existing prototype…
• Annotations from masters displayed on every page…
• Sketchy pages documented without sketch effects…
Axure’s specification generator is so flexible that it can handle pretty much any horrifying documentation template you can throw at it…
@fred_beecher
Finalizing a Functional Specification
A printed functional spec requires 2-4 hours of cleanup time, depending on the size of the prototype
• Generate the spec at the last possible moment!
• When changes are requested to the final design (!!!), save the cleaned-up spec to a new filename
• Generate the changes to the old filename
• Copy & paste the changes from the new spec into the cleaned-up version
My personal opinion? Functional specifications are a hack. Annotated prototypes require less work and communicate more effectively.
@fred_beecher
Summary
We talked about…
• Iterative design with prototyping
• Collaborating effectively with multiple roles
• Gathering feedback from others
• Efficiency & consistency through reuse
• Prototyping examples & documenting details
• Appropriate visual & functional fidelity
• Flexible & efficient documentation