SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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.
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
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
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
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
wireframes visual design? “ ...are
layouts for UI without any graphics used to evaluate the positioning of elements on screen. layout Friday, 25 September 2009
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
wireframes “ ...suggest a basic
visual structure, and illustrate clearly defined flows through an application. flow? layout + behaviour + flow Friday, 25 September 2009
From: client xyz “ Project
is approved! G. would like wireframes for devs in NYC asap! Have a great weekend! Cheers! Friday, 25 September 2009
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
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
From: client xyz “ lacking
detail, requires too much cerebral gymnastics. pls review - kthxbai. Friday, 25 September 2009
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
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
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
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
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
From: client xyz “ G.
says LDN, SFO and NYC docs are different, need standards - UML? kthxbai Friday, 25 September 2009
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
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
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
From: client xyz “ wireframes
too complex, dev team say no @!#*% UML - suggest prototype... kthxbai! Friday, 25 September 2009
From: client xyz “ need
proto for mktg wk8, G. hates x, red + lemurs - suggest u rethink - kthxbai. Friday, 25 September 2009
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
From: client xyz “ mybad,
forgot - G. is all about the agile now; sprints + iterations kthxbai. :) Friday, 25 September 2009
A A.5 B an iteration
creating options ...iterations are an opportunity for design Friday, 25 September 2009
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
visibility of project as a
whole lots of iterations “what’s the software equivalent of the cutting room floor?” Friday, 25 September 2009
how cliche theatre design illustration
animation large projects, constant change and coordination required Aha! A sense of déjà vu... Friday, 25 September 2009
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
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
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
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
happy accident “...marked increase in
user testing along with the quality of the feedback.” on interaction and visual design Friday, 25 September 2009
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
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