Dude, Where's My Search Box?

In all the time I've been developing software, there was one blog post that opened my eyes, turned the lights on, and changed everything. It was just that good.

I'm sorry, did you want to read it? Did you perhaps get the impression that clicking on the words "one blog post" would cause it to open in your browser because the words were a different color, and, if you're using a mouse, when you moved it over the text it became underlined and your cursor changed?

Okay, that was a little contrived. I'll never do it again. What it demonstrates, though, is how automatically we rely on a certain "visual language" in websites and applications so that most of the time we know how to use them without reading a manual.

That doesn't mean that every website needs to be exactly the same. As with verbal language, there are different ways to express the same thought, and languages change over time. But generally, if there's a familiar, recognized way to perform a common task, most websites prefer that over something new and unfamiliar? Why because a fundamental rule of user experience (UX) is that users shouldn't have to figure out how to perform simple tasks, not even for a second.

For example, take just a moment to look at www.google.com. 99.9% of users visit this page to search for something. If we've used a computer for more than five minutes in our life, how long does it take us to figure out how to interact with this page? Probably none. We type in the box and press enter. If we're on a mobile device we type and click the magnifying glass icon which universally means "search."

That's Too Easy. Let's Change It Because... Why?

Now let's visit www.zdnet.com and search for something there.

Strike One

First, where's the search box? Are you looking for a white or light-colored box in the upper right corner or perhaps top center? It's not there. There's a magnifying class in the upper left corner, but no search box.

There's no law that says you have to put a search box in the upper right corner. But is it any more difficult than putting it where people typically look for it?

I checked several familiar sites and in each case the search was top center or top right: Amazon, CNN, Fox News, and Ebay. I didn't omit mentioning a website because it didn't fit the pattern. They all put their search top center or top right. The ones that only display a search icon (not a box) always put it in the upper right corner.

Product search is a critical feature on Amazon.com. If you view the site on a smaller screen or in a smaller window, which elements are hidden? Anything but the product search. Is search an important feature on ZDNet's site? I don't know.

ZDNet's search isn't hidden, but it's not where you look for it. That's hardly the end of the world. But they're okay with making you scan the top of the page looking for it, for no apparent reason. Strike one.

Strike Two

Using Chrome, Edge, and Firefox on Windows and Chrome on Android, what happens when I click the magnifying class search icon in the upper left corner? Nothing. In Chrome the tab indicates that a page is loading, but then it stops, and nothing has changed.

Now I feel stupid. Did I only think I clicked on it? Did I miss? I thought I knew how to do this. If I click again I get to the next step, so it must have been me, right? No, I reloaded the page and tried again and again with the same result. After experimenting I determined that it's not that it misses the first click. It just takes about 5-10 seconds after page load to wire up a response to the click event. That's seven seconds of clicking on an icon that does nothing.

That's pretty bad. Could that be why it the icon is in an unexpected location, so that the page has more time to load while I look for it? It's a feature, not a bug? Strike two.

Strike Three

What am I looking for? I'll tell you what I'm looking for. Dude, where's my search box? And if I could find that then I'd type in what I'm actually looking for!

The answer to this Where's Waldo puzzle is that I'm supposed to start typing on top of the words "What are you looking for?" Sometimes a blinking horizonal-line "cursor" appears to the left of the text. Sometimes it doesn't, even in the same browser. Even when it does, it doesn't stand out next to the words. But when it's missing, there's no visual clue to indicate that I should begin typing.

Look at the browser in front of you, or any other application. There's text all over the screen. Would it occur to most users that they should click on the text and begin typing? No, because nothing works that way. Sometimes textboxes contain placeholder text, but we're not confused because it's usually somewhat grayed out, the text says "search" or "search for products", and it's in a box with a search icon. The verbal language is consistent with the visual language.

Asking me a question and making me figure out how to answer it, after making me hunt for the search icon and then wait seven seconds for it to work? Strike three!

It's Spreading

ZDNet is not the only culprit. I love Google Keep, but I'm just as likely to search for existing notes as to take new ones. (Because that's why I took the notes.)

The Android app has the search icon in the upper right corner and the "take a note" option in the lower right. It's never confusing. If want to take a note I tap that, and if I want to search I tap the search icon.

The website, however, looks and behaves differently:

The box for entering a note is located where I'd typically look for a search box, it looks like a search box, and the cursor is placed there by default. The app has trained me that I'm not writing a note until I tell it, by clicking on "take a note", that I want to take a note. But now my cursor is in a box that looks like a search box, and as soon as I type a single character I've created a note that I need to delete.

Where is the search box? It's there, but it's barely distinguished from its background. I'm assuming that the designers deliberately decided that taking a note should be the default behavior. There was probably some discussion about it. But between the non-standard visual language and the inconsistency with the Android app, it creates confusion and extra work.

Google Keep is also by far the easiest way I know to take a quick note with the assurance that I can always find it later. I love everything else about the design. (And it's free. Google has my permission to do whatever they do and sell analytics and targeted ads. Thank you, Google.) But the website is another example of the curiously hidden search box.

Nitpicking?

To anyone who doesn't design websites or applications, yes, I'm nitpicking. But if we're concerned with user experience we know that details matter. It's like going to a grocery store where the employees look sloppy and aren't friendly. The inconvenience is momentary and the products are the same, but it influences our perception of both the store and its products, consciously and subconsciously.

When we're performing routine tasks that are common across sites we don't expect to read, look, or even think. We just do. That's not unreasonable - it's the standard that successful websites set and meet.