The Web is finally starting to behave like a butler

When the Web was just beginning to take hold back in the mid-1990s, I remember thinking, “This is great for getting access to information, but it’s setting user interfaces back about 10 years.” It’s now 15 years later, but I’m happy to say that we’ve caught up and are finally starting to surpass where we left off.

Then: a face without a brain

In the early days the Web felt like a face without a brain. It quickly became a pretty face with colors and fancy images, but it still didn’t have much common sense. That was fine if you just wanted to view some information, assuming you could figure out what links to click on. But interacting was painful. In a typical session you might fill out a form, not quite sure you were answering correctly or which fields were required. Then you’d submit the form and wait. Eventually you’d find out that you were supposed to enter the date with dashes (1-19-10) instead of slashes (1/19/10). Or the form would choke because you’d entered a space before your address, but it would just say your entry was “invalid.” You’d futz around trying to guess the problems and submit again. Then wait. After a few tries you might get to move on to the next confusing stage, or you might just give up in frustration.

This was a big step backward from installed or desktop applications, which didn’t have to send requests to a server and wait for a response. When you entered a calculation or changed the text size, you saw the results immediately. When you filled out a form, a desktop app might immediately convert the date format for you. It might even change subsequent options based on your earlier input, all before you submitted the form. Although there was plenty of room for improvement, these applications at least gave you the feeling that someone was behind the curtain.

Now: the unobtrusive and helpful butler

Over the years the Web has slowly improved, but over the past year or so, I’ve noticed a marked difference. It’s starting to feel like there’s a thoughtful intelligence behind many of the websites I use, one that understands what I’m trying to do and offers just the right options or information at just the right moment.

I’ve talked in the past about how technology should behave like a butler, quietly supporting users’ tasks and anticipating their needs without complaining or getting in their faces. Happily, I’m starting to feel like there are more butler-like websites today.

The butler who helps you log in

Let me start with a basic example most of us have experienced. Most websites that require you to log in offer a “Forgot your password?” link, conveniently located right where you enter your information. You don’t have to go to the customer service page and search around to find the entry for that problem. You just click and follow the instructions. (Some do a better job than others at helping you recover from the problem, but at least it’s easy to get started.) A related example is Google’s suggestion of spelling corrections when you mistype a search term: “Did you mean…?” It’s usually just what you meant.

In a subtler example, Firefox helps you remember your login information as you return to websites. It used to be that when you entered your name and password into a website, Firefox interrupted to ask if you wanted it to remember your login information for the next time — thoughtful, except that it asked before you found out if you got into the site. So if you entered the wrong login information, Firefox would faithfully fill it in every time you returned to that site. Since then, Firefox has improved this interaction. It now inserts a strip along the top of the page that persists as you go through the login process, allowing you to wait until you get in before telling Firefox to remember your information. Now that’s a helpful butler.

The butler who supports information seeking

Firefox also acts like a butler in helping you return to websites you’ve previously visited. Most Web browsers automatically complete a Web address once you start typing it. That’s handy. But Firefox takes it further and doesn’t require you to start with the beginning of the address but instead matches any part of it. The other day I wanted to look up the hours of the Saratoga library (whose website I’ve visited before). All I did was type “sar” and it offered “www.santaclaracountylib.org/saratoga” as its first suggestion. Why yes, that’s right, thank you!

The Safari and Chrome browsers do something similar in a visual way: When you open a new tab they show you thumbnail images of the websites you’ve recently visited. If you want to go to one of those, you can get there in one click. (On the other hand, Safari seemed pretty dumb when I entered “sar” to return to the Saratoga library site. It sat there waiting for more input, cursor blinking stupidly.)

Besides such improvements to Web browsers, many websites are becoming similarly helpful. The American Airlines website, like many travel websites, is smart about text entry. It lets you indicate your destination with either the name of an airport (Dallas) or the airport code (DFW) — just as you might use either when speaking to a person. Better yet, it disambiguates between airports in the same city by showing you, as you type, both the name and the code of any matches. For example, if you enter Dall, it shows both “DFW – Dallas Forth Worth International, TX” and “DAL – Dallas Love Field, TX.” It used to be that you’d have to interrupt your flow to go to an airport lookup page and then come back to enter the code.

Some other examples of simple but helpful interaction improvements:

• Google completes your text with possible searches, which is not just a time saver. Sometimes I’ve found that it offers me useful search terms that I wouldn’t have thought of. Other times, it’s just reassuring to see that my query is reasonable.

• Hulu takes text completion one step further by offering likely options for that search term. When I entered the name of a TV show into the search box, it offered two options: “go to show page” or “watch latest episode.” This showed a refreshing understanding of what people do on the site and a willingness to support that task — in one click I was watching the episode I’d missed.
• Many ad-supported video sites indicate how many seconds until the video  begins — much like a responsive waiter letting you know your food will be out in just another minute. How considerate.

The butler who really understands the task

Web technology has advanced to the point that Web applications can be as interactive as desktop apps, no longer having to wait for responses from a server. I recently created a photo book using Snapfish’s web application, and it allowed me to drag and drop my photos onto pages, smoothly rearrange page layouts, change background colors, insert pages, and so on, all with smooth animations that made it easy to understand what was changing. It’s an impressive application, partly because it provides the real-time responsiveness typical of desktop applications inside a Web browser, but more because it presented the right options just as I needed them, and it interpreted my actions appropriately. An example that particularly pleased me was when I dragged a fifth photo onto a four-photo page layout and it automatically changed the page to a five-photo layout — no complaints that I must first switch to a five-photo layout and then add the photo again.

Just as impressive to me are websites that don’t use a lot of animation but still truly support the user’s task. I have admired the Hawaiian Airlines website, whose design reflects the understanding that choosing flights depends on many interdependent factors, such as price, date, time, airport, seat availability, and number of connections. It does an impressive job of showing you the relevant information in a compact display, and especially of letting you change one variable to see how it affects the others. For example, once you enter your dates (which you can easily select from a calendar without figuring out the required format), the website shows not just the fares for that date, but also the cheapest fares for the three dates before and after it. With one click, you can shift your departure date and see the flights available.

Another way the website feels more like a human butler is that it doesn’t make you start over every time you want to change an option.

• When you initially enter your destination, it shows other nearby airports and asks if you’d like to see results from them as well. If you don’t notice this option, you can always add it to your results later without changing context.
• It lets you see a map of the area with the airports noted in a popup overlaid on the page.
• As you make your choices, a receipt of sorts builds up on the left side so you can see your flight info and the price so far, all in place.
• You can even log in at any point and you’ll return right back to the page with your current flight choices, this time with any member discounts applied.

How nice it is to feel like there’s a helpful intelligence guiding you as you make your reservation rather than a rigid robot forcing you to follow its sequential process. (If only the airlines treated us so well once we’re traveling.)

[UPDATE: Hawaiian Airlines recently updated its website to add more animation and make it more visually appealing, but in doing so it hid some of the key functions that let you easily change your flight criteria. The airline also added some marketing material that keeps flashing as you move your cursor around. So the website is now more dynamic but less usable, proving that good interaction design is not about using cool features but about supporting the user’s task.]

But what about desktop applications?

It seemed that while the Web world was going through infancy, the world of desktop applications was stuck in adolescence. But now, as if urged by the Web’s level of interactivity, desktop apps are starting to become more responsive as well.

A good example comes from the latest version of Lightroom, Adobe’s photo management tool. For many years, Photoshop has offered a “healing brush” that allows you to blend the texture from one part of an image with the colors of another, useful for removing pimples from a face, for instance. But it was always tricky to choose which part of the image to use as the source for cleaning up the blemish. You had to choose a spot and blend it to see how it came out, repeatedly “undoing” until it looked right. Now Lightroom helps you see what you’re doing and adjust on the fly: when you choose the source, you see a preview of the blended pixels as you move your cursor around even before you click. Once you do click, you can move the source location to adjust the blend after-the-fact.

Again, it feels like the software understands your task and supports it gracefully.

The thing about butlers is that the more effective they are, the less likely you are to notice them. So it’s worth taking a moment to appreciate that many websites have evolved from frustratingly rigid to pleasantly cooperative, sometimes delightfully so. It might have taken us a long time to get here, but I look forward to seeing, over the next 15 years, how our software butlers learn to support and anticipate our activities in more sophisticated ways.