Navigation Slider

Improving navigation with a fun UI pattern

Problem

Users reported difficulty navigating between pay periods quickly. PACT Planner’s interface only allowed movement one pay period at a time, necessitating numerous clicks to reach distant pay periods.

Solution

The pay period slider enables users to easily navigate through the entire project timeline by sliding to or clicking on any pay period. Plus, users can still use the existing arrow buttons to move forward or backward by one pay period at a time.

This feature also aids wayfinding, allowing users to easily see where the displayed pay periods fall within the contract's duration. The pay period representations on the slider are styled to match their corresponding elements.

Sliding
Clicking
Nudging

Outcome

Users responded positively to a demonstration of this feature. From basic self-testing, I estimated that navigating from the start to the end of a two-year project is approximately 94% faster and and requires 44 fewer clicks using the pay period slider.


Next: Tipping Points arrow_forward