Beautiful Interfaces

A couple of weeks ago, my former colleague Mike @ Meja Design released this cool visualization of the digits of PI mapped to colored dots:

This got me thinking about other transformations you could do over the same set of numbers. At the same time, I’ve been wanting to start playing with canvas, for possible future infographicky goodness. So I thought, what better way to get my feet wet with canvas than to visualize PI as a line chart! And just for fun, I put it on a circle too, since, y’know, PI. (I was going to make the lines nice and curvy, but it’s the weekend and bezier curve math was not being my brain’s friend, so straight lines for now.)

So, without further ado: the digits of PI visualized as a line chart, using canvas. (Also: I threw in excanvas, but didn’t actually bother to test it in IE, so if it doesn’t work, um… try a real browser, I guess? Cheers.)

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.

This is something I’ve started doing to help me work on careerish stuff. I’ve been doing it for a couple of months now, and it works pretty well, as proven by the existence of this blog among other things.

The first column lists things I want to accomplish by the end of the current month. (I rewrite the chart every month.)

The second column lists things I want to accomplish by the end of the current year.

The third column lists things I want to accomplish by Dec. 31, 2012 (roughly three years from now).

The rows going across are money, talk, code, and learning.

Money is mainly my plan for how much I need to save each month to get to a place where I can support myself for a year without working. (I may not actually not-work for a year, but I’d like to have the option to just go travel around the world if I choose to.) There’s also a secondary goal there around getting a new car, which I need to do this year.

Talk is everything I try to do to “make a name for myself” – blogging, writing articles, and eventually conference speaking. One of these items is always a specific goal for how many blog posts I want to make that month. I’ve been at 6; this month I went down to 4 because I’m feeling unwordly. This is how I make myself blog.

Code is obvious, it’s about things that I want to make and do. Longer-term, it’s about building up both my portfolio and my freelance network.

Learning tends to be shorter-term, and usually includes things that I want to read or watch that aren’t just “for me”. Mostly this is technical stuff, although this month I have a work-related book up there as well.

I picked these four categories because they seem like the main areas that I need to work on in order to advance my career.

The hardest part was getting that 3-year column down. This past fall I went away for a long weekend and hiked part of the Appalachian Trail (for real, not Mark Sanford-style) and did a lot of thinking and writing, and that’s when I came up with a better idea of where I wanted to be in three years. Once I knew that, figuring out what I needed to do to get there was relatively easy.

Another tablet drawing for my last post of the year.

I think I learned a lot this year about what I’m interested in, and what I want to do — I won’t say with my life, but I’ll say with the next 5 years or so. I don’t think I’m able to look further ahead than that.

It’s been a fairly decent year for making stuff. My goal at the beginning of the year was to build and launch 2 web apps, and I actually exceeded that by several. I even have some things from my day job to show!

In chronological order:

1. Whatti — This was the first web app that I ever designed and built from scratch. And you can tell, because it honestly kind of sucks. (I hesitate to even link to it, honestly.)

However, in the course of making it I got to learn jQuery, which is just about the best thing EVAR, and the CodeIgniter framework, which means that I could now more easily move into Rails or any other Rails-type MVC framework. I also learned a lot about password security and building a logon system, and about how not to design a homepage. And I have forgotten more about the date/time functions in PHP now than I ever really wanted to know.

This project is basically abandoned now, but I am still interested in the idea of this site, which is providing personal analytical information about your habits and progress toward goals. At some point I would like to throw everything here away and do a complete redesign: visually, functionally, architecturally, and of the code. I would like to make it simpler, more focused, and more visually appealing; and I would also like to switch over to the Kohana framework. This will be a project for sometime next year when I am bored.

2. EventHitch — This was my first site with co-conspirators Dennis Becton and Mike Nagle, who had been working on the site about a year before they asked me to join them as a designer and front-end developer. The site hasn’t gotten a lot of attention lately, because we decided that it was too broadly-focused and decided to pursue more of a niche strategy. But I got to play with Google Maps and work on my design skills some more.

3. BandHitch — This was our first niche site, focusing on local music. It is basically a re-skinned version of EventHitch. I want to change the header because I think it looks bad, and a few things need to be fixed CSS-wise. I like how the background effect came out, though.

4. This blog — which sort of counts, I guess? I didn’t build the theme from scratch, but I took a plain one and customized it a lot.

5. The Truth About Costs interactive graphic
The Truth About Risk interactive graphic
(both from the excellent Investing Truths series)

Finally some things from my day job! Exciting!

I did not design either of these graphics, but I built the Costs one and about half of the Risk one (the table and line chart views, and the sliders). They were both done using Flex 3. I hope to do a lot more work in this realm in the upcoming year, moving into the information design side of things as well as more Flex development. (More about that in my next post.)

6. Towniverse — This is the second of our 2 sites that are under active development, along with BandHitch. This one I pretty much got to design and build from scratch, which was a lot of fun. There was some semi-intricate javascript involved, which was nice to play with, especially getting it to work in IE. I’m actually fairly proud of the interaction design on this one; I think it’s fairly smooth and intuitive. (I hope!)

The current plan is to add more features (ability to invite friends out to a restaurant, integrating our events feed and placing weekly events on the map) and then to expand to other locations, focusing on smallish towns in the Philadelphia area. We are also moving to a faster server (possibly Amazon) since the current guys are painfully slow.

Well, that’s pretty much what I did this year. In part II, I’ll talk a little bit about what I learned, and what my plans are for 2010.

I. Privacy and Context

People act differently in different contexts. Everyone does this. You speak to your boss differently than to your girlfriend. You say different things at a football game than you would in church. We have different behaviors that get cued by things we see, and by the behavior of other people around us.

For most people, each website is a different context. Each social network, each app, each thing-that-looks-different with a different name and a different design and a different community and a different culture, each one of these spaces is a different context. And people respond to those contexts differently, just as we do in physical space.

For example: here, I write in a tone that is earnest, somewhat quirky, and slightly academic. On Twitter, I tend towards snarky one-liners.

This was never a problem before Google came along. (And Yahoo, and Bing, and the other search engines. I’m using Google as a shorthand; let’s be honest, it’s the one that you use.)

Before Google came along, there was no way to observe someone separate from their context, aside from physically having them followed. (That tactic, of course, has its own legal issues.) Post-Google, as long as you have a way to link up a person’s identity, you can follow their trail across the internet from the comfort of your chair. And all of those words and images and videos are flattened, stripped of context, and served up on a blue-and-white platter of links.

I usually argue that we should be expecting that, by now. That everyone, by now, should be aware that anything we do or say online could be seen by anybody, at any time. But when I think about it honestly, I don’t really live that way.

Is it even possible for the human mind to stop responding to context? And what else is lost, if we do? Do we turn into walking resumes, constantly sanitizing everything that we do and say out of fear that someone might see it and disapprove?

Could privacy even be defined as the right to always be seen in the proper context?

II. Privacy and Time

People also change over time. I’m not the same person I was 4 years ago. And I’m really not the same person I was 9 or 10 years ago. Nonetheless, there are things that I wrote 9 years ago, when I was fifteen for crying out loud. And that’s all still floating around out there, right alongside this blog post that I am writing today.

This is not information that I would present to a stranger, given the choice.

In a way, Google keeps the past tied to us, like Jacob Marley’s chains. If words from 10 years ago can be found as easily as something I said yesterday, can I ever really leave anything behind?

How are you supposed to know who I am now, when you can see all of the people that I’ve ever been?

III. Privacy and Effort

Intuitively, this is what I think is right:

It’s morally okay to Google someone. However, it’s not ethical to look beyond the first page or two of results.

Here’s why: Most of the time it takes some effort to get something on the first page of Google for your name. You have to make an effort to get people to link, you have to use your real name prominently and publicly. I tend to assume that these are the items that people want you to find.

Once you get past the first page or two, you start getting into the accidental stuff — things that people may not even know are out there. That’s where it starts to become questionable, in my mind.

IV. Self-Defense

Want to know what someone could find out about you online?

Start with your name. Google it. See what comes up.

Take all of the email addresses and usernames from all of those places. Google each one of those. See what comes up.

Now take all of those email addresses and usernames. (Have you found anything yet that you’d forgotten you had?)

Google them. See what else comes up.

Repeat.

And that’s what can be found out about you online.

How much specialization is too much specialization? And how much of a generalist can a person really be, and still be effective? This question comes up for me a lot, because I tend to be a generalist in an organization that encourages specialization and separation of roles.

On the one hand, specializing in one technology / programming language / skill allows you to gain a depth of knowledge and experience that you can’t really fake. Some have argued that it takes about 10,000 hours of practice to become an expert at something; if you practice a skill for 30 solid hours a week, that equates to about 7 years. After 7 years of working with a skill, I have to imagine that you know pretty much everything there is to know about it, and your intuition has got to be pretty solid on any question or problem that comes on.

On the other hand… technology and practices change so rapidly, and you have to flow with the river or you’ll be swept away. If being a generalist means that you have the ability to rapidly teach yourself new skills, and the willingness to learn as you go without hand-holding, then arguably generalists are better prepared to deal with the changes that inevitably happen. Also, like I discussed in my post on designing and developing, being able to cross between fields allows you to make connections that might not otherwise be made.

Perhaps it could be seen as a risk/reward tradeoff.

Specializing is like investing in stocks, with more risk and a potentially higher reward. Specialists have an easier time getting hired — their resumes fit the traditional ‘check the box’ model — and they quite possibly get paid more for their expertise. On the other hand, they run a high risk of their skills becoming obsolete, or at least less valuable over time.

Being a generalist is like investing in bonds, with a slower payoff but much less risk. Generalists have a harder time making people understand what they do, and may have a harder time demonstrating their worth to prospective employers. But they will always be able to adapt when the technology or the environment changes, and figure out how to make themselves useful in some way.

And perhaps there’s a happy medium of sorts, where it’s possible to keep learning and using one central skill, while always having a rotating cast of new things at the periphery. It may take longer to become an expert this way, but like a balanced portfolio, it seems to offer the best mix of reduced risk and potential reward.

For myself, the nature of my current job is very general. I have to be able to pick up whatever tool is best to convey the idea at hand, whether that be css/javascript or Flex or Flash or PHP or JSP, or whatever the next thing will be. (And I have to be able to adopt the design mindset as well, which has its own set of skills that aren’t as easily defined.)

I would say that css/javascript is really my core expertise, if anything is. I’ve been doing a lot with Flex the past few months, but it’s really all in the data visualization space; I don’t know anything about Flex app development outside of that. I dip into Flash when necessary, and usually get confused because it’s different from Flex. I know enough PHP to get things done, but I don’t really have a depth of experience, and I still have to refer to the docs a lot.

So this line of thinking implies that, no matter how much my job comes to involve other things, I should make sure that I am still keeping up with my css/javascript skills and following new developments with those technologies. Because at some point in my life, I’m going to have to label myself again, so I need to have at least one language where I can call myself an “x developer” and feel entitled to the phrase.

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.)

I’ve put together a simple bookmarklet to allow you to add Photoshop and Illustrator-style guides to any webpage. This is something that I’ve wanted for awhile, after finding myself feeling ridiculous while holding a sheet of paper up to the screen to check whether things are lined up.

Just drag this link to your bookmarks bar, or right-click on it, or save it however you save a bookmark typically:
Guides Bookmarklet

When you click on the link, grey bars will appear across the top and left side of the page. From these bars, you may drag out as many guides as you need onto the page. Guides can be repositioned once they are on the page as well; just hover until you see the little arrow cursor. Finally, to remove a guide, just drag it off the side of the page. (That last part may not work in IE.)

This is version 0.1, meaning that I worked on it for about 3 hours overall. So tell me: as a web designer or developer, what would make this more wonderful to you? What other features would you totally use?

Also, please let me know about any bugs!