Your SlideShare is downloading. ×
0
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Mobile Prototyping with Axure RP 6.5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Prototyping with Axure RP 6.5

8,958

Published on

Bridging the Gap From Paper to Digital …

Bridging the Gap From Paper to Digital

This is a condensed slide set from my Mobx Conference 2012 Workshop.
For more details take a look at: http://www.axureformobile.com

Published in: Technology, Business
2 Comments
27 Likes
Statistics
Notes
  • @MosBar Well, I agree with you to your general point that is unnecessary to portrait woman that way. It is an stupid reduction, sexist and overall not acceptable. Point taken.
    But let me clarify what this slide does or does not imply. The lady in that picture was part of a TV show called 'Newlyweds: Nick and Jessica'. In it, Jessica Simpson is the most vivid example of the slide's statement. She is, not half of our population.
    I point only to her - which I give you, might be misleading.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great deck, except the woman on slide 56. Is it always necessary that women have to be portrayed in such a rudimentary, single-minded way? Reduced to the only trait 'man'-kind can think of, when they 'think' of the female species?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,958
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
255
Comments
2
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Prototyping with Axure.   Lennart  Hennigs   MobX  Workshop  2012   Bridging  the  gap  from  paper  to  digital.  
  • 2. Hey,  I  made  a  new  presentation  covering  Axure  7.0.   Check  it  out!   http://bit.ly/a4m_presentation!
  • 3. http://www.axureformobile.com   @LennartHennigs   I  like  this  topic  so   much,  I  even  wrote  a   book  about  it…  
  • 4. 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.  
  • 5.     What you will walk away with…  
  • 6. Try  it  for  yourself  
  • 7. 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.  
  • 8. Let’s start with some basics. 1.  Sketching  &  Paper  Prototyping.   2.  Mobile  UX.     3.  Axure.   4.  Prototyping.  
  • 9. Sketching  101.  
  • 10. Why use paper? -  Speed.   -  It  looks  not  finished.   -  A  picture  says  more  than…   -  Paper  and  us  got  history.   -  It  allows  us  to  focus.  
  • 11. Focus on what? Bill  Verplank  –  Interac0on  Design  
  • 12. The  floor  plan.     Your  app’s  structure.  
  • 13. How  to  get  from  A  to  B.  
  • 14. How  things  behave.  
  • 15. How  things  look  &  appear.  
  • 16. …&  its  content.  
  • 17. But  not  its  visual  design.  
  • 18. Why? -  We  need  to  understand  the  problem.   -  We  need  to  work  towards  a  solution.   -  With  sketching  we  go  “from  Tell  to  Show”.  
  • 19. 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!!  
  • 20. 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.  
  • 21. h6p://de.slideshare.net/pboersma/good-­‐design-­‐faster-­‐at-­‐design-­‐by-­‐fire-­‐2010   Leah  Buley  /  Peter  Boersma  
  • 22. h6p://de.slideshare.net/jacksonfox/sketching-­‐for-­‐design  
  • 23. Use a template... h6p://speckyboy.com/2010/11/18/ul0mate-­‐collec0on-­‐of-­‐printable-­‐mobile-­‐sketching-­‐templates/  
  • 24. …and a notation. h6p://www.linowski.ca/downloads/ISN_1.2_Introduc0on.pdf  
  • 25. Your  result  will  be  something  like  this...  
  • 26. …or  this.  
  • 27. Get inspiration. -  UI  Galleries  &  UI  Libraries.   -  http://inspired-ui.com/! -  http://mobile-patterns.com/! -  http://pttrns.com/! -  http://androidpttrns.com/! -  http://www.androidpatterns.com/!
  • 28. UI Patterns & Galleries Books.
  • 29. 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!
  • 30. Sketching & Prototyping Books.  
  • 31. Mobile  UX.   h6p://www.flickr.com/photos/hansel5569/6600464505/  
  • 32. 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…  
  • 33. 1280  x  800   320  x  480   176x208   101x80     380  x  640   2000 2011 …but  their  resolutions  changed  a  bit.  
  • 34. 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.  
  • 35. 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).  
  • 36. More  about   Simplicity.
  • 37. Mobile benefits. -  Touch-­based  interaction.   -  Strong  focus  on  content.   -  Animations  &  transitions  are  used  to  give  feedback.   -  Mobile  advantages:   -  Location  awareness   -  Media  creation     -  Always  connected,  …  
  • 38. Decent  books  on   Mobile UX.
  • 39. Axure  (for  Mobile)  101.  
  • 40. Artifacts of Axure.   Prototypes  Wireframes   Specifications   Information   Architecture  
  • 41. Artifacts of Axure  for  Mobile.   UI  Flows  Specifications   Prototypes  Wireframes   Information   Architecture  
  • 42. 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.  
  • 43. Axure in a nutshell. -  Page-­based.   -  You  can  connect  pages  &   use  logic.   -  Adjust  the  level  of  fidelity.   -  Outputs  .html.  
  • 44. This  is  where  the  magic  happens...  
  • 45. •  Display  content  in  different  states.   •  Hide  and  show  content.   •  Move  content  around.   •  Detect  swiping.   •  Implement  drag  &  drop.   •  Prototype  transi0ons.   The  power  of  Dynamic  Panels.  
  • 46. Axure  tip  #1:     Know  your  shortcuts.   h6p://wiYlow.com/public/files/Axure_shortcuts.pdf  
  • 47. Axure  tip  #2:     Give  everything  a  name.  
  • 48. Axure  tip  #3:     Turn  everything  you  re-­use  into  Masters.  
  • 49. Prototyping.  
  • 50.   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?  
  • 51. Prototype Dimensions. -  Depth.   -  Interactivity.   -  Visual  Fidelity.   -  Start  easy.   -  Increase  the  complexity  based  on  your  prototyping  goals.  
  • 52. Depth:   Horizontal prototype. -  Provides  an  overview  over  the  key  screens.   -  It’s  basically  a  “tour  of  the  house”.  
  • 53. Depth:   Vertical prototype.   -  It  shows  a  single  use  case  or  scenario.   -  It’s  a  spot  light.  
  • 54. 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!  
  • 55. Go  for  speed  and  quantity   in  the  beginning.    
  • 56. Create  the  big  picture   first.  
  • 57. Its’  not  about  the  looks.   Its  about  the  inner  values.  
  • 58. Do  it  like  Pareto  would:     Prototype  the  20%  that  will  be  used  80%  of  the  time.  
  • 59. Stick  to  the  key  use  cases.  
  • 60. Don’t  get  lost  in  Axure.   Or  any  other  prototyping  tool.  
  • 61. Complexity  will  fight  back.  
  • 62. 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.  
  • 63. Mobile resolutions of  iOS.   h6p://www.idev101.com/code/User_Interface/sizes.html   Retina  :  non-­Retina  =  2  :  1  
  • 64. 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  
  • 65. Mobile resolutions of  Windows  Phone.     -  480x800              Windows  7   -  …  &  768px1280  &  720x1280    Windows  8   h6p://go.microso].com/fwlink/?LinkId=196225  
  • 66. Using  Global  Guides.  
  • 67. Adjusting  the  Grid  Settings.   …&  not  the  DPI.  
  • 68. Creating  a  custom  grid  system.   “Create  Guides…”  
  • 69. Axure’s  Mobile  Settings.   Beware:     This  is  a  hack!   your  target   resolution   usually  “1.0”  
  • 70. 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.  
  • 71. 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.  
  • 72. 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.  
  • 73. Page-­based   Wireframes.   Web  &  PC    
  • 74. Page-­based   Wireframes  for  Mobile.  
  • 75. Page-­based   Wireframes  with  a  frameset.  
  • 76. Page-­based   Wireframes  with  a  frameset.   +  Very  easy…   +    …and  very  fast  to  do.     -  No  page  transitions.   -  No  swiping.   -  You  will  experience  loading   delays.  
  • 77. Properties  of Mobile Experiences.   -­  Gesture  support.   -­  Animations  &  Transitions.     …  and  your  prototype  will  be   loaded  in  one  go.  
  • 78. Panel-­based   Wireframes. -  Create  a  Dynamic  Panel  with   states  for  each  key  screen  
  • 79. Panel-­based   Wireframes. -  Create  a  Dynamic  Panel  with   states  for  each  key  screen   -  Create  Dynamic  Panels  for  key   screen  and  its  variants  
  • 80. 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)  
  • 81. Panel-­based   Wireframes.
  • 82. 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.  
  • 83. Mobile Interaction Patterns. -  Events  &  Actions.   -  Gestures.   -  Animations  &  Transitions.   -  Element  states  $  styles.  
  • 84. 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  
  • 85. 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  
  • 86. Gestures  Axure  does  supports.   h6p://www.lukew.com/ff/entry.asp?1071  
  • 87. Gestures  used  in  the  wild.   h6p://www.lukew.com/ff/entry.asp?1071  
  • 88. 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.  
  • 89. 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.  
  • 90. Drag& Drop.   -  Not  really  a  phone  use  case.  It’s  sometimes  used  in   pad  app.   -  Not  convenient  but  it  works.  
  • 91. Animations & Transitions. E.g.  Tweetbot.   www.youtube.com/watch?v=ZBOHGzE6TNY  
  • 92. Animations & Transitions in  Axure.   -  Move  Panel      (swing,  linear,  ease,  bounce,  elastic)     -­  Set  Panel  to  State                      (fade  &  slide)   -­  Toggle  Visibility  (  or  Hide  &  Show)                (fade  only)    
  • 93. 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.  
  • 94. 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.  
  • 95. 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…)  
  • 96. 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.  
  • 97. 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)  
  • 98. Viewing your prototype. How.     Online   -  AxShare   -  Dropbox   -  Your  own  webspace     vs.  Offline:   -  Sites2Go  (iOS)      OR   -  On  your  device  (Android)  
  • 99. Getting feedback. -  AxShare  (for  online  &  offline  prototypes)   -  Convenient  (built  into  Axure)   -  Way  too  many  clicks   -  Protonotes   -  Free  web-­based  post-­it  notes   -  Nicer  interaction  
  • 100. 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.  
  • 101. Thank you!

×