UI Design Fundamentals

What would the web be like if you could tell it what you want to do as easily as you currently tell it where you want to go?

Mozilla Labs is starting to experiment with linguistic interfaces. That is, we’re playing around with interfaces where you type commands and stuff happens — in much the same way that you can type a location into the address bar in order to go somewhere.

I think this is cool because, for one thing, I think language-based interfaces are seriously under-explored compared to pointing-based interfaces. For another thing, I used to work on a project called Enso. Enso’s a language-based interface, where you type commands in and stuff happens. I think we got certain things right and certain things wrong in Enso’s UI design, so I want to take another crack at doing it better.

What makes a good linguistic UI?

Here’s my current theory.

1. It’s easy to learn.
2. It’s efficient.
3. It’s expressive.

Those are the three “E”s. Let’s unpack ‘em a little.

“Easy to learn” should be self-explanatory. Even if a tool is super-efficient and incredibly powerful, if it’s too hard to learn, it’ll be relegated to the “experts only” ghetto. Yeah, that’s right, I’m talking about you, Unix shell. (ahem, Unix/Linux/Posix/BSD/etc.) The original language-based UI, the oldest UI still in common use, and the one which has given the whole concept of “type what you want to do” a bad name for the last thirty years, serves as an excellent counter-example. For a linguistic UI to be easy to learn, it should strive to avoid all of the following misfeatures of the shell:

Continue reading »

UI Design Fundamentals

In the concept video I recently did for laying out the interface paradigms for Firefox Mobile, I listed five guiding principals.

1. Touch it with your finger
2. Large targets are good
3. Visual Momentum and Physics are compelling
4. Typing is difficult
5. Content is king

It’s these principals that inform the design of new features long after the original design as been coded, released, and iterated on. In discussions with the perspicacious Mike Beltzner, another design principal emerged.

 6. Use modal overlays sparingly, if at all.

To be sure we are on the same page—I’m may be partaking in the dangerous hobby of coining new terminology—an overlay is simply a content area that sits in front of the content beneath it. The aspect that makes a modal overlay modal is that when it is up, the content “beneath” the overlay cannot be acted upon until the overlay is dismissed. Although a modal overlay may be visually transparent, it is never interaction transparent: you must always take action, like clicking “okay”, before continuing with your workflow. While I’m living dangerously, I’ll toss one more phrase into the mix: a state-forgetting modal overlay is an overlay whose state is reset every time it is summoned. That is, any work you do in the overlay is lost when you dismiss it.

Continue reading »

Design UI Design Fundamentals

Lately some of us at Mozilla Labs have been experimenting with graphical keyboard user interfaces in Firefox. Our current work-in-progress is something that we’re calling Ubiquity for the time being, though the name is by no means set in stone.

Ubiquity is heavily informed by Enso, a software product developed by me and my colleagues at Humanized from 2005-07. Aside from the benefits outlined in Alex Faaborg’s blog post entitled The Graphical Keyboard User Interface, this experiment is intended to solve few other problems, one of which I’ll address in this post.

Web applications, much the same as desktop applications, are a bit like isolated cities: it’s difficult for an end-user to arbitrarily share data and functionality between them. This is alleviated to some extent by creations like Firefox Add-ons that add toolbars or sidebars to Firefox’s UI, Bookmarklets, and Greasemonkey, but while all of these solutions are powerful, each comes with its own set of problems. The buttons and bars of many Firefox add-ons don’t scale well because of the valuable screen real-estate they consume; Bookmarklets are restricted in scope because they only have the access privileges of the website they’re running on; and Greasemonkey doesn’t prescribe any kind of interaction model, which makes it difficult to reuse the functionality of a script in a context other than the ones it was expressly designed for.

Continue reading »

Design UI Design Fundamentals

The growth in popularity of digital cameras has brought along with it a heightened interest in image editing software. Everybody knows Photoshop, but noteverybody can afford it. Enter the free Web apps! Recently one of our readers directed our attention to the edit imaging site splashup.com.

Our thoughts are below.

Continue reading »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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 »

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.

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

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 »

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 »

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 »

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 »

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 »

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 »

UI Design Fundamentals

A lot of people call good software “usable”. But what does that mean?

Taken literally, something is “usable” if it can be used. Calling an interface “usable” is kind of like calling food “edible”: it’s setting the bar pretty darn low. And as such, it doesn’t really say much about the interface (or food) in question.

Continue reading »

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 »

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 »

UI Design Fundamentals

Here at Humanized, we use the “Over the Phone” test as a good rule of thumb for interface design.

Continue reading »

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 »