One of the best ways to learn what works and what doesn’t work when it comes to UI and usability is to look at as many samples as possible, testing out pages and evaluating how certain elements are being treated.
This usability tip begins with a look at Menu Pages, a very resourceful and well-known site allowing users to view restaurant menus online based on location, cuisine, and other criteria.
I often use their site but the first time I visited it, I was not able to immediately locate their search function. Here are a few reasons why:
- Banner style design. The search function is nearly attached to the main logo and has a very similar border color, which makes the entire area appear as one continuous graphic element. In addition, while the entire content area of the site is on a white background, the search function has a blue background, which makes it appear more as a graphic and less as a functional element.
- Placement. Typically, the search function is found at the top right corner of pages, unless used as a main navigational site element is usually in the top-center area and presented larger to serve as a main entry point to the site. In this case, the search appears to be centered but because of its close proximity to the logo, and its small size (which you normally would see on the top right) it is difficult to find it and identify it as a main site function.
- Button design. Buttons should look like clickable elements and stand out enough for users to find them in a quick page scan. The Go button on the search function is too flat and does not look like a clickable element. Its shape adds to the overall banner style design of the top area and its colors don’t stand out enough against the site’s color palate.
By comparison, have a look at Meetup’s search function, which serves as a main entry point on the site, and is therefore is placed at the center of the screen overlapping their main brand banner. Its size, placement and color nearly guarantee that users will be able to locate it immediately and recognize that it’s a main navigational element.
Further, just to make sure to cover all ends, they placed another search function at the top right corner of the page (consistent on all their pages). The only enhancement I would recommend in this case is an actual search button as some users might feel confused and not know to click on the search icon or simply press enter to initiate the search.
Veer’s search function also serves as a main navigational element for the site. Its top placement, although not exactly centered, spans over nearly the entire area and is easy to locate. The clean white input field over a light gray background color combined with the bright orange Search button makes the overall area appear as a functional form, which immediately calls for action.
Share your screenshots of search fields done right and gone wrong on Twitter, Facebook, or Google+ using the hashtag #SearchForSearch. Include a brief explanation of why your example engages or fails to. We’ll add our favorite submissions to the gallery below.
Comments
Nice article! It would add value to specify which industries need to have search centric websites. I saw a search centric Telco website Starhub very recently (surely spent thousands of dollars) - a lot of people I spoke to, do not have a clue of what to search! From a look point of view it's also a mismatch as it looks more of a housing launch website. Your comments here are highly appreciated.
IMO, a big part of the problem is that UX professionals and good web designers aren't always in full control of the design process. You have corporate executives or marketing guys dictating that this and this and that and this feature always has to be visible above the fold. So you end up with pages that have too much visual clutter focused in one of the most important areas of the site because they have no idea that it's impossible to fit everything and part of the design process is to focus on the most important parts. This is further compounded with companies trying to be too cute with search icons - you should have a button or link or something that clearly says "search" rather than some icon that blends into the morass of social media buttons that crappily designed sites inevitably stick front and center. That's another common problem, rather than focus on one or two social networks and presenting them in a classy way to the user, people use crappy addthis or other addons to add every single social button to a page. Then nobody wants to click on that mess and they have to use the types of firms listed at http://www.buyfacebooklikesreviews.com to get some social traction and likes. Rather than starting from the get-go focusing on a good design and removing the clutter, which benefits them in any way imaginable, companies go about things almost completely backwards.
UXmag.com could use the advice contained in this tip.
"Tammy Guy is the founder of a visual design and usability consulting firm focused on strategic brand planning, creative direction and diffusion of user experience problems by applying design theory and usability best practices in a rapidly changing Web environment."
Tammy Guy founded "The Tammy Guy Design." It's a visual design and usability firm. They help with brand strategy and creative direction. They use design theory and best practices to improve our experience of how we use things.
Strategy=planning
Web=ever changing
:-)
Interesting; do you still find users who need a button next to text fields (or drop down boxes for that matter) ?
Hi Tom, if you are referring to the button next to the Search field and asking if its necessary or not, my vote would be definitely yes. Although expert users will know to enter their search term and hit enter, others would need a button to direct them as far as next steps. Also, as search is such an important function, the search button itself if used in the correct color may serve as a great visual entry point on the site. Regarding drop downs - I think you might be referring to auto suggest tools. If so, and you can add those in, its a great tool to have. Checkout www.istockphoto.com for another good example of search. They have a good color for the Search button and a great auto suggest drop down menu. Hope this helps :)
Good article :)