Five Tips for Designing with Native Pickers

Five Tips for Designing with Native Pickers

A native picker with California cities
A native picker with California cities

Enhance your app design by following these five tips for when and how to use pickers.

A picker is a native input control from Apple. Pickers display one or more scrollable columns of items a user can select within a "wheel" display. If you've ever set an alarm on your phone, you've used a native picker.

We've pulled together five tips to consider when deciding where and how to add a picker.

  1. Use a picker for a longer list.

    If a list has more than 10 items, use a picker. For lists with less than 10 items, a pull down menu is a better fit due to its compact size.



  2. Limit your columns.

    To avoid overwhelming the user, limit the number of columns used within one picker. There isn't a hard and fast rule for the exact number of columns, but they begin to look cramped when you have more than four.



  3. Order your items.

    Help users quickly find what they’re looking for by logically ordering the items in your list. This can be alphabetical, by date, or something else.



  4. Use pickers in context.

    Don’t switch screens or cover related UI when showing a picker, as users can lose context. Make sure both the picker and the context are in view.



  5. Substitute a date picker.

    If you want a user to select a specific date and/or time, use a native date picker instead of a regular picker. Native pickers already have dates and times by default in addition to different modes. This will make your setup easier and the element more versatile.


To learn more about pickers, you can read Apple's Human Interface Guidelines.

iOS

Design

Start designing your mobile app in Play today.

Download Play for macOS

Want to talk or get a demo?

Start designing your mobile app in Play today.

Download Play for macOS

Want to talk or get a demo?

Start designing your mobile app in Play today.

Download Play for macOS

Want to talk or get a demo?