Beautiful Interfaces

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

It’s true, I really am.

Also, I love this time of year, and I’m back.

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

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.

I am very cynical, except for when I’m not.

The trick is in maintaining a healthy balance between cynicism and idealism. You need cynicism for protection, and idealism for an energy source.

Too much cynicism will crush your idealism, and then you’ll become dead inside.

Too much idealism will make you too fragile, and then you fall apart.

Keep balancing.

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:

I. An interface is a window between two complex systems.

Most of the time, one of those systems is a person.

The interface marks a boundary. It is the place where the human meets the machine.

II. Most software is incredibly complex. Often, it is so complex that not even one developer who built the system can keep the whole of it in her head at the same time.

Information passes from place to place, is modified, recombines, evolves and mutates in a thousand different ways. An interesting program is a highly choreographed dance of a thousand different pieces of data.

To make it even harder, this happens on many levels at once, from the base electrical impulse guided by physical law, all the way up to conceptual objects that contain, modify, and recreate one another.

The fact is, there’s a lot going on.

Meanwhile, on the other side of that boundary, a person is… a person.

Talk about complex.

III. An interface is a window. It is also an adapter.

The user wants to get something done. He has in his mind a model of what he is trying to do.

This model comes from his life experiences, psychology, learned behaviors, things he’s observed in other people, and probably 20 million other subtle factors.

The system also has a model. This model is built up over time, a slow accretion of 20 million small choices made in every line of code, in every aspect of the system design, during every step of the development process.

The odds that this model matches the user’s model are very, very small.

It’s the job of the interface to translate between the user’s model and the system’s model.

It’s the job of the interface to manage and reduce complexity.

(To compliment an interface, call it deceptively simple.)

It’s the job of the interface to bridge, not just 2 worlds, but 2 million — the world within the system, and the personal worlds of 1,999,999 different users.

That’s why making interfaces is hard. That’s also why it is worthwhile and necessary.

Because you could make life frustrating and difficult, but instead you get to make it pleasant and simple. Because you get to bring a small bit of order to a whole lot of chaos. And because you get to make things, in some small way, better or easier or more fun than they were before.