User Interface of the Day #8: Twitter
Design UI Design Fundamentals

Social networking site twitter.com has created quite the splash this year. Millions of people worldwide have answered the question, “What are you doing right now?,” millions of times, all for the amusement of and desire to connect with friends, family members, and complete strangers. You can Twitter just on your computer, or you can take it mobile and use the service on your cell phone. Twitter pithy messages that tell your pals where you are, what you’re doing, or what you’re experiencing, or simply use it to find someone at a party. What do the Humanoids think about Twitter? Find out below.
Continue reading »
User Interface of the Day #7: BeFunky.com
Design UI Design Fundamentals
BeFunky.com, another of this year’s TechCrunch40 winners, is a private beta site that enables you to create “funky ways to express yourself.” If you have some time to kill, create a personal avatar of yourself dressed in plainclothes, or get fanciful and use one of the the costume options to turn yourself into a beer maid (as Lauri has done), superhero or other fantasy character. You can even give yourself a Burmese or Persian cat, or add a celebrity such as Woody Allen. Because it’s still in beta phase, you have to request an invitation to use BeFunky. Don’t worry — the process is painless and quick. But is it worth the effort to register? Read on.
Continue reading »
User Interface of the Day #6: ThinkFree.com
Design UI Design Fundamentals

ThinkFree.com, an online office suite poised to rival Microsoft and other free options such as google docs, claims to be “the best online office on earth.” Its free version offers 1GB of storage, as well as a document viewer and online document collaboration, all within an interface that essentially duplicates that of Microsoft Office. ThinkFree applications Write, Calc and Show use the same formats as Word, Excel and PowerPoint. Some people like ThinkFree’s extreme similarity to the tried-and-true Microsoft suite; Computerworld raved about it in a recent review. But while imitation may be the most sincere form of flattery, does it result in better, more humane interfaces? Read below and find out.
Continue reading »
User Interface of the Day #5: Mint
Design UI Design Fundamentals

Ever wanted a quick, convenient way to monitor your spending habits? Mint.com, a free, online money management tool, allows you to do just that. Connected to over 3,500 US financial institutions, Mint updates your account information nightly, and automatically categorizes all of your purchases so that you can track how much your Starbucks habit is costing you. Last month, Mint was featured as one of the TechCrunch40 showcase of start-ups; reports say that new features will be added next week. So, is it awesome, or what? Read on.
Continue reading »
User Interface of the Day #4: Mango
Design UI Design Fundamentals
Today the Humanoids review Trymango.com — a Flash-powered language learning course currently available for free as a beta product. Mango offers nine courses for English speakers, as well as English courses for Spanish and for Polish speakers. After typing your email address and logging in, choose a language from the scroll-down menu and begin learning. Is Mango an effective learning tool? Read and find out.
Continue reading »
User Interface of the Day #3: Flashearth
Design UI Design Fundamentals
Today the Humanoids review flashearth.com: a Web app that uses satellite and aerial imagery from Yahoo, Google and other Websites to enable you to view the world’s surface from the comfort of your easy chair or desk. If you’ve ever wondered what the Sahara, your childhood home, Chicago, or any other destination looks like from the skies, use flashearth.com and find out. Here’s what we have to say on this app’s UI:
Continue reading »
User Interface of the Day #2: Favicon.cc
UI Design Fundamentals
Today the Humanoids review favicon.cc. This simple, straightforward Web app enables you to quickly create your own favicons: Little images used to personalize and add a splash of color to your address bar. Pick up your digital pencils, sketch your ideas in a liberating 32×32 pixel grid, save the results, and presto!
After trying out the favicon generator, we gathered around the office table and shared our thoughts, which you can (and should!) read below.
Continue reading »
Play That Song, Without Looking
Our Products UI Design Fundamentals
Today is a good day to listen to music: Enso Media Remote Control now has six new commands in it. Remote Control has been the most popular beta product, so we chose to revisit it first. Like all of our other beta products, the new Remote Control is completely free. (Unlike our full products Enso Launcher and Enso Words, our beta products do not automatically update, so whether you already have Remote Control or not, you’ll need to download the new installer if you want to try it out.)
Play me a song, Enso
The whole point of Media Remote Control is to let you control your music without having to switch applications. With the old Media Remote Control, if you wanted to hear a specific song, you would still have to go back to your media player and then click around to find the song you wanted, breaking your train of thought. With the new commands, you can tell Enso to play a specific song without having to switch applications, or indeed, even take your hands off the keyboard.
How does it work? If you know the exact song you want, you can say play song heart of the sunrise (for instance). If you want to hear a certain artist but don’t care what song, you can say play artist zappa and let Enso pick a random song by Frank Zappa. You can do the same thing with albums and genres: use play jazz and let Enso surprise me with a random jazz song.
Before you get too excited, right now these commands only work with iTunes. That’s why Media Remote Control is still a beta product. (Why iTunes? It’s not kickbacks from Apple. It’s for purely technical reasons: it was easier to make this work with iTunes than with any other media players.)
Continue reading »
Undo Made Easy with Ajax (Part 1)
Design Software Development UI Design Fundamentals
As users, we make mistakes. As designers, we need to design with mistakes in mind, as I argued in my recent article, Never Use a Warning When You Mean Undo. Undo is the ultimate safety net, lending an incredible sense of solidity to an interface. That’s why every desktop application from Word to Photoshop provides multiple-level Undo.
So, then, why are Web apps that provide any sort of Undo so few and far between? The answer I often get is that Undo is hard to implement. I’m here to tell you that it is not.
In this series of blog posts, my goal is to explain just how easy it is to provide Undo functionality. Recently, I gave a preliminary version of this post in a workshop. After giving the front-facing demo of how Undo could work, the audience moved slightly towards the edge of their seats (it’s all you can hope for in the post-lunch session). When I opened the source code and started showing how I implemented undo, the universal response was, “Why are you bothering to explain this implementation? It’s barely anything at all. We’re software engineers. This is easy.”
That’s my point!
Adding Undo to your interfaces profoundly and positively affects the usability of your site. It reduces user frustration, and increases user trust. Both of those outcomes mean that more users continue coming back, which helps your bottom line. Remember: To the user, the interface is the product.
Continue reading »
Never Use a Warning When you Mean Undo
UI Design Fundamentals
Have you ever had that sinking feeling when you realize — just a split second too late — that you shouldn’t have clicked “Okay” in the “Are you sure you want to quit?” dialog?
Yes? Well, you’re in good company — everybody has had a similar experience, so there’s no need to feel ashamed about it. It’s not your fault: it’s your software’s fault.
Why? Because software should “know” that we form habits. Software should know that after clicking “Okay” countless times in response to the question, we’ll probably click “Okay” this time too, even if we don’t mean to. Software should know that we won’t have a chance to think before accidentally throwing our work away.
Read more of Aza’s article on A List Apart to find out how to solve these warning woes.
The End of an Icon
UI Design Fundamentals
Finding the right graphic for an icon is hard — and even if you do find a decently descriptive graphic, it might not be descriptive for long.
For the majority of cases, trying to represent an abstract idea like “bibliography” in a 32-by-32 pixel array is futile, even if you do have millions of colors and an alpha channel. Sure, you might choose a book with a magnifying glass as your icon, but that graphic could mean many things: “library”, “help”, “research”, “index”, “vision impaired”, etc. Any interface that uses the icon would still have to add a tooltip to explain what it means. There is a reason why we have words — it’s so that we can specify one thing in particular no matter how complex or abstract the thought.
Why make the user go spelunking for the information they need? Just give it to them.
It came to my attention recently just how fragile the connections are between the iconal representation of a concept and the actual concept. Here is the Microsoft Word icon for “to save”.

It’s a floppy disk. There is only a tenuous connection between saving and a floppy disk even for those of us who know what a floppy is (and at the moment most of us remember them), but floppy disks are on their way to becoming as unknown as
Charles Yerkes. Don’t know who I’m talking about? That’s my point.
Continue reading »
Are Adaptive Interfaces the Answer?
UI Design Fundamentals
Once upon a time, Microsoft had an idea: Why not have the most-often used menu items rise to the top of the menu, and have seldom-used items hide below a fold. In one fell swoop, Microsoft provided a solution to the problem of a single interface needing to meet the needs of many different users, from many different walks of life.
Great idea, right?
Wrong!
The idea hasn’t worked out so well in practice. Many users turn off adaptive menus in Office because they find the feature extremely frustrating. Even Microsoft’s own designers have admitted that adaptive menus didn’t work out the way they hoped. The feature has been removed quietly from the latest versions of Microsoft Office.
Continue reading »
Beginners and Experts
UI Design Fundamentals
“You make something more powerful for the experts at the cost of making it harder-to-learn for the novices, or else you make it easy to learn for the novices at the cost of making it less powerful for the experts.”
True or False?
Sure we’ve seen lots of examples of this trade-off; sure lots of people think it’s an obvious truism; but is it a law of nature, or is it just an excuse for lazy interface design?
Continue reading »
Humanized Interface Puzzler #1
Fun UI Design Fundamentals
Welcome to the first installment of the Humanized Interface Puzzler. For your fun, bafflement, and desire for free stuff, we’ll pose an interface design puzzler on a semi-regular basis. To enter, simply send your answer to puzzler@humanized.com by the deadline. We’ll select the best answer and post it on our blog. Then, we’ll send the winner a limited-edition* Humanized shirt and entrance to our beta program.
The first puzzler is about modes and cars.
An interface has modes if one gesture can mean different things, depending system state. Modes are at fault when you miss a call because your phones in silent mode. And there’s little worse than having the final bars of Appalachian Spring – with harmonies as delicate as frozen cobwebs – thrashed by a cellphone who’s owner has forgot to put it into silent mode. Perhaps there is something worse: having it be your cellphone. You can read all about modes, modes errors, catastrophic mistakes, and some solutions in our article Visual Feedback: Why Modes Kill.
Continue reading »
Visual Feedback: Why Modes Kill
UI Design Fundamentals
Let me set the scene. It’s the comedy film “Airplane“. The flight crew is violently ill and Striker, a shell-shocked, former pilot, is forced to land a jet full of passengers in dire need of medical attention. The air is heavy with fog, rain pounds on the cockpit windows. Over the static-filled radio comes the voice of ground control desperately talking Striker through the landing.
Ground Control: The radio is off. Our one hope is to build this man up, I’ve got to give him all the confidence I can. Turns radio on. Striker… Have you ever flown a multi-engine plane before?
Striker: No, never.
Ground Control: Thinking the radio is off. #@&*#! This is a waste of time… there’s no way he can land that plane. Striker starts to tremble.
How did Ground Control make this mistake? The answer is simple. Mode error.
Don Norman defines mode errors as occurring when a user misclassifies a situation resulting in actions which are appropriate for the conception of the situation but inappropriate for the true situation. In Airplane, the action could not have been more inappropriate for the situation.
Continue reading »
Know When to Stop Designing, Quantitatively
UI Design Fundamentals
Last time, we were talking about convincing the world that interface design is more than hand waving and color preferences by using Math (with a capital “M”). If you haven’t already read that, you should go back and read it now. It’ll give this article some context. And now, we dive in.
Which of the following two sentences contains more information?
1) Cogito ergo sum.
2) Shoes smell bad.
The first represents a foundational building block of Western rationalism, the second is a rather banal (albeit true) thought. The first sentence clearly has more meaning, yet they both contain the same amount of information. Why’s that? Because they both have the same number of letters and use the same alphabet (see note). To get ahead of myself slightly, they both contain they same number of bits of information.
The lesson here is that “meaning” and “information” are distinct concepts. Meaning is something which can’t be quantified, whereas information can. Meaning is subjective, information is objective. So how do you quantify information? In bits.
Continue reading »
One Thing at a Time and the Multitasking Myth
Life Hack UI Design Fundamentals
I can only think about one thing at a time.
Any girl reading this just going to roll her eyes and think, “Of course. You’re a guy!”. But it’s not just true for me, it’s true for everyone. It’s true for you.
And not in that way.
At first, this claim can sound fantastic. We can talk on a cell phone while driving to work, and we can compose complex sentences while typing. But, if you stop to reflect on it, you can only do those things at the same time because at least one of them is automatic. In the first case driving is automatic, and in the second case typing is automatic. You’ve done them so often that you’ve habituated to them: doing them doesn’t require any thinking. Can you still talk on your cell phone while driving through a rainstorm on unfamiliar roads? Would you still be able to concentrate on writing if you had just switched to a Dvorak keyboard? I didn’t think so.
Continue reading »
Interface Math
UI Design Fundamentals
Interface design isn’t about choosing a particularly pleasing color of blue. Nor is it something that can be slapped-on at the end of the product design cycle. For the user, the interface is the product. The technology behind a product is useless if no one can actually use it.
Google has really taken this to heart. Why do people use Google Maps? Because it’s just so nice to use. Microsoft’s Terraserver gave users access to high resolution satellite images many years before Google Maps did the same. (In fact, while attempting to be clever, I inadvertently terrified my to-be roommate: I used the service to view an aerial photograph of his home and asked him some leading questions about the stuff in his backyard. It took until the second quarter of college before he even talked to me, and then only warily.) But, it wasn’t until Google rethought online maps that the security and privacy issues of such a service came into the national conscience. Why? Because whereas Mircorsoft had given access to satellite imagery, Google made them accessible.
“Okay,” you say, “Sounds good. But, how do I convince my clients that there’s more to interface design than just aesthetics and fluffy feelings?” The answer: By using math.
Continue reading »
Preferences: Hiding Interface Complexity
UI Design Fundamentals
Interfaces with few controls tend to look friendly and make for great screenshots. For instance, take this picture of Microsoft Windows XP’s “Taskbar and Start Menu” Control Panel:

Think it looks reasonably easy to use? Oh, but you haven’t clicked on that “Customize…” button yet, or the “Start Menu” tab. Let’s try “flattening” this Control Panel by taking all those additional windows, which are hidden behind these tabs and buttons, and putting them in the one place. It’s a little like envisioning the interface as an analog gadget from the 1940’s, where every little widget is like a switch on the front of the device.
Continue reading »
Redesigning Stoves
Redesign UI Design Fundamentals
The kitchen is a great place to go bad interface diving. Who can resist taking potshots at undecipherable microwave controls? Do you know how to set its clock? Its power level? I don’t. And I’m not about to dig out the manual with buttered fingers. But today’s dive isn’t about the technological gizmos that we all know complicate our cooking lives. Instead, its about re-evaluating an interface that we all take for granted; an interface that is so ingrained in us that we don’t realize that it’s possible to even think about making it better. Today’s bad interface is The Stove.
Continue reading »