Modelling
                                                 User Mobile
                                                   ...
last millennium                                               since then...
                 theatre
    design           ...
a few animation tools...




Friday, 25 September 2009
change
                                         is constant

                             the spec




                   ...
style




                                    layout
                                                       flow




     ...
behaviour




                                                style




                                                  ...
flow




            resource
           management


                                                                    ...
layout




                                                          structure
                               behaviour


...
but not finished
                   complete




                              provide visibility of project as a whole


...
and now some interactive tools...




Friday, 25 September 2009
My Photo Sharing App              My Photo Sharing App                 My Photo Sharing App


                            ...
and...?




Friday, 25 September 2009
wireframes...
        or my journey playing cognitive connect the dots on a road through hell




                        ...
wireframes
                                  visual design?


                “           ...are layouts for UI without an...
wireframes
                                        visual design?


                “            ...are a visual map that ...
wireframes


                “           ...suggest a basic visual structure,
                            and illustrate c...
wireframes
                            layout, behaviour and flow...
                                are they really fit f...
A                      B




              let’s just deal with the problem of flow...
Friday, 25 September 2009
From: client xyz


                “           Project is approved! G. would like
                            wireframes f...
My Photo Sharing App


                                         preview image




                             photo album...
imagination               interpretation
  the ability to see        the ability to fill in the
  things that are not     ...
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
lawn chair?
Friday, 25 September 2009
Is this the lawn chair you had in mind?
Friday, 25 September 2009
My Photo Sharing App




                                                        preview image




                       ...
My Photo Sharing App               My Photo Sharing App


                                        preview image



       ...
From: client xyz


                “           lacking detail, requires too much
                            cerebral gymn...
My Photo Sharing App               My Photo Sharing App


                                         preview image



      ...
My Photo Sharing App              My Photo Sharing App                 My Photo Sharing App


                            ...
My Photo Sharing App                My Photo Sharing App                 My Photo Sharing App


                          ...
From: client xyz


                “           gr8, but x is gone now, and we
                            need to add y to...
See 8.2.14.f                  Options          View         Back




                          My Photo Sharing App       ...
From: client xyz


                “           G. says LDN, SFO and NYC docs
                            are different, ne...
Options         View          Back




                          My Photo Sharing App                                     ...
Bright



                                                        On
                                                     ...
wireframes

                            literary reference




                      document management != design
Friday,...
the challenges of wireframes

                                                      imagination and
                      ...
From: client xyz


                “           wireframes too complex,
                            dev team say no @!#*% U...
prototypes...
                            a word that communicates everything and nothing...




Friday, 25 September 2009
C
                                                                         ObjC
                                          ...
difficult to share                 requires interpretation




                                        still quite abstrac...
existing tools*                                  C
                                                                       ...
C
                                                                      ObjC
                                             ...
From: client xyz


                “           need proto for mktg wk8, G.
                            hates x, red + lemu...
the challenges of prototypes

                                             lack of development
                           ...
C
                       models?                                      ObjC
                                               ...
From: client xyz


                “           mybad, forgot - G. is all about
                            the agile now; ...
A       A.5               B




                                an iteration



                                          ...
incorporate
                                                        A.2b            feedback                              ...
just

                     “so, if not wireframes...”




Friday, 25 September 2009
a small number of ageing
                               “or prototypes...”




Friday, 25 September 2009
“...what are we left with?”




Friday, 25 September 2009
nagging

                            A question?




Friday, 25 September 2009
visibility of project
                                as a whole




           lots of
         iterations




          ...
how cliche



                                   theatre
                               design
                           ...
or design
                            many opportunities for iteration...
Friday, 25 September 2009
complete            but not finished




                  and visibility of the project as a whole
Friday, 25 September 2...
“...so, you’re making animatics?”
Friday, 25 September 2009
views




                                                states




                                                event...
models


                                                            disposable




                                      ...
My Photo Sharing App               My Photo Sharing App                  My Photo Sharing App


                          ...
My Photo Sharing App               My Photo Sharing App                  My Photo Sharing App


                          ...
My Photo Sharing App               My Photo Sharing App                    My Photo Sharing App


                        ...
XML is technology agnostic

                        My Photo Sharing App            <view id="main" src="main_view.png">

...
this is really just...
Friday, 25 September 2009
storyboard
                                                   pages
                            a visual dataset...   stat...
<view id="main" src="main_view.png">

                                            </view>




                            ...
state machine
            ...viewed in a Mobile Processing sketch
Friday, 25 September 2009
views




                                              states




                                              events


...
2 days to make modelling app
     one time cost




Friday, 25 September 2009
~1 model < 1 day
                                very cost effective




Friday, 25 September 2009
observations
                            after using it on active projects for six months...




Friday, 25 September 2009
60
                                                        60+ models
                         55

                       ...
unfinished and untested
                                                                  100+ pages of docs
             ...
6




                          5




                          4
                                                        ...
“...insights gained from
                        models are fed back into
                          clearer wireframes.”
 ...
happy accident

                   “...marked increase in user
                       testing along with the
             ...
actual client feedback +

    “Never have I seen a paragraph
     of text turned into something
         tangible more qui...
conclusions
                      after walking a few companies through this tool / process




Friday, 25 September 2009
we are all toolmakers
Friday, 25 September 2009
stamping lever to
    replace noisy hammer
                                                                               ...
http://www.flickr.com/photos/janosgaborvarga/593572161




                                                                ...
http://www.flickr.com/photos/janosgaborvarga/928079337




                            slowly refine your tools over time
F...
what is that?




Friday, 25 September 2009
thank you




                            bryan rieger <bryan@yiibu.com>


Friday, 25 September 2009
Upcoming SlideShare
Loading in...5
×

Modeling the Mobile User Experience

30,429

Published on

Presentation by Bryan Rieger of Yiibu on Modeling the Mobile User Experience, presented on June 4th at the Mobile Design UK event at the RSA in London.

Published in: Technology, Business, Design
12 Comments
248 Likes
Statistics
Notes
No Downloads
Views
Total Views
30,429
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
2,368
Comments
12
Likes
248
Embeds 0
No embeds

No notes for slide

Modeling the Mobile User Experience

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

    Clipping is a handy way to collect important slides you want to go back to later.

×