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

<ul><li> 1. HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 20111Twitter: @rvasaBlog: http://rvasa.blogspot.comLecture 06Sketching Apps</li></ul><p> 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 &amp;Scenarios (Value &amp;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 &amp;Scenarios (Value &amp;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 &amp;Scenarios (Value &amp;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 &amp;Scenarios (Value &amp;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 &amp;Scenarios (Value &amp;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 &amp;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 &amp;Scenarios (Value &amp;Metaphor)Metaphor)Tasks &amp; Modes ofTasks &amp; Modes ofOperationOperationScenarios generate taskscripts (and modes ofoperation)Prototyping explores these taskscripts and modes of operation 40. R. Vasa, 20114Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 41. R. Vasa, 20114Prototyping Vs SketchingEvocativeSketchPrototypeLearnSuggestDescribeExploreQuestionProposeProvokeTentativeNon-CommittalRefineAnswerTestResolveSpecificDepictionAdapted from Sketching User Experiences, BillBuxton 2007. 42. R. Vasa, 20114Prototyping Vs SketchingRefineTestEvocativeSketchPrototypeLearnSuggestDescribeExploreQuestionProposeProvokeTentativeNon-CommittalAnswerResolveSpecificDepictionThe differencebetween a sketchand a prototype isnot absolute --rather think of it asa continuumThe differencebetween a sketchand a prototype isnot absolute --rather think of it asa continuum 43. R. Vasa, 20114Sketch Vs Paper PrototypeWe use paper prototypes to walk-throughan app. with the userSketch is used primarily to explore ideas andconceptsSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngIncreasing Design Clarity 44. R. Vasa, 20114Sketches and Prototypes causechangeScenarios (Value &amp;Scenarios (Value &amp;Metaphor)Metaphor)Tasks &amp; Modes ofTasks &amp; Modes ofOperationOperationExploration often changes thescenario and our understandingof the problemMotivation (Idea orMotivation (Idea orProblem)Problem) 45. R. Vasa, 20114Sketching Mobile Apps.Material to use (Ideal):Sketch pad (white paper)Standard Pencils (for outlines)(Optional) Colour Pencils (for depth)How far should we sketch?All screens in the app. should be fullysketched out (as intended)Key interaction concepts should behighlighted -- modes should be clear 46. R. Vasa, 20114Paper Prototyping MobileApps.Material to use (Ideal):Post-It NotesStandard PencilsEach scenario should be prototypedindependentlyUser should be able to walk through all taskswithin a scenarioEvaluate paper prototype with userfeedback to improve flow and structure 47. R. Vasa, 20114Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 48. R. Vasa, 20114Sketching / Paper PrototypeExampleConcept:Planters App. -- An information app. to helphobby gardeners select appropriate plantsbased on season.It answers the question:What should I plant now? 49. R. Vasa, 20114Planters - Example SketchesThese are very rough approximations 50. R. Vasa, 20115Planters - Example SketchAnnotations are needed to guide exploration/decisions 51. R. Vasa, 20115Planters - Example SketchEach screen should have one sketch -- to explore concepts 52. R. Vasa, 20115Planters Example - PaperPrototypingPresented as a walk through onthe board in lecture 53. R. Vasa, 20115Lecture OverviewShort Recap (previous weeks)Elements of DesignExamples of Sketches and PrototypesSketches Vs PrototypesSketching - An ExampleLearning by Example 54. R. Vasa, 20115On LearningWhat I hear, I forget.What I say, I remember.What I do, I understand.- Lao Tse 55. R. Vasa, 20115Short Exercise - SketchingMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &amp;Scenarios (Value &amp;Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlShow user sun rise/settimesShow user sun rise/settimesDevelop asketch for thisscenario &amp;constraintsConstraints: No network access, No GPS lockMary 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. 56. R. Vasa, 20115Short Exercise - PaperPrototypeMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &amp;Scenarios (Value &amp;Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlShow user sun rise/settimesShow user sun rise/settimesDevelop a paperprototypeshowing the fullflowConstraints: No network access, No GPS lockMary 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. 57. R. Vasa, 20115Short Exercise - PaperPrototypingMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &amp;Scenarios (Value &amp;Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlShow user sun rise/settimesShow user sun rise/settimesA hobby photograph...</p>