integrating axure into your design process

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?


FAILURE!


innovation


STANDARDSOLUTIONS


Change hurts


Rework. Ugh.


@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


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


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


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


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

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

http://axure.com/libraries

@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

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



• A spec that describes only masters…


@fred_beecher




• A landscape spec with two uneven columns for the wireframe & annotations…


@fred_beecher





• New functionality added to an existing prototype…


@fred_beecher






• Annotations from masters displayed on every page…


@fred_beecher






• Annotations from masters displayed on every page…

• Sketchy pages documented without sketch effects…


@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

integrating axure into your design process

Design

design elements

iterative design prototyping

design documentation

design components

shared prototype

shared projects

design usability testing

innovation flickr