Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integrating Axure Into Your Design Process

10,288 views

Published on

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.

Published in: Design, Technology
  • Fred, even though I wasn't present at your seminar, this presentation speaks for itself. Great work!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Integrating Axure Into Your Design Process

  1. 1. Integrating Axure Into YourDesign ProcessPresented by Fred BeecherLead User Experience Consultant@fred_beecherUX MARATHON 2011 | OCTOBER 28, 2011
  2. 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
  3. 3. Part 1: Iterative Design & Prototyping in Software Development
  4. 4. Communication Breakdown flickr: greghartmann
  5. 5. Success? flickr: greghartmann
  6. 6. FAILURE! flickr: greghartmann
  7. 7. innovation flickr: greghartmann
  8. 8. STANDARDSOLUTIONS flickr: greghartmann
  9. 9. Change hurts flickr: greghartmann
  10. 10. Rework. Ugh. flickr: greghartmann
  11. 11. Iterative design with prototyping… • Maintains the vision • Reduces risk • Enables innovation • Increases efficiency • Ensures quality • Decreases rework@fred_beecher
  12. 12. Change Happens. Plan for it.@fred_beecher
  13. 13. >
  14. 14. DESIGN ≠DOCUMENTATION flickr: sonrisaelectrica
  15. 15. Part 2: Configuring Axure for Integration
  16. 16. COLLABORATE
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Collaborating With Each Other – Gathering Feedback Host the prototype on share.axure.com@fred_beecher
  25. 25. Collaborating With Each Other – Gathering Feedback Host the prototype locally@fred_beecher
  26. 26. Gathering Feedback@fred_beecher
  27. 27. Part 3: Reuse & Consistency
  28. 28. 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
  29. 29. 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
  30. 30. Background Master Background MasterBackground Master Custom Widget Master Master
  31. 31. 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
  32. 32. Template .RP Files Template .RP files best for retaining consistency throughout an entire organization. They store everything.@fred_beecher
  33. 33. 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
  34. 34. Part 4: Doing the Work
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. Part 5: Documentation
  43. 43. 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
  44. 44. Document Details; Prototype Examples@fred_beecher
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 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… • 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
  50. 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… • 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
  51. 51. 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
  52. 52. 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
  53. 53. Thanks!!!!fbeecher@evantageconsulting.com | @fred_beecher ©2011 Evantage Consulting

×