Tai Shimizu

iOS & Mac Developer

Creator of the iOS photography apps Gridditor & Filterstorm, the Mac drawing app Inkist, the Mac HDR app Light Compressor, and the experimental web browser Torii.

Follow on Twitter

Follow on ADN

Subscribe via RSS

Contact via email

Fitts’s Law, Touchscreens, and Filterstorm Cropping

The official Twitter app’s (née Tweetie) innovative pull-to-refresh system has been a big hit, one copied by many apps. If you’re not familiar with the design, the screenshot below shows the interface. You have a list of tweets like in any twitter (or list based) app, but instead of hitting a button to refresh, you pull down the list just past where it ends and it will refresh.

Tweetie’s ‘Pull-to-Refresh’ Interface

http:  taishimizu.com pictures fitts law touchscreens and filterstorm cropping  tweetie pull to refresh thumb.png

Though I’ve read of distaste for the feature from some, I’m personally a big fan and have had it on my mind while working on Filterstorm. The reason it’s so fantastically useful isn’t hard to understand; in other apps I have to move my thumb into a relatively awkward position to hit a button at the bottom or top of the screen, but using Twitter’s system, you can put your finger nearly anywhere on the screen and simply drag down a bit.

In interface design, this property is called Fitts’s law. Loosely, Fitts’s law states the closer to, and larger the target for the pointer, the faster the pointer can reach the target. Since we’re talking about accomplishing a goal — refreshing the contents of a list — I would add the complexity of the gesture as a parameter to the amount of time it takes. Tapping is easier than swiping is easier than pinching, with a number of other gestures in the spectrum. In Twitter’s case, swiping is a bit more complex of a gesture than tapping, but that’s overshadowed by the other two variables. The distance to the list of tweets is going to be very small, since the list takes nearly the entire screen, and the size is huge.

This brings us to cropping. Cropping, like nearly all of Filterstorm’s tools, was originally designed for use on iPad, and like many of Filterstorm’s tools, did not make the transition to iPhone well. It’s accomplished by moving control points along the cropping box to scale the size, or using a center point to move the box; zooming in and out does not alter the crop. The problem on iPhone were that the control points on the corners were too large, obscuring much of the image making you zoom in and zoom out to help see what you’re doing. Worse yet, the drawing method is slow on the retina display.

Old Cropping Interface

http:  taishimizu.com pictures fitts law touchscreens and filterstorm cropping  filterstorm old cropping rect thumb.png

New Cropping interface

http:  taishimizu.com pictures fitts law touchscreens and filterstorm cropping filterstorm new cropping thumb.png

The new cropping interface is much cleaner. The lines are less obtrusive than the large box, the irrelevant toolbar no longer shows at the bottom, and it’s faster and easier to use. Almost the entire screen can be used for pinching or flicking the image to position it in the cropping rectangle.

Old Ratio Picker

http:  taishimizu.com pictures fitts law touchscreens and filterstorm cropping  filterstorm old cropping choose ratio thumb.png

The old cropping interface was a two step process, using the interface above, you choose the cropping ratio and whether or not you want to be locked into that cropping ratio, then you crop.

New Ratio Picker

http:  taishimizu.com pictures fitts law touchscreens and filterstorm cropping  filterstorm new cropping ratio picker showing thumb.png

The new interface never asks us this first step unless we want it to. Tapping the show ratio button will at any time bring up the cropping ratio boxes (defaulted to the image’s original ratio), and then you can swap the values or put in your own and the cropping lines will move to match.

Now that I have moved to working on Filterstorm full time, I’m going to be spending more time cleaning up existing features to make them better. The new cropping interface will be out when Filterstorm 2.6 is released along with new features including borders and double exposures.

Posted by tai on 2010-11-01 09:44:51. Comments (0) | Tiny link

Previous Entry: The Legendary Nikon SP

Next Entry: The Long Road to Pro Part 1

Comments

It appears nothing is here. Why not contribute?

All content © Tai Shimizu unless otherwise indicated.