B – Page Progress Placement Concepts

With this course in mind, here’s how we might place the Page Progress Tracker elements:

  • Sample Course Home Page
    • Course progress (percentage of all course pages that the user has marked as completed)
    • Course introductory content
    • Course table of contents with page progress level (for pages the user has marked)
  • Module Home Page
    • Module progress percentage (percentage of all module pages that the user has marked as completed)
    • Module introductory content
    • Module table of contents with page progress level (for pages the user has marked)
    • Link to Course Home Page
  • Page
    • Page Progress Radio Buttons (with button checked for level the user has previously marked, if any)
    • Page content
    • Links to previous and next pages in this module, optionally with dots for all pages with current page highlighted
    • Link to Module Home Page

On a separate “My Progress” page or in a sidebar, it might be good to show the user:

  • Pages they have marked as in-progress but not yet marked as completed
  • Pages they marked as completed and bookmarked so they could easily revisit them later

These are all possible with Page Progress Tracker and a page hierarchy like we illustrated above that uses WordPress’ parent / child page relationships.