HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 2011Twitter: @rvasaBlog: http://rvasa.blogspot.co...
R. Vasa, 20122Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building wi...
R. Vasa, 20123Elements of DesigningMotivation (Idea or Problem)Motivation (Idea or Problem)Scenarios (Value &Scenarios (Va...
R. Vasa, 20124Sketches are tools ofcommunicationSource: http://www.agilemodeling.com
R. Vasa, 20125Explore concepts with sketchesSource: Flickr - thegreatsunra (Copyright)
R. Vasa, 20126Paper Prototypes permitwalk-thoughts
R. Vasa, 20127Paper Prototype is more than asketch•We prototype the complete flow for eachand every task -- but we only sk...
R. Vasa, 20128Prototyping Vs SketchingRefineTestEvocativeSketch PrototypeLearnSuggest DescribeExploreQuestionProposeProvok...
R. Vasa, 20129Sketch Vs Paper Prototype•We use paper prototypes to walk-throughan app. with the user•Sketch is used primar...
R. Vasa, 201210Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building w...
R. Vasa, 201211Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPr...
R. Vasa, 201212Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPr...
R. Vasa, 201213Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPr...
R. Vasa, 201214Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building w...
R. Vasa, 201215Navigation Flow Model•The aim of this model is to communicateand clarify just the navigation flows•It shoul...
R. Vasa, 201216Navigation Flow Modelling•The notation provided is•Intended to be used for hand-drawn models•The models sho...
R. Vasa, 201217Navigation Modelling - BuildingBlocksActivity NameMenu (Optional)Lists / Input FormDB-RW, File-IONetwork-RW...
R. Vasa, 201218Navigation Modelling - BuildingBlocksActivity AFlow is shown using asimple arcFlow is shown using asimple a...
R. Vasa, 201219Navigation Modelling - BuildingBlocksActivity AArc labeled to indicatetrigger(view-name follows dot)Arc lab...
R. Vasa, 201220Navigation Modelling - BuildingBlocksActivity ACyclic Arcs are permittedEvent triggers start with“on”Cyclic...
R. Vasa, 201221Navigation Modelling - BuildingBlocksActivity AMenu Clicks originate frommenu region of activityboxMenu Cli...
R. Vasa, 201222Navigation Modelling - BuildingBlocksTabs or Action Bar navigations aregrouped with a dashed container. Eac...
R. Vasa, 201223Navigation Modelling - BuildingBlocksActivity ATabbed Activities (may) haveadditional complexity whenmodell...
R. Vasa, 201224Navigation Modelling - BuildingBlocksActivity AIf Back Button isOverridden use specialblock notationIf Back...
R. Vasa, 201225Navigation Modelling - BuildingBlocksActivity AData Passed is shown using <>bracketsData Passed is shown us...
R. Vasa, 201226Navigation Modelling - BuildingBlocksIf Activity returns data via acall-back, then use a solidarrow head, b...
R. Vasa, 201227Navigation Modelling - BuildingBlocksActivity ADialogs/Toasts are shown without anyarrow headsDialogs/Toast...
R. Vasa, 201228Navigation Modelling - BuildingBlocksActivity AExternal Applications or Activities inanother application ar...
R. Vasa, 201229Navigation Modelling - BuildingBlocksActivity AClicks from List Views are shown using {}Clicks from List Vi...
R. Vasa, 201230Navigation Modelling - BuildingBlocksActivity AWe prefix the Activity Namewith a * to indicate thelanding p...
R. Vasa, 201231Navigation Modelling -Information LevelWe use additional symbols toindicate information density /hierarchyW...
R. Vasa, 201232InformationInformationOverviewOverviewNavigation Modelling -Information LevelActivity A ODashboards & Infor...
R. Vasa, 201233Navigation Modelling -Information LevelActivity B C A Collection ofinformation (can be onmap, list or grid)...
R. Vasa, 201234Navigation Modelling -Information LevelActivity M DDetails about a specificdomain entity (can beeditable in...
R. Vasa, 201235Navigation Modelling -Information LevelActivity A Oi Activity B Ci Activity M DiAn “i” is added toindicate ...
R. Vasa, 201236Navigation Modelling -Information LevelActivity A Oi Activity B Ci Activity M DiExamples where “i” ishandy
R. Vasa, 201237Navigation Modelling -Information LevelActivity B CiSearching and Updating a Streamshould use Ci
R. Vasa, 201238Navigation Modelling - SettingPage•Showing a collection ofsettings is Ci•Showing a specific (single)setting...
R. Vasa, 201239Navigation Modelling -Information•The O C D classification will be domainspecific & depends on intentionSho...
R. Vasa, 201240Navigation Modelling -Information LevelActivity A OActivity B CActivity M DA Collection ofinformation (can ...
R. Vasa, 201241Navigation Modelling - MissingPieces•The following are currently missing:•Background services•Background th...
R. Vasa, 201242Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Simple Exa...
R. Vasa, 201243Navigation Flow - ExampleMessaging Application (in Emulator)
R. Vasa, 201244Navigation Flow - Example[Compose][New Message]Compose Activity
R. Vasa, 201245Navigation Flow - Example[Compose][New Message]Compose ActivityMessagingMenu
R. Vasa, 201246Navigation Flow - Example[Compose][New Message]Compose ActivityMessagingMenu[Settings]
R. Vasa, 201247Navigation Flow - Example[Compose][New Message]MessagingMenu[Settings]Compose MessageMenuSettingsList Selec...
R. Vasa, 201248Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building w...
R. Vasa, 201249When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsProto...
R. Vasa, 201250When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsProto...
R. Vasa, 201251When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsProto...
R. Vasa, 201252What should be in the initialbuilds?•Lists (with dummy data for adapters)•Dialogs (using standard templates...
R. Vasa, 201253Initial Builds + Sketches•You can include the sketches via imageviews into the initial builds•This will tes...
Upcoming SlideShare
Loading in...5
×

HIT3328 - Chapter0702 - Navigation Flow and Design Approach

203

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
203
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HIT3328 - Chapter0702 - Navigation Flow and Design Approach

  1. 1. HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 2011Twitter: @rvasaBlog: http://rvasa.blogspot.com1Lecture 07Navigation Flowand DesignApproach
  2. 2. R. Vasa, 20122Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  3. 3. R. Vasa, 20123Elements of DesigningMotivation (Idea or Problem)Motivation (Idea or Problem)Scenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks / Modes of OperationTasks / Modes of OperationDisplay and ControlDisplay and ControlProblem SpaceSolution SpaceThis is related to application design, not algorithm design
  4. 4. R. Vasa, 20124Sketches are tools ofcommunicationSource: http://www.agilemodeling.com
  5. 5. R. Vasa, 20125Explore concepts with sketchesSource: Flickr - thegreatsunra (Copyright)
  6. 6. R. Vasa, 20126Paper Prototypes permitwalk-thoughts
  7. 7. R. Vasa, 20127Paper Prototype is more than asketch•We prototype the complete flow for eachand every task -- but we only sketchconceptsScenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks & Modes ofTasks & Modes ofOperationOperationScenarios generate taskscripts (and modes ofoperation)Prototyping explores these taskscripts and modes of operation
  8. 8. R. Vasa, 20128Prototyping Vs SketchingRefineTestEvocativeSketch PrototypeLearnSuggest DescribeExploreQuestionProposeProvokeTentativeNon-CommittalAnswerResolveSpecificDepictionThe differencebetween a sketch anda prototype is notabsolute -- ratherthink of it as acontinuumThe differencebetween a sketch anda prototype is notabsolute -- ratherthink of it as acontinuum
  9. 9. R. Vasa, 20129Sketch Vs Paper Prototype•We use paper prototypes to walk-throughan app. with the user•Sketch is used primarily to explore ideas andconceptsSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngIncreasing Design Clarity
  10. 10. R. Vasa, 201210Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  11. 11. R. Vasa, 201211Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignScreenScreen(Activity)(Activity)Definition/DesiDefinition/DesigngnDomain/DataDomain/DataModelModelStylesStyles&&LayoutLayoutssStrings &Strings &ResourceResourcessFeaturesFeatures
  12. 12. R. Vasa, 201212Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignScreenScreen(Activity)(Activity)Definition/DesiDefinition/DesigngnDomain/DataDomain/DataModelModelStylesStyles&&LayoutLayoutssStrings &Strings &ResourceResourcessFeaturesFeaturesComplete as much as possible onpaperComplete as much as possible onpaper
  13. 13. R. Vasa, 201213Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignScreenScreen(Activity)(Activity)Definition/DesiDefinition/DesigngnDomain/DataDomain/DataModelModelStylesStyles&&LayoutLayoutssStrings &Strings &ResourceResourcessFeaturesFeaturesComplete as much as possible onpaperComplete as much as possible onpaperLayout construction, Visual Look&Feel,Navigation Flow development is timeconsuming in codeLayout construction, Visual Look&Feel,Navigation Flow development is timeconsuming in code
  14. 14. R. Vasa, 201214Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  15. 15. R. Vasa, 201215Navigation Flow Model•The aim of this model is to communicateand 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. 16. R. Vasa, 201216Navigation Flow Modelling•The notation provided is•Intended to be used for hand-drawn models•The models should be constructed as partof the early design•It should reflect the complexity of the app.and allow for better effort estimationNote: The notation is intentionallyrudimentary -- you are free to extend itNote: The notation is intentionallyrudimentary -- you are free to extend it
  17. 17. R. Vasa, 201217Navigation Modelling - BuildingBlocksActivity NameMenu (Optional)Lists / Input FormDB-RW, File-IONetwork-RWInfo. VisualizationCustom ViewsLayouts-PLSensorsAudio/VideoThese are flaggedonly if used/relevantThese are flaggedonly if used/relevantThis section is shownonly if activity has amenuThis section is shownonly if activity has amenu
  18. 18. R. Vasa, 201218Navigation Modelling - BuildingBlocksActivity AFlow is shown using asimple arcFlow is shown using asimple arcDefault assumption is that “backbutton” will return to Activity A(in this case)Default assumption is that “backbutton” will return to Activity A(in this case)Meaning: Activity A, startsActivity BMeaning: Activity A, startsActivity BActivity B
  19. 19. R. Vasa, 201219Navigation Modelling - BuildingBlocksActivity AArc labeled to indicatetrigger(view-name follows dot)Arc labeled to indicatetrigger(view-name follows dot)Meaning: Activity A startsActivity B when details buttonis clickedMeaning: Activity A startsActivity B when details buttonis clickedActivity BonTouch.DetailsImage
  20. 20. R. Vasa, 201220Navigation Modelling - BuildingBlocksActivity ACyclic Arcs are permittedEvent triggers start with“on”Cyclic Arcs are permittedEvent triggers start with“on”Activity BonTouch.DetailsImageonOrientationChange
  21. 21. R. Vasa, 201221Navigation Modelling - BuildingBlocksActivity AMenu Clicks originate frommenu region of activityboxMenu Clicks originate frommenu region of activityboxActivity BOnTouch.DetailsImageMenuActivity C[Add][ ] brackets imply onClick,so only label/view name isshown[ ] brackets imply onClick,so only label/view name isshownActivity D[Help]
  22. 22. R. Vasa, 201222Navigation Modelling - BuildingBlocksTabs or Action Bar navigations aregrouped with a dashed container. Eachtab can be labelledTabs or Action Bar navigations aregrouped with a dashed container. Eachtab can be labelledActivity BActivity YActivity XActivities A, X and Y are accessedvia tabsActivities A, X and Y are accessedvia tabsList GPSGoogle MapsOnTouch.DetailsImageActivity ATabs
  23. 23. R. Vasa, 201223Navigation Modelling - BuildingBlocksActivity ATabbed Activities (may) haveadditional complexity whenmodellingTabbed Activities (may) haveadditional complexity whenmodellingActivity YActivityXMenuActivity M[Create][Add]GPSGoogle MapsList
  24. 24. R. Vasa, 201224Navigation Modelling - BuildingBlocksActivity AIf Back Button isOverridden use specialblock notationIf Back Button isOverridden use specialblock notationActivity BActivity C[Change Details]OnTouch.DetailsImage
  25. 25. R. Vasa, 201225Navigation Modelling - BuildingBlocksActivity AData Passed is shown using <>bracketsData Passed is shown using <>bracketsMeaning: Activity A, startsActivity B passing it a bundleMeaning: Activity A, startsActivity B passing it a bundleActivity B[Get Address<bundle>]Data flow information is optional
  26. 26. R. Vasa, 201226Navigation Modelling - BuildingBlocksIf Activity returns data via acall-back, then use a solidarrow head, but show thereturned data in <> bracesIf Activity returns data via acall-back, then use a solidarrow head, but show thereturned data in <> bracesActivity A Activity B[Get Address<bundle>]<data_block_name>
  27. 27. R. Vasa, 201227Navigation Modelling - BuildingBlocksActivity ADialogs/Toasts are shown without anyarrow headsDialogs/Toasts are shown without anyarrow headsConfirm Exit DialogMessage ReceivedWe draw lines without arrow head todenote ownershipToasts have adashedboundaryToasts have adashedboundary
  28. 28. R. Vasa, 201228Navigation Modelling - BuildingBlocksActivity AExternal Applications or Activities inanother application are shown as ovalsExternal Applications or Activities inanother application are shown as ovalsChrome Browser[Browse(ACTION_VIEW)]Intents are shown within ()braces and part of thetriggerIntents are shown within ()braces and part of thetrigger
  29. 29. R. Vasa, 201229Navigation Modelling - BuildingBlocksActivity AClicks from List Views are shown using {}Clicks from List Views are shown using {}Phone{ContactStore(ACTION_DIAL)}Intents are shown within ()braces and part of thetriggerIntents are shown within ()braces and part of thetrigger
  30. 30. R. Vasa, 201230Navigation Modelling - BuildingBlocksActivity AWe prefix the Activity Namewith a * to indicate thelanding pageWe prefix the Activity Namewith a * to indicate thelanding pageActivity Y*ActivityXMenuGPSGoogle MapsList
  31. 31. R. Vasa, 201231Navigation Modelling -Information LevelWe use additional symbols toindicate information density /hierarchyWe use additional symbols toindicate information density /hierarchyActivityAOActivityACActivityADOverview (Dashboard or Summary)Collection (List, Table, Grid)Detail (Domain entity view)
  32. 32. R. Vasa, 201232InformationInformationOverviewOverviewNavigation Modelling -Information LevelActivity A ODashboards & InformationOverviewsNavigationNavigationDashboardDashboardIt may be a combination of above
  33. 33. R. Vasa, 201233Navigation Modelling -Information LevelActivity B C A Collection ofinformation (can be onmap, list or grid)Content Exploration / SelectionContent Exploration / Selection
  34. 34. R. Vasa, 201234Navigation Modelling -Information LevelActivity M DDetails about a specificdomain entity (can beeditable input to modifyinformation about entity)
  35. 35. R. Vasa, 201235Navigation Modelling -Information LevelActivity A Oi Activity B Ci Activity M DiAn “i” is added toindicate that theactivity permits someinputNeeded to capture level of interaction
  36. 36. R. Vasa, 201236Navigation Modelling -Information LevelActivity A Oi Activity B Ci Activity M DiExamples where “i” ishandy
  37. 37. R. Vasa, 201237Navigation Modelling -Information LevelActivity B CiSearching and Updating a Streamshould use Ci
  38. 38. R. Vasa, 201238Navigation Modelling - SettingPage•Showing a collection ofsettings is Ci•Showing a specific (single)setting is Di
  39. 39. R. Vasa, 201239Navigation Modelling -Information•The O C D classification will be domainspecific & depends on intentionShould this be O or C or D?
  40. 40. R. Vasa, 201240Navigation Modelling -Information LevelActivity A OActivity B CActivity M DA Collection ofinformation (can be onmap, list or grid)Dashboards &InformationOverviewsDetails about a specificdomain entity (can beeditable input to modifyinformation about entity)The O C D annotations are optional
  41. 41. R. Vasa, 201241Navigation Modelling - MissingPieces•The following are currently missing:•Background services•Background threads (or any parallelism)•Notifications that trigger activities is alsomissing
  42. 42. R. Vasa, 201242Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Simple Example•Building with Navigation Flow Models
  43. 43. R. Vasa, 201243Navigation Flow - ExampleMessaging Application (in Emulator)
  44. 44. R. Vasa, 201244Navigation Flow - Example[Compose][New Message]Compose Activity
  45. 45. R. Vasa, 201245Navigation Flow - Example[Compose][New Message]Compose ActivityMessagingMenu
  46. 46. R. Vasa, 201246Navigation Flow - Example[Compose][New Message]Compose ActivityMessagingMenu[Settings]
  47. 47. R. Vasa, 201247Navigation Flow - Example[Compose][New Message]MessagingMenu[Settings]Compose MessageMenuSettingsList Select RingtoneDialogVibrate SettingDialogList
  48. 48. R. Vasa, 201248Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  49. 49. R. Vasa, 201249When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignFeaturesFeaturesInitial builds of code should aimto demonstrate the navigationflow(without any actualfunctionality)Initial builds of code should aimto demonstrate the navigationflow(without any actualfunctionality)
  50. 50. R. Vasa, 201250When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignFeaturesFeaturesCode once you have a navigation flowmodelThis will help you setup initial templates andidentify permissions that you may need toadjust in the manifestFunctionality can be implemented incrementally
  51. 51. R. Vasa, 201251When can I start coding?SketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignFeaturesFeaturesInitial builds of code should aimto demonstrate the navigationflow(without any actualfunctionality)Initial builds of code should aimto demonstrate the navigationflow(without any actualfunctionality)Code once you have a navigation flowmodel
  52. 52. R. Vasa, 201252What should be in the initialbuilds?•Lists (with dummy data for adapters)•Dialogs (using standard templates)•Menus•Key interaction buttons (wired up if theystart 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 theactivities may have been identified (at thisstage)
  53. 53. R. Vasa, 201253Initial Builds + Sketches•You can include the sketches via imageviews into the initial builds•This will test the overall look and feel of theapp.•Very crude -- but effective
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×