4

Well I was wondering what you might think of a select box inside of a search bar. As long as the text doesn't go underneath the box I think it looks really cool.

Example:

enter image description here

This belongs to a hosting site I'm coding at the moment. But a friend said that every other hosting site has it outside the bar and next to the button and we should do it like them.

I don't know, I just like to do different then what everyone else does. What do you think?

7

There's a famous book called Don't Make Me Think: A Common Sense Approach to Web Usability, which explains how making your users think (even for a second) might cause them frustration with your site, impend usability, etc.

Users expect such a common control to look in a certain way and if it doesn't they'll get frustrated. Think about cars - you can step into practically any car and drive it, since all the key controls are very much the same - everything is predictable and expected, which is a very good thing.

BTW - have you thought what happens if the user tries to input a very long name? In your control, it looks like the text will be either hidden by the drop box or overlay above it, neither of which is good. If on the other hand the text box and the drop box are separate, you won't get that problem (the text will simply auto-scroll horizontally).

  • 1
    Funny story about this > "Think about cars - you can step into practically any car and drive it" ... I got into a rental Lexus recently and couldn't figure out how to start it to save my life. Final solution: With the key fob in your pocket, keep your foot on the brake and hold the start button while all the safety warnings scroll across a display (20+ seconds). Way to make me feel dumb! – plainclothes May 17 '17 at 20:07
7

So your two reasons for designing the UI this way are "it looks cool" and "it's different than what everyone else does"?

In that case, my answer would be: I don't think those are good reasons to design a UI a certain way. When creating user interfaces, one of the most important things to remember is that you're not designing for yourself, but for your end users.

That means you should find out what people visiting your site expect, understand, and have used before. So, for example, do a usability test with some of your users where you observe them using a competitor's site that places the select box outside of the search field, and then observe users using your design. See which one works better (there may be no difference, as this is a pretty small piece of UI).

But overall, keep in mind that "it looks cool" and "I like to be different" won't get you taken seriously as a UI designer. Most times, you need to have facts to back up your argument. Usage data or metrics are a good start.

  • "It's different than what everyone else does" is usually a reason not to design a feature a certain way. – Ken Mohnkern May 17 '17 at 20:48
  • @KenMohnkern it's called innovation - maybe it'll catch on? Besides, I have seen similar search fields before, vBulletin used to have them. – ESR May 18 '17 at 4:34
  • For your particular case, you have to weigh usability with your desire for innovation. If you want your app to be immediately understandable (we call it "intuitive") then use patterns people know already. If you want users to work to figure out how to use your app, then innovate like crazy. Have fun! – Ken Mohnkern May 18 '17 at 12:46
2

This question seems worthy of an update ...

Keep calm and combine controls

Seven years ago (when the question was posed), this seemed "uncommon" to some people. Thank goodness for people like @kawoki who thought to ask — it's okay to mash up controls now!

The now ubiquitous Amazon mega-search box

As an industry (especially in e-comm and mobile) we experimented with combining controls that complimented each other. The Amazon search box, is a quintessential case in point. After endless testing (still on-going), the usual categorical browsing experience was down-played into a subtle menu and the search box reigned supreme. By default, it's a global search, but the aforementioned categories can be accessed right there in the search box to limit the scope.

The moral of the story

If an innovative interaction seems to solve a particular problem, it might just make sense to your users too. Don't throw it out as "uncommon" — test it!

0

Also worth noting is that very likely the majority of visitors to the search bar are going to be mobile. Not sure if the dropdown is going to be very usable for mobile device users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.