Navigation
buttons.
Next. Previous. The buttons that move learners through a course. They look simple, get used hundreds of times per learner per course, and quietly drive completion rates. Get them right and people barely notice. Get them wrong and the course feels frustrating from scene one.
Moving through linear content.
Navigation buttons are the rhythm of an eLearning module. They appear at the bottom of every scene, in the same position, with the same labels. Learners don't think about them — which is exactly what good navigation feels like.
- Moving forward and backward through scenes.
- Showing where the learner is and how far they have left.
- Locking progression until a required interaction is complete.
- Replacing a scroll-bar in scene-based courses.
Decision-driving actions.
Navigation buttons are quiet, secondary chrome. If you want the learner to do something specific — submit a quiz, choose a path in a scenario, take action — use a primary button, not a Next button.
- Submitting forms, quizzes, or scenario answers.
- Toggling content visibility — use toggle buttons.
- Branching choices in a scenario.
- Replacing the table of contents for non-linear navigation.
Try navigating.
A mini course module with three scenes. Use the Previous and Next buttons — or the arrow keys — to move between them. Watch how the buttons disable at the boundaries and the progress bar updates.
Click the card first, then use the left and right arrow keys to navigate. The card focusable and announces itself to screen readers; the buttons are real buttons with the disabled state set semantically, not just visually.
Get the visuals right.
Lower weight than primary buttons
Navigation is everywhere; primary actions are rare. If your Next button looks heavier than your Submit button, the visual hierarchy is wrong. Navigation buttons should feel like chrome — present, clickable, not screaming.
Consistent position, always
Bottom-right for Next, bottom-left for Previous (left-to-right languages). Always. If learners have to hunt for the navigation between scenes, the course feels broken — even though every button works.
Directional indicators
A small arrow (→ or ←) reinforces direction without adding clutter. Place the arrow on the side that matches the direction — right side for Next, left side for Previous. It's a small cue that pays off thousands of times across a course.
Accessibility — keyboard navigation
Left and right arrow keys should advance the module. Tab focuses the buttons in order. The scene container itself can be focusable so keyboard users don't have to tab past every interaction to reach the navigation.
Accessibility — screen reader announcements
When a scene changes, announce the new state — "Scene 2 of 3, Module overview" — via an aria-live region. Without it, screen reader users have no signal that the page has changed.
Disabled at boundaries, not hidden
On the first scene, Previous should be disabled, not removed. On the last scene, Next should change to "Finish" or "Submit", not disappear. Maintaining position and visibility tells the learner where they are in the course — removing the button just leaves a gap.
How to handle navigation that doesn't get in the way.
Decide whether the learner can skip ahead.
Free-jumping (any scene, any time) is fastest for confident learners but bypasses content. Locked-linear (must complete each scene) is safer for assessments but feels patronising. Most courses sit in the middle: lock until the learner has been on a scene, then unlock the Next button. Decide deliberately, then be consistent across the course.
Show progress, but show it small.
A thin progress bar or "3 of 12" indicator near the navigation tells the learner where they are. A full progress dashboard is overkill for a 10-scene module. Calibrate the progress UI to the course length — long courses benefit from chapter-level progress; short modules need just a percentage or scene count.
Make "Next" feel earned.
If a scene has a knowledge check, an interactive, or a required reflection, disable Next until the interaction is complete. The disabled state should pair with a small message ("Answer the question to continue") so learners aren't left wondering. A Next button that does nothing when clicked is far worse than a disabled one.
Use specific labels at boundaries.
"Next" works on every scene except the last, where it should be "Finish module", "Submit course", or "Complete training". The last action should feel different from a routine Next — and using a primary button style for the final action reinforces that. The first scene's Previous can be replaced with "Exit course" or "Save and exit" if appropriate.
Don't auto-advance unless the content demands it.
Letting a scene jump to the next when a video ends or an animation finishes feels good in demos and bad in practice. Learners haven't finished reading, haven't taken notes, haven't reflected. The Next button puts the pace under their control — auto-advancing takes that away.
Keep Previous functional, not punitive.
Going backward should never reset a quiz answer, lose a reflection, or undo progress. Some courses do this intentionally — to prevent re-attempts — but the better answer is to lock the relevant content as "complete" so going back is informational, not destructive.
Mobile: bigger targets, same position.
On phones, the navigation buttons should grow in tap area but stay in their familiar position. Many learners flip between phone and desktop on the same course — moving the navigation between platforms is disorienting.
When you'd reach for navigation buttons.
Scene-based modules
The default eLearning pattern — content broken into scenes with prev/next at the bottom of each. Almost every Articulate Storyline course works this way.
Linear video walkthroughs
Tutorial-style content where each scene introduces a new feature or step. Navigation locks until the video has been watched, then unlocks.
Compliance modules with required scenes
Where every scene must be visited and acknowledged. Locked-linear navigation enforces the requirement without needing a separate completion checklist.
Carousels with extended content
Closely related to carousels: when each "card" in a carousel is full-screen content, the carousel's dots and arrows become navigation buttons in everything but name.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.