The document provides an overview of a lecture on sketching apps. It discusses elements of design like motivation, scenarios, tasks and modes of operation. It provides examples of sketches and prototypes for mobile apps. Key differences between sketches and prototypes are outlined, with sketches being more tentative and exploratory while prototypes allow for more testing. An example concept for a gardening app is used to demonstrate sketching and paper prototyping techniques. The document emphasizes that sketching and prototyping help evolve the initial design and problem understanding.

1. HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2011
1
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
Lecture 06
Sketching Apps

2. 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

3. 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)

4. 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/Acti
ve
creates
creates
Background/Pause
d

5. R. Vasa, 20115
Life-Cycle Demo
onCreate, onStart,
onResume etc. are from the
Activity class

6. 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
ApplicatiApplicati
onon Activities have
a parent
application
We need to
extend the
Application class
to do this

7. 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

8. R. Vasa, 20118
Label Layout (Usability
Research)
Labels above Input Field
Right-Aligned Labels
Left-Aligned Labels
Recommended
method for phones

9. 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

10. R. Vasa, 20111
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>

11. R. Vasa, 20111
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)

12. R. Vasa, 20111
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

13. R. Vasa, 20111
The Parcel Protocol
•Sadly, there is a bit of messy code that
makes all of this work.

14. R. Vasa, 20111
Parcel Protocol (more
details)...
This constant has to be created and named
CREATOR
This constant has to be created and named
CREATOR

15. R. Vasa, 20111
Private Constructor that we have
to write
Private Constructor that we have
to write
Parcel Protocol (more
details)...

16. R. Vasa, 20111
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example

17. R. Vasa, 20111
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)

18. R. Vasa, 20111
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

19. R. Vasa, 20111
Elements of Design (Example)
Motivation (Idea orMotivation (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.

20. R. Vasa, 20112
Elements of Design (Example)
Motivation (Idea orMotivation (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

21. R. Vasa, 20112
Elements of Design (Example)
Motivation (Idea orMotivation (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

22. R. Vasa, 20112
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

23. R. Vasa, 20112
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’

24. R. Vasa, 20112
Elements of Design (Example)
Motivation (Idea orMotivation (Idea or
Problem)Problem)
Scenarios (Value &Scenarios (Value &
Metaphor)Metaphor)
Tasks and Modes ofTasks 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

25. R. Vasa, 20112
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)

26. R. Vasa, 20112
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

27. R. Vasa, 20112
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

28. R. Vasa, 20112
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
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng

29. 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

30. R. Vasa, 20113
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)
SketchinSketchin
gg
PrototypiPrototypi
ngng

31. R. Vasa, 20113
Sketches are tools of
communication
Source: http://www.agilemodeling.com

32. R. Vasa, 20113
Sketches help explore flow
Source:
http://inspirationfeed.com

33. R. Vasa, 20113
Sketching Mobile Apps.
(Example)
Harvest iPhone App.
Source: Flickr - Anthony Armendariz (Copyright)

34. R. Vasa, 20113
Sketching can be rich and
colourful
iPad Radio App.
Source: Flickr - Pixelhalunke (Copyright)

35. R. Vasa, 20113
Detailed Sketches are ideal...
iPad Radio App.
Source: Flickr - Pixelhalunke (Copyright)

36. R. Vasa, 20113
Explore concepts with sketches
Source: Flickr - thegreatsunra (Copyright)

37. R. Vasa, 20113
Paper Prototypes permit
walk-thoughts

38. R. Vasa, 20113
Paper Prototypes provide
detail
Source:
http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden
-forms-ink-brush/

39. R. Vasa, 20113
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 ofTasks & Modes of
OperationOperation
Scenarios generate task
scripts (and modes of
operation)
Prototyping explores these task
scripts and modes of operation

40. R. Vasa, 20114
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example

41. R. Vasa, 20114
Prototyping Vs Sketching
Evocative
Sketc
h
Prototyp
e
Learn
Suggest
Describ
e
Explore
Question
Propose
Provoke
Tentative
Non-Committal
Refine
Answer
Tes
tResolv
eSpecifi
cDepictio
nAdapted from “Sketching User Experiences”, Bill
Buxton 2007.

42. R. Vasa, 20114
Prototyping Vs Sketching
Refine
Test
Evocative
Sketc
h
Prototy
peLear
n
Suggest
Descri
be
Explore
Question
Propose
Provoke
Tentative
Non-Committal
Answe
r
Resolv
eSpecifi
cDepicti
on
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

43. R. Vasa, 20114
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
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Increasing Design Clarity

44. R. Vasa, 20114
Sketches and Prototypes cause
change
Scenarios (Value &Scenarios (Value &
Metaphor)Metaphor)
Tasks & Modes ofTasks & Modes of
OperationOperation
Exploration often changes the
scenario and our understanding
of the problem
Motivation (Idea orMotivation (Idea or
Problem)Problem)

45. R. Vasa, 20114
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

46. R. Vasa, 20114
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

47. R. Vasa, 20114
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example

48. R. Vasa, 20114
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?”

49. R. Vasa, 20114
Planters - Example Sketches
These are very rough approximations

50. R. Vasa, 20115
Planters - Example Sketch
Annotations are needed to guide exploration/decisions

51. R. Vasa, 20115
Planters - Example Sketch
Each screen should have one sketch -- to explore concepts

52. R. Vasa, 20115
Planters Example - Paper
Prototyping
Presented as a walk through on
the board in lecture

53. R. Vasa, 20115
Lecture Overview
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example

54. R. Vasa, 20115
On Learning
What I hear, I forget.
What I say, I remember.
What I do, I understand.
- Lao Tse

55. R. Vasa, 20115
Short Exercise - Sketching
Motivation (Idea orMotivation (Idea or
Problem)Problem)
Scenarios (Value &Scenarios (Value &
Metaphor)Metaphor)
Tasks and Modes ofTasks 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.

56. R. Vasa, 20115
Short Exercise - Paper
Prototype
Motivation (Idea orMotivation (Idea or
Problem)Problem)
Scenarios (Value &Scenarios (Value &
Metaphor)Metaphor)
Tasks and Modes ofTasks 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.

57. R. Vasa, 20115
Short Exercise - Paper
Prototyping
Motivation (Idea orMotivation (Idea or
Problem)Problem)
Scenarios (Value &Scenarios (Value &
Metaphor)Metaphor)
Tasks and Modes ofTasks 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

58. R. Vasa, 20115
Lecture Summary
•Short Recap (previous weeks)
•Elements of Design
•Examples of Sketches and Prototypes
•Sketches Vs Prototypes
•Sketching - An Example
•Learning by Example