Mobile Web App 1: Wireframing
In my last post, I introduced the mobile app project that I’m going to undertake. Today I took the first step and sketched out the UI of my app. From this, I can get an idea of the number of different screens (don’t call them pages!) and how they connect, as well as the different UI elements that I will need to either get from a library or create on my own.
The home screen
This is what you will see when you open the app or visit the site, and are already logged in. (The whole login/account system is something that I haven’t looked at yet. I just know that I want it to be super-simple.)
It presents the four main things that you can do: browse your beer notes, add a new note, search for a beer, or look at a random beer from the database.
(Note that the title is wrong in these sketches. I was going to call the app Beer.Me until I realized that’s already taken.)
Adding a new beer
This needs to be super-simple, because when you’re hanging out with people or conversing, you don’t want to spend a ton of time typing into your phone. Key design principle: Don’t make your user look lame!
Because of that, the ability to grab a snapshot of the label using your camera phone is key. I could envision myself doing that to remember a beer that I liked, and then filling in the rest of the details later. (This implies that we need a way to remind the user of incomplete notes, and prompt her to complete them. This may or may not be another screen.)
I avoided the typical 5-point star rating scale, because I think it’s often overkill. I’m not sure that my opinions on beer are fine-grained enough to support five separate divisions of feeling; I tend to think of things as liked or disliked, with a few standouts that I particularly love. I threw in a “hate” button too, mainly for symmetry’s sake, or to remind yourself of something terrible that you never want to try again.
Browsing your notes
Just as important as adding a new note, is the ability to go back and easily look over the notes that you’ve created.
The browse screen is fairly simple: it offers a segmented control with 4 different ways of organizing your notes, and below that a simple list. Touching a beer on the list will slide over to that beer’s note, in the standard iPhone-ish way.
Here’s a sketch of the screen organized by name:
And here’s an example organized by the name of the brewery:
The two other views would look similar to this one, with subheadings on the list for category or for the date the note was entered, and entries alphabetically within that.
Viewing your own notes
From the browse list or from search, you would have the ability to view a note that you had previously made. This would include your information, of course, and also some global stats about that beer, if anyone else had noted it as well.
The global stats bar would double as a filter of the other people’s notes below it. You could tap on any particular rating and the section would filter to only show notes by people who had assigned that rating.
Viewing other beers
Of course, you might want to get information about a beer that you yourself haven’t tried yet. This part would only work if lots of people were actually using the app, which is why I see it as secondary. Nonetheless, by searching for a particular beer or by hitting the “Random Beer” button, you should be able to review the notes for any beer in the database.
This is what that screen would look like: it’s basically the same as the previous one, without the whole “your notes” section and with the addition of an info thingy telling who first noted this beer. (The hope is that including this would motivate people to note more beers, in the hope of being the first person to do so.)
And there you have it. As noted, there are a few things missing, like a search results screen and any kind of account/profile management stuff. But I think that these are the core items that give me enough information to start planning out the app.
Coming up next: Picking a UI framework, or not.
