Mobile Prototyping with Axure RP 6.5

Mobile Prototyping with Axure.  

Lennart  Hennigs  MobX  Workshop  2012  

Bridging  the  gap  from  paper  to  digital.  

Hey,  I  made  a  new  presentation  covering  Axure  7.0.  Check  it  out!  

http://bit.ly/a4m_presentation!

http://www.axureformobile.com  

@LennartHennigs  

I  like  this  topic  so  much,  I  even  wrote  a  book  about  it…  

Today’s plan:

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  -  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

What you will walk away with…  

Try  it  for  yourself  

You are here.

- Some  basics.  - Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  - Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Let’s start with some basics.

1.  Sketching  &  Paper  Prototyping.  2.  Mobile  UX.    3.  Axure.  4. Prototyping.  

Sketching  101.  

Why use paper?

- Speed.  

-  It  looks  not  finished.  

- A  picture  says  more  than…  

-  Paper  and  us  got  history.  

-  It  allows  us  to  focus.  

Focus on what?

Bill  Verplank  –  Interac0on  Design  

The  floor  plan.    Your  app’s  structure.  

How  to  get  from  A  to  B.  

How  things  behave.  

How  things  look  &  appear.  

…&  its  content.  

But  not  its  visual  design.  

Why?

- We  need  to  understand  the  problem.  

- We  need  to  work  towards  a  solution.  

- With  sketching  we  go  “from  Tell  to  Show”.  

How?

-  Sketch.  -  Review.  

-  Look  for  flaws  &  areas  to  improve.  

-  Get  feedback.  -  Show  your  peers.    -  Even  your  project  partners.  

-  Iterate.    -  Do  variants  on  everything  that  people  disagree  on  or  where  you  are  unsure.  *  -  Throw  away  or  modify.  

 *  This  is  important!!  

But why go digital?

-  Even  our  pictures  are  not  that  easy  to  understand  for  non-­designers.  

- Describing  animations  &  transitions  is  no  fun.  

- Certain  errors  are  easier  to  find  in  a  prototype.  

h6p://de.slideshare.net/pboersma/good-­‐design-­‐faster-­‐at-­‐design-­‐by-­‐fire-­‐2010  

Leah  Buley  /  Peter  Boersma  

h6p://de.slideshare.net/jacksonfox/sketching-­‐for-­‐design  

Use a template...

h6p://speckyboy.com/2010/11/18/ul0mate-­‐collec0on-­‐of-­‐printable-­‐mobile-­‐sketching-­‐templates/  

…and a notation.

h6p://www.linowski.ca/downloads/ISN_1.2_Introduc0on.pdf  

Your  result  will  be  something  like  this...  

…or  this.  

Get inspiration.

-  UI  Galleries  &  UI  Libraries.  -  http://inspired-ui.com/!

-  http://mobile-patterns.com/!

-  http://pttrns.com/!

-  http://androidpttrns.com/!

-  http://www.androidpatterns.com/!

UI Patterns & Galleries Books.

Sketching & Prototyping Links. -  UI  Sketching  -  http://moobileframes.tumblr.com!

-  http://webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches!

-  http://wireframes.linowski.ca!

-  http://www.id-book.com/secondedition/casestudy_11-2_paper.htm!

Sketching & Prototyping Books.  

Mobile  UX.  

h6p://www.flickr.com/photos/hansel5569/6600464505/  

Siemens S35i 110 x 46 mm

2000

Apple iPhone 3G 115 x 61 mm

2007

Sony Ericsson Idou 111 x 54 mm

2009

Nokia 6300 Classic 107 x 44 mm

2006

Samsung Galaxy Note 146 x 83 mm

2011

Mobiles  are  still  (about)  the  same  size…  

1280  x  800  

320  x  480  

176x208  

101x80    

380  x  640  

2000

2011

…but  their  resolutions  changed  a  bit.  

Mobile challenges.

-  Less  screen  estate.  

-  Different  operating  systems  with  different  UI  paradigms  (iOS,  2  x  Android,  Windows  Phone).  

-  Different  contexts  of  use:  -  Repetitive  Now.  

-  Bored  Now.  

-  Urgent  Now.  

Mobile (First).

-  This  forces  a  (needed)  reduction  of  complexity.  -  Functionality.  

- Content.  

- Hierarchy.  

-  It  forces  us  to  focus  on  what’s  essential.  

- We  need  simplicity  (but  in  a  good  way).  

More  about  

Simplicity.

Mobile benefits.

-  Touch-­based  interaction.  -  Strong  focus  on  content.  -  Animations  &  transitions  are  used  to  give  feedback.  

-  Mobile  advantages:  -  Location  awareness  -  Media  creation    -  Always  connected,  …  

Decent  books  on  

Mobile UX.

Axure  (for  Mobile)  101.  

Artifacts of Axure.  

Prototypes  Wireframes  

Specifications  Information  Architecture  

Artifacts of Axure  for  Mobile.  

UI  Flows  Specifications  

Prototypes  Wireframes  

Information  Architecture  

Axure for Mobile.  Capabilities  &  Constraints.  

+  Create  mobile-­friendly  HTML.  +  Swiping.  +  Basic  transitions.  +  View  on  your  device.    +  UI  Libraries  for  all  (relevant)  mobile                platforms.  

-­  Cannot  re-­use  the  HTML.  -­  No  long-­press.  -­  No  multi-­touch  gestures.  -­  Hard  to  prototype  responsive  

websites  or  orientation  change.  -­  You  need  to  pick  and  stick  to  

one  resolution.  

-­  No  database  support.    -­  Axure  is  not  a  CMS.  

Axure in a nutshell.

-  Page-­based.  

-  You  can  connect  pages  &  use  logic.  

- Adjust  the  level  of  fidelity.  

-  Outputs  .html.  

This  is  where  the  magic  happens...  

•  Display  content  in  different  states.  •  Hide  and  show  content.  •  Move  content  around.  •  Detect  swiping.  •  Implement  drag  &  drop.  •  Prototype  transi0ons.  

The  power  of  Dynamic  Panels.  

Axure  tip  #1:    Know  your  shortcuts.  

h6p://wiYlow.com/public/files/Axure_shortcuts.pdf  

Axure  tip  #2:    Give  everything  a  name.  

Axure  tip  #3:    Turn  everything  you  re-­use  into  Masters.  

Prototyping.  

Ask yourself before  you  start:    

-  What  parts  of  your  design  do  you  want  to  focus  on?    -  Structure?    -  Use  Cases  &  Scenarios?  -  Interaction  Paradigms  &  UI  Patterns?  - Metaphor  /  Behavior?  - Content?    -  Visual  design?    

-  Who  is  the  audience  for  your  prototype?  

Prototype Dimensions.

-  Depth.  -  Interactivity.  -  Visual  Fidelity.  

-  Start  easy.  -  Increase  the  complexity  based  on  your  prototyping  goals.  

Depth:  

Horizontal prototype.

-  Provides  an  overview  over  the  key  screens.  

-  It’s  basically  a  “tour  of  the  house”.  

Depth:  

Vertical prototype.  

-  It  shows  a  single  use  case  or  scenario.  -  It’s  a  spot  light.  

Levels  of    

Interactivity. -  Screen-­by-­screen.  

-  No  interactivity,  you  show  where  the  user  clicks.  

-  Power  to  the  people.  -  Let  the  user  click  through  a  use  case.    

-  Limited  set  of  options.  -  The  prototype  looks  complete  but  only  certain  use  cases  are  done.  

-  Real  experience.  -  Never  try  to  do  this!  Seriously!  

Go  for  speed  and  quantity  in  the  beginning.    

Create  the  big  picture  first.  

Its’  not  about  the  looks.  Its  about  the  inner  values.  

Do  it  like  Pareto  would:    Prototype  the  20%  that  will  be  used  80%  of  the  time.  

Stick  to  the  key  use  cases.  

Don’t  get  lost  in  Axure.  Or  any  other  prototyping  tool.  

Complexity  will  fight  back.  

You are here.

- Some  basics.  - Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  - Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Mobile resolutions of  iOS.  

h6p://www.idev101.com/code/User_Interface/sizes.html  

Retina  :  non-­Retina  =  2  :  1  

Mobile resolutions of  Android.  

-  Xlarge    >=  960dp  x  720dp  -  Large    >=  640dp  x  480dp  -  Normal      >=  470dp  x  320dp  -  Small    >=  426dp  x  320dp  

-  LDPI    =  0.75  -  MDPI  =  1.0  -  HDPI    =  1.5  -  XHDPI  =  2.0  

h6p://developer.android.com/guide/prac0ces/screens_support.html  

h6p://developer.android.com/design/style/metrics-­‐grids.html  

this  is  MDPI  

Mobile resolutions of  Windows  Phone.  

-  480x800              Windows  7  

-  …  &  768px1280  &  720x1280    Windows  8  

h6p://go.microso].com/fwlink/?LinkId=196225  

Using  Global  Guides.  

Adjusting  the  Grid  Settings.  …&  not  the  DPI.  

Creating  a  custom  grid  system.  “Create  Guides…”  

Axure’s  Mobile  Settings.  

Beware:    This  is  a  hack!  

your  target  resolution  usually  “1.0”  

You are here.

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  -  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Import your sketches.

1.  Get  a  scan  app  for  your  phone.  -  iOS:  Genius  Scan,  Turbo  Scan  -  Android:  CamScanner,    Handy  Scanner,  Portable  Scanner,  Droid  Scan  

2.  Scan  your  wireframes.  3.  Send  them  to  your  computer  (sync,  email,  dropbox,  …)  4.  Import  the  images  into  Axure.  5.  Resize  them  to  your  target  resolution.  

You are here.

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  

-  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Page-­based  

Wireframes.  

Web  &  PC    

Page-­based  

Wireframes  for  Mobile.  

Page-­based  

Wireframes  with  a  frameset.  

Page-­based  

Wireframes  with  a  frameset.  

+  Very  easy…  +    …and  very  fast  to  do.    

-  No  page  transitions.  -  No  swiping.  -  You  will  experience  loading  

delays.  

Properties  of

Mobile Experiences.  -­  Gesture  support.  -­  Animations  &  Transitions.  

 …  and  your  prototype  will  be  loaded  in  one  go.  

Panel-­based  

Wireframes. -  Create  a  Dynamic  Panel  with  states  for  each  key  screen  

Panel-­based  

Wireframes. -  Create  a  Dynamic  Panel  with  states  for  each  key  screen  

-  Create  Dynamic  Panels  for  key  screen  and  its  variants  

Panel-­based  

Wireframes. -  Create  a  Dynamic  Panel  with  states  for  each  key  screen  

-  Create  Dynamic  Panels  for  key  screen  and  its  variants  

-  Turn  the  main  panel  into  a        Master  (and  other  key  screens)  

Panel-­based  

Wireframes.

You are here.

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  -  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Mobile Interaction Patterns.

-  Events  &  Actions.  

-  Gestures.  

- Animations  &  Transitions.  

-  Element  states  $  styles.  

Events & Actions. - Events  are  part  of  a  widget  (&  a  page).    - Number  and  type  of  events  depend    on  the  widget.  - Masters  don‘t  have  any  events  since  because  don‘t  know  where  they  are  shown.  

Condition  Event  

Case  

an  ELSE  case  (this  case  will  not  be  visited  if  the  IF  case  applies)  

Actions  

Events & Actions. -  For  an  event  you  can  define  CASES.  - Cases  can  contain  CONDITIONS.  - Remember:  TOGGLE  IF/ELSE  IF  if  you  need  to.        (right  click  on  an  event.)  

Condition  Event  

Case  

an  ELSE  case  (this  case  will  not  be  visited  if  the  IF  case  applies)  

Actions  

Gestures  Axure  does  supports.  

h6p://www.lukew.com/ff/entry.asp?1071  

Gestures  used  in  the  wild.  

h6p://www.lukew.com/ff/entry.asp?1071  

Tap  a.k.a.    

OnClick.

-  All  elements  (with  the  exception  to  Dynamic  Panels).  

-  You  could  track  a  double  tap  via  a  variable  or  a  Dynamic  Panel.  

Flick  a.k.a.    

OnSwipeLeft & ..Right.  -  Only  horizontal  swiping  (which  is  enough  in  90%  of  the  cases).    

-  You  could  build  vertical  swiping  via  Drag  &  Drop.  

Drag& Drop.  

-  Not  really  a  phone  use  case.  It’s  sometimes  used  in  pad  app.  

-  Not  convenient  but  it  works.  

Animations & Transitions. E.g.  Tweetbot.  

www.youtube.com/watch?v=ZBOHGzE6TNY  

Animations & Transitions in  Axure.  

-  Move  Panel      (swing,  linear,  ease,  bounce,  elastic)    -­  Set  Panel  to  State                      (fade  &  slide)  -­  Toggle  Visibility  (  or  Hide  &  Show)                (fade  only)  

Show & Hide the  Splash  Screen.  

-  You  need  a  Dynamic  Panel.  

-  Give  it  one  state  and  hide  it  initially.  

- …but  invisible  elements  can  block  interaction.  

-  Use  the  onHide  &  onShow  events  to  reorder  your  panels.  

Element States for  Mobile.  

Less  states  (compared  to  computers)  to  worry  about:  -  No  mouse-­over  (rollover)  state.  -  Touch-­only  needs  no  selected  state.*    

Remaining  states:  -  Pressed  (mouse  down).  -  Disabled.    *  Still  needed  for  Radio  Buttons,  Checkboxes  &    Selection  Groups.  

How  to  apply  

Element Styles. -  Images,  Rectangles  $  Buttons  can  contain  different  states.  

-  Right-­click  -­>  Edit  [whatyouhave]  -­>  Edit  [somestyle]  Style  

-  You  can  simply  use  images  or  apply  Widget  Styles.  

-  Stylish  elements  get  an  interactive  “dog  ear”.    (Try  hovering  over  it…)  

You are here.

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  -  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Viewing your prototype. Where.  

On  your  mobile:  -  Default  status  bar  -  Semi-­transparent  status  bar  (=  overlay).  -  Full  screen    On  a  larger  screen:  -  Full  screen  (with  a  device  body)  

Viewing your prototype. How.  

Online  

-  AxShare  

-  Dropbox  

-  Your  own  webspace  

vs.  Offline:  

-  Sites2Go  (iOS)  

   OR  

-  On  your  device  (Android)  

Getting feedback.

- AxShare  (for  online  &  offline  prototypes)  - Convenient  (built  into  Axure)  - Way  too  many  clicks  

-  Protonotes  -  Free  web-­based  post-­it  notes  -  Nicer  interaction  

Today’s plan:

-  Some  basics.  -  Make  Axure  mobile-­ready.  -  Turn  paper-­based  sketches  into  prototypes.  -  Create  a  robust  prototype  structure.  -  Prototype  common  mobile  interaction  patterns.  -  View  your  prototype.  

Thank you!