Beautiful Interfaces

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.

Given the way I keep falling into mobile work, I’m apparently destined to be a mobile web developer. (If you know me, you know why this is funny — I hate talking on the phone, and avoid it at every opportunity.)

Because of this, I’ve decided that I need more practice at creating cross-platform, web-based apps. I have some experience with the iPhone SDK from a project earlier this year, but I’ve come to believe that web-based and cross-platform is the ideal way to go.

I’ve decided to start a project to create a mobile web app from start to finish, and I’m going to blog about it each step of the way. I’ll talk about the various decisions that I face, like choosing (or not choosing) a javascript framework, and the challenges that I will no doubt run into.

The app that I’m going to make is based on something that I actually want for myself, which makes it easy to design. It’ll be an app basically geared toward beer snobs (or connoisseurs, if you’re being polite), that lets you keep track of beers that you’ve tried, take notes on them, rate them, and see notes and ratings from other people. There may be apps around like this already; I don’t really care. I’m not in it to make money, just to gain experience with mobile app development and create something that I personally like.

I’m tentatively calling the app BeerNotes. Over the next week or two, I’ll be working on the design of the app and making the various technical choices required to get started. After that, I’ll move into talking about implementation. So, come back to see how it goes!

Sites and apps

During discussions about accessibility, I always wonder whether accessibility goals should be different for different types of web projects. Are there cases where accessibility is less important? And if so, what are the relevant differences that make it that way?

“The web should be accessible” is an easy blanket statement, but the web is very diverse. Many sites and applications exist that aren’t accessible in various ways, but are still useful and popular. Are we to say that these sites should not exist at all, and everyone else misses out? On the other hand, people have a right to get the information they need and perform the tasks they need to perform. How do you balance these two things?

For websites, whose primary purpose is conveying information, it’s no question to me that the site should be accessible. First off, most sites that exist to convey information want it to be widely seen; accessibility is in their own best interest. These also tend to be the sites where accessibility is easiest and can be achieved by following simple best practices. There may be some flashy ajax stuff going on, but it tends to be window dressing. At the worst case you might have to provide textual alternatives to rich media like videos or Flash.

But there’s another category that I think is much more of a grey area, which I’ll call web apps. It’s tough to categorize web apps, so I’m going to take the lazy way out and say that they are the complement set of the above category, containing any site whose primary purpose is not to convey information. So if the app exists to let people create something, or to play a game, or to do something complicated with data, it may be reasonable for the app’s creators to set the bar higher in terms of what is required to use that app. This may mean requiring javascript or the use of a mouse, or the ability to view visual images, or even specific browser features. (You won’t be using Bespin in IE, for example.)

Another way to look at it: Importance and relevance

Anything that’s both important and relevant to a large number of people — such as job applications, reference information, and government agencies’ sites — should always be widely accessible in as many ways possible.

If it’s important but not widely relevant, consider your target population and gear support towards their specific needs.

If it’s widely relevant but not important to people’s lives, like for example many browser-based games, prioritize accessibility based on a cost-benefit analysis of how many people you’d like to reach.

If it’s neither important nor widely relevant, go nuts; knock yourself out with crazy features.

I feel like this could be somewhat controversial; what do you think? Should there be a difference in how accessibility is prioritized for different types of projects on the web?

The growth of the mobile web and touch screens has created more browser diversity than ever before. I think it’s useful to categorize browsers into four major categories, along the axes of screen size and input type.

Probably the most growth is going to come in the large-screen touch category (mainly because it’s starting from the lowest place overall). If anything, I would expect the small-screen mouse input category (i.e. Blackberries) to decrease — but not to disappear entirely, because businessmen sure do love their physical keyboards.

Making web apps that work with minimal adaptation across all four quadrants is the challenge. (And you thought dealing with different screen resolutions was hard?)

I get annoyed by credit-card readers. You know, the kind used at gas pumps and ATMs. I always have to look at it and try to figure out which way I’m supposed to put my card in, because it differs from one to another. In order to do that, I have to look for the ubiquitous instructional diagram and try to match my card to the illustration, because there’s no perceived affordance on the device itself.

Okay, it’s not rocket science. It takes maybe 2-3 seconds, and a tiny bit of thought to figure out. BUT. But why should I have to spend this time and effort at all for something that really could be effortless?

It’s like the example of the doors that Don Norman covers extensively in The Design of Everyday Things. You shouldn’t need to label your doors with instructions — “Push”, “Pull” — because people should know this intuitively from the shapes of the handles. Likewise, you shouldn’t need to label your credit card readers with instructions, because people should know how to use them intuitively.

There are two ways to fix this.

One, build some sort of affordance into credit card readers that only lets you put your card in one way, and makes it visually obvious what that way is. Since credit cards are basically featureless rectangles with no built-in directionality, this would be difficult.

Two, put magnetic strip readers on both sides, so that it doesn’t matter which way you put in your card. The existing affordance — a flat slot indicating where you put the card — is sufficient, and no further instruction is required, because it just works. I think this would be the best way to go, unless there’s some technical reason preventing it that I don’t know about.

The larger moral is that simple things we use everyday should “just work”, and if you’re constantly having to provide instructions on how to use something, that probably means that it’s annoying people.

Don’t annoy people. Practice good design.

Is it even possible to successfully apply the principles of open-source software to design? Or does really great design require a certain level of Steve Jobs-like tyranny, a sense that one vision is masterminding everything, or at least a single point of responsibility?

(By “design”, I’m referring to visual/experience/industrial/graphic/architectural/service/fashion design — all of the fields that deal primarily with creating some sort of effect or experience for a human being. I am not referring to things like the design of circuits or of hardware. Those fields are different.)

The relevant difference that I see is that really great software is usually quite modular. Software engineering principles like encapsulation and loose coupling mean that lots of people can work on something, each one taking a part, and still come out with something that integrates quite well and does what it is meant to do. This is probably what makes open-source projects work as well as they do.

On the other hand, really great design is incredibly integrated. If you look at a great experience, one of the striking points is the way in which every single aspect, from building architecture to package design to software interfaces, makes an integrated and coherent contribution to the experience. It has a personality — one personality, not a schizophrenic array of different voices all talking at once.

I wonder, given its coherent and integrated nature, whether great design is fundamentally incompatible with the open-source model. After all, “designed by committee” is a common insult, but there isn’t really an equivalent phrase relating to programming.

A fascinating thing I’ve been noticing lately (and even more since the tragic earthquake in Haiti) is the use of social gaming to encourage people to donate. Mainly I’m thinking of Zynga, which raised $1 million for the World Food Programme in only 2 days, by allowing people to purchase special virtual goods in games like Farmville and donating the proceeds from those products to the cause.

I think this is brilliant, because it combines the best features of both donating and purchasing. You know that the money you give is going to help others who need it; and you also get something directly in return. (In the case of Farmville, you get access to a special crop with particularly lucrative stats, and you also get a special flag so you can show off your generosity to your friends.) This works because the marginal cost of virtual goods is effectively zero, so none of that money is required to compensate the producers, assuming that the fixed costs have been covered.

While Zynga is very much a for-profit company, seeing the effectiveness of their charity drive got me thinking about what it would take to create a game that was specifically designed to encourage people to maximize donations to a charitable cause. I think it would tap into a lot of the same traits that I discussed in my post about Farmville’s psychological hooks, but in a way that ties in-game rewards to a specific real-life behavior: that of donating money.

Let’s take the example of Donors Choose. Since they focus on primary and secondary education, if I were creating a game for them I would base it around a simulation of a school. Like Zynga’s games, my game would be tapped into some social platform like Facebook, to make it easy for people to “visit” and share with their friends. (The ability to easily check out other people’s performance is crucial; the competition and “showing off” that result are the hook upon which much of the desired behavior hangs.)

Maybe you start out in a one-room schoolhouse, with 10 students. You are given a teacherlike avatar that you can customize to look like yourself, to create a sense of ownership, and your goal in the game is to make your school a success.

The main aspect of the game is this: as you give money to various projects through Donors Choose, you get more students in your school, and you also get points that you can spend on virtual goods related to different subject areas.

So, for example, if you donate $100 to a science project, you get 1000 points that you can spend on installing a virtual science lab in your virtual school and buying things like awesome robots, model rockets, telescopes, and so on. If you donate $100 to an English project, you can buy fancy bookcases, statues of Shakespeare, comfy chairs to read in, and so on. (All very cutely and appealingly drawn, of course.) Basically, every dollar that you donate allows you to make your virtual school more and more luxe. (Think Harvard + Hogwarts + a sci-fi novel.)

This makes it very easy to show off your generosity to others, just like Farmville’s special Haiti flag does. And since we know that looking good to other people is one of the main reasons people donate, this should tap into that urge to show off, to appear generous, to make yourself look good. (While benefiting real people along the way, of course.)

Second, your school gets graded in all of these different areas, which roll up into an overall grade for you, the teacher. You start out with an F, and as you enhance different areas of your school, your grade goes up. This allows you to measure yourself against your friends in the game, and creates a leveling system. Your grade is tied to what virtual goods you have access to, with cooler or better virtual goods reserved for those with a better grade. This creates a virtuous cycle, where donating money lets you level up and gain access to better goods, which can be acquired by donating more money, and repeat.

Third, to encourage stickiness and a high level of engagement, there are regular tasks that you can do to earn a small number of points, like grading papers and talking to kids. (Hey, it’s no weirder than people virtually plowing fields and milking goats!) The number of points you can earn from these should be kept fairly low, below the threshold needed to buy a lot of the really cool items. And if you don’t check in regularly, there should be some form of consequence; perhaps your students’ morale drops, and therefore your grade goes down. Creating the potential for loss triggers loss aversion, which is such a powerful instinctive force.

Fourth, each real-life classroom that you donate to can select and send you a special gift for your virtual school. These should be really cool premium items that aren’t available any other way. This creates a very direct relationship of mutual benefit: give money, and get this rare item in return. (You should also be able to post their thank-you letters and photos in a prominent place in your virtual school, for other people to read.)

This is just a start on what such a game would be, but I think it’s a really interesting approach. Rather than denying or bemoaning the various blind spots, biases, and quirks of the human brain, I think it’s interesting to design ways that we can exploit those quirks and biases to accomplish something good.

Lately I’ve gotten sucked into playing the Facebook game, Farmville. (Apologies to those on my friends list.) I am seriously impressed by the designers of this game. They managed to take an incredibly simple idea and design it to take advantage of several powerful psychological quirks, thus turning a game about farming (!) into the single most popular Facebook app.

What are some of the clever things that Farmville does?

1. Set Completion — We are driven to complete our collections of things.

This is perhaps the psychological trick that Farmville employs the most. Farmville has so many sets of things to collect: achievement ribbons, buildings, gifts, even different colors of cows. In general, once you possess a partial set, most people are compelled to complete the whole thing. There’s something about a collection that is incomplete; it just doesn’t sit too well with many of us.

Farmville is always introducing players to different types of things we can collect. And of course, once you’ve started a set, you have to finish it…

2. Social reciprocity — We feel compelled to help people who help us.

This is another biggie. The fact is, in order to get ahead in the game, you must receive help. The game offers several ways to help others: you can send them gifts, fertilize their crops, help out on their farm, and make Wall posts that give people access to special bonuses. Many of the ribbons and achievements in the game are dependent on being helped in these ways.

And of course, once you are helped by someone, most people feel a strong compulsion to return the favor. This keeps people engaged because the balance sheet is never quite even, so some type of social obligation is always in effect.

It also encourages players to bring more people into the game; after all, the more ‘neighbors’ you have, the more gifts you can receive and the quicker you will gain a lot of the achievements. I think this ’sharing’ aspect accounts for a large part of Farmville’s rapid rise in popularity.

3. Loss aversion — We hate to lose anything.

In Farmville, you have a certain window of time to harvest your crops, or else they wither and you don’t profit. This is brilliant because, by forcing people to invest in seeds and plowing, Farmville is creating an attachment to those crops. Then, by enforcing a short window of time to take action to avoid the loss of those crops, Farmville forces you to return to the game on a regular basis.

This draws users back to where the other psychological hooks can kick in.

4. Customization — We design spaces to display our own personalities.

The entire basis of Farmville is that you are given a ’space’ that is all your own: your farm. And, along with planting crops and raising animals, you can add buildings and decorative objects to this space, in order to make it more fully ‘yours’. In fact, by my count, about half of the items that you can buy have no effect on the game mechanics at all.

Rationally, why would you allocate scarce resources to such objects? But people do, because we are driven to customize our virtual space, to make it reflect ourselves; and by extension to acquire more resources so that we can perform more customizations.

5. Variable Interval Reinforcement — When we receive rewards at unpredictable intervals, we are compelled to continue.

Sometimes Farmville will randomly give you gifts, like money or items to be used on your farm. (The game also combines this principle with #2, social reciprocity, by randomly allowing you to give a special gift to other players, such as special eggs and flower bouquets.) This is considered variable interval reinforcement because it reinforces the desired behavior — playing Farmville — with rewards, on an unpredictable basis.

The gifts serve to keep people engaged in the game, because you have to keep checking in to see if you’ve gotten something that you need.

So there you have it: 5 ways that Farmville effectively taps into human psychology.

The things that interests me is, how can we use this in other areas of design?

How can I make my local restaurant listing site more interesting by tapping into set completion behavior? How could a charity fundraising site employ social reciprocity to draw users in? How could a financial site tap into loss aversion?

I think we could all stand to learn a few things from this simple Facebook farming game.

(If anyone has a good link on the psychology of customization, send it over. That’s the only principle for which I couldn’t find a good source.)

Data by itself cannot create anything. It can only disprove.

Intuition by itself can create many things, but it stays trapped within the designer’s own experiences and never becomes a conversation.

Both are important.

This is how to design things: Use intuition to create many good solutions, and then use data to narrow it down to the one best.

But don’t stop after one iteration; then you lose the ability to let your data shape your intuition.

By repeating this cycle over and over again, your intuition will get better, and you can focus on smaller and smaller problems, gradually approaching (though never attaining) perfection.

(I can’t decide if this whole post is actually true, or if it’s just attractive because it seems simple and internally consistent.)

(Notes from Ryan Stewart’s keynote talk at Philly Flash Camp.)

Contextual Applications:

Adobe’s Product Line: