As part of my work designing a new Learning Management System for
iBiology Courses, I've had time to develop some new approaches to delivering course content to learners. One of those experiments is a novel way to represent and enable navigation through a course.
Having this freedom to innovate, by the way, is one of the reasons we moved away from wrestling with Open edX -- a great system that served us well, but one that we ultimately determined was too involved and complex for a single developer...well, at least this developer.
( More on that decision here. )
One of the UI ideas I'm monkeying with now is a modal dialog I call "QuickNav." Yes. The very name speaks innovation. QuickNav tries to provide a complete representation of course contents in a grid format, adjacent to a unit "preview" area, rather than a column of text links provided by the typical left navigation.
We offer the nav as a second option, right next to a button that opens a traditional left nav:
For those not interested in such frivolities, the traditional approach is still available and it's easy to ignore the new option.
But for the adventurous, on clicking the QuickNav button we show a modal dialog that presents the entire course in a condensed grid format:
Rollovers provide additional module and section context for each unit (a job performed in the traditional left nav by module and section subheads).
So at the very least, here you have a condensed course navigation and summary of contents, in a slightly more graphic representation that shows the magnitude of what you've done and what you still have to do, and -- in my mind at least -- makes it easier to scan options and jump around than the traditional left nav does.
"So...ehh....that's the brilliant innovation?"
Next Steps
Ok, let's say "platform for innovation" instead. I think the more innovative parts of QuickNav are new features that we can now lay over this grid representation, and in fact we intend to when time allows. I've only had time so far to build this initial framework.
This more graphic, grid-based approach enables features like:
- Dynamic unit summary: I want to build a dynamic view of a unit's content on the right part of the QuickNav dialog. So when the user rolls over a unit marker in the grid on the left, we get a preview of the course content on the right. (Async, no page refresh. I'm using React at the moment but may look into Angular or maybe Stencil. Thoughts, front end people?) This preview will include a unit summary, maybe a video still if the unit has a video, and some other high-level information about the unit.
- Content icons: Each unit marker could have content icons that indicate the types of content found in that unit: a video, assessments, worksheets, etc.
- Filtering: If each unit marker has associated meta-data and content icons, we can then add a filter to the top of the QuickNav that lets you hide/show units by content type, whether or not you've visited it, popularity in your cohort, etc. Clicking on a video icon highlights unit markers with video content.
- Graphic Search: QuickNav's graphic but still time-oriented layout might make search more interesting. Rather than a list of hits, you can instead see units with matching content light up from their position in the course.
Thoughts?
So that in a nutshell is QuickNav. Is this interesting? ...slightly cool? ...sorry you're still reading? Ping me with your thoughts, twitter if you prefer as I'm probably wasting time there right now : danielmcq.