Learning Design
Expandable References for Better UX
Enhanced a course page by integrating an expandable 'show references' feature, applying the principle of progressive disclosure to simplify the UI.
Expandable References for Better UX
Applying progressive disclosure to simplify UI and reduce cognitive load.
Project Overview
In this project, I enhanced a course page by integrating an expandable 'show references' feature. This design aligns with the principle of progressive disclosure, which defers advanced or less frequently used features to secondary screens, simplifying the user interface and reducing cognitive load.
The Problem
The original page presented a lengthy reference list, requiring extensive scrolling and potentially overwhelming students. This layout hindered efficient navigation and detracted from the primary content.
The Solution
Implemented an expandable 'show references' box. This feature allows students to access references on demand, providing greater control and freedom to navigate content according to their needs. The references section is initially collapsed, displaying a link to expand. When clicked, the full list of references expands below, allowing students to view them without leaving the current page.
Outcome
The integration of the expandable 'show references' feature resulted in a cleaner, more intuitive interface. Students can now focus on the main content without unnecessary distractions, and access references seamlessly when needed. This project underscores the importance of user-centred design in educational materials.
Gallery (Before & After)
Before: Reference list displaying as a long list of text adding extra scrolling to students to reach the bottom navigation pages
After: Expandable accordion in branded colours
Interested in improving learning experiences?
I can walk through how small UX improvements can make a big impact on student engagement.
Contact me