Driving Engagement Through Homepage and Navigational Design Presentation at the Brightspace London Connection, May 18. 2017, by Matt Murphy of D2L Newfoundland. Canada House in Trafalgar Square.

1. The Art of the Possible
Driving Engagement Through Homepage and Navigational Design

2. Overview
Homepages
Function over fashion
Fashion too
Custom Widgets
Content
Table of contents
HTML Templates
Iconography
Assessment Tools
Self-Assessment
Quiz
Survey
Course Tours
Leadership Course
Selling Creative Services
Ice Cream Course
Jeff’s Sandbox

3. Homepage Functions
What do you want your homepage to do?
Navigation – get learners to where they need to go
Communication – get messages to your learners
Progress – show learners what they’ve done and what is next
Course Admin → Homepages→ Create Homepage

4. Navigation
• Content Browser
• User Link
• Get Started*
Communication
• Announcements
• Calendar
• Twitter*
• Instagram*
• Activity Feed
Progress
• Tasks
• Course Activities*
• Course Awards*
* Custom Widgets

5. Homepage Layout
People tend to read screens in
the shape of an “F”.
Don’t overwhelm learners with
widgets.
Be mindful of potential white
space issues.

6. Homepage Fashion
Style your course to suit your branding
for a unified professional look.
Create different themes to create
distinctions between departments and
the org-level homepage.
Course Admin → Navigation &
Themes → Themes → Create Theme
Keep accessibility in mind. Use a light touch when it comes to selecting colours.

7. Custom Widgets
These can be as sophisticated or as simple as you want.
Common uses include:
Get Started API Calls
Static Information Social Media
Banner Image Embeddable Objects
Course Admin → Widgets→ Custom Widgets

8. Table of Contents
• Organize your modules with
numbers and consistent naming
convention
• Highly intuitive navigation and
tracking structure
• Include module descriptions
• Include multimedia, images,
video, audio

9. Content – HTML Templates
Creates consistency and
responsiveness
Bootstrap elements can
help organize content and
make it more interactive
CSS can assist your
brand

10. Content - Iconography
Consistent use of a set of icons can
appeal to learner episodic memory
Learners immediately know what to
expect and how to interact with the
content/activity
Avatars are a great creative
substitute

11. Quiz
• Ties to Gradebook
• Anti-Cheat Measures
• Random Sections
• Cover LOs with
Sections
Survey
• Not Gradable
• Branching Wizard
• No Random Sections
• Share Reports
Self-Assessment
• Not Gradable
• Hints
• Random Sections
• Purely for Practice
*All are subjects of Release Conditions
Assessment Tool

12. Learner Self-Determination
Differentiated Learning
• Create Checklists or Quizzes asking learners to make a choice
• Create multiple learning paths
• Attach Release Conditions to learning paths
• Ensure Gradebook has appropriate settings enabled
Quiz
“Select A or B”
RC: Grade < 50% on Grade Item
RC: Grade > 50%
on Grade Item Submodule 1a
Submodule 1b
Dropbox

13. Learner Self-Determination
Differentiated Assessment
• Create Checklists or Quizzes asking learners to make a choice
• Create 2+ assessment opportunities
• Attach Release Conditions to assessments
• Ensure Gradebook has appropriate Categories
Module 1
RC: Checklist Item
Checklist
Dropbox
QuizRC: Checklist Item
Grade Category A
Item 1
Grade Category A
Item 2

14. Gamification
Badges
• Awards Tool
• Create a badging schedule and
plan
Narrative
• HTML Editors
• Use module descriptions to
frame content
Avatars
• GBL (Adventure Pack)
• Embed ‘non-player characters’ in
content and assessments
Social Interactions
• Discussions
• Groups
• Rating Schemes

15. Let’s have a look at some examples…

16. Questions