Introduction to Axure RP

MSCI-343-HUMAN COMPUTER INTERACTION TUTORIAL

FALL 2016

Agenda-Week 1

Introduction to Axure RP

Pages

Widgets

Flow Diagrams

Static Wireframes

Interactivity

Widgets Arrangement

Masters

Widget and Page Notes

Word Specification

Publish & Print the Prototype

WHAT IS AXURE RP?

Axure RP is a wireframing, prototyping, flowcharting, and documentation

tool. Use it to create and style diagrams, add interactivity and notes to
diagram pages and elements, and publish finished designs to HTML for
viewing via web browser.

Using AXURE RP we can create Interactive prototypes

Simple sites

Richly interactive sites

Web applications

Any other type of site or application you can imagine

AXURE Interfaces

Axure Interfaces
1. Main Menu & Main Toolbar: Perform common actions like opening and saving files, arranging widgets,
and publishing. Change the cursor tool between selection modes, connector mode, and the pen tool.
2. Canvas: Lay out widgets on this drag-and-drop environment. You can optionally add a grid and guides.
3. Pages: Add, remove, rename, and organize the pages in your file.
4. Libraries: Resource for widgets such as buttons, images, text and shapes. Drag the widgets from the
Libraries pane and drop them onto the canvas. Via the Libraries pane you can switch between libraries of
widgets, load additional libraries, and create your own custom libraries.
5. Masters: Add, remove, rename and organize masterscentrally managed sets of widgets that you can
reuse throughout your file.
6. Inspector: Comprises three tabs. Whatever is selected on the canvaswhether it's a single widget or
severalwill be configurable via the Inspector. If nothing is selected on the canvas, the Inspector will show
page-level controls.
- Properties Tab: Add and edit interactions and other interactive properties.
- Notes Tab: Add and edit widget and page notes.
- Style Tab: Edit widget and page styling.
7. Outline: View a searchable, sortable, and filterable list of all widgets, masters, and dynamic panels on the
current diagram.

Building Components in Axure RP

Pages

Widgets

Interactivity

Flow Diagrams

Static Wireframes

Widgets Arrangement

Adding Page Notes

Publish & Print the Prototype

Pages

The Pages pane is used to add,

delete, and organize pages in your
project. There is no limit to the
number of pages that can be
added to an Axure RP project.

MANAGING PAGES

To add a page, click the "New Page" icon in the Pages pane's local toolbar. You can also
right-click a page and use the "Add" submenu to choose "Page Before," "Page After," or
"Child Page." Another way to add a page after the currently-selected page is with the
keyboard shortcut [CTRL] / [CMD] + [ENTER].

To delete a page, right-click it and choose "Delete" or select it and use the [DEL] key.

To rename a page, either do a slow double-click on the page name in the Pages pane or
right-click the page and choose "Rename." You can safely rename pages without
breaking links to the pages. Existing links will dynamically update

o reorder pages in the Pages pane, drag the page name up, down, in, or out; or use your
keyboard's arrow keys while holding [CTRL] / [CMD].

The icon to the left of the page name indicates the type of diagram the page contains
("Page" or "Flow"). To change the icon, right-click a page and use the "Diagram Type"
submenu.

Page Diagram
Page generally contains

a static wireframe

interactive prototype

flowchartcomposed of widgets.

FOLDERS

You can organize the Pages

pane with folders. Add a
folder using the "New Folder"
icon in the Pages pane's local
toolbar. You can also rightclick a page and use the
"Add" menu to choose "Add
Folder". Another way to add a
folder after the currentlyselected page is with the
keyboard shortcut [CTRL] /
[CMD] + [SHIFT] + [ENTER].

To delete a folder, right-click it

and choose "Delete" or select
it and use the [DEL] key.

Page Style

Page style properties in Axure RP comprise page

alignment, background color and image, and
sketch effects.

Widgets

Widgets are the building blocks of your

diagrams.

The most common are "shape" widgets..

You can also use the connector widget to

create flow diagrams by connecting shapes
together.

Types of Widgets

Shape

Radio Button

Image

HTML Button

Line

Tree

Hot Spot

Table

Dynamic Panel

Menu

Inline Frame

Snapshot

Repeater

Groups

Text Field and Text Area

Connectors

Droplist

Vector Drawing

List Box

Checkbox

Widgets Style

Widgets also have a Default style

from which other widget styles
inherit.

By selecting the Widget we can

change the styles from the styles
tab in inspector pane

For example, all Box 1 widgets are

in the "Box 1" style. Changes to the
"Box 1" style will affect all widgets
that have that widget style
applied, including subsequent Box
1 widgets that you add from the
library.

ARRANGING WIDGETS

After a widget has been added to a diagram, you can rearrange it in your
diagram by moving, resizing, or rotating it. You can also align, distribute,
lock, group, and change the depth order of widgets.

Widgets can be grouped so that the group can be manipulated together.

To group widgets ,select the widgets to be grouped, right click and select
group.

Widgets can be locked in the design area, which prevents their location
and size from being changed by dragging. Locked widgets can be
moved and resized in the Inspector if needed. To lock a widget, use the
icon in the top toolbar.

To rotate the widget enter an exact degree of rotation in the Style tab.

Interaction Styles

Widget styles can be applied

as interaction styles. To do this
from the Interaction Styles
dialog, check the first
checkbox in the list, labeled
"Widget Style", and then
choose one of your widget
styles from the dropdown.

Available interaction styles

are MouseOver, MouseDown,
Selected, and Disabled

Format Painter

The Format Painter is used to copy

styling from one widget and
selectively apply the copied style
settings, including interaction styles,
to other widgets. It acts like a
clipboard for style properties.

To copy styling from a widget, select

the widget and click on the Painter
tool icon in the tools section of the
Main Toolbar.

Static Wireframing
Widgets in Static Wireframing

Images

Text

Masters

Masters are collections of

widgets you can maintain in a
single source location and
then reuse throughout your
file.

Common elements that are

created as masters include
headers, footers, and
navigation. Any edits you
make to the master will be
automatically applied
everywhere the master is
used.

Creating a master

If you're adding widgets to a diagram and you realize that this part of your
wireframe would be better if it were reusable and single-sourced, you can
select all the component widgets, right-click, and choose "Convert to
Master.

Alternatively, you can design content as a master right from the

beginning; locate the Masters pane at the lower left-hand side of Axure RP
and click on the "Add Master" icon to get started.

After you create a new master, take a moment to define its drop behavior
by right-clicking its line item in the Masters pane and mousing to the "Drop
Behavior" submenu. The default setting is "Place Anywhere.

Flow Programming

All shape (including custom

shape), image, and snapshot
widgets can be used in flow
diagramming.

All shapes are present under the

Libraries -> Flow(Present in Drop
down list)

The Flow library, includes widgets

pre-made for flow diagramming
(process, decision, database,
etc.)

Snapshot Widgets

Snapshot widgets let you set up references to pages and then show their
diagrams on other pages in thumbnail images. You can configure a
snapshot to display either an entire diagram or just a portion of a diagram.
You can also set up a snapshot to apply interactions in the referenced
diagram before capturing the image.

If a referenced diagram is updated, the thumbnail shown in the snapshot

widget will automatically update to match.

Snapshot widgets can be used to diagram the step-by-step progress of an

interaction or to add thumbnails to a flow diagram.

AUTO-GENERATING FLOW DIAGRAMS

First, open the page that will include the flow diagram (e.g. a new,
blank page). Then, in the Pages pane, right-click any page and click
"Generate Flow Diagram". (It's best if the page you choose from the
Pages pane has some child pages; that way Axure can generate a flow
chart for you instead of just a single flow shape.)

In the dialog that appears, you can choose whether the flow diagram's
layout will be standard or right hanging. Make your selection and then
click OK to generate the flow diagram.

Once you've auto-generated a flow diagram this way, you can

customize it by moving widgets around or changing their shapes. Autogenerated flow shapes will already have reference pages.

AUTO-GENERATING FLOW DIAGRAMS

REFERENCE PAGES (SHAPE WIDGETS)

If a widget has a reference page, it

means the text on the widget is the
page's name, the widgets text is
updated when the page is renamed,
and clicking the widget in the HTML
output links to the referenced page.

To assign a reference page to any shape

widget, select the widget and open the
Inspector's Properties tab. Then click the
"Reference Page" control to open the
page selector and assign a page.

CONNECTORS

Connectors are used to link

widgets in a flow diagram.

Interactions

Interactions determine the

dynamic behaviours of a widget
or page. You can see the
interactions set up on a widget or
page at the top of the Properties
tab in the Inspector.

three parts: events, cases, and

actions.

EVENTS(Trigger)

An event sets in motion the prepared response of one or more cases and
their constituent actions.(Basically acts a trigger)

The most common events for a widget type are listed in the Interactions
section of the Properties tab.

An OnClick event, for example, fires when a widget is clicked; an

OnMouseEnter event fires when the mouse cursor crosses into the area of
a widget; an OnMove event fires when a widget is moved by another
action on the page; and so on.

CASES(Condition)

A case is an ordered collection of one or more outcomes assigned

to a specific event of a specific widget or page.

To add a case to an event, double-click the event name in the

Properties tab. You can also single-click to select the event name
and then click "Add Case" at the top of the Interactions section.

An event can have one or more cases. When there are multiple
cases, conditional logic is often used to determine which case
should fire. If conditional logic is not used, a selection menu of all
cases appears in the browser when the triggering event occurs.

Conditional Logic

"Conditional logic" is a system

of rules used in interactions to
determine whether a case
should fire.

This feature is primarily used

to determine which case
should fire when two or more
cases exist on the same
event (for example on a
button widget's OnClick
event).

By double clicking the case

the condition builder window
opens.

ACTIONS

Actions are the possible outcomes that can occur when the event fires.
One or many actions can occur as part of the total interaction. Actions
include outcomes like opening a link to a new page, changing the text on
a widget, and showing or hiding a widget.

DYNAMIC PANELS

Dynamic panels are special, container-type widgets. Their primary function

is to contain multiple alternative versions of a designcalled "panel
states"which can be switched between using the "Set Panel State"
action. Only one panel state can be visible at a time. You can think of a
dynamic panel like a deck of cards with only the top card showing.

For Example, They are useful for creating slideshows.

ADDING PAGE NOTES

The most common use of widget and page

notes is to document the functionality or
requirements of a widget or page. Notes may also
be used to document changes, keep track of
status, or manage tasks for yourself or your team.

Add notes in the Notes tab of the Inspector. You

can add and remove fields for widget and page
notes by clicking "Customize Fields" in the Notes
tab.

By default, widgets and pages start out with a

single text-type note field called "Note".

Notes

Widget notes and page

notes are text metadata
associated with widgets
and pages. They can be
used to record
specifications, relate
widgets and pages to
project requirements,
document changes, and
communicate with
teammates.

ADDING NOTES
ADDING NOTES FIELDS-PAGES

Use the "Project > Page Notes Fields..." menu command, or click
"Customize Fields" in the "Notes" tab of the Inspector pane, to open the
"Page Notes Fields" dialog.

ADDING NOTES FIELDS-WIDGETS

Use the "Project > Widget Notes Fields and Sets..." menu command, or click
"Customize Fields" in the "Notes" tab of the Inspector pane, to open the
"Widget Notes Fields and Sets" dialog.

THE FOOTNOTE ICON (WIDGETS)

By default, widgets with notes or interactions are

indicated by a blue, numbered footnote icon
displayed at the top-right corner of the widget
when shown on the canvas. To toggle visibility of the
footnote icon, use the "View > Show Footnotes"
menu command.

NOTES IN OUTPUT

NOTES IN OUTPUTS
THE HTML OUTPUT

When viewing the HTML output in a web browser, widget and page notes appear in the Notes tab of the sidebarpage
notes at the top, widget notes underneath.

In addition, any widgets with notes will have blue footnote icons in their upper-right corners in the main content area. Click
an icon to display that widget's notes. (Use the "Toggle Footnotes" icon in the Pages tab to toggle the visibility of all
footnote icons on the page. Learn more about options in the HTML output's sidebar in our HTML Output Sidebar training
article.)

CONFIGURING NOTES IN THE HTML OUTPUT

Control how notes appear in the HTML output via the Widget Notes and Page Notes tabs of the Generate HTML dialog
(available via "Publish > Generated HTML Files"). You can choose whether to include widget or page notes in the
sidebar, whether to include widget footnotes, and whether widget footnote icons feature widgets' names (off by default).
You can also reorder note fields in these two dialogs by clicking a note field name and then using the right-hand arrow
buttons.

THE WORD SPECIFICATION

Page notes appear in Axure RP's generated Word specification at the top of each page section, while widget notes
appear as part of widget tables. Read our Word specification training article to learn about available configuration
options for notes in the Word specification output.

Publish & print the Prototype

At any point, you can view your diagrams

in your browser.

Choose "Publish > Preview" to immediately

see and interact with the current page in
the browser.

To share the project with other viewers,

you have a couple of options. You can
use "Publish > Generate HTML Files..." to
generate the source HTML, JavaScript,
and image files to your local drive, a
network drive, or server.

To print a diagram, go to "File > Print". You

can also choose which of the file's pages
to print and set print scaling here.

Word Specification

The Word specification is

an automatically
generated Microsoft Word
document that serves as
the functional specification
component of your Axure
RP file if needed. This
output type is one option
available to you when your
project requires a formal
print deliverable.

Word Specification Tabs

In the "General" tab of

the Generate Word
Specification dialog,
enter the destination
where the file will be
saved.

In the "Pages" tab of the

Generate Word
Specification dialog, you
can configure which
pages will be included in
the spec and how they
will be organized.

In the "Masters" tab of

the Generate Word
Specification dialog, you

can configure which

masters will be included
in the spec and how
they will be organized.

In the "Page Properties"

tab of the Generate

Word Specification
dialog, you can
configure what
information about a
page or master will be
included in the spec.

In the "Widget Tables"

tab of the Generate
Word Specification
dialog, you can

configure the layout of

the widget table that
appears with the
screenshot of each
page.
In the "Layout" tab of the
Generate Word
Specification dialog, you
can configure the order
and layout of each
page's information in the
spec document.

Reference
Most of the information in this slide are taken from the Axure Training and
Support website.
For examples and references use the below link
http://www.axure.com/support/training/core/1-basics

Next Class

Widget types

Advanced Interactions