Creating a Page
The Axure user interface, shown in Figure 1, is pretty straightforward: a large central area for designing the individual pages of a site; a sitemap, widgets, and masters on the left; and notes below. Other child windows are available—more about those later.
You can create a simple page by dragging and dropping the basic building blocks, or widgets, onto the page, much as in Visio. The standard, 22-item widget set is fairly comprehensive, including widgets for creating text, images, and forms, but other widget sets are available, and users can create their own. This approach gives Axure a shallow learning curve: it’s easy to get up to speed and start creating simple pages. You can manage pages via the site map, which lets you create page hierarchies. For large sites or applications, being able to hide lower levels of the hierarchy makes it easier to manage the workload and retain a bird’s-eye view of the structure. With Axure, you can import image assets, so a prototype can have as little or as much visual impact as you want.
So far, so Visio. Having created your pages, you can then start to add interactivity. It’s important to be clear about this: Axure does not provide the sort of rich interaction you can achieve through conventional Web coding. What is does well, however, is giving you about 80% of what you’d want with a fraction of the effort of Web coding. A user’s interacting with a widget can trigger various actions—for example, when a user clicks a widget, moves the insertion point away from a widget, or selects an option in a drop-down list. There are a lot of actions available, as well as links that open in the current or a new window. You can create dynamic panels that you can show, hide, move around, or change between states. Using dynamic panels is generally a fall-back position for illustrating more complex functionality. With some thought regarding how to use these panels, they can be an effective solution.
All of this interactivity is useful in only some cases. Sometimes, a quick clickthrough is all you need to move your project on, and Axure works fine for that. But being able to include some interactivity quickly and easily adds a huge amount of value for UX designers, enabling clients and users to provide feedback early on in the design process.
Reusability and Masters
Axure succeeds in making reuse very straightforward. While many standard, predefined elements such as buttons, form elements, and images are available as widgets, you can also create your own master elements. For instance, you can create a page header as a master and use it in your mockups of every page of a Web site or application. If a site’s header changes—perhaps because you need to add a link—all you need to do is change the master to change every instance of that header in the mockups for that site. Masters can include more complex items such as dynamic panels that have complex behavior. You can also modify existing widgets and create text styles using the Style Editor.
Being able to reuse design artifacts like this makes the process of developing prototypes much closer to software engineering. By putting in a little extra effort, you can create a prototype in a way that makes it easy to change later on, bringing huge time-saving benefits if changes are necessary later in the development process. For instance, say a client has decided they want to change the header font. If you’ve set things up properly with the Style Editor, that single change appears throughout your entire prototype. If not, be prepared to make a lot of time-consuming changes manually. It doesn’t take too many of these types of change requests before most Axure users realize that a little extra effort at the start of the work can save a lot of time later!
