hit3328 - chapter0602 - sketching apps

Download HIT3328 - Chapter0602 - Sketching Apps

Post on 27-Jan-2015

102 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 20111Twitter: @rvasaBlog: http://rvasa.blogspot.comLecture 06Sketching Apps

2. R. Vasa, 20112Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 3. R. Vasa, 20113Only One Activity isActive/RunningOnly one Activity canbe in the foregroundWhen Activity-A callsActivity-BActivity-B will be visibleto the user(foreground)Activity-A is paused(background) 4. R. Vasa, 20114Activities are Stacked inAndroidAs additional activities are created, olderactivities go into backgroundAll activities are placed on Activity StackActivity-AActivity-AActivity-BActivity-BActivity-CActivity-CForeground/ActivecreatescreatesBackground/Paused 5. R. Vasa, 20115Life-Cycle DemoonCreate, onStart,onResume etc. are from theActivity class 6. R. Vasa, 20116Passing Data with GlobalsAll Activities have a parent ApplicationobjectWe can store data in this Application objectActivity-AActivity-AActivity-CActivity-CActivity-BActivity-BApplicatiApplicationon Activities havea parentapplicationWe need toextend theApplication classto do this 7. R. Vasa, 20117Sending an Async. MessageAndroid uses an asynchronous messagingmodel (known as Intents) to send messagesbetween ActivitiesAndroid uses an asynchronous messagingmodel (known as Intents) to send messagesbetween Activities 8. R. Vasa, 20118Label Layout (UsabilityResearch)Labels above Input FieldRight-Aligned LabelsLeft-Aligned LabelsRecommendedmethod for phones 9. R. Vasa, 20119Using Read-Tap AsymmetryLabels set to 24sp Labels set to 14spIn Forms, we can reduce label textsize, while keeping input field sizeat unchangedIn Forms, we can reduce label textsize, while keeping input field sizeat unchanged 10. R. Vasa, 20111Using Simple Styles 11. R. Vasa, 20111Scrolling ViewsCan make any Layout (View Group) scroll byencapsulating it inside a ScrollViewandroid:scroll.... properties offerfine-grained control (e.g. control the delaybefore scroll bars fade out)android:scroll.... properties offerfine-grained control (e.g. control the delaybefore scroll bars fade out) 12. R. Vasa, 20111IME can be customised toimprove UXDefaultCustomisedto showNextCustomisedto showNextUseful Factoid: TAB key is not provided bydefaultUseful Factoid: TAB key is not provided bydefault 13. R. Vasa, 20111The Parcel ProtocolSadly, there is a bit of messy code thatmakes all of this work. 14. R. Vasa, 20111Parcel Protocol (moredetails)...This constant has to be created and namedCREATORThis constant has to be created and namedCREATOR 15. R. Vasa, 20111Private Constructor that we haveto writePrivate Constructor that we haveto writeParcel Protocol (moredetails)... 16. R. Vasa, 20111Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 17. R. Vasa, 20111A classification for mobileapps.Transactional (banking, purchase)Information (weather, sports, news, RSS)Entertainment (games, movies, music)Search (phone book)Explore (web browsing, shop around)Communicate/Socialise (SMS, Chat, phone)Create/Customise (Photography, Video) 18. R. Vasa, 20111Elements of DesigningMotivation (Idea or Problem)Motivation (Idea or Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks / Modes of OperationTasks / Modes of OperationDisplay and ControlDisplay and ControlProblem SpaceSolution SpaceThis is related to application design, not algorithm design 19. R. Vasa, 20111Elements of Design (Example)Motivation (Idea orMotivation (Idea orProblem)Problem)Problem SpaceSolution SpaceShow user sun rise/settimesShow user sun rise/settimesProblem: Photographers like to take sun-rise andsun-set pictures, but this information is not easilyavailable. 20. R. Vasa, 20112Elements of Design (Example)Motivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Problem Space Show user sun rise/settimesShow user sun rise/settimesA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-riseA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-rise 21. R. Vasa, 20112Elements of Design (Example)Motivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Problem Space Show user sun rise/settimesShow user sun rise/settimesA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-riseA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-riseAdds value to aphotographerMetaphor - light meterthat can tell me about thefutureMetaphors are not always needed, but help communicateConcrete scenarioswork better than fuzzyones 22. R. Vasa, 20112Example of a better scenarioScenarios (Value &Scenarios (Value &Metaphor)Metaphor)Mary is a hobby photographer on holidays in Darwin.Mary watches the sun-set as she is winding up herbush walk. She wants to take pictures of the sun-risethe next morning and gets the details using the SunTime App. while walking back to her car.Mary is a hobby photographer on holidays in Darwin.Mary watches the sun-set as she is winding up herbush walk. She wants to take pictures of the sun-risethe next morning and gets the details using the SunTime App. while walking back to her car.Scenario now hasmore detail -- it setscontext much betterConstraints: No network access, No GPS lockThe app. should be usablewhile walking as per thisscenarioThe app. should be usablewhile walking as per thisscenario 23. R. Vasa, 20112What should a scenariocontain?A scenario should describe the userexperience (UX) in terms of outcomesA scenario should use real names to make itmore concreteA scenario should aim to set the context --specifically, the location when/how app. willbe used.Scenarios are NOT use cases -- they shouldnot describe the how in a lot of detail.Aim to describe Outcome, not How it will beachievedAim to describe Outcome, not How it will beachieved 24. R. Vasa, 20112Elements of Design (Example)Motivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlProblem SpaceSolution SpaceShow user sun rise/settimesShow user sun rise/settimesA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-riseA hobby photographer ison holidays in Darwin.She wants to takepictures of the sun-riseNeed sketches &prototypes todefine/refinethese 25. R. Vasa, 20112Design and ConstrainsWhy?It reduces solution options (in a good way)Offer a yard-stick to measureDesigning becomes a scoped optimisationproblem (rather than unbounded wandering) 26. R. Vasa, 20112Constraints (Example)Sun Rise / Sun Set CalculatorMust work without network connectivityCan use GPS, but must work on phoneswithout GPS capabilitiesConstraints inform user experience designConstraints inform user experience design 27. R. Vasa, 20112Constraints (Example) -Implications Sun Rise / Sun Set Calculator Must work without network connectivity Can use GPS, but must work on phones withoutGPS capabilities- Computation must be done on the phone(quickly)- Must allow user to provide/change locationinformation- Must work without Google Maps (cannotassume net. access)- Must be usable, when user is walking- Computation must be done on the phone(quickly)- Must allow user to provide/change locationinformation- Must work without Google Maps (cannotassume net. access)- Must be usable, when user is walkingImplicationsImplicationsNot all constraints may be known at the start ofthe design process -- they are often discoveredover time 28. R. Vasa, 20112Need Constraints beforesketching...Solution design = scoped optimisationGiven a set of constraints, we can sketchvarious possibilitiesOnce this steps is done, we identify themost promising one(s) for prototypingSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingng 29. R. Vasa, 20112Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 30. R. Vasa, 20113Sketching Vs PrototypingSketches offer quick explorationHelp us arrive at a small set of viable optionsPrototypes allow us to explore someconstraints better (e.g. small display size)We can evaluate prototypes (easier thansketch)Two types of prototypes:Paper prototypes (Mostly Static)Working prototypes (Dynamic)SketchinSketchinggPrototypiPrototypingng 31. R. Vasa, 20113Sketches are tools ofcommunicationSource: http://www.agilemodeling.com 32. R. Vasa, 20113Sketches help explore flowSource:http://inspirationfeed.com 33. R. Vasa, 20113Sketching Mobile Apps.(Example)Harvest iPhone App.Source: Flickr - Anthony Armendariz (Copyright) 34. R. Vasa, 20113Sketching can be rich andcolourfuliPad Radio App.Source: Flickr - Pixelhalunke (Copyright) 35. R. Vasa, 20113Detailed Sketches are ideal...iPad Radio App.Source: Flickr - Pixelhalunke (Copyright) 36. R. Vasa, 20113Explore concepts with sketchesSource: Flickr - thegreatsunra (Copyright) 37. R. Vasa, 20113Paper Prototypes permitwalk-thoughts 38. R. Vasa, 20113Paper Prototypes providedetailSource:http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden-forms-ink-brush/ 39. R. Vasa, 20113Paper Prototype is more than asketchWe prototype the complete flow for eachand every task -- but we only sketchconceptsScenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks & Modes ofTasks & Modes ofOperationOperationScenarios generate taskscripts (and modes ofoperation)Prototyping explores these taskscripts and modes of operation 40. R. Vasa, 20114Lecture OverviewSh