Search as Main Navigation
By: Dan Bayn
Tags: Responsive Design, Mobile, UX

An intuitive alternative to traditional website headers.

Man, main navigation is the worst. Just, like… the worst. Before you go leveling accusations of UX heresy, hear me out. Traditional header navigation is often bloated, surprisingly useless, and a blight upon responsive design.

Like most horizontal layouts, header navigation doesn’t scale down to small screens. Most people just hide it all behind a hamburger icon as soon as things get too narrow. That’s a bad UI pattern on two counts…

If those main navigation links aren’t important enough to display on mobile devices, why are they the most visually prominent elements on wide screens? (See my article on why Responsive Design is an Ethos.) A growing pile of usability studies shows that hamburger icons are not an effective way to drive content discovery, primarily because a lot of people just haven’t learned what it means yet.

This garbage is your best case scenario.

And all for what? Just in case a person who came to your site looking for sports news might want to jump directly to the entertainment section? In my experience, that kind of browsing is a lot less likely than 1) using search to find something or 2) clicking directly to a piece of related content. (That’s called contextual navigation. Read more about it in my article on Bottom-Up Navigation.)

It would make a lot more sense to strip down our site headers, bring the content right up to the top of every page, and handle contextual navigation in the body of the page. The only things that need to be in the header are branding (a link to the homepage) and the search box.

All You Need is Search

You know how search boxes often suggest things to you as you type? I say, why wait for the user to type anything? What if we suggested our sites’ most valuable pages to users as soon as they click into the search box? It’d be pretty much the same crap we’d cram into main navigation (hub pages, featured content, About Us), but neatly stacked in a vertical menu and not displayed until the user needs them.

When the user does start typing, replace these with actual type-ahead suggestions.

You get plenty of space for a usable search box, a slim header that lets you get right to the content, and the sublime joy of never having to find a shorter name for a hub page because there’s “not enough room” in the header.

“But how will people know it’s there?” I can already hear you asking. That’s the most beautiful thing about this madness: it’s a usability problem that solves itself! I actually tested this idea during my time in the content marketing salt mines and here’s how it went down in 100% of cases…

Researcher: “Now, imagine that you want to find a page that lists all of the [topic name] [nouns]. How would you do that?” Participant: “Well, I don’t see any main navigation links — that’s weird — so I guess I’d try search. [Participant clicks into the searchbox.] Oh! There they are! I’d just click on that.

Never has there been a more literal instance of “surprise and delight.” This approach makes main navigation discoverable at the instant users are trying to find it and not one moment before. It creates a tiny amount of tension when users don’t see the header nav they’ve been trained to expect, then relieves that tension in a burst of wayfinding catharsis. It’s user experience legerdemain, I tell you!

And it’s even responsive. In fact, Google does something similar when you need to input a location for directions…

So don’t gimme any crap about the keyboard getting in the way.

tl;dr