1. Introduction to Axure 7
Stephen Denning – Senior UX Consultant

3. What we will cover…
• Background
• What is Axure?
• What’s new in Axure v7?
 New widget events
 New display options
 Repeater widget
 Adaptive views

4. Prototyping

5. “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)

6. 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

8. When should we use it on projects?
Representing
requirements
Developing
concepts
Early testing

9. Axure

10. 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

11. Axure 7
(beta)

12. 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)
• Pushpull widgets belowright
• 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

13. New features
1. New Widget events (OnDoubleClick, OnContextMenu)
2. New display options (Show as lightbox or flyout)
3. Pushpull widgets belowright
4. Repeater widget
5. Adaptive views

14. Demo

15. New features
1. New Widget events (double-click, right-click, etc.)
2. New display options (Show as lightbox or flyout)
3. Pushpull widgets belowright
4. Repeater widget
5. Adaptive views

16. Demo

17. New features
1. New Widget events (double-click, right-click, etc.)
2. New display options (Show as lightbox or flyout)
3. Pushpull widgets belowright
4. Repeater widget
5. Adaptive views

18. Demo

19. New features
1. New Widget events (double-click, right-click, etc.)
2. New display options (Show as lightbox or flyout)
3. Pushpull widgets belowright
4. Repeater widget
5. Adaptive views

20. 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

21. Repeater widget
Image Product Category
IMG1 Beats Studio Headphones
IMG2 Bose Bluetooth Headphones

22. 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 sortingfiltering functionality

23. Demo

24. New features
1. New Widget events (double-click, right-click, etc.)
2. New display options (Show as lightbox or flyout)
3. Pushpull widgets belowright
4. Repeater widget
5. Adaptive views

25. 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

26. Adaptive Views

27. Adaptive Views

28. 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

29. 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 enableddisabled are not adaptive.
Property changes affect the widget in all views.

30. Adaptive Views
Editing adaptive projects

31. Adaptive Views
Editing adaptive projects

32. Demo

33. 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/)

34. Eye tracking
Questions?

35. 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