hit3328 - chapter0602 - sketching apps
DESCRIPTION
TRANSCRIPT
HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011
1
Twitter: @rvasa Blog: http://rvasa.blogspot.com
Lecture 06Sketching Apps
R. Vasa, 20112
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example
R. Vasa, 20113
Only One Activity is Active/Running•Only one Activity can
be in the ‘foreground’
•When Activity-A calls Activity-B
• Activity-B will be visible to the user (foreground)
• Activity-A is paused (background)
R. Vasa, 20114
Activities are Stacked in Android•As additional activities are created, older
activities go into background
•All activities are placed on Activity Stack
Activity-AActivity-A
Activity-BActivity-B
Activity-CActivity-CForeground/Active
creates
creates
Background/Paused
R. Vasa, 20115
Life-Cycle Demo
onCreate, onStart, onResume etc. are from the
Activity class
R. Vasa, 20116
Passing Data with Globals
•All Activities have a parent Application object
•We can store data in this Application object
Activity-AActivity-A
Activity-CActivity-C
Activity-BActivity-B
ApplicatiApplicationon Activities have
a parent application
We need to extend the
Application class to do this
R. Vasa, 20117
Sending an Async. Message
Android uses an asynchronous messaging model (known as Intents) to send messages
between Activities
Android uses an asynchronous messaging model (known as Intents) to send messages
between Activities
R. Vasa, 20118
Label Layout (Usability Research)
Labels above Input Field
Right-Aligned Labels
Left-Aligned Labels
Recommended method for phones
R. Vasa, 20119
Using Read-Tap Asymmetry
Labels set to 24sp Labels set to 14sp
In Forms, we can reduce label text size, while keeping input field size
at unchanged
In Forms, we can reduce label text size, while keeping input field size
at unchanged
R. Vasa, 201110
Using Simple Styles
<TextView android:text="First Name:" android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
R. Vasa, 201111
Scrolling Views
•Can make any Layout (View Group) scroll by encapsulating it inside a ScrollView
android:scroll.... properties offer fine-grained control (e.g. control the delay
before scroll bars fade out)
android:scroll.... properties offer fine-grained control (e.g. control the delay
before scroll bars fade out)
R. Vasa, 201112
IME can be customised to improve UX
Default
Customised to show
Next
Customised to show
Next
Useful Factoid: TAB key is not provided by default
Useful Factoid: TAB key is not provided by default
R. Vasa, 201113
The Parcel Protocol
•Sadly, there is a bit of messy code that makes all of this work.
R. Vasa, 201114
Parcel Protocol (more details)...
This constant has to be created and named CREATOR
This constant has to be created and named CREATOR
R. Vasa, 201115
Private Constructor that we have to write
Private Constructor that we have to write
Parcel Protocol (more details)...
R. Vasa, 201116
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example
R. Vasa, 201117
A classification for mobile apps.•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, 201118
Elements of Designing
Motivation (Idea or Problem)Motivation (Idea or Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks / Modes of OperationTasks / Modes of Operation
Display and ControlDisplay and Control
Problem Space
Solution Space
This is related to application design, not algorithm design
R. Vasa, 201119
Elements of Design (Example)
Motivation (Idea or Motivation (Idea or Problem)Problem)
Problem Space
Solution Space
Show user sun rise/set times
Show user sun rise/set times
Problem: Photographers like to take sun-rise and sun-set pictures, but this information is not easily
available.
R. Vasa, 201120
Elements of Design (Example)
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Problem Space Show user sun rise/set times
Show user sun rise/set times
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
R. Vasa, 201121
Elements of Design (Example)
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Problem Space Show user sun rise/set times
Show user sun rise/set times
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
Adds value to a photographerMetaphor - light meter
that can tell me about the future
Metaphors are not always needed, but help communicate
Concrete scenarios work better than fuzzy
ones
R. Vasa, 201122
Example of a better scenario
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Mary is a hobby photographer on holidays in Darwin. Mary watches the sun-set as she is winding up her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ 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 her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ App. while walking back to her car.
Scenario now has more detail -- it sets context much better
Constraints: No network access, No GPS lock
The app. should be usable while walking as per this
scenario
The app. should be usable while walking as per this
scenario
R. Vasa, 201123
What should a scenario contain?•A scenario should describe the user
experience (UX) in terms of outcomes
•A scenario should use real names to make it more concrete
•A scenario should aim to set the context -- specifically, the location when/how app. will be used.
•Scenarios are NOT use cases -- they should not describe the “how” in a lot of detail.
Aim to describe ‘Outcome’, not ‘How it will be achieved’
Aim to describe ‘Outcome’, not ‘How it will be achieved’
R. Vasa, 201124
Elements of Design (Example)
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks and Modes of Tasks and Modes of OperationOperation
Display and ControlDisplay and Control
Problem Space
Solution Space
Show user sun rise/set times
Show user sun rise/set times
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
Need sketches & prototypes to define/refine
these
R. Vasa, 201125
Design and Constrains
•Why?
• It reduces solution options (in a good way)
• Offer a yard-stick to measure
• Designing becomes a scoped optimisation problem (rather than unbounded wandering)
R. Vasa, 201126
Constraints (Example)
•Sun Rise / Sun Set Calculator
• Must work without network connectivity
• Can use GPS, but must work on phones without GPS capabilities
Constraints inform user experience designConstraints inform user experience design
R. Vasa, 201127
Constraints (Example) - Implications• Sun Rise / Sun Set Calculator
• Must work without network connectivity
• Can use GPS, but must work on phones without GPS capabilities
- Computation must be done on the phone (quickly)- Must allow user to provide/change location information- Must work without Google Maps (cannot assume net. access)- Must be usable, when user is walking
- Computation must be done on the phone (quickly)- Must allow user to provide/change location information- Must work without Google Maps (cannot assume net. access)- Must be usable, when user is walking
ImplicationsImplications
Not all constraints may be known at the start of the design process -- they are often discovered
over time
R. Vasa, 201128
Need Constraints before sketching...•Solution design = scoped optimisation
•Given a set of constraints, we can sketch various possibilities
•Once this steps is done, we identify the most promising one(s) for prototyping
SketchinSketchingg
MotivatioMotivationn
ScenarioScenarioss
ConstrainConstraintsts
PrototypiPrototypingng
R. Vasa, 201129
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example
R. Vasa, 201130
Sketching Vs Prototyping
•Sketches offer quick exploration
• Help us arrive at a small set of viable options
• Prototypes allow us to explore some constraints better (e.g. small display size)
• We can evaluate prototypes (easier than sketch)
• Two types of prototypes:
•Paper prototypes (Mostly Static)
•Working prototypes (Dynamic)
SketchinSketchingg
PrototypiPrototypingng
R. Vasa, 201131
Sketches are tools of communication
Source: http://www.agilemodeling.com
R. Vasa, 201132
Sketches help explore flow
Source: http://inspirationfeed.com
R. Vasa, 201133
Sketching Mobile Apps. (Example)
Harvest iPhone App.
Source: Flickr - Anthony Armendariz (Copyright)
R. Vasa, 201134
Sketching can be rich and colourful
iPad Radio App.
Source: Flickr - Pixelhalunke (Copyright)
R. Vasa, 201135
Detailed Sketches are ideal...
iPad Radio App.
Source: Flickr - Pixelhalunke (Copyright)
R. Vasa, 201136
Explore concepts with sketches
Source: Flickr - thegreatsunra (Copyright)
R. Vasa, 201137
Paper Prototypes permit walk-thoughts
R. Vasa, 201138
Paper Prototypes provide detail
Source: http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden
-forms-ink-brush/
R. Vasa, 201139
Paper Prototype is more than a sketch•We prototype the complete flow for each
and every task -- but we only sketch concepts
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks & Modes of Tasks & Modes of OperationOperation
Scenarios generate task scripts (and modes of
operation)
Prototyping explores these task scripts and modes of operation
R. Vasa, 201140
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example
R. Vasa, 201141
Prototyping Vs Sketching
Evocative
Sketch
Prototype
LearnSuggest
Describe
ExploreQuestionProposeProvoke
TentativeNon-Committal
RefineAnswer
TestResolveSpecificDepictionAdapted from “Sketching User Experiences”, Bill
Buxton 2007.
R. Vasa, 201142
Prototyping Vs Sketching
Refine
Test
Evocative
Sketch
PrototypeLearn
SuggestDescri
beExplore
QuestionProposeProvoke
TentativeNon-Committal
Answer
ResolveSpecificDepiction
The difference between a sketch and a prototype is
not absolute -- rather think of it as
a continuum
The difference between a sketch and a prototype is
not absolute -- rather think of it as
a continuum
R. Vasa, 201143
Sketch Vs Paper Prototype
•We use paper prototypes to walk-through an app. with the user
• Sketch is used primarily to explore ideas and concepts
SketchinSketchingg
MotivatioMotivationn
ScenarioScenarioss
ConstrainConstraintsts
PrototypiPrototypingng
Increasing Design Clarity
R. Vasa, 201144
Sketches and Prototypes cause change
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks & Modes of Tasks & Modes of OperationOperation
Exploration often changes the scenario and our understanding
of the problem
Motivation (Idea or Motivation (Idea or Problem)Problem)
R. Vasa, 201145
Sketching 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 fully sketched out (as intended)
• Key interaction concepts should be highlighted -- modes should be clear
R. Vasa, 201146
Paper Prototyping Mobile Apps.•Material to use (Ideal):
• Post-It Notes
• Standard Pencils
•Each scenario should be prototyped independently
• User should be able to walk through all tasks within a scenario
•Evaluate paper prototype with user feedback to improve flow and structure
R. Vasa, 201147
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example
R. Vasa, 201148
Sketching / Paper Prototype Example•Concept:
• Planters App. -- An information app. to help hobby gardeners select appropriate plants based on season.
• It answers the question:
•“What should I plant now?”
R. Vasa, 201149
Planters - Example Sketches
These are very rough approximations
R. Vasa, 201150
Planters - Example Sketch
Annotations are needed to guide exploration/decisions
R. Vasa, 201151
Planters - Example Sketch
Each screen should have one sketch -- to explore concepts
R. Vasa, 201152
Planters Example - Paper Prototyping
Presented as a walk through on the board in lecture
R. Vasa, 201153
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example
R. Vasa, 201154
On Learning
What I hear, I forget.What I say, I remember.
What I do, I understand.
- Lao Tse
R. Vasa, 201155
Short Exercise - Sketching
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks and Modes of Tasks and Modes of OperationOperation
Display and ControlDisplay and Control
Show user sun rise/set times
Show user sun rise/set times
Develop a sketch for this
scenario & constraints
Constraints: No network access, No GPS lock
Mary is a hobby photographer on holidays in Darwin. Mary watches the sun-set as she is winding up her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ 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 her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ App. while walking back to her car.
R. Vasa, 201156
Short Exercise - Paper Prototype
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks and Modes of Tasks and Modes of OperationOperation
Display and ControlDisplay and Control
Show user sun rise/set times
Show user sun rise/set times
Develop a paper prototype
showing the full flow
Constraints: No network access, No GPS lock
Mary is a hobby photographer on holidays in Darwin. Mary watches the sun-set as she is winding up her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ 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 her
bush walk. She wants to take pictures of the sun-rise the next morning and gets the details using the ‘Sun
Time’ App. while walking back to her car.
R. Vasa, 201157
Short Exercise - Paper Prototyping
Motivation (Idea or Motivation (Idea or Problem)Problem)
Scenarios (Value & Scenarios (Value & Metaphor)Metaphor)
Tasks and Modes of Tasks and Modes of OperationOperation
Display and ControlDisplay and Control
Show user sun rise/set times
Show user sun rise/set times
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
A hobby photographer is on holidays in Darwin.
She wants to take pictures of the sun-rise
Develop a full paper prototype indicating the full flow to complete
this scenario
R. Vasa, 201158
Lecture Summary
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
• Learning by Example