Why, though, does that little box have to be so boring? Can a search box be beautiful while still keeping its utility intact? Can it seamlessly integrate into a site design without losing the attention of people that are looking for it?
Author’s Note: I myself am guilty of treating the search fuction as a utilitarian object. It’s there, and its ugly, but it doesn’t have to be that way.
The Basics of Search Box Interface Design
From a user perspective, the beauty of the search field is that it is a known quantity.
- You know how it should behave.
- You know and understand how to use it.
- It is (or should be) always there for you.
People expect to easily find “the box,” type stuff in, and click the button. From there, they will be able to quickly browse to their information of choice from the resulting page.
Futz with any of these known quantities and the user experience can be disrupted. Sure, just because you don’t include a “Search” button, fire and brimstone won’t rain down from above, but for that instant, you will have jerked your website visitor out of their zen state of surfing nirvana and made them have to fend for themselves. The end of the world? No, but nonetheless it can be a jarring experience.
But, Can It Be Beautiful?
So, we have the basics of search field utility down. The question now becomes, can it be beautiful?
Here are some examples of search boxes that push the envelope. All are beautiful, some function better than others, but they all have one underlying principle: they have all been given care and attention. It is little details like this that make the difference between a good design and a great one.
Nobody pushed these search boxes off into a corner (well, some did but it was on purpose!).
Wordpress Themes by Evan Eckard
My “Search Box” curiosity began when I first started playing with the Cellar Heat wordpress theme by Evan Eckard. Evan’s attention to detail with this theme (in fact, with all of his themes) is second to none.
Cellar Heat Wordpress Theme - Search Box
The Cellar Heat search field features a transparent PNG background (complete with IE6 hack) and blends beautifully with the rest of the site. It is certainly not your ordinary search box, and its expected location in the top right of the page allows him to relax the rules of “look for the white box to type into”.
For a more eye-candy, be sure to check out the coordinating comment fields Evan integrates into his Cellar Heat design.
Another eyecatching Search is from Eckard’s Notepad Chaos Theme, available for download from Smashing Magazine.
Chaos Wordpress Theme - Search Box
Again, expectedly tucked in the top right corner of the page, the box features beautiful background detail, a notepad scribble and surprisingly structured button. Oh, and don’t forget the Post-Its!
So, armed with my mouse at the ready, I fired up LittleSnapper and proceeded to visit my daily design and inspiration sites, this time with the fresh perspective of focusing on the search fields. Some were the expected utilitarian white boxes we have come to know and expect. Some might surprise you.
Apple Inc.
www.apple.com - Search Box
As a recent convert from PC to Mac, the iconical Apple Website holds a special place in my heart. I have been to the site many a time, however I never gave the search function much thought or attention. Not so surprisingly, their search field mimics that of the OSX Finder. Clean, familiar, Beautilitarian.
VectorTuts and Family
VectorTuts - Search Box
VectorTuts, NetTuts, PSDTuts, heck, the whole Envato family is a main staple in my inspirational lineup. Their sites are incredibly well-designed, beautiful to look at and navigate, and easy to follow. Not surprisingly, their Search function follows suit with a seamless integration into their look and feel. There is no true “Search” button, but one can click on the icon, (which seems fairly self-explanatory) or just hit enter.
I Love Typography
The I Love Typography site is beautiful in its whitespace. At first glance, however, there is no search box to be found!
I Love Typography - Search Box
A quick once-over of their incredibly lengthy homepage reveals it tucked away at the bottom of one of the sidebars - not exactly ideal placement, but there is a “Search” link up in the top horizontal menu for those afraid to scroll.
The box itself LOOKS like your standard plain white box, but look closely… a subtle dotted border around the box, a crisp, austere search button. It blends beautifully with the site, even if it is not immediately apparent.
Dzineblog
Dzineblog - Search Box
Dzineblog.com takes a unique approach to searching. In fact, it isn’t really a box, but a search line. All traces of the “box model” have been removed, along with the search button.
The instructions clearly state to hit enter to complete your search, but clicking inside the box removes the instructions, and you will be hardpressed to get those instructions back without closing your browser window or navigating to a new page. It is a beautiful design, but a bit quirky to use if you aren’t paying attention.
Tutorial9
Tutorial9 - Search Box
The search box for Tutorial9 is right there, almost “in your face” but quite beatifully. The exaggerated size with softly rounded corners ease it into the user experience, and the punchy little icon gives you that visual cue even before you see the accompanying search button. Tutorial9’s search box is definitely Beautilitarian.
Spoongraphics Blog
Before I finish out part 1 of this series, I just had to give a tip of the virtual hat to the Spoongraphics Blog.
Spoongraphics Blog - Search Box
The search box implementation here is stellar… beautiful, cohesive look and feel, expertly integrated into the site, easy to use and fun to look at. The input text is right aligned - something that you don’t usually see in your standard search box. All in all, a truly Beautilitarian piece.
Wrapping It Up
So, preliminary research shows that there is hope for those bland and boring search boxes. Part 2 of this series will follow along as I continue through my RSS favorites, checking out how the experts dress up the search function.
In the meantime, have you been inspired by a search box lately? Please share in the comments!
