Axure is one of the best prototyping tools available and as such it is one of the most popular tools used in conjunction with Loop11. Many of Loop11’s users, companies of all sizes, create their prototypes in Axure and then run multiple tests to validate which of their designs perform the best. You can find a case study on prototyping with Axure and Loop11 here.
To make the workflow as seamless as possible we wanted to create this ‘how to’ article to show the exact steps that need to be followed in order to get the best results from using the two tools together.
Getting the correct URLs from Axure
By default, when an Axure project is launched, it normally features its control sidebar (old and new version shown below). Sometimes this sidebar is minimized, but it’s generally always present.
When the sidebar is present, from a technical perspective, it means the Axure design is being rendered via an iFrame. This in itself is fine, however, it presents problems when tracking pages and user interaction within Loop11.
Also, the URL is relevant when setting your start URLs for a Loop11 task.
So, what do you do? Easy. You close the sidebar. This is different from ‘minimizing’ the sidebar. The below image highlights the buttons/links that need to be clicked to close the sidebar.
Once the sidebar is closed, you’ll notice that the URL for the prototype changes slightly. For example, the URL may have initially been http://rugp4k.axshare.com/#p=home but when you close the sidebar it changes to http://rugp4k.axshare.com/home.html. The main different to note is that #p= no longer exists in the second URL, and, .html is now visible. This is what you need to focus on.
If you are not sure whether you’ve close the sidebar properly, always refer back to the URL. If the sidebar is minimized, instead of closed, you will notice &c=1 in the URL.
Below are three URLs which link to the same prototype, only the first one is correct for a Loop11 project.
Once you have closed the sidebar and retrieved the correct URL, you can be comfortable in the knowledge that your test participants will not need to do this step, you’re doing it for them!
Then click on ‘New Plugin’, or ‘edit’ if you’ve already added the code previously.
A pop-up window will appear and the first step is to give your plugin a name, like Loop11. You can set the priority to whatever you like, in the absence of any other argument you can keep it set to 1.
Next, set the location to ‘End of the Body’. This is important and refers to where the Loop11 code will be situated in the prototype’s code.
That’s it. Nothing more to do.
We always recommend running a test yourself. You can do this by using the Loop11 test link, such as http://rugp4k.axshare.com/home.html?l11_uid=90217, and appending &l11_mode=preview to the end of the URL. So it would become http://rugp4k.axshare.com/home.html?l11_uid=90217&l11_mode=preview.
A note about session videos – Axure has security measures in place which essentially means that every 24hrs they make a change to the source/location of the images within a prototype. This means that any session videos recording a user’s interaction with your prototype will not be able to load images 24hrs after the session was recorded. The video will still be there, and so will their interactions, but the images won’t display.
As always, if you have any questions or run in to any issues you can get help from our support team when logged in to Loop11.