Help picking most usable searchbox. Options

[Ransak]

Hello,

I was debating where to put this request but since I think this is more a usablility issue rather than design, I figured I'd toss this to you usabilitiy guru's.

I'm still in the draft stage of a site redesign and I need to build a robust site search function. It will be a standard keyword search, but with several selectors as to which database will be searched.

For example, if the user want's to look for the keyword 'shoes', there will be three ways to search: Find all products that have the keyword shoes, find all suppliers that make shoes or find any open auctions that are offering shoes.

I also have to factor in that there might be more selectors in the future. Not many but 1 more, maybe 2.

So now my question is, what do you think would be most usable for my site visitors to select a search method? Tabs, Radio Buttons, a dropdown list?

I have a few examples

Form 1

Form 2

Form 3

Form 4

I'd appreciate any advice. Any thoughts on a solution I might have overlooked?

Thanks,
Frank V.

*edited for spelling*

[Ruud]

Form 1 has my vote. The seperation is clear.

Form 2: confusing amount of buttons.

Form 3: ever used radio button search forms yourself? As in: ever changed them from the default setting?

Form 4: same as with #3.

[Respree]

Hi Frank:

You may not have considered this as an option, but what about keeping the search and interface simple by allowing them to enter "shoes" (in this example).

Then display results categorized like this:

Products: 10 results found

Suppliers: 2 results found

Auctions: 5 results found

This helps nicely answer the generic question, "what did you mean."

Try going to this site for a demo. (enter 'ships')
http://allposters.com/

[cre8pc]

Form 1 is the most usable by the most people with varying limits such as agility, eyesight, JavaScript turned off...

Instead of the action button saying "Search", which is redundant to the word preceding the search field, you might try a shorter word like "Go" .

Garrick's idea is interesting too!

[Ransak]

Thanks all,

Form 1 was my choice as well. My boss likes Form 2 so I have a bit of convincing to do.

Garricks suggestion is interesting. I talked to my programmer and he says it's possible but it might slow the search down. Still, I think I will mock-up a site using that method and pitch it. Thanks for the tip.

cre8pc - good tip on the 'Go' phrase. I think I'll swap that out.

Thanks
Frank V.

[AlGordon]

Another vote for Form 1 here. A further point in its favour to those already offered is that it it re-uses an idea that many users will already be comfortable with from their use of Windows, i.e. tabbed navigation.

[Tim]

My vote is for form 1 as well - as long as the page doesn't reload when the visitor clicks another tab. Maybe it can reload if they don't have JavaScript, but if they do, then IMO it should automatically change.

The tabbed navigation is also similar to the way Google does it.

Show your boss this thread if you're having a hard time convincing ).

My order of preference would be be:

Form 1
Form 4
Form 3
Form 2

Form 2 is the only one I really don't like.

- Tim

[Scratch]

Out of the options presented, I agree 1 is best:

2) Doesn't read like English, and 3 different submit buttons feels wrong.
3) Forces an extra click.
4) Forces up to 2 extra clicks; doesn't reveal the options up-front (sin)

I do have a doubt about 1.

My initial usability concern was: if I type in "Shoes" and then click "Suppliers", will I have to type in "Shoes" again? Or will it go ahead and search suppliers when I click "Suppliers", or will I have to click the search button? A lot of question marks, and potentially an extra page load. This points to a design problem indeed.

Take a scenario: If I want to find some great shoes, I'm looking for products and a supplier to get it to me, and hey auctions too if it can get me what I want.

My Goal is to have found the shoes I want. Any of the tabs could fulfil that goal. Is the site going to make me search three times?

I suspect that the problem is that your technical architecture (you mentioned 3 databases?) is driving your interaction design. This is not a happy place to be.

Your job as a designer is to create the ideal experience that lets all visitors achieve what their goals. The site cannot succeed unless it does that.

Your job as a developer is to deliver a robust, capable and manageable technical architecture that supports the site's functions, and to tie it to the design.

I agree with Respree that a single search entry point may be the best approach to take. In "Don't Make me Think" (please everyone buy it if you don't have it), Steve Krug uses a similar example from Amazon. A little while ago, Amazon sold Books, CDs and videos (nowhere near as many categories as they offer today). Their search box was "Search [ ] [Go]" - whereas all their competitors included a scope choice. Krug argued that Amazon's search was much simpler. IT worked out what best matched what you said you wanted, it didn't make you do that. (They've now reverted to a product scope, but they have about 25 different ranges).

From a goal-oriented approach, what is the difference between Products / Suppliers / Auctions? Today, when I search on Amazon for a DVD, it offers me new titles, used titles, related titles, and other things that other people who bought that title also liked. It's acting like an expert salesperson - easing me into the sales process by listening to what *I* have to say, and then helpfully offering me options. It's also cross-selling and up-selling me. That's why I buy more books and DVDs from Amazon than anywhere else.

[Ransak]

Thanks for everyones insights.

I should probably explain a bit further however. The site is a b2b site for importers and exporters. This is a site for importers to find sources for whatever he needs and for Exporters to find buyers.

The site search I am developing now is part of the buyers side of things. If the buyer was looking for shoes, he might want to browse the shoes available (Products), or he might just want to generate a list of all shoe manufacturer's (suppliers), or he might want to see any overstock auctions that contain shoes (auctions.)

The searches really are separate functions and they really are different goals from the buyers perspective. It is not as cut and try as an eCommerce site as buyers might need to find manufacturers capable of creating 'shoes' using the buyers spec's or they may be looking for actually pre-made shoes.

Stockgood auctions is similar to a bargain bin. It is going to be build using the same category tree as products and suppliers. I had it as a separate page in the beggining but figured since the structure was identical to other searches I might as well intergrate it.

My vote is for form 1 as well - as long as the page doesn't reload when the visitor clicks another tab. Maybe it can reload if they don't have JavaScript, but if they do, then IMO it should automatically change.

Not sure what I can do about a page reload there. If the user clicks a different tab, a different set of search results will generate so I think the page will need to reload. Is there something I am missing?

My initial usability concern was: if I type in \"Shoes\" and then click \"Suppliers\", will I have to type in \"Shoes\" again? Or will it go ahead and search suppliers when I click \"Suppliers\", or will I have to click the search button? A lot of question marks, and potentially an extra page load. This points to a design problem indeed.

The keyword remains in the searchbox so clicking 'suppliers' will automatically search for suppliers who make shoes unless you change the keyword. Clicking any tab is the same as clicking the 'search for ".." button.

I suspect that the problem is that your technical architecture (you mentioned 3 databases?) is driving your interaction design. This is not a happy place to be.

Oh yea, and it's not a little problem either. The TA is foobar'd for sure. I can start a new thread entirely on the problems I am having. The bottom line is that it is what it is. I have made it clear to my bosses that things are not well. In fact, we will have to re-build from scratch because the programmers only made users have the ability to join as either a buyer or a seller. 60% of our clientele are both and now they will have to log out and back in (Not to mention registering twice) in order to switch from buying to selling functionality. Unfortunately database development started before the website was site-mapped or anyone really had an idea of the sites expectations. Still lemons from lemonade ya know?

There is no way right now for the developers to create any amazon-like functionality. I wire-framed in many features that were dropped due to deadlines. One of the project goals given was to have the Product, Supplier, and Auction search intergraded. Eventually they want to add in a 'web' search as well, which does not make any sense to me at all since they are charging a hefty fee to suppliers to list their products. Why send users offsite then?

I loved Steve Krug's book and I do like the single search entry point. So I will suggest it as an alernative. Talking to the programmers this is the wireframe that we came up with. I was told the search results would have to be in that format based on their DB. Only the numbers will be clickable so I need to style that well if we go with this.

From a goal-oriented approach, what is the difference between Products / Suppliers / Auctions? Today, when I search on Amazon for a DVD, it offers me new titles, used titles, related titles, and other things that other people who bought that title also liked. It's acting like an expert salesperson - easing me into the sales process by listening to what *I* have to say, and then helpfully offering me options. It's also cross-selling and up-selling me. That's why I buy more books and DVDs from Amazon than anywhere else.

This is my goal, to be more interactive and dynamic. I am severaly limited by the database design and the programmers and the deadline. There is no time to build in more functionality as we are over a month overdue, though the deadline was very unrealistic for a project of this scope. We had 6 weeks with a staff of 4 to finish this site, concept to implimentation. For now I have to keep it simple.

Frank V.

[Scratch]

OK, if it's a given that you're stuck with 3 search functions, have you thought about 3 different search boxes?

The existing #1 form takes 3 lines. Tabs > search input > search box (this could be reduced down to 2).

You could easily have:
Search Products for [ ] [ > ]
Search Suppliers of [ ] [ > ]
Search Auctions for [ ] [ > ]

which takes up 3 lines, and is very clear. You also avoid any unnecesssary clicks, and any unnecessary page loads.

You might also copy the search arguments into all the other search boxes, so that a 'search again' in a different category is still only 1 click.

You could also colour-code the search boxes, which might correlate to sections of the site..?

[wandd]

Hi all.

I have been reading the forum for a while and thought I would finally write some thing.. thats what these things are all about after all isn't it?

My vote also goes for form one, for a slightly different reason to the ones above.

I like to be able to enter the search term and hit enter to start the search.

In form one it is clear to me what this would do, i.e. search the tab you were in.

In form two I wouldn't know where it would search.

Form 3 might be obvious if one of the check boxes was defaulted to on, but as it stands I wouldn't know where it would search, and the same logic goes against form 4.

Hope this helps.

D

[paranoidandroid]

form 1 looks far cleaner and easier to understand than all the others, form 2 would be my second choice, though doesn't look as elegant as 1. Forms 3 & 4 look kind of confusing, to many clicks needed.

[Ransak]

which takes up 3 lines, and is very clear. You also avoid any unnecesssary clicks, and any unnecessary page loads.

I'm not getting this page load thing. Wouldn't the page have to reload if the user changes search terms? Clicking another tab is like changing search terms so I can't see how loading a new page can be avoided.

[Tim]

The way I saw it is that a visitor might click a different tab before they enter a term.

For example, the default tab is Products. A visitor decides straight away that they want shoe suppliers (to steal scratch's example ). Some people might enter shoe first then click suppliers, in which case the search should automatically carry out without them then having to click Search. This, of course, would be a new page load.

The way I would do it, is I'd come here and click the Suppliers tab first, before entering anything in the box. If the page reloaded here, I'd be annoyed. What I would like it to do it just instantly change the tab over, where I could then enter my search term and hit Search.

I'm not sure if you use Gmail, but if you do, go to the settings link. You'll see the tabs here don't reload the page as you move between them (except for the last one, the odd one out). This is what I was referring to.

[Scratch]

Assume I want to find everything you have on 'Shoes'.

Using 3 tabs:
[list]=5 page loads.

Using 3 boxes:
[list]=3 page loads.

The difference is, clicking a tab causes an unnecessary page load, unless clicking the tab submits the search terms to search in the domain of the tab clicked, which is not obvious at all...

[cre8pc]

Ben (Scratch) mentions 3 separate search boxes. I've seen this in some client sites and it's looked good, and been functional in most cases. As long as the colors used, placement, white space around each one and simplicity on interaction is well thought out, this option is nice.

Not knowing you target market user (B2B is too wide of a desc.), leaves us at somewhat of a disadvantage...feels like throwing darts at a moving dartboard type of thing. (Which is how I describe SEO work by the way :wink: )

Anyway, when "Selling" the idea to your boss, remember to inject the needs of the user and impress on him/her that if they can't use or aren't persuaded to use it, where is the value in offering search options?

Also, to avoid the extra step of pushing a "go" button, some search functions work as soon as something is put into the field. While some people like this instant effect, I personally find it unnerving. I like to push buttons :roll:

Text headings are nice for search engines by the way

[Tim]

While some people like this instant effect, I personally find it unnerving. I like to push buttons

I think I'd be inclined to agree with you, Kim.

For an example of this see Dave's site. Try the search. (Btw Dave, not meaning to say it's bad - just that I personally wouldn't use the feature much )

[AlGordon]

I know what you mean about the self submitting forms...I like to be able to check that what I've entered a) sums up what I want to search for and is spelt as correctly as I can manage. Sometimes this takes two or three edits. I'd rather do this before hitting 'Search' and not as part of my result refining process.

[Ransak]

I'm not sure if you use Gmail, but if you do, go to the settings link. You'll see the tabs here don't reload the page as you move between them (except for the last one, the odd one out). This is what I was referring to.

Ok, I see what you mean.

[Ransak]

Not knowing you target market user (B2B is too wide of a desc.), leaves us at somewhat of a disadvantage...feels like throwing darts at a moving dartboard type of thing. (Which is how I describe SEO work by the way  )

Sorry, I wasn't clear enough. We are "connecting buyers, sellers and partners" or so our tagline says. Basically we are connecting American Buyers/Sellers with Chinese Buyers/Sellers. By buyers and sellers I mean Importers/Exporters not Retail sales.

The 3 searchboxes scratch mentioned is an interesting solution as well. The single searchpoint option similar to Garrick's site doesn't look as good to me as it did earlier due to the format the programmers are limiting me to.

Well thanks all..you sure have helped me think this through. I thought I was at a dead-end for options.

Frank V.