The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from lowend feature phone to highdefinition tablet. Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobilespecific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hardtoidentifybuteverchanging mobile context.
Modelling Mobile the 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 design illustration animation research and design from Toronto, Canada, eh! motion graphics 1991 20092000 theatre design multimedia mobile development design web theatre 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 a few animation tools Friday, 25 September 2009 the script change is constant the spec Friday, 25 September 2009 storyboards style flow layout Friday, 25 September 2009 models + layouts structure behaviour style style Friday, 25 September 2009 *now more often referred to as timelines dope sheets* flow resource management state Friday, 25 September 2009 pencil tests structure behaviour layout Friday, 25 September 2009 animatics provide visibility of project as a whole but not finished complete Friday, 25 September 2009 and now some interactive tools Friday, 25 September 2009 [...]... Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen Using the left... selected m veniam, quis tion ullamco quip ex Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Using the left and right navi-pad or joystick controls the user can select a preview image It rubs the lo else it gets th Version 3.25 .and deal with a little... entering this screen the user is presented with a list of photo albums from which to choose from Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select After pressin (or fire butto presented w the image th selected... 25 September 2009 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 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... screen Using the left and right navi-pad or joystick controls the user can select a preview image It rubs the lotion on it’s skin or else it gets the hose again Version 2.5 .adding descriptions to clarify things Friday, 25 September 2009 “ 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 See 8.2.14.f Options View Back My... 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... 2.0 and begin to fill in the gaps Friday, 25 September 2009 My Photo Sharing App My Photo Sharing App preview image My Photo Sharing App preview image preview image photo album 1 photo album 1 img photo album 2 img photo album 3 img img photo album 2 photo album 4 img photo album 3 Options Select Back Options Previous View Back Options Next Back Upon entering this screen the user is presented with a... and illustrate clearly defined flows through an application flow? layout + behaviour + flow Friday, 25 September 2009 wireframes layout, behaviour and flow are they really fit for purpose? Friday, 25 September 2009 A B let’s just deal with the problem of flow Friday, 25 September 2009 “ Friday, 25 September 2009 From: client xyz Project is approved! G would like wireframes for devs in NYC asap! Have