Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Help picking most usable searchbox.


  • Please log in to reply
27 replies to this topic

#1 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 12 October 2004 - 12:38 PM

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*

#2 Ruud

Ruud

    Hall of Fame

  • Hall Of Fame
  • 4887 posts

Posted 12 October 2004 - 12:47 PM

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? :P

Form 4: same as with #3.

#3 Respree

Respree

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 5901 posts

Posted 12 October 2004 - 12:48 PM

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/

#4 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13362 posts

Posted 12 October 2004 - 08:22 PM

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!

#5 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 13 October 2004 - 12:15 AM

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.

#6 AlGordon

AlGordon

    Mach 1 Member

  • Members
  • 313 posts

Posted 13 October 2004 - 02:51 AM

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.

#7 Tim

Tim

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3094 posts

Posted 13 October 2004 - 03:01 AM

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 :D).

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

#8 Scratch

Scratch

    Light Speed Member

  • Members
  • 964 posts

Posted 13 October 2004 - 04:44 AM

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.

#9 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 13 October 2004 - 05:54 AM

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.

#10 Scratch

Scratch

    Light Speed Member

  • Members
  • 964 posts

Posted 13 October 2004 - 06:24 AM

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..?

#11 wandd

wandd

    Ready To Fly Member

  • Members
  • 44 posts

Posted 13 October 2004 - 07:39 AM

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

#12 paranoidandroid

paranoidandroid

    Light Speed Member

  • Members
  • 821 posts

Posted 13 October 2004 - 07:54 AM

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.

#13 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 13 October 2004 - 09:07 AM

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.

#14 Tim

Tim

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3094 posts

Posted 13 October 2004 - 09:26 AM

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.
Posted Image

#15 Scratch

Scratch

    Light Speed Member

  • Members
  • 964 posts

Posted 13 October 2004 - 09:41 AM

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...

#16 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13362 posts

Posted 13 October 2004 - 09:55 AM

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 :D

#17 Tim

Tim

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3094 posts

Posted 13 October 2004 - 10:07 AM

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 :D)

#18 AlGordon

AlGordon

    Mach 1 Member

  • Members
  • 313 posts

Posted 13 October 2004 - 10:07 AM

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 B) 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.

#19 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 13 October 2004 - 10:15 AM

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.

#20 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 13 October 2004 - 10:22 AM

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.

#21 Brad

Brad

    Mach 1 Member

  • Members
  • 354 posts

Posted 13 October 2004 - 03:29 PM

I have used a search selector on one web directory for years. The only thing I can tell you is that I first had it as a dropdown box - which nobody used.

Later I changed it to radio buttons and it got more usage. Still only a few were changing from the default.

I think people like seeing the choices at a glance (radio buttons) as opposed to having to explore (dropdowns).

Those are the only to types I have any first hand observations on.

#22 Scratch

Scratch

    Light Speed Member

  • Members
  • 964 posts

Posted 14 October 2004 - 02:41 AM

I totally agree Brad. That's the biggest downside of dropdowns - that they don't reveal their options until actively opened by the user.

The other downside is the slowness and relative difficulty of use (Fitt's law again Barry).

#23 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13362 posts

Posted 14 October 2004 - 08:23 AM

I'd like to inject my thanks to all for a highly valuable and informative discussion.

This topic is an example of how important making something usable and functional really is.

:glasses:

#24 DaveChild

DaveChild

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3446 posts

Posted 21 October 2004 - 07:14 AM

Btw Dave, not meaning to say it's bad - just that I personally wouldn't use the feature much


That's ok - it's not something I would use on a client's site, I don't think. I can get away with things like that on my own site, because there are no commercial pressures on it to perform a certain way.

With the search and tabs thing - one thing I've always found is that tabs above the search input always seem like moving to a new area. I never expect clicking a new tab above a search input to actually take me to a different set of results for the same keywords. When the tabs are below the input, I expect the new page to be a different set of results.

I don't know if that's because vertical placement indicates the position within the site hierarchy of the element, or if I'm just a bit weird.

#25 suka

suka

    Ready To Fly Member

  • Members
  • 22 posts

Posted 06 November 2004 - 08:26 AM

Wow -- great thread, and great suggestions. Have you considered combining a couple of these ideas? For example, you could combine Respree's suggestion on how to organize the results, with your Form1. Let customers enter their term into the search box to do a "global" search, and then use your tab based system to organize the results, with the default displaying everything.

I am sympathetic to the database complexity it sounds like you are trying to avoid by running all searches across all systems each time. However I think most customers who initiate a search want to see all their options up front, and it's an opportunity for the business to cross promote additional segments of their business to a wider audience.

Just my 2 cents. Let us know what you end up doing and thanks for the interesting conversation. :-)

Suka

#26 Ransak

Ransak

    Light Speed Member

  • Members
  • 612 posts

Posted 06 November 2004 - 03:52 PM

Great idea suka. I was also considering this but I ran out of time eventually and was driving the programmer crazy. I think I might incorprate that on Phase II of the site though. Right now I am busy re-designing everything as my bosses did not like what the other designer did. At least for now I think I have the backend square.

Here is the search we decided on (with thanks to Respree) for now. It is barebones, meaning I will be tweeking the presentation layer but you can see the final function if you'd like. I just finished the homepage re-design and then after a few other pages I need to finish, search is next.

The database is not filled yet. Toys would be a good test seach.

http://usa.tradedrag...tml/search_catg

*Edited for spelling* (Oh how I miss spellcheck)

#27 behindTheScenes

behindTheScenes

    Gravity Master Member

  • Members
  • 145 posts

Posted 07 November 2004 - 04:01 AM

Would it be beneficial to search accross all 3 catagories? So checkbox based rather than radio button...

#28 usability_guy

usability_guy

    Gravity Master Member

  • Members
  • 245 posts

Posted 11 April 2005 - 07:30 AM

I really wanted to see those forms and stuff.
But none of the links are working. then What is the idea of still Putting this thread.
This i've seen with plenty of links here.
or is that my system problem. Don't think so 'coz else everything works properly.
I was very interested to see the different kind of forms' pl let me know if has been moved to different address.

Cheers:
Ram



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users