A few years ago, I published a step-by-step tutorial to create a sticky version of a navigation menu in Axure, appearing once the user scrolls down. This is a great functionality for e-commerce (allowing to always display links to the cart, account, wishlist) and also content-heavy websites (like newspapers, for permanent access to search, share, back to top link, etc.) I now use a slightly different method to prototype a sticky version of a menu in Axure.
Axure allows you to create and use variables in a pretty advanced way. I recently used the Math.random() function a lot, and thought it could be useful (at least for me) to write the good random formulas somewhere, for later reference. It is probably very easy for programmers, but this is not my case, and I don’t want to lose time trying to figure out which is the right way of writing the formulas each time. So here it is!
Why do we need a random on Axure?
I have bee working on a lot of projects requiring data visualization lately. The simplest way to illustrate wireframes with data is to copy and paste. But then you have the same data and graphs repeated all over the pages, and at some point you lose the relevancy. Another solution is to manually change each occurrence, at least a bit to give the right feeling and not lose attention on repetition. Even if repeaters are a great tool for this, you still need to input the data manually at some point. As having the exact data is not what matters at this stage, I now use random as often as possible. It creates differences which give the right rythm to the page, without even having to bother about entering the data. This way I have only one master, set to randomly change on page load, and only one place to make updates if needed.
Axure 8 has recently been released as a Beta version for first testings. Reading the release note, a few improvements caught my eye, like the rotate action, the possibility to draw your own shapes, apply interactions on groups and set boundaries when moving widgets around. I have been working a lot on dashboards and data visualization lately, and I decided to try the new Axure 8 in the objective of creating an animated dashboard composed of data visualization widgets that I could re-use in later wireframing projects.
It has just been announced on twitter: Axure 8 is now available as a Beta version (download it here: buff.ly/1L6mlFK). Pretty exciting to test the new features this version has to offer. I am just downloading it as I write, but thought I would highlight some improvements that caught my eye on the release note:
Data visualization is a more and more important part of UX projects nowadays, and an aspect of UX that I am really fond of. Among other elements of data visualization and dashboards, I have found myself recommending circular progress bars several times. Though, it is not an easy element to design within Axure, and referring to other softwares to design and edit my widgets was a bit inefficient. In this article, I propose an Axure source with a circular progress bar as a Master, that you can copy and paste directly in your own design. I won’t go as far as step-by-step tutorial, as it is ready to use, but simply explain a few of the possible options from this master.
In a previous article on the blog, we have seen how to prototype a fixed-positioned menu in Axure. I realized this was a bit of a specific case, as the horizontal menu takes the whole page width, which makes it kind of easier. In this new tutorial, I propose to follow a step-by-step process to prototype a sticky element in the page. As a reminder, this applies when a simple Pin to browser is not sufficient, especially when the element to fix is not exactly on top of the page.