NeatoCode Techniques
Options Without Hurting Flow: WattsupPhoto Album Picking

WattsupPhoto, the fun neon collage making app I do the programming for, just got a great update that gives power users the option they’ve been requesting without hurting the basic flow. Here’s a screenshot with the control highlighted:


The app is well rated at 4 stars, but reviews have been asking for the ability to pick pictures by album, not just all photos sorted most recent first. This update adds a drop down control in the title bar to do just that. The user interaction now allows just quickly tapping some recent photos, or filtering by album first:


I like this solution a lot. Early prototypes had users picking each image to be collaged via Android’s image picking system feature, but that required the user to go through two screens for every image. The user flow was long and grueling:


That really bogged down the app and the artist rightfully called me up and said the interaction had to be more like a fun slot machine without a lot of places for people to get stuck on decisions or leave.

The end result is a nicer interaction than the default, and yet it doesn’t force the user to deal with the option unless they want to. Many experts I’ve talked to have said that you should avoid adding options and features for any tiny situation that comes up because they can make the experience of using your app worse.


Implementation

Adding a navigation spinner while using ActionBarSherlock is pretty straight forward! First, have your Activity implement OnNavigationListener and setup some fields to store references to the selection and control itself:

public class ChoosePhotos extends SherlockActivity implements OnNavigationListener {

    // Navigation spinner
    private SpinnerAdapter mSpinnerAdapter;
    
    // Selected photo album, starts with dummy prompt value that shows all photos.
    private AlbumListing mAlbum = new AlbumListing("Choose album...", null);


Next, setup the actual spinner control:

    @Override
    public void onCreate(final Bundle aSavedInstanceState) {
        super.onCreate(aSavedInstanceState);

	// Create navigation spinner using the album titles on the device.        
        final List albums = MediaStoreUtil.getAlbumTitles(this);
        albums.add(0, mAlbum);
        final SpinnerAdapter mSpinnerAdapter = new ArrayAdapter(this,
                android.R.layout.simple_spinner_dropdown_item,
                albums);

	// Set the action bar to use navigation mode showing the spinner.
        final ActionBar bar = getSupportActionBar();        
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
        bar.setListNavigationCallbacks(mSpinnerAdapter, this);


And finally, respond to selections on it:

    @Override
    public boolean onNavigationItemSelected(final int position, final long itemId) {
    	mAlbum = (AlbumListing) mSpinnerAdapter.getItem(position);
	
	// If we haven't loaded pictures yet, we're done. Selection will be used on load.
        if (null == mImageAdapter) {
            return true;
        }

	// Otherwise we have to reload the data with the new filtering.
        mImageAdapter.loadData();
        return true;
    }


You can see navigation spinners like this in many high quality apps, like the New York Times and GMail:


It is one of the recommended patterns on the Android Design site. Having it all over the place in many apps means users will naturally look for it when they want to do this sort of function, so we all win.

Hope this write up helps you add features without bogging down your user flow! Check out the results in WattsupPhoto. Thanks!

Blog comments powered by Disqus