Beautiful Interfaces

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.

Another canvas-based toy, in honor of all the snow we’ve been having around here lately: The Snowflakerator.

Lets you draw in 6-way radial symmetry. I got the idea from those folded paper snowflakes that everyone used to make as a kid.

I’m liking canvas, it’s easy to do some fun stuff with. And I really like it not being the black box on the page that Flash tends to be.

More of these to come, probably.

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.