Annotating wireframes for delivery: the agile way

I usually try and keep these posts technology agnostic, but when it comes to wireframing it has to be said that I’m an Axure fanboy. I know there are lots of other great tools out there but this is the one that I’ve settled on.

Axure has a built-in specification generator, which reminds me of projects where the quality of my deliverables were measured by the length of the documents. However, I’ve been playing with some of these settings in order to turn the built-in features into something a bit more useful. Here’s what I discovered:

The Annotations Widget

This is the Annotations panel within the Widget Properties Pane (you can open it using ctrl+1). By default it has lots of options, covering a range of needs from the features status, risk, owner and benefit etc. While this is all very useful it can feel a bit overwhelming if you don’t know all that information or feel like you’re duplicating effort by repeating info that is already being captured against your user stories. To help me capture what I need, without writing war and peace, I’ve opted for the following fields:

axure widget properties
An example of the annotation properties with Axure 6.5

<dl>

Description
I use this field to describe what the feature is, nothing fancy. “This is a drop down picker that allows a user to select their timezone”.
OnClick
This field describes what the user can expect to happen when they interact/click on the feature. “Onclick the user will be presented with a list of timezones to select from. By default ‘GMT London’ should be selected”.
Design Logic
I use this field to describe when the feature will be shown and any edge cases where the design or layout may change. “The first time the user uses the application they should set their timezone. On returning to the application this should already be set and display the option the user has stored previously in their preferences”.

dynamic notesOn generating the prototype it builds into HTML and adds a small iconnote over the top right hand corner of the feature. If you hover over them your cursor will change to have a ‘?’.

When you click on the note it will open up and can be moved around the page, in order to prevent it to obscure the feature it is describing.

You can play around with combinations of fields that you use and even have different ones saved for different clients. Any fields that are left blank when annotating your prototype will not be shown once the HTML is generated.

Sharing Axure Files

If you’ve not seen it yet I strongly recommend Axure Share. It allows you to store and share your Axure prototypes and even has functionality to allow users to discuss elements on the prototype.

Read More…

If you want to find out more about the Axure annotations feature why not check out the following:

One thought on “Annotating wireframes for delivery: the agile way”

Leave a Reply

Your email address will not be published. Required fields are marked *