Search Box Guidelines

16 Sep 2008 - 10:09am
6 years ago
7 replies
977 reads
Kordian Piotr Klecha
2008

Hi all,

I am currently preparing short search boxes' style guide for huge internet
portal with lots of vertical sites.

Basic guidelines are simple: search box should be eye-catching, left-aligned
label over single input field, "Search" button (or magnifying lens icon) in
the same line and two radios (default "in current site" / "all over
Internet") below, followed by a short link to advanced search form.

Positioning is kinda doubtful, though. I thought about top of right column
(below header area with logo, navibar and so on) - BUT some of our sites are
log-in services and top-right looks like standard position of log-in form -
and I am afraid that two forms (Search / Log-in) one over another may
produce some cognitive noise. Am I wrong?

On the other hand - Yahoo!, for example, usually uses two _horizontal_
search boxes - global in the header area and local just below (or even over)
navi bar. (Horizontal search box may works for Yahoo!, but I'm not sure if
it's good solution when there's a need for some extra radios or checkboxes -
having them just below main input is far more comfortable for me).

Any suggestions will be welcome. I want to prepare some very general
usability design rules (with as little it-depends-factor as possible), which
will be apllied site-wide and used as a standard for quite a long time, so
it's very important for me to make proper decisions and avoiding potential
future problems.

Thanks,
Kordian

Comments

17 Sep 2008 - 7:02am
Todd Warfel
2003

On Sep 16, 2008, at 12:09 PM, Kordian Piotr Klecha wrote:

> Any suggestions will be welcome. I want to prepare some very general
> usability design rules (with as little it-depends-factor as
> possible), which will be apllied site-wide and used as a standard
> for quite a long time, so it's very important for me to make proper
> decisions and avoiding potential future problems.

There are some subtle differences between intranet and internet
search, which can drive your recommendations. However, in the search
work we've done, which covers large content sites, applications
(internal/external), and large sites which have a mix of content and
transactions/applications, we've found that large and centered in the
header performs best for the following reasons:

1. It's prominent and easy to spot
2. It's learned. People are used to it because they see it on Google
results, Yahoo!, and Comcast.net (a few large portals)
3. It's in the header area, which is where they tend to fall back on
for search

The second best place we've found is not in the top right corner, but
just below that. So, typically anchored at the bottom right corner of
the header (Facebook is a good example). People can still find it here
and will migrate to that area looking for it.

But if you want it to be a no-brainer and you have the real estate for
it, then top center of the page taking up about 50% of the header is
key.

Also, our research has shown that the length of the input field does
have some impact on searching. The shorter the field, the shorter the
search inputs (e.g. people put in fewer characters or words). With
longer input, it won't be unusual to see them type in entire sentences
or questions? There's a perception that the length of the search input
field dictates "How much I can type to search."

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Sep 2008 - 8:46am
Kordian Piotr Klecha
2008

Tod,

thank you very much, especially for note about connection between
width of input box and lenght of phrase.

Greetings,
Kordian

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=33020

19 Sep 2008 - 8:36am
Cwodtke
2004

From my time at Yahoo (admittedly 2003-2005) working with search
quantifiably, we found that a big box improves visibility (i.e. more
queries) but doesn't improve number of words in query (despite an old
Neilson book suggestion). Adding type in the box reduces usage (you know,
the "type search here" text, in the box). Looks like it might reduce the
fields recognizableness as a form. Location is less important that a strong
affordance, and that means a box looking like it does straight out of html
with a real button that is labeled search. the magnifying glass addition
didn't hurt usage, but didn't hurt it either. Only a magnifying glass
reduced overall searches. Two searches doesn't hurt usage, users aren't
paralyzed with confusion about it as some designer seem to think they would
be, and it's useful if you have an obstreperous head (such as one with a
banner) since users often scroll the header off the screen to get to the
goodness in the center of the page.

More search goodness (though not about the box per se) here
http://www.eleganthack.com/archives/ten_observations_about_search_interfaces.php

hope this stream of consciousness helps.

19 Sep 2008 - 9:15am
Kordian Piotr Klecha
2008

Christina,

thank you! I've read "Ten observations..." before, very useful.

One doubt: you wrote that only a magnifying glass reduces search
number - did you test the correlation between search box label and
starting button? I have read some time ago that when label is very
explicit - string written on button has little influence on search
number.

It's interesting, because in my native language using "Go!" for
starting sth is not common - so the only verb I can use is
"Search". But "Search" is also on the label, just over the input.
So I was wondering about using lens icon instead of button, to avoid
duplication.

Best,
Kordian

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=33020

21 Sep 2008 - 3:24am
netwiz
2010

On Fri, 19 Sep 2008 07:36:42 -0700, Christina wrote:

> Adding type in the box reduces usage (you know,
>the "type search here" text, in the box). Looks like it might reduce the
>fields recognizableness as a form.

That's interesting. It ties up with some of our findings on completing
a form. In the case where people have to choose a title (e.g. Mr, Mrs,
Dr, etc) from a dropdown list, we put 'Choose title...' as the
default. We found that people missed the box, presumably because it
looked like it had already been filled in. When we left the default
blank, it worked better. There was in any case a 'Title' field name to
the left.

* Nick Gassman - Usability and Standards Manager - http://ba.com *

21 Sep 2008 - 9:11am
Cwodtke
2004

It's possible that the label might make up for button clarity, but that
would be so dependent on execution I wouldn't do it. Labels are never as
powerful affordances as the controls themselves. Why gamble?

On Fri, Sep 19, 2008 at 8:15 AM, Kordian Piotr Klecha <kpklecha at gmail.com>wrote:

> Christina,
>
> thank you! I've read "Ten observations..." before, very useful.
>
> One doubt: you wrote that only a magnifying glass reduces search
> number - did you test the correlation between search box label and
> starting button? I have read some time ago that when label is very
> explicit - string written on button has little influence on search
> number.
>
> It's interesting, because in my native language using "Go!" for
> starting sth is not common - so the only verb I can use is
> "Search". But "Search" is also on the label, just over the input.
> So I was wondering about using lens icon instead of button, to avoid
> duplication.
>
> Best,
> Kordian
>
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=33020
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

21 Sep 2008 - 12:40pm
Andreas Ringdal
2008

My first thought was to loose the radio buttons and search intranet
and extranet at the same time using Google api or yahoo BOSS.

Advantage: Data on the intranet (internal information) is always
presented to the users.

Disadvantage: you might have to learn the users what they are
searching when they are using the search box on your site.

Andreas

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=33020

Syndicate content Get the feed