Integrating Axure Into Your Design Process
-
Upload
fred-beecher -
Category
Design
-
view
106 -
download
0
description
Transcript of Integrating Axure Into Your Design Process
![Page 1: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/1.jpg)
Integrating Axure Into Your Design ProcessPresented by Fred BeecherLead User Experience Consultant
@fred_beecher
UX MARATHON 2011 | OCTOBER 28, 2011
![Page 2: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/2.jpg)
@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
![Page 3: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/3.jpg)
Part 1: Iterative Design & Prototyping in Software Development
![Page 4: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/4.jpg)
Communication Breakdown
flickr: greghartmann
![Page 5: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/5.jpg)
Success?
flickr: greghartmann
![Page 6: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/6.jpg)
FAILURE!
flickr: greghartmann
![Page 7: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/7.jpg)
innovation
flickr: greghartmann
![Page 8: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/8.jpg)
STANDARDSOLUTIONS
flickr: greghartmann
![Page 9: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/9.jpg)
Change hurts
flickr: greghartmann
![Page 10: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/10.jpg)
Rework. Ugh.
flickr: greghartmann
![Page 11: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/11.jpg)
@fred_beecher
Iterative design with prototyping…
• Maintains the vision
• Enables innovation
• Ensures quality
• Reduces risk
• Increases efficiency
• Decreases rework
![Page 12: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/12.jpg)
@fred_beecher
Change Happens. Plan for it.
![Page 13: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/13.jpg)
>
![Page 14: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/14.jpg)
![Page 15: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/15.jpg)
DESIGN ≠ DOCUMENTATION
flickr: sonrisaelectrica
![Page 16: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/16.jpg)
Part 2: Configuring Axure for Integration
![Page 17: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/17.jpg)
COLLABORATE!
![Page 18: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/18.jpg)
@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
![Page 19: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/19.jpg)
@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
![Page 20: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/20.jpg)
@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
![Page 21: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/21.jpg)
@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
![Page 22: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/22.jpg)
@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
![Page 23: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/23.jpg)
@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
![Page 24: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/24.jpg)
@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
![Page 25: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/25.jpg)
@fred_beecher
Collaborating With Each Other – Gathering Feedback
Host the prototype on share.axure.com
![Page 26: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/26.jpg)
@fred_beecher
Collaborating With Each Other – Gathering Feedback
Host the prototype locally
![Page 27: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/27.jpg)
@fred_beecher
Gathering Feedback
![Page 28: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/28.jpg)
Part 3: Reuse & Consistency
![Page 29: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/29.jpg)
@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
![Page 30: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/30.jpg)
@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
![Page 31: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/31.jpg)
Background MasterBa
ckgr
ound
Mas
ter Background M
aster
Master
Custom Widget Master
![Page 32: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/32.jpg)
@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
![Page 33: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/33.jpg)
@fred_beecher
Template .RP FilesTemplate .RP files best for retaining consistency throughout an entire organization. They store everything.
![Page 34: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/34.jpg)
@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.
![Page 35: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/35.jpg)
Part 4: Doing the Work
![Page 36: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/36.jpg)
@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
![Page 37: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/37.jpg)
![Page 38: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/38.jpg)
@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!
![Page 39: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/39.jpg)
There is no such thing as high or low fidelity… only
appropriate fidelity.
- Bill Buxton
![Page 40: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/40.jpg)
![Page 41: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/41.jpg)
@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
![Page 42: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/42.jpg)
@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
![Page 43: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/43.jpg)
@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
![Page 44: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/44.jpg)
@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
![Page 45: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/45.jpg)
@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
![Page 46: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/46.jpg)
Part 5: Documentation
![Page 47: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/47.jpg)
@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
![Page 48: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/48.jpg)
@fred_beecher
Document Details; Prototype Examples
![Page 49: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/49.jpg)
@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…
![Page 50: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/50.jpg)
@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…
![Page 51: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/51.jpg)
@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…
![Page 52: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/52.jpg)
@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…
![Page 53: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/53.jpg)
@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…
![Page 54: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/54.jpg)
@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…
![Page 55: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/55.jpg)
@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.
![Page 56: Integrating Axure Into Your Design Process](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7650d4a79596c548b4579/html5/thumbnails/56.jpg)
@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