Introduction to Axure 7 Stephen Denning – Senior UX Consultant

What we will cover…

• Background

• What is Axure?

• What’s new in Axure v7?

New widget events

New display options

Repeater widget

Adaptive views

Prototyping

“An approximation of a product (or system) or its components, in some form, for a definite

purpose in its implementation” (Chua, Leong & Lim)

“A visualisation of the requirements”

(Arnowitz)

“A representative model or simulation

of the final system” (Warfel)

When applied early and often, the use of prototypes can save time and effort, reduce waste

and ultimately save money

Why use prototypes?

• They help to generate ideas

• They can communicate aspects of the design that cannot be adequately communicated by other artefacts

• They increase understanding, add clarity and reduce misinterpretation

• They can enable quicker identification of mistakes and risks

• They can be updated quickly to reflect changes

When should we use it on projects?

Representing requirements

Developing concepts

Early testing

Axure

Introduction

Four purposes of Axure:

1. Sketch + designing Drag & drop widget approach

Various fidelities

Annotated wireframes

Flowcharts

2. Interaction Interactive prototypes

Code-less interactions

HTML output to all browser platforms

3. Documenting – Annotate pages/widgets

– Produce specification document

4. Collaborating – Shared projects

– AxShare

Axure 7 (beta)

New features

• New Widget events (OnDoubleClick, OnContextMenu, OnLongClick)

• New Page events (OnWindowResize, OnWindowScroll)

• New maths, string, boolean and date operations

• New display options (Show as lightbox or flyout)

• Push\pull widgets below\right

• All widgets can be hidden, moved, brought to front, etc.

• Page preview

• Text field types (email, phone number, url, etc.)

• Organise sitemap into folders

• Repeater widget

• Adaptive views

New features

1. New Widget events (OnDoubleClick, OnContextMenu)

2. New display options (Show as lightbox or flyout)

3. Push\pull widgets below\right

4. Repeater widget

5. Adaptive views

Demo

New features

1. New Widget events (double-click, right-click, etc.)

2. New display options (Show as lightbox or flyout)

3. Push\pull widgets below\right

4. Repeater widget

5. Adaptive views

Demo

New features

1. New Widget events (double-click, right-click, etc.)

2. New display options (Show as lightbox or flyout)

3. Push\pull widgets below\right

4. Repeater widget

5. Adaptive views

Demo

New features

1. New Widget events (double-click, right-click, etc.)

2. New display options (Show as lightbox or flyout)

3. Push\pull widgets below\right

4. Repeater widget

5. Adaptive views

Repeater widget

Key points

• Single item ‘wireframe’

• Multi-item Dataset

• Wireframe repeated for every item in the dataset

• Dataset can be sorted and filtered

• Items can be added or deleted from dataset

• Wireframe dynamically updates

Repeater widget

Image Product Category

IMG1 Beats Studio Headphones

IMG2 Bose Bluetooth Headphones

Repeater widget

Process

1. Create wireframe template

2. Create dataset

3. Map dataset fields to template widgets

4. Specify layout (grid, list, pagination)

5. Implement any sorting\filtering functionality

Demo

New features

1. New Widget events (double-click, right-click, etc.)

2. New display options (Show as lightbox or flyout)

3. Push\pull widgets below\right

4. Repeater widget

5. Adaptive views

Adaptive Views

Key points

• Starting from a base design…

• Create alternative layouts for different screen sizes

• Layouts inherit from the ‘parent’ layout

• Suitable layout automatically chosen dependant on browser size

Adaptive Views

Adaptive Views

Adaptive Views

Process

1. Define adaptive view layouts

2. Create base layout

3. Adjust layout for next child layout

4. Continue until all layouts are defined

Adaptive Views

Editing adaptive projects

1. A widget in an adaptive view inherits location, size, and style from its location, size, and style in the parent view.

2. Changes to a widget's location, size, style, or interaction styles are adaptive.

Style can be different on different views.

3. Changes to properties like widget text, interactions, and enabled\disabled are not adaptive.

Property changes affect the widget in all views.

Adaptive Views

Editing adaptive projects

Adaptive Views

Editing adaptive projects

Demo

Other prototyping resources

Prototyping Todd Zaki Warfel

Paper Prototyping Carolyn Snyder

Effective Prototyping Jonathan Arnowitz

Sketching User Experiences Bill Buxton

A few web resources:

• Axure (http://www.auxure.com)

• “Prototypically speaking” prototyping blog (http://softwareprototyping.net/)

• Effective Prototyping site (http://www.effectiveprototyping.com/)

Eye tracking

Questions?

Stephen Denning Senior User Experience Consultant User Vision 55 North Castle Street Edinburgh EH2 3QA T: 0131 225 0850 E: stephen@uservision.co.uk W: www.uservision.co.uk

Thank You