Chapter 10: Axure RP Pro

(Open in Flickr)

Figure 10.1 (Open in Flickr)

Acme Video site created using Axure RP 5.5.

If you created a mash-up between Visio, Word, and Flash lite, you’d get Axure RP—a unified environment for creating wireframes, prototypes, and specifications.

While I hesitate to say that Axure is taking the user experience profession by storm, it’s definitely making its mark. With the release of version 5.5, creating highly interactive prototypes is almost effortless.

In this chapter, we’ll create an interactive prototype for a video site similar to YouTube or Vimeo. You’ll see how easy it is to create advanced interactions, like creating interactive overlays with dynamic panels. At the end of this chapter, you’ll find additional resources, including a third-party pattern library with built-in components for navigation, forms, and even a video player.

Strengths

Axure RP Pro has a number of strengths that make it a great prototyping tool:

• Wireframes, prototypes, and specifications. Axure lets you use one tool for all your design and documentation needs. The diagramming tools are similar to Visio or OmniGraffle. The real power in Axure, however, is its ability to annotate your designs and automatically generate a specification document and interactive prototype.
• Low learning curve. Axure uses an object-based drag-and-drop model to create drawings, similar to Visio and OmniGraffle. Basic interactivity is fairly easy to grasp.
• Familiarity. If you’ve ever used Visio or OmniGraffle, you’ll find it relatively easy moving around in Axure. The application has a very similar feel to Visio, but with a better page navigation model, similar to OmniGraffle.
• Masters and widgets. Axure ships with a number of widgets for creating common wireframe and flow documents. If those aren’t enough for you, there are a number of additional libraries available from their site, or you can create your own.
• Create interactions without programming. Axure uses a wizard-like approach to creating interactions. You don’t need to know JavaScript to create AJAX-style interactions like overlays, show/hide, or photo carousels.
• Simple prototype publishing. When your design is ready, generating a prototype from Axure is as easy as selecting Generate Prototype from the application menu—Axure does the rest.
• Shared project collaboration. Axure now makes it easier to work collaboratively on a project. Shared projects give multiple people simultaneous access to the same RP project file. There’s even a built-in check-in/check-out system, which includes basic version control.

Weaknesses

While the list is short, Axure RP Pro does have a few shortcomings:

• Windows only. Axure doesn’t run natively on a Mac. If you’re on a Mac, it’s probably not an option for creating prototypes. You could run virtualization software to run Windows so you could use Axure, but what’s the point? There are a number of other great alternatives like Fireworks, Flash, or HTML.[1]
• Lack of drawing tools. Axure lacks basic drawing tools like those found in Illustrator, OmniGraffle, or Visio. Axure does provide shapes you can drag to your page, but if you want to create nice rounded buttons with a gradient effect it’s a rather laborious process. You’re better off creating them in Photoshop or Fireworks and importing them into Axure.
• Non-reusable source code. Axure does generate real HTML pages, as opposed to screen captures with image maps. But nobody in his right mind would use it for production.

Building a Video Web Site Prototype with Axure RP

Axure ships with a number of built-in widgets for creating your prototype designs. You can download the prototype file used for this chapter at http://rosenfeldmedia.com/books/downloads/prototyping/chapter10.zip.

Step 1: Create a New File

1. Start by creating a new file by selecting File > New from the application menu. By default, Axure will create a new document with a few pages to get you started. You’ll see these in the Sitemap panel shown in Figure 10.2.

Figure 10.2 (Open in Flickr)

Sitemap panel.

Step 2: Create the Header

1. If it’s not already selected, choose the Wireframe widget set from the Widgets panel shown in Figure 10.3.

Figure 10.3 (Open in Flickr)

Wireframe Widget panel.

1. Drag the Horizontal Menu element from the Widgets panel to the page. Double-click in the center of each element to change the text label.
2. Drag a Text Field and Button to the page. Double-click in the center of each element to change the text label.
3. The result should look similar to Figure 10.4.

Figure 10.4 (Open in Flickr)

Example header with navigation and logo.

Step 3: Design the Home Page Content

1. From the Widgets panel, drag Rectangles and Text Panels to the page until you have something that resembles Figure 10.5.

Figure 10.5 (Open in Flickr)

Example wireframe home page design.

Step 4: Design the Video Player Page Content

1. Select the header elements; then from the application menu, select Edit > Copy.
2. Click the Video Player page; then from the application menu, select Edit > Paste.
3. Drag a Placeholder from the Widgets panel onto the page. You should have something that resembles Figure 10.6.

Figure 10.6 (Open in Flickr)

Example wireframe Video Player content page.

Step 5: Link the Pages

1. Click the Home Page and select the large video placeholder. You should see a green line around the selected item.
2. Make sure that the Annotations & Interactions panel is visible. If it’s not, then from the application menu, select View > Annotations & Interactions.
3. From the Annotations & Interactions panel, double-click the OnClick option, as shown in Figure 10.7.

Figure 10.7 (Open in Flickr)

Annotations & Interactions panel.

1. The Interactions Case Properties dialog window shown in Figure 10.8 should appear. Enter a meaningful name in the Step 1: Description box (for example, Link to Video Page). Under Step 2: Selection Actions, select the Open Link in Current Window option. Under Step 3: Edit the Actions descriptions, click the Link action.

Figure 10.8 (Open in Flickr)

Interaction Case Properties dialog window.

1. The Link Properties dialog window will appear, prompting you to select a page, as shown in Figure 10.9. Select Video Player from the dialog window and then select OK.

Figure 10.9 (Open in Flickr)

Link Properties dialog window.

Step 6: Setting up Overlay Effects with Dynamic Panels

1. Select the Video Player page tab.
2. Drag two Dynamic Panels from the Widgets panel to the page and resize them to fit the video player controls (see Figure 10.10).
3. Double-click on Dynamic Panel at the right. The Dynamic Panel State Manager dialog window will appear, as shown in Figure 10.11.

Figure 10.10 (Open in Flickr)

Example of Dynamic Panels on a screen.

Figure 10.11 (Open in Flickr)

Dynamic Panel State Manager.

1. Enter a meaningful name in the Dynamic Panel Label field (for example, Social Media Controls).
2. Select the first panel state and select the Rename button. Type On_hover in the Name field and select OK.
3. Type a name in the Add new state field, enter On_click, and select OK.
4. From the Dynamic Panel State Manager, select the first state (On_hover) and double-click. A new tab labeled On_hover will appear. A Dynamic Panel Manager panel will also appear on-screen with the On_hover item in bold, as shown in Figure 10.12.

Figure 10.12 (Open in Flickr)

On-hover Dynamic Panel State Manager.

1. Drag a series of rectangle widgets from the Wireframe panel to your page and give them labels until you have something that looks like Figure 10.13.

Figure 10.13 (Open in Flickr)

Social Media Controls Dynamic Panel.

1. From the Dynamic Panel Manager panel, select the On_click state and double-click. A new tab labeled On_click (Video Player) will appear.
2. Drag a series of rectangle widgets from the Wireframe panel to your page and give them labels until you have something that looks like Figure 10.14.

Figure 10.14 (Open in Flickr)

On_click state of the Social Media Controls Dynamic Panel.

1. From the Dynamic Panel Manager panel, select the On_click state and double-click. A new tab labeled On_click will appear.
2. Select the Share rectangle.
3. In the Annotations & Interactions panel, double-click the On_click option. The Interaction Case Properties dialog window will appear. In Step 1: Description field, enter a meaningful name (for example, Share). In Step 2: Select Actions, select Set Panel state(s) to State(s) from the list of check boxes. In Step 3: Edit Actions description, select the Panel state to State link. A Set Panel state to State dialog window will appear (see Figure 10.15).

Figure 10.15 (Open in Flickr)

Set Panel State to State dialog window.

1. In Step 1: Select Panels, select the Set Social Media state to State check box. In Step 2: Edit Actions description, select the On hover link. A Select Panel State dialog window will appear, as shown in Figure 10.16.

Figure 10.16 (Open in Flickr)

Select Panel State dialog window.

1. Select the On_click option and then select OK. The dialog window will close revealing the Set Panel state to State window, which should look like Figure 10.17.

Figure 10.17 (Open in Flickr)

Updated Set Panel state to State dialog window.

1. From the newly updated Set Panel state to State dialog window, select the OK button. This will close the Set Panel state to State dialog window and reveal an updated Interaction Case Properties dialog window (see Figure 10.18).

Figure 10.18 (Open in Flickr)

Interaction Case Properties dialog window.

1. From the newly updated Interaction Case Properties dialog window, select the OK button.
2. At this point, you can generate your prototype to test the OnClick interaction. From the application menu bar, select the Generate item. Under Generate, select Prototype (F5), as displayed in Figure 10.19.

Figure 10.19 (Open in Flickr)

Generate prototype from the application menu.

You may notice the hover effects for the dynamic panels are displayed on the screen as soon as you load the Video Player screen. We’ll fix that in just a second. But first, click the Share item at the right to make sure your OnClick interaction works correctly.

Step 7: Hiding and Showing Dynamic Panels

By default, Axure shows the first state of a dynamic panel once the page loads. To work around this, you can either create a blank first state or add an interaction to hide the panels on page load.

1. Select the Video Player page tab.
2. In the Page Notes & Interactions panel, select the OnPageLoad option and double-click. The Interaction Case Properties dialog window will appear.
3. In Step 1, enter a meaningful name. In Step 2, Select Hide Panel(s). In Step 3, select the Panel link.
4. In the Select Panels dialog window, select both the Video Controls and Social Media controls options. Then select OK.
5. Select OK from the Interaction Case Properties dialog window.
6. Generate your prototype from the application menu and check to make sure the controls are now hidden.

Step 8: Showing and Hiding Controls on Mouseover

Now that we have the beginning and end states in place, we’re going to create the middle states for showing controls when a mouse hovers over the large video player.

1. Select the Video Player page tab.
2. Select the large Video placeholder element on the page.
3. In the Annotations & Interactions panel, select the OnMouseEnter option and double-click. The Interaction Case Properties dialog window will appear.
4. In Step 1, enter a meaningful name (for example, Show Video Controls). In Step 2, Select Show Panel(s). In Step 3, select the Panel link.
5. In the Select Panels dialog window, select both the Video Controls and Social Media controls options. Then select OK.
6. Select OK from the Interaction Case Properties dialog window.

You’ve just set up the interaction to show controls when the mouse hovers over the Video player placeholder. Now we have to hide them when the mouse leaves the video player placeholder.

1. Select the large Video placeholder element on the page.
2. In the Annotations & Interactions panel, select the OnMouseOut option and double-click. The Interaction Case Properties dialog window will appear.
3. In Step 1, enter a meaningful name (for example, Hide Video Controls). In Step 2, Select Hide Panel(s). In Step 3, select the Panel link.
4. In the Select Panels dialog window, select both the Video Controls and Social Media controls options. Then select OK.
5. Select OK from the Interaction Case Properties dialog window.

At this point, your Annotations & Interactions panel should look like Figure 10.20.

Figure 10.20 (Open in Flickr)

Example of Dynamic Panels on a screen.

1. Generate your prototype from the application menu and try it out.

How AnderZorg Learned the Value of Interactive Prototyping

by Henk Wijnholds and Stefan Wobben of Concept7

Concept7 used an interactive prototype as a key communication tool during a redesign process for the AnderZorg (DifferentHealthcare) Web site. The result was a significant improvement in customer satisfaction and online sales.

The unique thing about the Dutch health insurance is that the government obliges insurance companies to offer an obligatory base insurance that covers most common health issues. Beyond that, people can choose additional insurance that covers less common health issues.

The additional insurance options are extremely difficult to compare. They change annually and differ from company to company. In fact, research by Independer.nl (December 9th 2008) says 40 percent of all Dutch health insurance clients don’t even know what health care they have, or what exactly is covered.

Our goal was to empower customers with enough information to create a well-informed decision on which insurance to take. We also wanted to make sure to reduce error rates in the subscription flow, making it as easy to use as possible.

To uncover all the pain-points with the current Web site, we performed a combination expert review and eye-tracking study. We found that the old version of the Web site required customers to select an insurance option before they were shown a summary of what it covered.

In one of the studies, we found participants became increasingly frustrated with the lack of information they needed to make their decision. They had to go back and forth between the different insurance options to compare them. The participants had to recall all the information instead of simply recognizing the differences.

We started by creating a lot of idea sketches and hand-drawn screen mock-ups. We thought a matrix would be the best solution to help customers decide between the different insurance options.

We used the mock-ups as input for sessions with AnderZorg to prepare their organization and explore possibilities.

The details define a good or bad customer experience. In this particular case, good content was of extreme importance. By using real content in the interactive prototype, which we’ve made with Axure RP Pro, we could see how participants reacted to labels and content when visiting the site. This is something we couldn’t have tested as effectively without an interactive prototype.

By creating a prototype, we were able to show a matrix version (see Figure 10.21) of the coverage summaries in advance, allowing customers to review information about the different insurance options. During testing, we heard a number of participants make comments like, “Now I can base my decision on something more informed; this is much better.”

Figure 10.21 (Open in Flickr)

Prototype of insurance matrix.

A side benefit of the interactive prototype was the benefit to content creators and owners. It helped subject matter experts and content writers see more clearly where their input was required. They learned that interactive prototypes are much more efficient than written documents.

Through the use of a prototype, we were able to increase customer satisfaction from 72 percent to 82 percent. According to independent market research, this is among the highest in the Netherlands, even outside their branch.

The “redesigned” AnderZorg Web site also resulted in an increase of their conversion rate by 48.15 percent, and it doubled the number of subscriptions for health care insurance.

Additional Resources

Axure has a number of video tutorials and add-on libraries available from their Web site. Additionally, some of these third-party resources will make creating advanced AJAX-style interactions much easier.

Axure Video Tutorials

A number of video tutorials are available directly from the Axure Web site at http://www.axure.com/expert.aspx.

Axure Sample Files

Download sample RP projects and strengthen your prototyping chops from the Axure Web site at http://www.axure.com/sampleProjects.aspx.

Axure Widget Libraries

Common interface icons and design components based on the YUI! Design Stencil Kit are available directly from the Axure Web site at http://www.axure.com/widgetLibraries.aspx.

Axure RP Master Library

Thanks to Ian Fenn and Luke Perman, you can get your hands on a component library that makes creating AJAX-style interactions in Axure even easier. The Axure RP Master Library is hosted at Google Code http://code.google.com/p/axlib/. You can also find them on Twitter @axlib.

Loren Baxter’s Axure Design Library

This library includes a number of design patterns for things like AJAX field validation, self-healing, and carousels. You can grab Loren’s Axure Design Pattern Library online at http://www.acleandesign.com/2008/09/axure-design-pattern-library-v2/.

Summary

Axure RP Pro has definitely made its mark on the prototyping scene. Here are a few reasons you might want to consider using Axure RP Pro next time you’re prototyping:

• If you know Visio, it’s like that, but with more prototyping power.
• You can have one tool for wireframes, specifications, and prototyping.
• You’ll have masters and built-in widgets for common GUI elements.
• Generating a clickable HTML prototype is a breeze.

  [1] Axure for the Mac, aka MAxure, is supposedly in the works according to http://www.axureformac.com/. At the time of the publication of this book, there was no known release date or license information.