TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
HIT3328 - Chapter0702 - Navigation Flow and Design Approach
1. 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
3. 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
7. 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
8. 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
9. 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
11. 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
12. R. Vasa, 201212
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
Complete as much as possible on
paper
Complete as much as possible on
paper
13. R. Vasa, 201213
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
Complete as much as possible on
paper
Complete as much as possible on
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
15. 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
16. 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
17. 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
18. R. Vasa, 201218
Navigation Modelling - Building
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
Meaning: Activity A, starts
Activity B
Activity B
19. R. Vasa, 201219
Navigation Modelling - Building
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
20. R. Vasa, 201220
Navigation Modelling - Building
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
21. R. Vasa, 201221
Navigation Modelling - Building
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]
22. R. Vasa, 201222
Navigation Modelling - Building
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
23. R. Vasa, 201223
Navigation Modelling - Building
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
24. R. Vasa, 201224
Navigation Modelling - Building
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
25. R. Vasa, 201225
Navigation Modelling - Building
Blocks
Activity A
Data Passed is shown using <>
brackets
Data Passed is shown using <>
brackets
Meaning: Activity A, starts
Activity B passing it a bundle
Meaning: Activity A, starts
Activity B passing it a bundle
Activity B[Get Address<bundle>]
Data flow information is optional
26. R. Vasa, 201226
Navigation Modelling - Building
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>
27. R. Vasa, 201227
Navigation Modelling - Building
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
28. R. Vasa, 201228
Navigation Modelling - Building
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
Intents are shown within ()
braces and part of the
trigger
29. R. Vasa, 201229
Navigation Modelling - Building
Blocks
Activity A
Clicks from List Views are shown using {}Clicks from List Views are shown using {}
Phone
{Contact
Store(ACTION_DIAL)}
Intents are shown within ()
braces and part of the
trigger
Intents are shown within ()
braces and part of the
trigger
30. R. Vasa, 201230
Navigation Modelling - Building
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
31. 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)
33. R. Vasa, 201233
Navigation Modelling -
Information Level
Activity B C A Collection of
information (can be on
map, list or grid)
Content Exploration / SelectionContent Exploration / Selection
34. R. Vasa, 201234
Navigation Modelling -
Information Level
Activity M D
Details about a specific
domain entity (can be
editable input to modify
information about entity)
35. R. Vasa, 201235
Navigation Modelling -
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
36. R. Vasa, 201236
Navigation Modelling -
Information Level
Activity A Oi Activity B Ci Activity M Di
Examples where “i” is
handy
37. R. Vasa, 201237
Navigation Modelling -
Information Level
Activity B Ci
Searching and Updating a Stream
should use Ci
38. R. Vasa, 201238
Navigation Modelling - Setting
Page
•Showing a collection of
settings is Ci
•Showing a specific (single)
setting is Di
39. 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?
40. R. Vasa, 201240
Navigation Modelling -
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
41. 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
42. R. Vasa, 201242
Lecture Overview
•Short Recap (previous weeks)
•Mobile App. Design Approach
•Navigation Flow Models
•Simple Example
•Building with Navigation Flow Models
46. R. Vasa, 201246
Navigation Flow - Example
[Compose]
[New Message]
Compose Activity
Messaging
Menu
[Settings]
47. R. Vasa, 201247
Navigation Flow - Example
[Compose]
[New Message]
Messaging
Menu
[Settings]
Compose Message
Menu
Settings
List Select Ringtone
Dialog
Vibrate Setting
Dialog
List
49. R. Vasa, 201249
When can I start coding?
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Navigation FlowNavigation Flow
DesignDesign
FeaturesFeatures
Initial builds of code should aim
to demonstrate the navigation
flow
(without any actual
functionality)
Initial builds of code should aim
to demonstrate the navigation
flow
(without any actual
functionality)
50. R. Vasa, 201250
When can I start coding?
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Navigation FlowNavigation Flow
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
51. R. Vasa, 201251
When can I start coding?
SketchinSketchin
gg
MotivatioMotivatio
nn
ScenarioScenario
ss
ConstrainConstrain
tsts
PrototypiPrototypi
ngng
Navigation FlowNavigation Flow
DesignDesign
FeaturesFeatures
Initial builds of code should aim
to demonstrate the navigation
flow
(without any actual
functionality)
Initial builds of code should aim
to demonstrate the navigation
flow
(without any actual
functionality)Code once you have a navigation flow
model
52. 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)
53. 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