Using Pickers in Mobile

12

Pickers are among the strange interfaces in the mobile. There isn’t a specific defined role for them. People use them in very different occasions.

  • The most important role of a picker is to facilitate and replace typing act on the keyboard in mobile devices. The small real estate of the mobiles makes it hard for user to type in their input (It is good to know the 40px is the minimum size of a button for typing on iPhone interface).
  • Selecting is easier and faster than typing. Specially in the call to action’s page.
  •  When there are multiple inputs using pickers will let you have different combination choices.
  • Make sure to have the size of the picker large enough for fingerprint or gesture touch.
 For starting point, without designing or selecting any pickers, make a list of all selections that users need for your page.
  • Can you combine and delete some of them?
  • What are the best ways to turn them to a visual selection? Have all possible formats in front of you such as : wheels, drop down, list, push buttons, drag, and more.
Then start to wireframe and design and off course test it with real users first.
Don’t use pickers:
When you don’t have above needs. In most cases using a list can be replaced for simple selections.

Lets review some samples:

 

Using pickers in mobile

http://www.uxmatters.com/mt/archives/2010/03/designing-mobile-search-turning-limitations-into-opportunities.php

Picker can work as drop down or refining the research.

 

 

Multiple Inputs:

 

Using pickers in mobile

 

http://infinite-labs.net/iphone-bits/

 

For using date and time, picker is the best choice. Clicking on a drop down or a wheel, both works better than + and – .

 

Using pickers in mobile

http://www.lukew.com/presos/preso.asp?23

 

Combination of Picker and Key Board Input:

Using pickers in mobile

It can be used in many forms, wether user needs to enter a password or any short description.

Avoid typing as much as possible. It is proven that users are looking for an easy and effortless way to answer.

http://www.lukew.com/presos/preso.asp?23

 

 

Using pickers in mobile

Using pickers in mobile

 

http://www.androidpatterns.com/uap_pattern/date-and-time-picker-wheel

 

Calendars:

Calendars are one the most common pickers.

There are many different UI designs available for creating a better format of calendar’s picker. Most of them share same feature for next and previous month or selecting a date.

http://dribbble.com/shots/356307-Date-Picker

Using pickers in mobileSource:

http://dribbble.com/shots/356307-Date-Picker

 

 

Using pickers in mobiel

 www.kayak.com

 

 

 

Custom Picker:

You can be creative in the design of pickers, below is one sample.

http://dribbble.com/shots/356307-Date-Picker

Using pickers in mobile

 

Map Selection:

It is very visual and concise with the colorful legend.

 

Using pickers in mobile

Source: http://www.lukew.com/presos/preso.asp?23

 

Multiple Dates:

Please note how selecting multiple dates works together with the related info and compare it with traditional way of having information in different pages.

 

Using pickers in mobile

 

http://www.lukew.com/presos/preso.asp?23

 

Sliders:

When there is a range of selections, sliders work the best. Filtered buttons help users in refining the selection.

 

Using pickers in mobile

Source :http://www.lukew.com/presos/preso.asp?23

 

Conclusion:

Picker is your friend. Always ask this question: “Can user select vs. typing?  If yes, which format works better?”

 

About the author:

Saya is a web and graphic designer, fine artist and a bit more. Follow her on Twitter / Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

seven + 9 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>