Many of you might know, I enjoy a fine craft brew from time to time, and living in San Diego, one of the best microbrewery towns certainly helps. To keep track of my various tastings, I use the Untappd service (here is my profile). The app follows many of the same ideas as Foursquare; instead of places you check in with a beer. They also have a badge system among other features you would expect from a social media service.
What is interesting about the app is some of it’s history. Originally, this service was only available as a web app. A fact they were quite proud of. I would usually refer to them as the example of going the web app route versus building a native application.
Recently, they made the leap into the native app realm, by wrapping their web app with PhoneGap. This makes good sense given their previous investment. But this blog post is not about this choice, but rather to talk about a UI choice.
Take a look at the initial screen from the iOS version of the app. What has focus?
If you said ‘Drink Up’ or the larger yellow tab with beer bottles, you would be wrong! Instead, it is the Friends tab. So many times, I go to check in with a beer and begin typing the beer’s name in the search field only to be informed that the beer can not be found in my friends. Then I remember that I need to switch tabs to log my beer.
Why do I make this error? Well the designers have placed more visual emphasis on the Drink Up tab than then other tabs. By adding this visual weight to the element, a casual glance of the UI would lead the user to assume that the Drink Up tab was selected and the screen’s contents were based on that selection. In addition, except for the hint text in the search field, there is no difference in the top portion (about 20%) of either screen.
Now, logging your beers is the primary task of this app, and hence the reason for the visual emphasis for the tab’s look and feel. But what fails is that this tab is not automatically selected focus. It is an easy fix, programmatically set the default state to the Drink Up tab. One could go a bit further and maybe repeat the icons that are used on the tabs next to the search field. Let’s face it, this is an app you will use with alcohol! 😉
So, as you develop your next great mobile application, take care in what you provide focus on and how this reflected in the code. Now what’s in my ‘fridge to drink…