PUBLISHED ON
12 January 2023
Toggle Dropdown - An Experimental UI Component
Types of Leaderboards
There are two types of leaderboards: a Monthly Leaderboard, providing rankings for students within a specific month, and an All-Time Leaderboard, which aggregates the monthly scores of each student.
Requirement
We needed a UI component to switch between the Monthly leaderboards and the All-Time Leaderboard.
Widget Explorations
Explorations 1
A dropdown for switching between all-time and monthly leaderboards was implemented.
However, this solution violated the hierarchy of the all-time and monthly leaderboards. Presenting them in the same dropdown places them at the same level of hierarchy, thereby reducing discoverability.
Exploration 2
A tab group featuring an All-Time Tab and a Monthly Tab with a dropdown was implemented.
However, a drawback of this solution is that the dropdown only appears when the Monthly Tab is selected. This impacts the discoverability of the monthly leaderboards, making the solution less intuitive.
Final Solution (Exploration 3)
This is referred to as a "Toggle Dropdown." It involves a straightforward switch between All-Time and Monthly leaderboards. Within the Monthly leaderboard toggle, there is also a dropdown allowing the selection of leaderboards from different months, as illustrated in the mockup below.
Prototyping & Validation
To validate the final solution, I created a prototype & had 5 users navigate between the all-time and monthly leaderboards. All 5 users were able to perform this task seamlessly without encountering any difficulties or friction. Hence, validating the design of the component.
Closing Notes
While designing this component, I was aware that I was deviating from the established UI rules. However, after testing the designs with users and subsequently reviewing the data, I gained confidence in the design I created and it felt satisfying, to be honest.
