Siyona Michael

Component Design - Calendar

Accessibility, Design systems

2024

Designed a component for the Secondight.ai design system to make date selection efficient for both mouse and keyboard users.

Role

UX Designer

Duration

2 weeks

Team

2 Designers X 1 Developer

X 1 CEO

Problem Statement

Designing an accessible date-picker requires minimizing interaction steps for both mouse and keyboard users. The challenge is to ensure efficient navigation, enabling keyboard-only users to select dates swiftly without excessive tabbing while maintaining a seamless experience for mouse users.

Accessibility Considerations

Concept Sketches

Dropdown flow

Keyboard users can navigate the date picker primarily with the 'Tab' and arrow keys, with the option to type ahead for quicker selection. A mouse user only needs to click the first field; subsequent fields automatically open as the previous ones are completed, reducing clicks and streamlining the interaction.

Calendar flow

This is an easier interaction if the keyboard users are more comfortable typing in the date instead of selection and it woildnt even cost many clicks for the mouse users. There is an added benefit to this concept as the users can use the day of the week (M, T ,W etc.) to recall which date they wanna put in.

Business Input

This calendar was designed for the purpose of use in the cyber insurance product. The user would not be navigating the years beyond the past year or above the upcoming year.

Design direction post feedback

Based on the business needs, accessibility and usability of the component the Calendar Concept was picked. The year dropdown inside the calendar was replaced with a spin box to navigate either a year behind or a year forward.