hit3328 - chapter0602 - sketching apps

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