Setting Up Basic Interactions in Axure

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the actual site with no coding required. The reason it’s so powerful is because you are able to demonstrate the desired functionality of the requested project rather than just describing it with text, leaving much less room for interpretation error. In this article I am going to go over how to set up some of the more basic interactions within the tool so that you can begin creating prototypes of your own.

Determine the sort of user action interaction

When you click the widget you’d like to have the user interact with, you’ll see options appear in the top right corner with different actions you’d like the user to take in order for them to receive the interactions. OnClick is the most common user action used. The link labeled ‘more events’ gives you more options for actions you’d require the user to take.

Once you select the user action a window called Case Editor will open for you to build the interactions that occur after that action. You are able to stack multiple interactions following a user action. For this basic walk through, I’ll be showing just one at a time.

Setting up a widget to link to a new page

To create a link to a different page from your prototype within the same window, you’ll select ‘Current Window’ under the Links interactions in the Case Editor popup. The Editor will give you a list of pages within your prototype to select.

If you’d like to link to an external page within the same window, you’ll follow the same initial steps, but instead of picking from the prototype page list, you’ll select ‘Link to and external url or file’ and type in your hyperlink.

To open a page as a popup window, you’ll select ‘Popup Window’ under the links interactions in the Editor. You’ll then select which page you’d like to appear in the pop from the list. You can also display an external url as a popup by selecting that option.

Using a widget to interact with dynamic panels

Dynamic panels are a complex system that would take a whole article to fully explain. For the simplicity, I’ve already created a dynamic panel already that has two different states and is set to hidden upon initial view. In this article I will focus only on how to set up interactions with existing dynamic panels, rather than their creation.

Showing and hiding dynamic panels

To show or hide a dynamic panel with a user widget action, select the widget and open the Case Editor. Select ‘Show/Hide’ under the Widget interactions. Select the dynamic panel from the widget list you’d like to show or hide and use the toggle below to identify which interaction you’d like it to take.

Switch between dynamic panel states

To switch a dynamic panel to a different state, select the widget you’d like the user to interact with and open the Case Editor. Select ‘Set Panel State’ from under the Dynamic Panel interactions. Then select which dynamic panel from the list you’re wanting to set the state and choose which state you’d like to change it to in the dropdown of available states.

Scrolling to another widget

If you’d like to demonstrate anchor text or scrolling down a page, you’ll select the widget for user interaction and open the Case Editor. Then you’ll select ‘Scroll to Widget’ below the Links interactions. It will then give you a list of every shape on the page. It’s important that you label the shape you want to scroll to or you will have a hard time determining which is the one you’re looking for. For this example, I’ve labeled mine “scroll down” to easily locate. You have the option to choose whether you want to move vertically, horizontally or both using the radio options below the list.

Setting an interaction delay

This option is used in conjunction with another interaction; for example, this is useful for a timed popup. After selecting your widget and opening the Case Editor, you’ll select ‘Wait’ under the Miscellaneous interactions. You’ll then identify how long you’d like the delay to be. Once you have that set up, you can select the follow up interaction from the list on the left.

Please use this prototype to see how the interactions behave in a prototype once they’re set up: http://fh6m9a.axshare.com. This is a very basic look at what this tool can do. There are many robust interactions available for you to set up, but this will get you what you need to build the most commonly needed webpage interactions.

Featured Post

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

The purpose of this video is to demonstrate how to connect a WordPress website to Google
Analytics.
This will be demonstrated using a Windows 8 PC
Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…

The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website.
This will be demonstrated using a Windows 8 PC.
Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…