Modeling The Mobile UX

1,208 views

Published on

This presentation is made by Bryan Reger. It is very nice and detailed presentation in which he describes how to model User Experience for Mobile Apps.

Must read it .....

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,208
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Modeling The Mobile UX

  1. 1. Modelling Mobilethe User Experience “We become what we behold. We shape our tools and then our tools shape us.” Marshall McLuhan bryan rieger <bryan@yiibu.com> Friday, 25 September 2009
  2. 2. design illustration animation research and design from Toronto, Canada, eh! motion graphics 1991 20092000 theatre design multimedia mobile development design webtheatre rapid prototyping media on devices dot.com boom Hypercard Mosaic mobile Sabbatical in South East Asia Flash Lite Web DIY Tools open source design research last millennium since then... UML writing AfterEffects Processing Bill Buxton Brenda Laurel MPEG4 SMIL 1996 2005 John Maeda Qt Flash QuickTime advertising a little bit about me... “a straight line may be the shortest distance between two points, but is by no means the most interesting...” UK graphic design Web Web animation SVG standards animation craft management animation Java WAP games entertainment netscape Friday, 25 September 2009
  3. 3. a few animation tools... Friday, 25 September 2009
  4. 4. the script change is constant the spec Friday, 25 September 2009
  5. 5. storyboards style flow layout Friday, 25 September 2009
  6. 6. models + layouts structure behaviour style style Friday, 25 September 2009
  7. 7. *now more often referred to as timelines dope sheets* flow resource management state Friday, 25 September 2009
  8. 8. pencil tests structure behaviour layout Friday, 25 September 2009
  9. 9. animatics provide visibility of project as a whole but not finished complete Friday, 25 September 2009
  10. 10. and now some interactive tools... Friday, 25 September 2009
  11. 11. Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img wireframes Friday, 25 September 2009
  12. 12. and...? Friday, 25 September 2009
  13. 13. wireframes...or my journey playing cognitive connect the dots on a road through hell + prototypes, but we’ll get to them later. Friday, 25 September 2009
  14. 14. ...are layouts for UI without any graphics used to evaluate the positioning of elements on screen. “ layout visual design? wireframes Friday, 25 September 2009
  15. 15. “...are a visual map that outlines the layout and function of elements that helps define how pages appear and behave layout + behaviour legacy... interaction design? visual design? wireframes Friday, 25 September 2009
  16. 16. “...suggest a basic visual structure, and illustrate clearly defined flows through an application. layout + behaviour + flow flow? wireframes Friday, 25 September 2009
  17. 17. layout, behaviour and flow... are they really fit for purpose? wireframes Friday, 25 September 2009
  18. 18. A B let’s just deal with the problem of flow... Friday, 25 September 2009
  19. 19. Project is approved! G. would like wireframes for devs in NYC asap! Have a great weekend! Cheers! “ From: client xyz Friday, 25 September 2009
  20. 20. photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select and what happens next? Friday, 25 September 2009
  21. 21. imagination interpretation the ability to see things that are not there... the ability to fill in the gaps that imagination leaves behind Friday, 25 September 2009
  22. 22. Friday, 25 September 2009
  23. 23. Friday, 25 September 2009
  24. 24. Friday, 25 September 2009
  25. 25. Friday, 25 September 2009
  26. 26. Friday, 25 September 2009
  27. 27. lawn chair? Friday, 25 September 2009
  28. 28. Is this the lawn chair you had in mind? Friday, 25 September 2009
  29. 29. ...how did I get here? Options Back preview image My Photo Sharing App Previous Next Friday, 25 September 2009
  30. 30. layout, behaviour and flow - really? Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Version 1.0 Friday, 25 September 2009
  31. 31. lacking detail, requires too much cerebral gymnastics. pls review - kthxbai. “ From: client xyz Friday, 25 September 2009
  32. 32. Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Version 1.0 we return to our wireframes, Friday, 25 September 2009
  33. 33. Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img and begin to fill in the gaps... Version 2.0 Friday, 25 September 2009
  34. 34. Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img ...adding descriptions to clarify things. Upon entering this screen the user is presented with a list of photo albums from which to choose from. Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen... After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected. It rubs the lotion on it’s skin or else it gets the hose again. Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select. Using the left and right navi-pad or joystick controls the user can select a preview image... Version 2.5 Friday, 25 September 2009
  35. 35. gr8, but x is gone now, and we need to add y to align with the vertical asap! kthxbai “ From: client xyz Friday, 25 September 2009
  36. 36. Options pr My Phot Previous photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img Upon entering this screen the user is presented with a list of photo albums from which to choose from. Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen... After pressin (or fire butto presented w the image th selected. It rubs the lo else it gets th Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select. Using the left and right navi-pad or joystick controls the user can select a preview image... Version 3.25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex... lor sit amet, pisicing elit, sed por incididunt re magna m veniam, quis tion ullamco quip ex... See 5.1.3.5a Options BackView ...and deal with a little change. what size? animated? See 8.2.14.f remove! Friday, 25 September 2009
  37. 37. G. says LDN, SFO and NYC docs are different, need standards - UML? kthxbai “ From: client xyz Friday, 25 September 2009
  38. 38. Options pr My Phot Previous photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img Upon entering this screen the user is presented with a list of photo albums from which to choose from. Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen... After pressin (or fire butto presented w the image th selected. It puts the lo Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select. Using the left and right navi-pad or joystick controls the user can select a preview image... Version 4.731a Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex... lor sit amet, pisicing elit, sed por incididunt re magna m veniam, quis tion ullamco quip ex... See 5.1.3.5a Options BackView On state Off state Dim state Dim Off Bright Bright Bright Dim Off Dim Off On state Off state Dim state Dim Off Bright Bright Bright Dim Off Dim Off adopt a standard? Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007 Friday, 25 September 2009
  39. 39. On state Off state Dim state Dim Off Bright Bright Bright Dim Off Dim Off standards require literacy state diagram for a lightbulb Friday, 25 September 2009
  40. 40. document management != design literary reference wireframes Friday, 25 September 2009
  41. 41. the challenges of wireframes imagination and interpretation lack of visibility of project as a whole entropy and confusion sets in quickly change can be extremely costly literacy and understanding document management design stops lack of feedback never updated fewer people involved design resource? regressions no options Friday, 25 September 2009
  42. 42. wireframes too complex, dev team say no @!#*% UML - suggest prototype... kthxbai! “ From: client xyz Friday, 25 September 2009
  43. 43. prototypes...a word that communicates everything and nothing... Friday, 25 September 2009
  44. 44. Python Flash HTML C design != development design development Java ObjC paper easy quick Friday, 25 September 2009
  45. 45. paper is lovely, but very limited... especially for mobile requires interpretationdifficult to share still quite abstract Friday, 25 September 2009
  46. 46. Python Flash HTML C paper warning: some assembly required* design development existing tools* Java ObjC Friday, 25 September 2009
  47. 47. Python Flash HTML C but maybe, sometimes... Java ObjC especially for web projects Friday, 25 September 2009
  48. 48. need proto for mktg wk8, G. hates x, red + lemurs - suggest u rethink - kthxbai. “ From: client xyz Friday, 25 September 2009
  49. 49. the challenges of prototypes being hijacked by development lack of development resources risk of development happening in design finding the right level of abstraction no iterations due to investments in code longer to create less exploration dev problems solved first technology constrained fewer options incorrect solutions time consuming Friday, 25 September 2009
  50. 50. Java Python Flash HTML C perhaps? models? design development paper ObjC Friday, 25 September 2009
  51. 51. mybad, forgot - G. is all about the agile now; sprints + iterations kthxbai. :) “ From: client xyz Friday, 25 September 2009
  52. 52. A BA.5 an iteration creating options ...iterations are an opportunity for design Friday, 25 September 2009
  53. 53. ...and to explore new ideas! A.1 A.2 A.3 A.3b A.2a A.2b A.5 C A B A.3a A.4 A.2c E A.4a E.1a E.1b B.1 B.2 lots of iterations explore ideas test ideas incorporate feedback best options discarded ideas experiment “a straight line may be the shortest distance between two points, but is by no means the most interesting...” Doctor Who Friday, 25 September 2009
  54. 54. “so, if not wireframes...” just Friday, 25 September 2009
  55. 55. “or prototypes...” a small number of ageing Friday, 25 September 2009
  56. 56. “...what are we left with?” Friday, 25 September 2009
  57. 57. A question? nagging Friday, 25 September 2009
  58. 58. “what’s the software equivalent of the cutting room floor?” lots of iterations visibility of project as a whole Friday, 25 September 2009
  59. 59. design illustration animation theatre large projects, constant change and coordination required Aha! A sense of déjà vu... how cliche Friday, 25 September 2009
  60. 60. many opportunities for iteration... or design Friday, 25 September 2009
  61. 61. and visibility of the project as a whole but not finishedcomplete Friday, 25 September 2009
  62. 62. “...so, you’re making animatics?” Friday, 25 September 2009
  63. 63. not quite, applications aren’t linear... states views events Friday, 25 September 2009
  64. 64. think disposable data models please, do not panic... disposable models Friday, 25 September 2009
  65. 65. Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img define layout using views... scenes <view id="a" /> <view id="b" /> <view id="c" /> only one view at a time Friday, 25 September 2009
  66. 66. <view id="a" /> <view id="b" /> <view id="c" /> Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img show changes using states... shots <state id="a" /> <state id="b" /> but may have many states Friday, 25 September 2009
  67. 67. <view id="a" /> <view id="b" /> <view id="c" /> <state id="a" /> <state id="b" /> ...and flow using events. actions Options Back preview image My Photo Sharing App Previous Next photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select Options Back photo album 2 photo album 3 preview image My Photo Sharing App View photo album 1 img img img img img <event ... /> <event ... /> <event ... /> an many events! Friday, 25 September 2009
  68. 68. photo album 1 Options Back photo album 2 photo album 3 preview image My Photo Sharing App photo album 4 Select <view id="other" src="other_view.png"> </view> <event key="rsk" action="exit()" /> <event key="down" view="list_item4" /> <event key="fire" view="preview_1" /> no code required, or reused </view> <view id="main" src="main_view.png"> XML is technology agnostic <state id="a" /> </state> Friday, 25 September 2009
  69. 69. this is really just... Friday, 25 September 2009
  70. 70. a visual dataset... storyboard pages states Friday, 25 September 2009
  71. 71. edited together as xml... or edit decision list integrate and iterate visual design early! main_view.png </view> <view id="main" src="main_view.png"> Friday, 25 September 2009
  72. 72. ...viewed in a Mobile Processing sketch state machine Friday, 25 September 2009
  73. 73. provides visibility of project as a whole states views events Friday, 25 September 2009
  74. 74. 2 days to make modelling app one time cost Friday, 25 September 2009
  75. 75. ~1 model < 1 day very cost effective Friday, 25 September 2009
  76. 76. observationsafter using it on active projects for six months... Friday, 25 September 2009
  77. 77. 120 1 2 3 4 5 6 7 8 9 10 11 60 0 5 10 15 20 25 30 35 40 45 50 55 Weeks Prototypes very out of date lots of iteration 60+ models 1 prototype design iterations Friday, 25 September 2009
  78. 78. 120 1 2 3 4 5 6 7 8 9 10 11 100 0 10 20 30 40 50 60 70 80 90 Weeks Pages 50 pages unfinished and untested tested and complete 100+ pages of docs documentation required Friday, 25 September 2009
  79. 79. 240 2 4 6 8 10 12 14 16 18 20 22 6 0 1 2 3 4 5 Weeks Effort 2 designers 2 designers 1 flash developer 9 weeks 6+ months resources required Friday, 25 September 2009
  80. 80. “...insights gained from models are fed back into clearer wireframes.” less documentation Friday, 25 September 2009
  81. 81. happy accident “...marked increase in user testing along with the quality of the feedback.” on interaction and visual design Friday, 25 September 2009
  82. 82. actual client feedback + “Never have I seen a paragraph of text turned into something tangible more quickly! I owe you both a beer.” we have yet to collect that beer... Friday, 25 September 2009
  83. 83. conclusionsafter walking a few companies through this tool / process Friday, 25 September 2009
  84. 84. we are all toolmakers Friday, 25 September 2009
  85. 85. http://www.flickr.com/photos/janosgaborvarga/648413173 necessity really is the mother of invention stamping lever to replace noisy hammer can now work late without disturbing the neighbours! Friday, 25 September 2009
  86. 86. http://www.flickr.com/photos/janosgaborvarga/593572161 make simple tools to solve your problems real, actual problems Friday, 25 September 2009
  87. 87. http://www.flickr.com/photos/janosgaborvarga/928079337 slowly refine your tools over time Friday, 25 September 2009
  88. 88. what is that? Friday, 25 September 2009
  89. 89. thank you bryan rieger <bryan@yiibu.com> Friday, 25 September 2009

×