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

@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

ter Background M

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

• 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

fbeecher@evantageconsulting.com | @fred_beecher

Thanks!!!!

integrating axure into your design process

design elements

iterative design prototyping

design documentation

design components

shared prototype

shared projects

design usability testing

innovation flickr

Design

integrating people, process and services

rapid prototyping & axure rp

managing visual design in axure

a blackboard architecture for integrating process planning...

whats new in axure 7.0?

intro to axure - amazon web...

axure for mobile prototyping

create a prototype f y r pr ects? - wordpress.com ·...

prototyping invision vs axure

level-up your axure skills

intro to axure

prototyping axure

mastering the basics of axure

axure 7 breakfast briefing slides

axure planning and logistics

axure core training

axure lightning talk

duxday presentation – prototyping in axure

axure prototyping blueprints - sample chapter

rapid prototyping with axure rp part 3 – using axure for...