hit3328 - chapter0702 - navigation flow and design approach

HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011

Twitter: @rvasa Blog: http://rvasa.blogspot.com

1

Lecture 07Navigation Flow

and Design Approach

R. Vasa, 20122

Lecture Overview

•Short Recap (previous weeks)

•Mobile App. Design Approach

•Navigation Flow Models

•Building with Navigation Flow Models

R. Vasa, 20123

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, 20124

Sketches are tools of communication

Source: http://www.agilemodeling.com

R. Vasa, 20125

Explore concepts with sketches

Source: Flickr - thegreatsunra (Copyright)

R. Vasa, 20126

Paper Prototypes permit walk-thoughts

R. Vasa, 20127

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, 20128

Prototyping Vs Sketching

Refine

Test

EvocativeSketch Prototype

LearnSuggest DescribeExplore

QuestionProposeProvoke

TentativeNon-Committal

Answer

ResolveSpecific

Depiction

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, 20129

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, 201210

Lecture Overview





R. Vasa, 201211

Mobile App. Design Approach

SketchinSketchingg


ScenarioScenarioss



Navigation Flow Navigation Flow DesignDesign

Screen Screen (Activity) (Activity)

Definition/DesiDefinition/Designgn

Domain/Data Domain/Data ModelModel

Styles Styles & &

LayoutLayoutss

Strings & Strings & ResourceResource

ss

FeaturesFeatures

R. Vasa, 201212


SketchinSketchingg


ScenarioScenarioss







Styles Styles & &

LayoutLayoutss


ss

FeaturesFeatures

Complete as much as possible on paper


R. Vasa, 201213


SketchinSketchingg


ScenarioScenarioss







Styles Styles & &

LayoutLayoutss


ss

FeaturesFeatures



Layout construction, Visual Look&Feel, Navigation Flow development is time

consuming in code

Layout construction, Visual Look&Feel, Navigation Flow development is time

consuming in code

R. Vasa, 201214

Lecture Overview





R. Vasa, 201215

Navigation Flow Model

•The aim of this model is to communicate and clarify just the navigation flows

• It should capture the interaction from,

• Events (Clicks)

• Menus

• Dialogs

• It should also show activities that have,

• forms, lists, tabs, and visualizations

• I/O, Orientation Changes, Custom layouts

R. Vasa, 201216

Navigation Flow Modelling

•The notation provided is

• Intended to be used for hand-drawn models

•The models should be constructed as part of the early design

• It should reflect the complexity of the app. and allow for better effort estimation

Note: The notation is intentionally rudimentary -- you are free to extend it

Note: The notation is intentionally rudimentary -- you are free to extend it

R. Vasa, 201217

Navigation Modelling - Building Blocks

Activity Name

Menu (Optional)

Lists / Input FormDB-RW, File-IONetwork-RWInfo. VisualizationCustom ViewsLayouts-PL SensorsAudio/Video

These are flagged only if used/relevantThese are flagged

only if used/relevant

This section is shown only if activity has a

menu

This section is shown only if activity has a

menu

R. Vasa, 201218


Activity A

Flow is shown using a simple arc

Flow is shown using a simple arc

Default assumption is that “back button” will return to Activity A

(in this case)

Default assumption is that “back button” will return to Activity A

(in this case)

Meaning: Activity A, starts Activity B

Meaning: Activity A, starts Activity B

Activity B

R. Vasa, 201219


Activity A

Arc labeled to indicate trigger

(view-name follows dot)

Arc labeled to indicate trigger

(view-name follows dot)

Meaning: Activity A starts Activity B when details button

is clicked

Meaning: Activity A starts Activity B when details button

is clicked

Activity BonTouch.DetailsImage

R. Vasa, 201220


Activity A

Cyclic Arcs are permitted

Event triggers start with “on”

Cyclic Arcs are permitted

Event triggers start with “on”

Activity BonTouch.DetailsImage

onOrientationChange

R. Vasa, 201221


Activity A

Menu Clicks originate from menu region of activity

box

Menu Clicks originate from menu region of activity

box

Activity BOnTouch.DetailsImage

Menu

Activity C

[Add]

[ ] brackets imply onClick, so only label/view name is

shown

[ ] brackets imply onClick, so only label/view name is

shown

Activity D

[Help]

R. Vasa, 201222


Tabs or Action Bar navigations are grouped with a dashed container. Each

tab can be labelled

Tabs or Action Bar navigations are grouped with a dashed container. Each

tab can be labelled

Activity B

Activity YActivity X

Activities A, X and Y are accessed via tabs

Activities A, X and Y are accessed via tabs

List GPS Google Maps

OnTouch.DetailsImageActivity A

Tabs

R. Vasa, 201223


Activity A

Tabbed Activities (may) have additional complexity when

modelling

Tabbed Activities (may) have additional complexity when

modelling

Activity YActivity

X

Menu

Activity M[Create]

[Add]

GPS Google Maps

List

R. Vasa, 201224


Activity A

If Back Button is Overridden use special

block notation

If Back Button is Overridden use special

block notation

Activity B

Activity C

[Change Details]

OnTouch.DetailsImage

R. Vasa, 201225


Activity A

Data Passed is shown using <> brackets

Data Passed is shown using <> brackets

Meaning: Activity A, starts Activity B passing it a bundleMeaning: Activity A, starts

Activity B passing it a bundle

Activity B[Get Address<bundle>]

Data flow information is optional

R. Vasa, 201226


If Activity returns data via a call-back, then use a solid arrow head, but show the

returned data in <> braces

If Activity returns data via a call-back, then use a solid arrow head, but show the

returned data in <> braces

Activity A Activity B[Get Address<bundle>]

<data_block_name>

R. Vasa, 201227


Activity A

Dialogs/Toasts are shown without any arrow heads

Dialogs/Toasts are shown without any arrow heads

Confirm Exit Dialog

Message Received

We draw lines without arrow head to denote ownership

Toasts have a dashed

boundary

Toasts have a dashed

boundary

R. Vasa, 201228


Activity A

External Applications or Activities in another application are shown as ovals

External Applications or Activities in another application are shown as ovals

Chrome Browser

[Browse(ACTION_VIEW)]

Intents are shown within () braces and part of the

trigger


trigger

R. Vasa, 201229


Activity A

Clicks from List Views are shown using {}Clicks from List Views are shown using {}

Phone

{Contact Store(ACTION_DIAL)}


trigger


trigger

R. Vasa, 201230


Activity A

We prefix the Activity Name with a * to indicate the

landing page

We prefix the Activity Name with a * to indicate the

landing page

Activity Y*Activity X

Menu

GPS Google Maps

List

R. Vasa, 201231

Navigation Modelling - Information Level

We use additional symbols to indicate information density /

hierarchy

We use additional symbols to indicate information density /

hierarchy

Activity A O Activity

A C Activity A D

Overview (Dashboard or Summary)

Collection (List, Table, Grid)

Detail (Domain entity view)

R. Vasa, 201232

Information Information OverviewOverview


Activity A ODashboards & Information

Overviews

Navigation Navigation DashboardDashboard

It may be a combination of above

R. Vasa, 201233


Activity B C A Collection of information (can be on

map, list or grid)

Content Exploration / SelectionContent Exploration / Selection

R. Vasa, 201234


Activity M DDetails about a specific domain entity (can be

editable input to modify information about entity)

R. Vasa, 201235


Activity A Oi Activity B Ci Activity M Di

An “i” is added to indicate that the

activity permits some input

Needed to capture level of interaction

R. Vasa, 201236


Activity A Oi Activity B Ci Activity M Di

Examples where “i” is handy

R. Vasa, 201237


Activity B Ci

Searching and Updating a Stream should use Ci

R. Vasa, 201238

Navigation Modelling - Setting Page•Showing a collection of

settings is Ci

•Showing a specific (single) setting is Di

R. Vasa, 201239

Navigation Modelling - Information•The O C D classification will be domain

specific & depends on intention

Should this be O or C or D?

R. Vasa, 201240


Activity A O

Activity B C

Activity M D

A Collection of information (can be on

map, list or grid)

Dashboards & Information Overviews

Details about a specific domain entity (can be

editable input to modify information about entity)

The O C D annotations are optional

R. Vasa, 201241

Navigation Modelling - Missing Pieces•The following are currently missing:

• Background services

• Background threads (or any parallelism)

• Notifications that trigger activities is also missing

R. Vasa, 201242

Lecture Overview




• Simple Example


R. Vasa, 201243

Navigation Flow - Example

Messaging Application (in Emulator)

R. Vasa, 201244


[Compose]

[New Message]

Compose Activity

R. Vasa, 201245


[Compose]

[New Message]

Compose Activity

Messaging

Menu

R. Vasa, 201246


[Compose]

[New Message]

Compose Activity

Messaging

Menu

[Settings]

R. Vasa, 201247


[Compose]

[New Message]Messaging

Menu

[Settings]

Compose Message

Menu

Settings

List Select Ringtone Dialog

Vibrate Setting Dialog

List

R. Vasa, 201248

Lecture Overview





R. Vasa, 201249

When can I start coding?

SketchinSketchingg


ScenarioScenarioss




FeaturesFeatures

Initial builds of code should aim to demonstrate the navigation

flow (without any actual

functionality)



functionality)

R. Vasa, 201250


SketchinSketchingg


ScenarioScenarioss




FeaturesFeatures

Code once you have a navigation flow modelThis will help you setup initial templates and

identify permissions that you may need to adjust in the manifest

Functionality can be implemented incrementally

R. Vasa, 201251


SketchinSketchingg


ScenarioScenarioss




FeaturesFeatures



functionality)



functionality)Code once you have a navigation flow model

R. Vasa, 201252

What should be in the initial builds?• Lists (with dummy data for adapters)

•Dialogs (using standard templates)

•Menus

•Key interaction buttons (wired up if they start other activities)

•Tabs (wired up)

Detailed Layouts are not needed in these buildsDetailed Layouts are not needed in these buildsNote: It is understood that only 50-80% of the

activities may have been identified (at this stage)

R. Vasa, 201253

Initial Builds + Sketches

•You can include the sketches via image views into the initial builds

• This will test the overall look and feel of the app.

• Very crude -- but effective

hit3328 - chapter0702 - navigation flow and design approach

Technology

rajesh vasa

navigation flow development

navigation flow modelthe

navigation flowsit

complete flow

application design

algorithm design

activity ain