Utilizing the thumb zone for dropdowns

This week’s design challenge was to design a dropdown. I wanted to create something specifically for mobile.

Many mobile users use their device with one hand, and the vast majority use one thumb on the screen.

85% of users interact with their screen with a single thumb

The resulting “Thumb Zone” shows where on the screen users can most easily reach with their thumb.

Thumb zones become smaller and thus more relevant the larger the screen gets

Filling out forms on mobile typically requires two hands because the questions and controls are oriented to the top left of the screen, which is notably the most difficult area to access with a thumb.

I decide to create a control that utilizes the thumb zone and the natural radial swiping motion of the thumb.

All selectable options are in the thumb zone

A radial thumb swipe brings the other options into the thumb zone for easy selection