Integrating Axure Into Your Design Process

8,579 views
8,197 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
1 Comment
27 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
8,579
On SlideShare
0
From Embeds
0
Number of Embeds
141
Actions
Shares
0
Downloads
172
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide
  • 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
  • Error messagesBusiness rulesRequirements traceability
  • 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
  • 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

    ×