hit3328 - chapter0602 - sketching apps

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

Upload: yhal-htet-aung

Post on 27-Jan-2015

102 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 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

Page 2: HIT3328 - Chapter0602 - Sketching 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

Page 3: HIT3328 - Chapter0602 - Sketching Apps

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)

Page 4: HIT3328 - Chapter0602 - Sketching Apps

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

Page 5: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 20115

Life-Cycle Demo

onCreate, onStart, onResume etc. are from the

Activity class

Page 6: HIT3328 - Chapter0602 - Sketching Apps

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

Page 7: HIT3328 - Chapter0602 - Sketching Apps

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

Page 8: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 20118

Label Layout (Usability Research)

Labels above Input Field

Right-Aligned Labels

Left-Aligned Labels

Recommended method for phones

Page 9: HIT3328 - Chapter0602 - Sketching Apps

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

Page 10: HIT3328 - Chapter0602 - Sketching Apps

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>

Page 11: HIT3328 - Chapter0602 - Sketching Apps

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)

Page 12: HIT3328 - Chapter0602 - Sketching Apps

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

Page 13: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201113

The Parcel Protocol

•Sadly, there is a bit of messy code that makes all of this work.

Page 14: HIT3328 - Chapter0602 - Sketching Apps

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

Page 15: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201115

Private Constructor that we have to write

Private Constructor that we have to write

Parcel Protocol (more details)...

Page 16: HIT3328 - Chapter0602 - Sketching Apps

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

Page 17: HIT3328 - Chapter0602 - Sketching Apps

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)

Page 18: HIT3328 - Chapter0602 - Sketching Apps

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

Page 19: HIT3328 - Chapter0602 - Sketching Apps

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.

Page 20: HIT3328 - Chapter0602 - Sketching Apps

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

Page 21: HIT3328 - Chapter0602 - Sketching Apps

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

Page 22: HIT3328 - Chapter0602 - Sketching Apps

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

Page 23: HIT3328 - Chapter0602 - Sketching Apps

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’

Page 24: HIT3328 - Chapter0602 - Sketching Apps

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

Page 25: HIT3328 - Chapter0602 - Sketching Apps

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)

Page 26: HIT3328 - Chapter0602 - Sketching Apps

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

Page 27: HIT3328 - Chapter0602 - Sketching Apps

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

Page 28: HIT3328 - Chapter0602 - Sketching Apps

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

Page 29: HIT3328 - Chapter0602 - Sketching Apps

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

Page 30: HIT3328 - Chapter0602 - Sketching Apps

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

Page 31: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201131

Sketches are tools of communication

Source: http://www.agilemodeling.com

Page 32: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201132

Sketches help explore flow

Source: http://inspirationfeed.com

Page 33: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201133

Sketching Mobile Apps. (Example)

Harvest iPhone App.

Source: Flickr - Anthony Armendariz (Copyright)

Page 34: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201134

Sketching can be rich and colourful

iPad Radio App.

Source: Flickr - Pixelhalunke (Copyright)

Page 35: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201135

Detailed Sketches are ideal...

iPad Radio App.

Source: Flickr - Pixelhalunke (Copyright)

Page 36: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201136

Explore concepts with sketches

Source: Flickr - thegreatsunra (Copyright)

Page 37: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201137

Paper Prototypes permit walk-thoughts

Page 38: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201138

Paper Prototypes provide detail

Source: http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden

-forms-ink-brush/

Page 39: HIT3328 - Chapter0602 - Sketching Apps

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

Page 40: HIT3328 - Chapter0602 - Sketching Apps

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

Page 41: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201141

Prototyping Vs Sketching

Evocative

Sketch

Prototype

LearnSuggest

Describe

ExploreQuestionProposeProvoke

TentativeNon-Committal

RefineAnswer

TestResolveSpecificDepictionAdapted from “Sketching User Experiences”, Bill

Buxton 2007.

Page 42: HIT3328 - Chapter0602 - Sketching Apps

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

Page 43: HIT3328 - Chapter0602 - Sketching Apps

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

Page 44: HIT3328 - Chapter0602 - Sketching Apps

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)

Page 45: HIT3328 - Chapter0602 - Sketching Apps

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

Page 46: HIT3328 - Chapter0602 - Sketching Apps

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

Page 47: HIT3328 - Chapter0602 - Sketching Apps

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

Page 48: HIT3328 - Chapter0602 - Sketching Apps

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?”

Page 49: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201149

Planters - Example Sketches

These are very rough approximations

Page 50: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201150

Planters - Example Sketch

Annotations are needed to guide exploration/decisions

Page 51: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201151

Planters - Example Sketch

Each screen should have one sketch -- to explore concepts

Page 52: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201152

Planters Example - Paper Prototyping

Presented as a walk through on the board in lecture

Page 53: HIT3328 - Chapter0602 - Sketching Apps

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

Page 54: HIT3328 - Chapter0602 - Sketching Apps

R. Vasa, 201154

On Learning

What I hear, I forget.What I say, I remember.

What I do, I understand.

- Lao Tse

Page 55: HIT3328 - Chapter0602 - Sketching Apps

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.

Page 56: HIT3328 - Chapter0602 - Sketching Apps

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.

Page 57: HIT3328 - Chapter0602 - Sketching Apps

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

Page 58: HIT3328 - Chapter0602 - Sketching Apps

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