Like any powerful design tool, Axure RP Pro can adapt itself to your design process. But to gain the full benefit of this tool, you must (at least a little bit) adapt your process to Axure as well. This presentation will help you do both of these things.
1. Integrating Axure Into Your
Design Process
Presented by Fred Beecher
Lead User Experience Consultant
@fred_beecher
UX MARATHON 2011 | OCTOBER 28, 2011
2. 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
@fred_beecher
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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 External
• Set up a shared project on a • Set up a shared project on a third-
network drive party SVN (Subversion) host
• Ensure that everyone has reliable • Evantage uses SourceRepo.com
access to the drive
For Details: http://axure.com/sharedprojects
@fred_beecher
24. 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
25. Collaborating With Each Other – Gathering Feedback
Host the prototype on share.axure.com
@fred_beecher
29. 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
30. 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
@fred_beecher
32. Custom Widget Libraries
Custom 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
33. Template .RP Files
Template .RP files best for retaining consistency throughout an
entire organization. They store everything.
@fred_beecher
34. Importing
Do something great in an old prototype? Use the Import feature to
import as much or as little of that prototype as you want.
@fred_beecher
36. Balance Prototyping With Documentation
Prototyping everything will slow you down. Prototype an example
behavior; document every instance of a behavior.
What to prototype What to document
• One example of an error message • Every error message and the
condition that displays it
• One example of a complex • Business rules and navigation flows
interaction that describe every aspect of a
complex interaction
• Screens or pages with plausible • Page Templates
content
@fred_beecher
37.
38. 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!
@fred_beecher
39.
40.
41. 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
42. 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
43. 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
44. Iterative Visual Fidelity With Styles
Axure’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
45. 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
@fred_beecher
47. 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
49. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• Content as a separate
annotation table…
@fred_beecher
50. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• Content as a separate
annotation table…
• A spec that describes only
masters…
@fred_beecher
51. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• Content as a separate
annotation table…
• A spec that describes only
masters…
• A landscape spec with two
uneven columns for the
wireframe & annotations…
@fred_beecher
52. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• 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…
@fred_beecher
53. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• 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…
@fred_beecher
54. Generating a Functional Specification
Axure’s specification generator is so flexible that it can handle pretty
much any horrifying documentation template you can throw at it…
• 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…
@fred_beecher
55. 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
56. 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
@fred_beecher
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Communication breaks down between the stepsMarketplace success is unknownFailure is a big riskDiscourages innovationEncourages standard solutionsDoes not accommodate changeChange introduces rework
Tools like Axure make this possibleIntegrating Axure effectively means integrating iterative designUsing Axure in a Waterfall environment helps solve communication issues but doesn’t address the others
New requirements will be added, some will be deleted, others will changeExploring the problem space throughout the course of a project expands the scope of your knowledge and evolve the nature of the projectInteracting with different designs as you prototype them causes you to look at the problem in ways you hadn’t before, evolving your ideasHow you set up your Axure prototype affects your ability to accommodate change
Design is the process of thinking through a situation and different ways to improve that situationAxure is not a thinking tool!It will help you evolve your thinking, once you’ve done some, but it’s not very good at allowing you to think in many different directions at once
Do your non linear, chaotic, generative thinking outside of AxureOnce you begin prototyping, Axure will help you evolve your thinking by allowing you to interact with your design and presenting you with multiple ways to represent it
Within iterative design, design is a thought processDocumentation should occur only after you have iterated through a design and tested it enough times that its success has been demonstratedWorking with a tool like Axure involves show and tell, deciding what to show (prototype) and what to tell (document)So you should be thinking about how & what to document, & maybe documenting a little for your own reference as you go alongBut the focus should not be on documentation until the design has been proven successful
A tool like Axure is going to affect how you collaborate with your colleagesThe first step in configuring it for collaboration is working with those colleagues to define new ways of working with them
Axure is not a visual design tool...But it’s easy to implement an existing visual design within it
Axure is capable of a lot of interactivity and a lot of detail in the documentationEffective integration balances the two
Axure is not a requirements management tool...But you can use it to connect design elements with requirementsThey can use it too!
Sometimes hosts are tricky.Paste in URLs rather than file pathsYou must tack on the name of the project after the full URL
IM, Group Chat, whatever worksChecking in/out takes a lot of time You don’t want to do it more than you have to
It’s real easy to go down the prototyping rabbit holeAnd real easy to go down the documentation rabbit hole tooPlanning helps prevent these “detail detours.”
ONE PERSON Responsible for masters, annotation fields, styles (page & widget), page templates, etc.Divvy it up by use case, page template, or taskRefer back to shared projects discussionOveruse IM/Campfire/EtcSharing projects is no excuse to not communicate with other human beings
Each level of fidelity answers a certain set of questions...Sketch: Do we have the right features?Lo-fi: Do the features work right?Hi-Fi: Does the design communicate how it works?
Don’t bother documenting experimental iterationsDocument lightweight page by page in more final iterations
If you generate a spec, generate it as late in the process as possibleClean it up, save it as a different file nameGenerate changes to the original filename and copy & paste them into the cleaned up versionGenerate a documented version of the prototype to a different folder than the normal one