HIT3328 - Chapter0702 - Navigation Flow and Design Approach
Upcoming SlideShare
Loading in...5
×
 

HIT3328 - Chapter0702 - Navigation Flow and Design Approach

on

  • 336 views

 

Statistics

Views

Total Views
336
Views on SlideShare
336
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HIT3328 - Chapter0702 - Navigation Flow and Design Approach HIT3328 - Chapter0702 - Navigation Flow and Design Approach Presentation Transcript

  • HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 2011Twitter: @rvasaBlog: http://rvasa.blogspot.com1Lecture 07Navigation Flowand DesignApproach
  • R. Vasa, 20122Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  • 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
  • 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 sketchconceptsScenarios (Value &Scenarios (Value &Metaphor)Metaphor)Tasks & Modes ofTasks & Modes ofOperationOperationScenarios generate taskscripts (and modes ofoperation)Prototyping explores these taskscripts and modes of operation
  • 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
  • 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
  • R. Vasa, 201210Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  • R. Vasa, 201211Mobile App. Design ApproachSketchinSketchinggMotivatioMotivationnScenarioScenariossConstrainConstraintstsPrototypiPrototypingngNavigation FlowNavigation FlowDesignDesignScreenScreen(Activity)(Activity)Definition/DesiDefinition/DesigngnDomain/DataDomain/DataModelModelStylesStyles&&LayoutLayoutssStrings &Strings &ResourceResourcessFeaturesFeatures
  • 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
  • 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
  • R. Vasa, 201214Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  • 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
  • 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
  • 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
  • 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
  • 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
  • R. Vasa, 201220Navigation Modelling - BuildingBlocksActivity ACyclic Arcs are permittedEvent triggers start with“on”Cyclic Arcs are permittedEvent triggers start with“on”Activity BonTouch.DetailsImageonOrientationChange
  • 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]
  • 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
  • R. Vasa, 201223Navigation Modelling - BuildingBlocksActivity ATabbed Activities (may) haveadditional complexity whenmodellingTabbed Activities (may) haveadditional complexity whenmodellingActivity YActivityXMenuActivity M[Create][Add]GPSGoogle MapsList
  • R. Vasa, 201224Navigation Modelling - BuildingBlocksActivity AIf Back Button isOverridden use specialblock notationIf Back Button isOverridden use specialblock notationActivity BActivity C[Change Details]OnTouch.DetailsImage
  • 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
  • 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>
  • 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
  • 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
  • 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
  • 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
  • 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)
  • R. Vasa, 201232InformationInformationOverviewOverviewNavigation Modelling -Information LevelActivity A ODashboards & InformationOverviewsNavigationNavigationDashboardDashboardIt may be a combination of above
  • R. Vasa, 201233Navigation Modelling -Information LevelActivity B C A Collection ofinformation (can be onmap, list or grid)Content Exploration / SelectionContent Exploration / Selection
  • R. Vasa, 201234Navigation Modelling -Information LevelActivity M DDetails about a specificdomain entity (can beeditable input to modifyinformation about entity)
  • 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
  • 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 is Di
  • R. Vasa, 201239Navigation Modelling -Information•The O C D classification will be domainspecific & depends on intentionShould this be O or C or D?
  • 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
  • R. Vasa, 201241Navigation Modelling - MissingPieces•The following are currently missing:•Background services•Background threads (or any parallelism)•Notifications that trigger activities is alsomissing
  • R. Vasa, 201242Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Simple Example•Building with Navigation Flow Models
  • 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 Select RingtoneDialogVibrate SettingDialogList
  • R. Vasa, 201248Lecture Overview•Short Recap (previous weeks)•Mobile App. Design Approach•Navigation Flow Models•Building with Navigation Flow Models
  • 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)
  • 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
  • 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
  • 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)
  • 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