(For more resources related to this topic, see here.)
“Learning is not attained by chance, it must be sought for with ardor and diligence.”
– Abigail Adams
We joke that Elizabeth is a true designer in the sense that her right brain will be on fire when she approaches her work, so shifting to logic is tricky for her. Despite this, she has been able to build rather sophisticated prototypes. So, while Axure 7 supports the creation of highly advanced rapid prototypes, the key to success for someone who does not have pseudo code running easily through their mind is: approaching interactivity with an open mind, writing down in plain language what the desired interaction should be, and the willingness to seek help from a colleague or online tutorials.
The basic model of creating interactivity in an Axure prototype involves four hierarchical building blocks: Interactions, Events, Cases, and Actions. Interactions are triggered by events, which cause cases to execute actions. These four topics are the focus of this Article.
Client expectations of a good user experience continue to rise, and it is clear that we are in the midst of an enormous transition in software design. This, along with the spread of Responsive Web Design (RWD), has placed UX front and center of the web design process. Early in that process is the need to “sell” your vision of the user experience to stakeholders and you have a better chance of success if they have to be engaged as early as possible, starting at the wireframe level. There is less tolerance and satisfaction with static annotated wireframes, which requires an effort on the part of stakeholders to imagine the fluidity of the expected functionality.
Axure enables designers to rapidly simulate highly engaging user experiences that can be reviewed and tested on target devices as static wireframes are transformed into dynamic prototypes. In this article, we focus on how to make the transition from static to interactive, using simple, yet wickedly effective interactions.
Interactions are Axure’s term for the building blocks that turn static wireframes into clickable, interactive HTML prototypes. Axure shields us from the complexities of coding by providing a simple, wizard-like interface for defining instructions and logic in English. Each time we generate the HTML prototype, Axure converts the interactions into real code (JavaScript, HTML, and CSS), which a web browser can understand. Note however, that this code is not production grade code.
Each Axure interaction is composed, in essence, of three basic units of information—when, where, and what:
A list of events can be seen on the Interactions tab in the Widget Interactions and Notes pane on the right-hand side of the screen. You will also find the related list of events under the Page Interactions tab, which is located under your main workspace.
Multiple Cases
Sometimes, an event could have alternative paths, each with its own case(s). The determination of which path to trigger is controlled with conditional logic which we will cover later in this article.
In general, Axure interactions are triggered by two types of events, which are as follows:
Think this concept as a staging setup, an orchestration of actions that takes place behind the scenes and is executed as the page gets rendered in the browser. Moreover, it is a setup to which you can apply conditional logic and variables, and deliver a contextual rendering of the page. In short, events, which can be applied to pages and on masters, will likely become one of your frequently used methods to control your prototype.
Keep in mind that the order in which the interactions you build into the prototype will be executed by the browser. The following Image 1 screenshot illustrates the OnPageLoad event as an example:
Image 1
The following table lists the events offered at a page level:
Event names | Definition |
OnPageLoad | This event will trigger assigned action(s) that will impact how the page is initially rendered after it loads. |
OnWindowResize | This event will trigger assigned action(s) when a browser is resized. |
OnWindowScroll | This event will trigger assigned action(s) when the user scrolls the browser window. |
OnPageClick | This event will trigger assigned action(s) when the user clicks on any empty part of the page (not clicking on any widget). |
OnPageDoubleClick | This event will trigger assigned action(s) when the user double-clicks on any empty part of the page (not clicking on any widget). |
OnContextMenu | This event will trigger assigned action(s) when the user right-clicks any empty a part of the page (not clicking on any widget). |
OnMouseMove | This event will trigger assigned action(s) when the mouse pointer is moved anywhere on the page. |
OnPageKeyUp | This event will trigger assigned action(s) when a pressed key is released. |
OnPageKeyDown | This event will trigger assigned action(s) when a key |
OnAdaptiveViewChange | This event will trigger assigned action(s) on a switch from on adaptive view to another. |
The OnClick event, whether using a mouse or tapping a finger, is one of the fundamental triggers of modern user-computer interactions. In Axure, this action is one of the several actions you can associate with a widget.
The following Image 2 screenshot illustrates how widget-level events are processed:
Image 2
The following table lists Axure’s inventory of events which can be applied to widgets and dynamic panels. Each widget has its own set of possible actions:
Event names | Dynamic panels | Definition |
OnClick |
| The user clicks on an element. |
OnPanelStateChange | X | Dynamic panels may have multiple states and this event can be used to trigger action(s) when a dynamic panel changes states. |
OnDragStart | X | This event pinpoints the moment the user begins to drag a dynamic panel. |
OnDrag | X | This event spans the duration of the dynamic panel being dragged. |
OnDragDrop | X | This event pinpoints the moment the user finished dragging the dynamic panel. This could be an opportunity to validate that, for example, the user placed the widget in the right place. |
OnSwipeLeft | X | The event will trigger assigned action(s) when the user swipes from right to left. |
OnSwipeRight | X | The event will trigger assigned action(s) when the user swipes from left to right. |
OnSwipeUp | X | The event will trigger assigned action(s) when the user swipes upwards. |
OnSwipeDown | X | The event will trigger assigned action(s) when the user swipes downwards. |
OnDoubleClick |
| The event will trigger assigned action(s) when the user double-clicks on an element. |
OnContextMenu |
| The event will trigger assigned action(s) when the user right-clicks on an element. |
OnMouseDown |
| The event will trigger assigned action(s) when the user clicks on the element but has yet to release the mouse button. |
OnMouseUp |
| The event will trigger assigned action(s) on the release of the mouse button. |
OnMouseMove |
| The event will trigger assigned action(s) when the user moves the cursor. |
OnMouseEnter |
| The event will trigger assigned action(s) when the cursor is moved over an element |
OnMouseOut |
| The event will trigger assigned action(s) when the cursor is moved away from an element. |
OnMouseHover |
| The event will trigger assigned action(s) when the cursor is placed over an element. This is great for custom tooltips. |
OnLongClick |
| This is great to use on a touchscreen. Use this when a user clicks on the element and holds it. |
OnKeyDown |
| The event will trigger assigned action(s) as the user presses a key on the keyboard. It can be attached to any widget, but the action is only sent to the widget that has focus. |
OnKeyUp |
| The event will trigger assigned action(s) as the user releases a pressed key on the keyboard. |
OnMove |
| The event will trigger assigned action(s) when the referenced widget moves. |
OnShow |
| The event will trigger assigned action(s) when the visibility state of the referenced widget changes to Show. |
OnHide |
| The event will trigger assigned action(s) when the visibility state of the referenced widget changes to Show |
OnScroll | X | The event will trigger assigned action(s) when the user is scrolling. Good to use in conjunction with the Pin to Browser feature. |
OnResize | X | The event will trigger assigned action(s) when it detects that referenced panel has been resized. |
OnLoad | X | The dynamic panel is initiated when a page is loaded. |
OnFocus
|
| The event will trigger assigned action(s) when the widget comes into focus. |
OnLostFocus |
| The event will trigger assigned action(s) when the widget loses focus. |
OnSelectionChange |
| This event is only applicable to drop-down lists and is typically used with a condition: when selected option of X, show this. Use this when you want a selection option to trigger action(s) that will change something on the wireframe. |
OnCheckedChange |
| This event is only applicable to radio buttons and textboxes. Use this when you want a selection option to trigger action(s) that will change something on the wireframe. |
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…