HIT3328 - Chapter0602 - Sketching Apps
Upcoming SlideShare
Loading in...5
×
 

HIT3328 - Chapter0602 - Sketching Apps

on

  • 446 views

 

Statistics

Views

Total Views
446
Views on SlideShare
446
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HIT3328 - Chapter0602 - Sketching Apps HIT3328 - Chapter0602 - Sketching Apps Presentation Transcript

  • HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 20111Twitter: @rvasaBlog: http://rvasa.blogspot.comLecture 06Sketching Apps
  • R. Vasa, 20112Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • R. Vasa, 20113Only One Activity isActive/Running•Only one Activity canbe in the ‘foreground’•When Activity-A callsActivity-B•Activity-B will be visibleto the user(foreground)•Activity-A is paused(background)
  • R. Vasa, 20114Activities are Stacked inAndroid•As additional activities are created, olderactivities go into background•All activities are placed on Activity StackActivity-AActivity-AActivity-BActivity-BActivity-CActivity-CForeground/ActivecreatescreatesBackground/Paused
  • R. Vasa, 20115Life-Cycle DemoonCreate, onStart,onResume etc. are from theActivity class
  • R. Vasa, 20116Passing Data with Globals•All Activities have a parent Applicationobject•We can store data in this Application objectActivity-AActivity-AActivity-CActivity-CActivity-BActivity-BApplicatiApplicationon Activities havea parentapplicationWe need toextend theApplication classto do this
  • 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
  • R. Vasa, 20118Label Layout (UsabilityResearch)Labels above Input FieldRight-Aligned LabelsLeft-Aligned LabelsRecommendedmethod for phones
  • 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
  • R. Vasa, 20111Using Simple Styles<TextViewandroid:text="First Name:"android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView>
  • R. Vasa, 20111Scrolling Views•Can 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)
  • R. Vasa, 20111IME can be customised toimprove UXDefaultCustomisedto showNextCustomisedto showNextUseful Factoid: TAB key is not provided bydefaultUseful Factoid: TAB key is not provided bydefault
  • R. Vasa, 20111The Parcel Protocol•Sadly, there is a bit of messy code thatmakes all of this work.
  • R. Vasa, 20111Parcel Protocol (moredetails)...This constant has to be created and namedCREATORThis constant has to be created and namedCREATOR
  • R. Vasa, 20111Private Constructor that we haveto writePrivate Constructor that we haveto writeParcel Protocol (moredetails)...
  • R. Vasa, 20111Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • 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)
  • 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
  • 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.
  • 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
  • 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
  • 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
  • R. Vasa, 20112What should a scenariocontain?•A scenario should describe the userexperience (UX) in terms of outcomes•A scenario should use real names to make itmore concrete•A 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 beachieved’Aim to describe ‘Outcome’, not ‘How it will beachieved’
  • 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
  • R. Vasa, 20112Design and Constrains•Why?•It reduces solution options (in a good way)•Offer a yard-stick to measure•Designing becomes a scoped optimisationproblem (rather than unbounded wandering)
  • R. Vasa, 20112Constraints (Example)•Sun Rise / Sun Set Calculator•Must work without network connectivity•Can use GPS, but must work on phoneswithout GPS capabilitiesConstraints inform user experience designConstraints inform user experience design
  • 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
  • R. Vasa, 20112Need Constraints beforesketching...•Solution design = scoped optimisation•Given a set of constraints, we can sketchvarious possibilities•Once this steps is done, we identify themost promising one(s) for prototypingSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingng
  • R. Vasa, 20112Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • R. Vasa, 20113Sketching Vs Prototyping•Sketches offer quick exploration•Help us arrive at a small set of viable options•Prototypes 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
  • R. Vasa, 20113Sketches are tools ofcommunicationSource: http://www.agilemodeling.com
  • R. Vasa, 20113Sketches help explore flowSource:http://inspirationfeed.com
  • R. Vasa, 20113Sketching Mobile Apps.(Example)Harvest iPhone App.Source: Flickr - Anthony Armendariz (Copyright)
  • R. Vasa, 20113Sketching can be rich andcolourfuliPad Radio App.Source: Flickr - Pixelhalunke (Copyright)
  • R. Vasa, 20113Detailed Sketches are ideal...iPad Radio App.Source: Flickr - Pixelhalunke (Copyright)
  • R. Vasa, 20113Explore concepts with sketchesSource: Flickr - thegreatsunra (Copyright)
  • R. Vasa, 20113Paper Prototypes permitwalk-thoughts
  • R. Vasa, 20113Paper Prototypes providedetailSource:http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden-forms-ink-brush/
  • R. Vasa, 20113Paper Prototype is more than asketch•We 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
  • R. Vasa, 20114Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • R. Vasa, 20114Prototyping Vs SketchingEvocativeSketchPrototypeLearnSuggestDescribeExploreQuestionProposeProvokeTentativeNon-CommittalRefineAnswerTestResolveSpecificDepictionAdapted from “Sketching User Experiences”, BillBuxton 2007.
  • 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
  • R. Vasa, 20114Sketch Vs Paper Prototype•We use paper prototypes to walk-throughan app. with the user•Sketch is used primarily to explore ideas andconceptsSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngIncreasing Design Clarity
  • R. Vasa, 20114Sketches and Prototypes causechangeScenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks & Modes ofTasks & Modes ofOperationOperationExploration often changes thescenario and our understandingof the problemMotivation (Idea orMotivation (Idea orProblem)Problem)
  • 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
  • R. Vasa, 20114Paper Prototyping MobileApps.•Material to use (Ideal):•Post-It Notes•Standard Pencils•Each scenario should be prototypedindependently•User should be able to walk through all taskswithin a scenario•Evaluate paper prototype with userfeedback to improve flow and structure
  • R. Vasa, 20114Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • R. Vasa, 20114Sketching / Paper PrototypeExample•Concept:•Planters App. -- An information app. to helphobby gardeners select appropriate plantsbased on season.•It answers the question:•“What should I plant now?”
  • R. Vasa, 20114Planters - Example SketchesThese are very rough approximations
  • R. Vasa, 20115Planters - Example SketchAnnotations are needed to guide exploration/decisions
  • R. Vasa, 20115Planters - Example SketchEach screen should have one sketch -- to explore concepts
  • R. Vasa, 20115Planters Example - PaperPrototypingPresented as a walk through onthe board in lecture
  • R. Vasa, 20115Lecture Overview•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example
  • R. Vasa, 20115On LearningWhat I hear, I forget.What I say, I remember.What I do, I understand.- Lao Tse
  • R. Vasa, 20115Short Exercise - SketchingMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlShow user sun rise/settimesShow user sun rise/settimesDevelop asketch for thisscenario &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.
  • R. Vasa, 20115Short Exercise - PaperPrototypeMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &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.
  • R. Vasa, 20115Short Exercise - PaperPrototypingMotivation (Idea orMotivation (Idea orProblem)Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks and Modes ofTasks and Modes ofOperationOperationDisplay and ControlDisplay and ControlShow 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-riseDevelop a fullpaper prototypeindicating the fullflow to completethis scenario
  • R. Vasa, 20115Lecture Summary•Short Recap (previous weeks)•Elements of Design•Examples of Sketches and Prototypes•Sketches Vs Prototypes•Sketching - An Example•Learning by Example