We have been implementing a new wireframing and prototyping process at r2i, using a workflow based heavily around Axure. Recently, one of our designers, Anna, took on a project for 70 Pine, a real estate property website. Lucas, r2i’s in-house Axure expert, helped Anna learn the ins and outs of rapid prototyping. Here, the two of them discuss the challenges and successes they found in teaching an experienced designer how to integrate rapid prototyping into her workflow.
How Axure Demonstrates Functionality
Anna: In considering the wireframes for 70 Pine’s site, we knew we had to create three layouts for desktop, tablet, and mobile sizes. Due to these varying sizes, the navigation menu would behave differently based on the orientation and dimensions. I could have used Adobe Illustrator to demonstrate the differing layouts. However, the resulting wireframes would still lack the functionality and interactivity we wanted to convey to the client.
This is where Axure works best. It allows us to demonstrate how elements on a site will function and behave without coding any HTML or CSS. It also allows us to rapidly consider layout options without being preoccupied by visual design decisions. The site’s functionality and structure come to life with Axure, an important step before making look-and-feel decisions. In other words, this tool lets UX designers primarily focus on the interaction experience and allows clients to preview the prototypes in a basic, yet functional way.
However, Axure is not the easiest tool to learn. The program, while powerful, is not a simple drag-and-drop system, nor is it intuitive. Axure marries the world of wireframing with programming. And for a designer not using Axure daily, working in this universe can be daunting. Luckily at r2i, we have Lucas Roe, who is our in-house Axure expert. He was, and continues to be, a constant resource while I design wireframes.
Lucas: We believe strongly that user interactions support how content is presented. While we love making things pretty, they are only truly successful when that beauty backs up strong content. Even in the early phases of prototyping, Anna and I collaborating allowed her to think more broadly about the function of the site. I could then focus on implementing her vision to communicate our ideas to our client.
The Axure Learning Curve
Anna: What you may think is a simple interaction/animation, may not always be the easiest to build within Axure. To a novice, the method and order in which interactions should be built is unclear. There is a steep learning curve and vast vocabulary to learn within Axure. I needed Lucas’s help to navigate and understand what and how I could make interactions come to life.
Lucas: To someone who is not familiar with Axure’s build methodology, creating objects can be complicated. One of Axure’s great successes and a requirement for interactivity, is in the combination of elements. Generally, the fewer elements used the better. For someone with a strictly graphic design background, each element is built out of a type layer, an image layer, and perhaps even a layer for effects.
When adding interactivity, having an element broken apart like this makes it impossible to push elements, hide elements, or do many things efficiently. Most of my knowledge for where to combine elements just comes from experience. As with many build processes, knowing the intent from the beginning of the process is important. In order to keep from getting bogged down in too much prototyping, we spend some time figuring out what is necessary to show in full interactivity and what can be implied or suggested.
Anna: One issue I continually had problems with was creating a drop-down menu (or getting any of the menus working properly, for that matter). In the case of the navigation drop-downs, I needed to create a “widget” for individual menu elements, which are then placed into a “master.” Axure phrases like “dynamic panel” and “convert to master” left me lost. Also, since I wanted the interactions to animate like a real collapsible menu, I needed plenty of guidance creating the conditional behaviors.
Lucas: It is easy to focus on the animating and clickability of Axure, but by far its greatest strength is in the use of masters. A master is a set of combined widgets that can be either standardized or used as a template. When used as a standard, as in the case of the header, the master can be placed on every page but only needs to be edited in a single location. As soon as edits are made in the master, it changes on every page of the site.
Dynamic panels are confusing because of the mindboggling amount of things you can do with them. I’ll try to sum them up briefly: Any time that you want content to behave as a unit, whether it is animating, swapping, hiding, or moving, that content needs to be grouped as a dynamic panel. It is usually better to build the content in its individual pieces and then convert them to dynamic panel, because the panel will automatically accommodate the size of the content.
While we won’t get into the nitty gritty of designing dropdowns, the Axure Forums and tutorials section are a great way to get started on most of the basics of interactivity . While we do have some things that we do in a specific way at r2i for our prototyping, much of that knowledge has just come from working on multiple projects. The tutorials teach you the basics, and then you can accommodate your own workflow. It is important to remember that you should not be concerned with making your prototypes bug free, pixel perfect, or intensely scalable. There may be some best practices, but your first concern should be working quickly and testing your ideas, not building things the “right” way.
Rapid Prototyping for Mobile
Anna: Recently, Axure made adjustments to allow for easier mobile protoyping. However, at the time I was wireframing, that capability wasn’t very reliable. Instead, we opted to create another wireframe using mobile dimensions instead of allowing Axure to resize the wireframe.
Lucas: While the responsive features are incredibly useful, we find it can be pretty difficult for us to communicate how you can see the mobile versions. Because the prototypes are not fully designed out, it does not make intuitive sense that sizing down the browser window will show the mobile version.
So far, we’re still creating separate pages for mobile wireframes, but we are using Axure’s responsive capabilities to speed along the process. The process is relatively simple:
- Create your mobile breakpoint size: I usually set the mobile breakpoint size to be anything smaller than the current wireframe. For example, if the wireframe is set at 1000px wide, I set the breakpoint there.
- Duplicate the page that you are recreating at the new breakpoint size.
- Begin resizing elements: At this point, we begin resizing and repositioning the elements. By checking the “Affect All Views” button, we can edit the entire page instead of just our current responsive view. While this loses the convenience of editing in one place and having it appear everywhere, we have found it to be much more effective at communicating with our clients.
Axure, like many powerful, but complicated applications, is a program that builds familiarity through repetition. It is technical and involves a steep learning curve. However, it is a great tool to show interactivity in a wireframe world. It can make your wireframe function like a real website. And the best part is you don’t have to know how to code.
*This article was co-authored by r2i Junior Designer / Wireframer, Lucas Roe.