A wheel picker — also known as a selector wheel, a spinner wheel, or a spinner list — is a convenient method for choosing between a long range of different options without the need to display all those options at the same time. You’ll most commonly encounter a spinning list in the form of a wheel date picker of the kind used to set a date in an app.

Like many other mobile patterns, the wheel picker is a product of necessity, in that it came about as a direct result of the limited screen space available on smaller devices.

When to use wheel pickers?

If a design includes a form, then users will likely need to select an option from among a list of many other similar items.

Most desktop date pickers, for instance, tend to be a drop down grid or calendar function, where users can just manually go through and pick the proper month, day, and year at a glance.

Spinning wheel pickers, on the other hand, allow for users to scroll through a large number of options very quickly, taking advantage of the smaller screen of a smartphone by just showing one option at a time. It’s an elegant, efficient way to give people a user-friendly way to weigh a large number of options and pick one within the auspices of a smaller app screen.

In Apple’s mobile Safari browser, wheel pickers are the default way of interacting with both a select element and a date-typeinput element. (On desktop, a select input produces a dropdown menu and a date-type input opens a date picker).

Mobile browsers use other solutions for iOS and Android picker wheels. In part this may be because mobile pickers are notoriously difficult to design.

What are the advantages of a rotating picker wheel?

While a dropdown menu will usually show every item in the list simultaneously, a wheel picker instead satisfies a“next-best” set of requirements:

● It indicates the currently selected item.

● It allows the user to move forward and backward between available choices.

● It indicates whether or not more choices exist in a given direction.

Finally, a rotating selector wheel does all of this through a single, low-precision interaction: the vertical scroll. This makes the wheel picker ideal not only as a date/time picker tool, but in any situation where the number of options in a multiple choice list exceeds the screen space available to display all those options at once.

Disadvantages of a rotating date picker UI

While wheel pickers are fantastic for allowing users to select specific dates in a UI, it does come with its number of complications.

First off, they can be harder and more time-consuming to use for users who prefer a drop down date grid. Scrolling through number after number can be difficult or tedious for the user, especially when they have to scroll longer than others might. Older users, for instance, might get frustrated with the need to scroll through so many years to select the correct one; same goes for people who, say, have a date of birth later in the year or month.

Tips and tricks for picking the right picker

When you decide to use a wheel picker for your mobile app, keep the following in mind:

Use pickers for longer lists of items

Pull down menus might be best for users who only have to choose from a few items. If your list is long, though, that’s when wheel pickers can come in most handy.

Keep the values of a picker in a logical, predictable order

Don’t randomize the values of the list your user is picking from; go in alphabetical or numeric order, so the user has an idea of the progress they’re making as they scroll.

Keep your picker on the same screen as its prompt

Don’t force the user to scroll away from the page they’re on to select an option; keep the picker in the context of the data they’re choosing.

Make a picker wheel in Framer

The trick to successfully designing a wheel picker in Framer is to use a Page component with a vertical direction and the Wheel Effect selected as its Effect. Resize the component to the size of its pages, and then set its Overlay to Show.

Increasing the Page component’s Gap property will increase the spacing between items.

Setting the Momentum property to true will allow for longer moves between items, but may make short moves more difficult when using pages with smaller heights.

By using Framer you can quickly put together a convenient wheel picker for your app without the need to get into HTML or other code.

Wheel Picker

What is a wheel picker?