HIT3328 - Chapter0702 - Navigation Flow and Design Approach

HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2011
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
1
Lecture 07
Navigation 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 ofTasks & 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
Evocative
Sketch Prototype
Learn
Suggest Describe
Explore
Question
Propose
Provoke
Tentative
Non-Committal
Answer
Resolve
Specific
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
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Increasing Design Clarity

R. Vasa, 201210
Lecture Overview

R. Vasa, 201211
Mobile App. Design Approach
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Navigation FlowNavigation Flow
DesignDesign
ScreenScreen
(Activity)(Activity)
Definition/DesiDefinition/Desi
gngn
Domain/DataDomain/Data
ModelModel
StylesStyles
&&
LayoutLayout
ss
Strings &Strings &
ResourceResource
ss
FeaturesFeatures

R. Vasa, 201212
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
DesignDesign
ScreenScreen
gngn
ModelModel
StylesStyles
&&
LayoutLayout
ss
Strings &Strings &
ResourceResource
ss
FeaturesFeatures
Complete as much as possible on
paper
paper

R. Vasa, 201213
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
DesignDesign
ScreenScreen
gngn
ModelModel
StylesStyles
&&
LayoutLayout
ss
Strings &Strings &
ResourceResource
ss
FeaturesFeatures
paper
paper
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 Form
DB-RW, File-IO
Network-RW
Info. Visualization
Custom Views
Layouts-PL
Sensors
Audio/Video
These are flagged
only if used/relevant
These 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
Blocks
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
Activity B
Activity B

R. Vasa, 201219
Blocks
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
Blocks
Activity A
Cyclic Arcs are permitted
Event triggers start with
“on”
Cyclic Arcs are permitted
Event triggers start with
“on”
Activity BonTouch.DetailsImage
onOrientationCha
nge

R. Vasa, 201221
Blocks
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
Blocks
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.DetailsIm
ageActivity A
Tabs

R. Vasa, 201223
Blocks
Activity A
Tabbed Activities (may) have
additional complexity when
modelling
Tabbed Activities (may) have
additional complexity when
modelling
Activity Y
Activity
X
Menu
Activity M[Create]
[Add]
GPS
Google Maps
List

R. Vasa, 201224
Blocks
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
Blocks
Activity A
Data Passed is shown using <>
brackets
Data Passed is shown using <>
brackets
Activity B passing it a bundle
Activity B passing it a bundle
Activity B[Get Address<bundle>]
Data flow information is optional

R. Vasa, 201226
Blocks
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
Blocks
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
Blocks
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
Blocks
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
Blocks
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
InformationInformation
OverviewOverview
Information Level
Activity A O
Dashboards & Information
Overviews
NavigationNavigation
DashboardDashboard
It may be a combination of above

R. Vasa, 201233
Information Level
Activity B C A Collection of
information (can be on
map, list or grid)
Content Exploration / SelectionContent Exploration / Selection

R. Vasa, 201234
Information Level
Activity M D
Details about a specific
domain entity (can be
editable input to modify
information about entity)

R. Vasa, 201235
Information Level
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
Information Level
Activity A Oi Activity B Ci Activity M Di
Examples where “i” is
handy

R. Vasa, 201237
Information Level
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
Information
•The O C D classification will be domain
specific & depends on intention
Should this be O or C or D?

R. Vasa, 201240
Information Level
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?
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
DesignDesign
FeaturesFeatures
Initial builds of code should aim
to demonstrate the navigation
flow
(without any actual
functionality)
flow
(without any actual
functionality)

R. Vasa, 201250
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
DesignDesign
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
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
DesignDesign
FeaturesFeatures
flow
(without any actual
functionality)
flow
(without any actual
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 builds
Note: 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

Recommended

Recommended

More Related Content

Similar to HIT3328 - Chapter0702 - Navigation Flow and Design Approach

Similar to HIT3328 - Chapter0702 - Navigation Flow and Design Approach (20)

More from Yhal Htet Aung

More from Yhal Htet Aung (14)

Recently uploaded

Recently uploaded (20)

HIT3328 - Chapter0702 - Navigation Flow and Design Approach