USER EXPERIENCE DESIGN IMMERSIVE

Wednesday, September 25, 13

2TODAY’S CLASS

Introduction to Axure

Wednesday, September 25, 13

3AGENDA

‣ Basics: Interface and navigation‣ Intermediate: Widget manipulation, prototyping and output‣ Advanced: Masters and Dynamic Panels

Wednesday, September 25, 13

4LEARNING GOALS

‣ By the end of this presentation, you should be able to design a well-annotated, fully functional wireframe and/or prototype.

Wednesday, September 25, 13

5OH MAN

HOLY CRAP, AXURE.

Wednesday, September 25, 13

6THE EASY STUFF...

‣ Basics: Interface and navigation

Wednesday, September 25, 13

7WHEN YOU FIRST OPEN IT

WTFWednesday, September 25, 13

8WYSIWYG! NO MORE BLANK PAGE PANIC

SitemapPage  inventory

WidgetsUsable  Elements

Page  Se.ngsSelf-­‐explanatory

Widget  Proper2esedit  element  details

Tabbed  Edi2ng  BoardEdi9ng  layout

MastersReusable  Assets

Dynamic  Panel  ManagerManage  dynamic  panel  

details

Wednesday, September 25, 13

9WHERE THE BULK OF THE ACTION *TEND* TO TAKE PLACE

SitemapPage  inventory

WidgetsUsable  Elements

Page  Se.ngsSelf-­‐explanatory

Widget  Proper2esedit  element  details

Tabbed  Edi2ng  BoardEdi9ng  layout

MastersReusable  Assets

Dynamic  Panel  ManagerManage  dynamic  panel  

details

Wednesday, September 25, 13

10BUT DON’T FORGET HIERARCHY

SitemapPage  inventory

WidgetsUsable  Elements

Page  Se.ngsSelf-­‐explanatory

Widget  Proper2esedit  element  details

Edi2ng  BoardEdi9ng  layout

MastersReusable  Assets

Dynamic  Panel  ManagerManage  dynamic  panel  

details

Edi2ng  BoardEdi9ng  layout

WidgetsUsable  Elements

WidgetsUsable  Elements

Wednesday, September 25, 13

11SO HARD, SO HARD

‣ Intermediate: Widget/element manipulation

Wednesday, September 25, 13

12LET’S TALK WIDGETS

Your starter pack

Add one to your editing board today!

Wednesday, September 25, 13

13WHAT CAN YOU DO WITH WIDGETS

Annotate! Interact! Format!

Wednesday, September 25, 13

14WHAT MAKES WIDGETS WHAT THEY ARE

CASESActions and

commands that are executed upon

specified widget interaction

You can execute multiple actions with a single interaction!

Wednesday, September 25, 13

15YOU CAN ALSO ADD...

CONDITIONALSAdditional qualifiers for activating a case.

Wednesday, September 25, 13

16SO FLEXIBLE!

PAGE-LEVEL AS WELL AS WIDGET

LEVELNotes/Annotations,

interactions, and formatting alike.

Wednesday, September 25, 13

17HERE WE GO

AND NOW, PROTOTYPING

Wednesday, September 25, 13

18PRESS THIS BUTTON.

Wednesday, September 25, 13

19THE EASIER STUFF...

‣ Advanced: Masters and Dynamic Panels

Wednesday, September 25, 13

20ALL THEY ARE...

‣ Masters - Preset groups of widgets that can be populated across multiple pages and edited centrally.

‣ Dynamic Panel - A content box, with different individual states that can be invoked by different interactions and cues.

Wednesday, September 25, 13

21INVOCATION? RIGHT HERE

Wednesday, September 25, 13

22BUT IMPLEMENTATION STRUCTURE IS DIFFERENT.

PERSISTENT PAGE SPECIFIC

Wednesday, September 25, 13

23USE ‘EM

Basic things you can do with a master:‣ Easy duplication across multiple pages‣ One-stop editing for all master instances across multiple

pages‣ Raised Events

Basic things you can do with a Dynamic Panel:‣ Switch between different states to create visual effects: ie

animations, hover actions for graphics‣ Prototype for Mobile

Wednesday, September 25, 13

24REMEMBER HIERARCHY?

SitemapPage  inventory

WidgetsUsable  Elements

Page  Se.ngsSelf-­‐explanatory

Widget  Proper2esedit  element  details

Tabbed  Edi2ng  BoardEdi9ng  layout

MastersReusable  Assets

Dynamic  Panel  ManagerManage  dynamic  panel  

details

Wednesday, September 25, 13

25

Q&A

Wednesday, September 25, 13