Interactive Axure Prototype

February 1st, 2009

Jim just sent me a very nice and developed sample of an interactive HTML prototype done in Axure. The prototype is clickable and provides a richer understanding of what happens from screen to screen. As a standalone document however, in order for someone to understand this sample they are left alone with exploration as the means to do so. So for user testing and walk through situations this works out nicely, but what about if we wanted to send this to someone else for review and have the sample communicate use on its own without the designer being present? I am now wondering if it would be useful to overlay some sort of scenarios to guide first time viewers of the sample about the most important flows. Just a thought. Jim also sent me a link to a comparison between the prototype and the final product.

He writes:

We used Axure RP for creating these interactive wireframes which we tested volunteers on, to see whether they understood the ‘flow’ of the intended site. Using Axure made it clear for the client to understand what they were getting delivered, and also to see whether we had interpreted the ‘mental model’ correctly from earlier card sorting excercises:

Credits: Jim Callender

19 Responses to “Interactive Axure Prototype”

  1. vincent Says:

    I can understand your point, but in the two years we've been using Axure, I find it an advantage to have testers/clients to be 'left alone with exploration' as a means to 'understand'.

    I agree that design, on top of a prototype, can help people understand a website or application much better than on a prototype alone. But offering the prototype without any explanation often offers great insight. People going 'uhm, I'm not sure' or saying 'I can't find it' helps us a great deal to finetune the prototype.

    But I admit that I've found myself saying: "we'll fix that/make that clearer with the design".

  2. Jakub Linowski Says:

    Hey Vincent. I agree that for testing a more unobtrusive and exploratory approach works well. I guess I just started thinking out loud that as an alternative to the page list on the left hand side, it could also be interesting to have "most common flows" listed as an alternative view. This way some viewers could be guided through the wireframe automatically without the designer being present. Perhaps in certain cases that could be one way of increasing the communicability of a document such as this.

  3. juarezpaf Says:

    It's very nice. I on't play with Axure yet, but it seems pretty good. I think the navigation tab is nice for guide users in the process.

  4. jasondavey Says:

    Providing diagrams, designs, wireframes and prototypes to a client without explanation and opportunity for understanding the solutions intentions is a big NO-NO. This doesn't necessarily mean that an indepth model should be accompanied by a novel…but should be incorporated at a well structured presentation.
    **btw – Axure rocks! The best tool on the market (for non-collaboration) that assists us in our crafting all required IA/UX/Technical Instruction elements.

  5. Jim Callender Says:

    Thanks for the comments, just to clarify – the prototypes were shown to users in a user testing scenario with a user testing script. "Find out what news categories" there are for example. The usefulness of the prototypes was then assessed on how easily and quickly the subjects completed the tasks. Iterations were either amended between the testing interviews so other mistakes could be shown (RITE methodology). There were also pre and post interview questions "on what users thought the site was about", etc..

  6. Christophe Renaut Says:

    Axure seems to be a nice 'all in one prototype' tool. But did you guys have ever tried iRise“target=”_blank”>http:// I had the chance to give it a try. VERY powerfull…

  7. josh Says:

    This looks like a great tool for quickly prototyping but only wish the output would actually bring the designers closer to a functioning xhtml website once the client had signed off. Would be great if this utilized a compliant xhtml framework like“target=”_blank”>blueprint css or Seems like this would bring more efficiency to the production process.
    So if the folks at Axure could whip up that feature by next week it would be much appreciated. : )

  8. Tony Says:

    We used Axure at Wyndham. While it was great at first we found ourselves doing the work all over again just so we had usable code. So, we found it faster to just build the prototype in say Dreamweaver, allow for testing and then the conversion to working deploy able solution wasn't that far off.

  9. anon Says:

    I've been using Axure lately an I love it. I agree with some of the other comments in thinking that it would be great if Axure produced compliant markup, but think it's current form is fine and highly flexible. In my case, I have been using Axure to create quick wireframes/prototypes to share with stakeholders and quickly iterate upon. Once things are looking good, we'll move away from Axure, allowing graphic designers and programmers to develop with the tools they are most comfortable with. Both teams will work off of the prototype, and as things progress, we will merge the logic with the design and the site will come alive. For any major changes, we will revert back to Axure, allowing us to iterate at a fast pace and save time and money.

  10. TG. Says:

    How does it different from Visio

  11. Jakub Linowski Says:

    Here is a nice overview of Axure (even though its a bit dated): is more of a traditional diagramming tool, whereas Axure centres around the creation of interactive / clickable prototypes.

  12. Amit Says:

    Thanx for the prototype. I been thinking of using Axure since last few months. I have used GUI Design studio which is really simple for turning client briefs into layouts. This time i actually tried Axure, found it very easy to use with high level of layout interactivity. Havent completely figured out the tool yet, but as the development is happening in-house, I will figure rest of the stuff as we proceed. Thank you again.

  13. Lee Thomas Says:

    In my modest experience with Axure, I've used the program's built-in documentation features to capture information and specifications about what's going on in the wireframes, and then generated a printable document to present to clients along with the clickable prototype. Have others done the same? I've found having both to be useful and necessary.

  14. Iain Lowe Says:

    In response to the original note about sending an Axure prototype for review, there are numerous ways to provide commentary, explanation, and annotation in the prototype (and in the printable spec that Axure also outputs).

    One thing not clear from the prototype screenshot (and which you might miss in the prototype sample) is the panel at the bottom, which contains "page notes". These notes can contain any content the author chooses to add by way of explanation about rationale, how to use the prototype, etc.

  15. Régis Says:

    We love axure and develop an administrative tool to let users comments each pages and follow discussions with rss feed and others functionnality

  16. Jim Callender Says:

    My colleague Harry has just blogged about a widget that gives your prototypes a rough hand-drawn look.

  17. Sam Hill Says:

    im in the middle of wire framing and my Axure free trial is about to run out. I need to export to another free program preferably in Office 2011 and be able to edit it. Is that possible, or have they got me? I need a cross platform program as i work on a mac and client is on a PC. Any ideas welcome (Im not s skinflint, it's just my work won't pay for Mac software)