Beautiful Interfaces

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!

I. Axiom: Everyone thinks that their own piece of the puzzle is the most important.

“Look, I have George Washington’s face! I am the primary focus of this whole entire thing!”

“I am a corner piece – without me the whole puzzle would fall apart!”

“My puzzle piece is such a beautiful sky blue. Surely a blue this lovely must be the most important part of the whole thing.”

We all need to realize that the person who buys the puzzle only cares about the image on the front, and that all of the pieces fit together in the end.

II. Corollary: The more pieces you have, the longer it will take to assemble the damn thing.