Peter pointed me to these lovely stock illustrations from Ellen Lupton. I really like the textures and whimsical treatment of subjects.

Q: To what extent has sci-fi (TV, movies, books) influenced your UX work?

A: That’s a great question. I think you can look at science fiction as our collective fantasy about technology. If you want to understand not how people use their computers but how they want to use them, popular sci-fi is the first place you should look.

In the past few years I’ve really moved away from web app design or even traditional desktop app design, favoring touchscreen devices instead. The computers of the future don’t have mice (“Hello computer!”). Rarely do they even have keyboards. We crave ubiquity and personality in our interfaces; something always there, always responsive, controlled as directly and easily as any tangible system. Star Trek predicts all of this, and now more than ever you can see those predictions becoming reality.

Something that I think will be interesting to look for in coming years is the development of the human element in UI. Will we begin to realize our fantasies of the jovial robot butler, or the sweet voice of Majel Barrett-Roddenberry greeting us when we login? Only time will tell!

“I honestly don’t know what selling out is supposed to mean anymore, the term is leveled with such regularity. I was under the impression that it meant that your principles were for sale, that an indeterminate sum had changed hands and now you were under command. … Now it appears to involve infractions of some impossibly austere, orthodox hipster code, complete with constant play-by-play analysis by psychic forum trolls and betrayed fans who gleefully plot the coordinates of your downward trajectory.”

From 2004, but strikingly relevant in the context of the iPad. From Penny Arcade, via Meg.

“Creativity is not design. Creativity has nothing to do with design. Creativity is bound by no laws, rules, or strictures …which is perhaps why it’s so intoxicating. Design, on the other hand, is based entirely on math, psychology, human perception, and a host of rigid rules and laws that can be broken by only a highly skilled few. Those unfamiliar with these laws and rules, and the associated sciences are by no definition designers.”

As usual, thoughtful and informed commentary from Andy Rutledge.

Besides being an amazingly well-executed app, Lose It! is free and has some social motivational features. So if you’re using the app too, add me at ahalsall@gmail.com… it’s always easier with friends!

A beautiful free icon set from P.J. Onori. Available in both PNG and SVG formats.

“When I think about the age ranges of people who fall into the Old World of computing, it is roughly bell-curved with Generation X (hello) approximately in the center. That, to me, is fascinating — Old World users are sandwiched between New World users who are both younger and older than them.”

A great article from Steven Frank about the iPad and the future of computing. Insightful and thought-provoking.

This past week was a crazy one for lots of people in the Mac & iPhone ecosystem, but I’m happy to finally be able to talk about what I’m working on: Inkling, a new platform for delivering interactive educational content to devices like the iPad.

If I can help spare even one student the back-breaking work of carrying 45 pounds’ worth of textbooks around, I’ll consider it a job well done.

While the HIG has a lot of good information, it doesn’t go into the details of implementation, so I’m going to go through the process of how I would design a toolbar icon. I’ve chosen the iWork style because I really like how crisp and clear they are, and I think they are a good model to work towards.

So let’s take a look at the Pages toolbar.

Let’s take a note from Gmail and add a “Labs” button. This imaginary feature would take the user to experimental or even user-made plugins and macros.

Step 1: Pick your metaphor

First we have to think about what kind of metaphor would best represent this feature. The HIG offers the following guideline:

“As a general rule, a toolbar icon that depicts an identifiable, real-world object or recognizable user-interface element gives first-time users a clue to its function and helps experienced users remember it.”

So what makes me think of experiments? A beaker seems like the obvious choice. Anyone with high-school chemistry would know that symbol. But before I draw anything I should do some research. I fire up Google Image Search and Flickr with a search for “beaker.” It looks like I have a couple of choices for the shape of the object.

This is actually the kind I was thinking of, but I think these kind of beakers are generally only used in stock photography. I’ve never seen or used one like it in an actual lab. I got a lot more results for this type:

This is also what I remember from science class. The other beaker style is perhaps a bit more recognizable, but in the interest of realism (and not looking too Weird Science) I decided to go with this one.

Step 2: Figure out your sizes

So you’ll notice that Pages’ icons are very crisp, with 1 pixel outlines at both the large and small sizes. This indicates that the designers created two sets of icons, one for the large size and one for the “use small icons” size. If they had only used one and resized it, the line would not be 1 pixel exactly on both. Whichever one that was resized would have fuzzy lines. If you have the time to do this, it’s a nice way to ensure that your icons will look good no matter what your user chooses (you can also selectively reduce detail/complexity at the smaller size to ease recognition).

I’m going to design my icon for the larger size (32×32) and then size it down as needed for the smaller size. Figure out what the “large” and “small” sizes for your app are and keep these in mind. For a pixel-crisp style like this you’ll want to design at the size the icon will appear.

Step 3: Vector outlines

Open up your drawing program of choice. I prefer Fireworks for this kind of icon because it allows me to work with vectors while zoomed in to look at where the pixels actually fall. Go ahead and trace or draw the basic shape. Keep perspective and lighting (which should be top-down) in mind. The HIG says: “The perspective of a toolbar icon is straight-on, as if it is sitting on a shelf in front of you.”

At this point it’s a good idea to look at the fingerprint of your icon. That’s what I call the silhouette of the shape. Icons with different functions should generally have distinct fingerprints. Check to make sure the shape is recognizable and not too similar to anything it’s going to be adjacent to.

Step 4: Color, detail and shading

Now it’s time to fill in the colors and details. I like to zoom in pretty close for this step, but I keep an eye on the actual-size icon as I work. (In Fireworks you can do this easily by selecting Window > Duplicate Window.)

Be brutal about cutting unnecessary shading and details. Show only what you need to in order for the user to get what the icon represents. In the case of the beaker, I added two embellishments; the bubbles, which indicate that the green goop is “active” (and hopefully expresses something experimental and/or volatile) and the volume markers, which help make the beaker more recognizable.

Don’t be afraid to use bright colors here. As the HIG says, “Making each toolbar icon distinct helps the user associate it with its purpose and locate it quickly. Variations in shape, color, and image all help to differentiate one toolbar icon from another.” Also make sure the colors that should be consistent between the icons are – highlights, shadows and outlines fall into this category.

One more thing that’s actually quite important. Watch your alpha! Make sure that things that should be transparent actually are (like shadows, or in the case of the beaker the glass). I like to work with a couple of different-color backgrounds to switch between as I draw, including one that’s the standard Leopard window color to see what it will look like in production. You have no idea what this icon might end up on top of in the future! (Er, avoiding the obvious dirty joke there.)

Step 5: Flatten and pixel-tweak

Save your file so you have the originals handy if you need to resize the icon, then go ahead and flatten your vector layers.

Time to break out the pencil tool! Start looking for places you can simplify your lines. Be especially ruthless around anti-aliased corners, which will have a mess of pixels you probably don’t need and will make your lines look fuzzy.

This is also where I add in line shading and other small details. You may not see much difference in the big, zoomed in picture, but at actual size the tweaked bitmap (right) looks much cleaner. Especially note the simplification of the spout shape.

So after fiddling with the pixels to my satisfaction, I’ll go ahead and plug it into the toolbar to see how it matches the other icons.

Step 6: Generate other sizes as needed

So I have the large-size icon but I’ll also need a smaller one. The first thing I do is size the icon down and clean up the lines. Then I’ll go over the details and make sure that nothing is lost at the smaller size. I noticed that if the spout was made any smaller, it became difficult to distinguish the shape, so I actually made the top of the beaker identical in both sizes. I also redrew the volume markers to fit better on the smaller icon.

So there you go! It seems like a tedious process, and in some ways it is (depending on your style, you may be able to skip pixel-tweaking), but once you get into the right mindset it’s not so bad. You just want to make sure you’re thinking small and keeping an eye on consistency.

It’s easy to think I work in an an exciting, dramatic field that’s always pushing the boundaries of what’s possible, and continually reinventing itself in new and better ways. Users love the web, right? We’ve done a great job, haven’t we?

The thing is, somewhere around 2006, the web stopped growing. Web designers in general started to become increasingly more complacent and frankly bored with their jobs. Making a web app? Okay, plug in the templating framework of your choice, set it to CRUD mode, code up an HTML form and stick a JavaScript library on top of it. Content? Who needs it! Just hook it all up to Twitter, FaceBook, Flickr, Google Maps and hell, maybe some RSS feeds too. The design has to be catchy enough to get users interested, but don’t worry too much about making it usable. People will just be plugging in to it through their phones, desktop clients, or RSS readers.

Hello, web professionals. Welcome to the future. No wonder the conferences have degenerated to a stream of excuses as to why a full quarter of the world is still using IE6. And there’s an uncomfortable amount of silence regarding anything new. There is nothing new – and there hasn’t been for three years now. The big voices have fallen silent, and no one is rising up to take their place.

The problem isn’t the web. The problem goes much deeper than that. Our interface metaphors are flawed, our input devices are outdated, and the essentialization of most human-computer interfaces, on the web or in your OS, boils down to this:

No, no, no. People, we can do better than this. AJAX doesn’t make this right. It might make it feel more responsive, but at the end of the day it’s still just data entry.

The next time you design an interface, pretend your user doesn’t have a keyboard. What if all they had was a confirm button and a cancel button? This is basically what most game interfaces are. What about the iPhone? It has a keyboard, but only nominally. iPhone developers can’t rely users being willing to deal with the keyboard, and they have to be more creative with their input methods.

The restriction of having no keyboard has driven a lot of innovation on both game consoles and mobile devices. Where is that innovation on the web? Why are we still treating this thing like a terminal running Lynx? (And don’t you dare blame the browsers. You can do better and you know it.)

Here’s a thought experiment for you. Design an IM client that does not take input from a keyboard. (And I’m not talking about voice recognition here either. That’s not allowed.) After about five minutes of thinking about how awful and tedious that would be, you might be surprised with what you come up with. Maybe it could work like a conversation tree in a video game. Or maybe you could select a mood and a topic and it would automatically generate speech for you. Or you could go the abstract route and come up with an entirely different conversation model than what we do in person, leaving written language completely out of the equation. The sky, as they say, is the limit.

Give it a half hour of thought and you might actually get excited about it. Why? Because you’re tired of this nonsense too. We all are.