The UI Implications of Having a Big Finger

Among the settings that a user of my Twitter app, ThrededTweet, can adjust are the number of tweets that should be loaded at one time, and the time interval that should pass between reloads.  For the former, the allowed values are between 20 and 200, while for the latter it’s between 0 and 60 minutes.  These values are adjusted with a slider on the “Settings” page.

Currently (version 1.1.2 and earlier), the sliders behave in a purely linear manner. That is, the distance you have to slide the slider is the same to go from 5 minutes to 6 minutes, as it is to go from 55 minutes to 56 minutes. While this works well in the iPhone simulator, where user interface elements are manipulated with a mouse, on an actual iPhone I’ve discovered that it’s a different story. I’m 6’5″, with hands to match, and I’ve found it difficult to exercise the fine amount of control needed to hit a value precisely. If I want to reload every 5 minutes, sometimes I’ll end up with 4 minutes or 6 minutes.

In version 1.2.0, the sliders are still there, but after having a realization about usage, I’ve modified how they’re handled in a way that improves usability quite a bit. The realization is that, most of the time, people will be more concerned about hitting small values precisely than they will about hitting large values. Many people will want to select between a reload every minute vs. every two minutes, while few if any will be concerned about accurately selecting between 55 minutes and 56 minutes.

So as of 1.2.0, slider values are interpreted with an exponential function, rather than a linear function. This gives a lot more sensitivity for small values, at the cost of sensitivity for large values.

If we assume that a slider all the way left has value 0.0, and one all the way to the right has value 1.0, then the reload time can be defined like so:

reloadTime = 10^sliderValue * 6.666666 – 6.666666

For sliderValue=0, this gives a reload time of 0 minutes, while for sliderValue=1, this gives 60 minutes. In Objective-C, this is:

    int reloadTime = round(pow(10.0,reloadTimeSlider.value)*6.6666666-6.6666666);

Going the other way:

    reloadTimeSlider.value = log10((reloadTime+6.6666666)/6.6666666);

For the number of tweets to load, since the range is between 10^0*20 and 10^1*20 (20-200), the formula is simpler:

    int numTweetsToLoad = round(pow(10.0,feedCountSlider.value)*20.0);
    feedCountSlider.value = log10(numTweetsToLoad/20.0);

After making this change, I’ve found these sliders much easier to manipulate accurately on the actual phone.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: