8 ms·

Design a Perfect Search Box

178 points by babich 10y ago

algesten 10y ago
This reads like a summary of what most are already doing. I can't shake the feeling some of these wisdoms could trendy things that are just part of the herd mentality that plagues UI design. Other examples: * Social media share-buttons * Hard to find login links and just have prominent sign-up links * Extra 3rd party toolbars * Interrupting modal email sign-up boxes on a timer * Autoplay video Each of these things (maybe) have a place, but there sure is a lot of "me too" going on as well.
- enra 10y ago
  I think there is some herd mentality on design trends, but overall with UI patterns it's actually useful to follow certain standardized patterns so you don't have to train the user that much. All of the things you described are not really any good UI or design patterns, but probably something from a "growth hacker", that were a/b tested and increased engagement metrics, so they got added. They didn't get added because someone saw them somewhere else, or the designer really wanted to add social media sharing buttons, 3rd party toolbars or interrupting the user with useless stuff.
- electric_sheep 10y ago
  Many of those patterns that you list aren't actually trends resulting from received wisdom -- they're dark patterns, known to be actively hostile to the user. Common wisdom regarding UX would vigorously contraindicate their use, but they continue to be used because people either don't know or, more likely, don't care.
  - avian 10y ago
    I've seen these dark patterns justified by "UX experts" like so: 1) Make a A/B test with an annoying pop-up sign-up box and an ordinary unobtrusive one. 2) Data shows that more people sign up using the pop-up. 3) Obviously people want to sign up, but can't find the unobtrusive box. 4) Hence, the pop-up design helps people achieve their goal (of signing up) better and is therefore more user friendly.
- pharrlax 10y ago
  >This reads like a summary of what most are already doing. I can't shake the feeling some of these wisdoms could trendy things that are just part of the herd mentality that plagues UI design. This basically describes all of Babich's writing. He even names some of his articles "Popular Trends in..." or "Popular Techniques for...", but basically all of them are more or less a recap of what's trendy in one facet of UI/UX design.
- Marazan 10y ago
  There has clearly been a trend towards invisible search boxes that are only activated once you click on a hard to spot icon. This article is a welcome antidote.
  - fibbery 10y ago
    they kind of suggest to do that though, at the end of point 7
interfixus 10y ago
Always accompany search box with magnifying-glass icon After, what, twenty-five years of exposure to this particular symbolism - or did it use to bee binoculars? - I still struggle to make the connection whenever I see it. Magnify what? Zoom where? It always takes me a second or two to get, many, many times a day. My mental model of a search goes the other way: I wish to zoom out, get a bird's eye perspective. The loupe iconograhy may be great and perfect. I may be the only human not to get it. Am I?
- deevious 10y ago
  Sherlock Holmes, man, Sherlock Holmes. http://www.cinelegende.fr/img/2013/Boston/Sherlock-Holmes.jpg http://www.cinelegende.fr/img/2013/Boston/Sherlock-Holmes.jp...
  - interfixus 10y ago
    I know. It just doesn't work for me.
- wingerlang 10y ago
  > Magnify what? Zoom where? The area you are currently looking at? If you use a magnifying glass to look for anything, you generally just magnify/zoom whatever is in front of you and search until you find something. > I may be the only human not to get it. Am I? Probably
  - hueving 10y ago
    When I use a magnifying class, it's because I've already found something and want to look at it closer. When I lose my keys I don't whip out the magnifying glass and start scanning the floor on my knees.
    - wingerlang 10y ago
      If you're looking for something smaller you might.
    - 10y ago
kriro 10y ago
So these are just suggestions? I would have liked to see some data backing the claims. "According to usability studies, it is more user-friendly to have no advanced search options" is also pretty weak without linking to said studies. Later the author mentions a study on expected positioning by Shaikh and Lenz without any reference [0]. I guess it's a nice overview but I'd rather read some papers backing up the claims on it than just take the author's word for it. I mean if you'd just link to the relevant papers I wouldn't have to...you know search for them. I'm also a bit skeptical on all of the advice that contradicts what the landing page of google looks like (it's basically centered and has no magnifying glass icon) [0] Shaikh and Lenz source: http://usabilitynews.org/wheres-the-search-re-examining-user-expectations-of-web-objects/ http://usabilitynews.org/wheres-the-search-re-examining-user... Edit: There's also no mention on cultural aspects. Would I want the search button on the other side for visitors who speak Arabic for example etc.
- sgift 10y ago
  Obviously, just anecdata, but I've worked for 10 years in the search area (enterprise search) and from what I've seen search users fall into two categories. 99% of people never use anything besides the search box. If they don't find what they want, they add more words. Even if you show them that what they want is just one extra click they rather try to find some magic incantation to get what they want from search box usage only. We provided advanced options, facets (only pdfs, only author whatever and so on), usually customized with something the customers deemed relevant, but people just don't use it. The other 1% are the ultra-power users who use every feature you provide and always push for more. They even learned the query syntax for even more advanced searches than possible in the GUI. There was almost no middle ground.
  - colmvp 10y ago
    Haha most of the time I fit in the former category. The thing is, I wouldn't be surprised if users used search a lot in their day to day life. Google Search. Google Images. Google Maps / Waze. Amazon. Windows/OSX. Yelp. Youtube. Your typical ecommerce website (e.g. B&H, REI, ). Writing words is an action applicable to all of them and it's something people are comfortable and familiar with. I can type in something ambiguous or improperly spelt in Google and it'll give me the exact answer. And if I get nothing, well maybe it's my own fault, so try something different. Whereas when it comes to facets, users have to mindful of how it differs according to the results, which is something I can remember as a general power user, but not what I would expect from others. From a visual point of view, the facets/filters can be implemented in different ways which further adds to the cognitive load. The way you interact with filters on Yelp on mobile is different than the way they present it on the web. The filters offered on Amazon is presented differently than that of YouTube or Google Images. Certainly, the implementations make sense, but it's an additional thing to remember for that particular app/website. And so my unscientific opinion is that a good portion of the population prefer to go with the behavior we do the most and we know is consistent across the board, which is search by text.
GoToRO 10y ago
Don't erase my query after I hit Search.
lettersdigits 10y ago
I have another tip: divide your use cases into two: a: first x visits (or first visits until the first click on the search box, which means the user now knows it's there) b. all the rest of the visits after he tried it for the first time explanation: a.on the first x visits, or until the user REALIZES that there is a search box - try making it extremely visible. even a blinking animation for a few seconds might do the trick. another nice thing is to animate a text, char-by-char . I have done this on android apps and it even looks sexy to the eye (like those old games) Try to get his attention to the search box at any means possible. b. once the user actually realized that there is a search box and he actually tried to use it - he is now educated. he knows there's a search box. In this case, you can minimalize your search box to a tiny search button. remember - the user already knows it's there. if he needs it - he'll know where to find it Any feedback/criticism will is welcome. (edit: spacing)
- scribu 10y ago
  What if, after the initial visit when the user discovers the search bar, the user can't find the search bar anymore because now it looks different? What if they forgot what they learned on the previous visit? Humans do that sometimes, especially with things that they don't use very often.
  - lettersdigits 10y ago
    you can let him use the full-length search bar for more than once before you minimize it. for example : show him the full-length for the first 5 times, and only then start showing the little one. Also, every time (for the first 5 times) that he clicks on the 'submit search' button/icon - make an animation that will minimize it, allowing him to see how it actually becomes smaller and more compact. Also, when you get to the point of showing only the minimized search box - you can show him an animated tool top that will point to the small button. Again, you can do that only on the first X attempts . Also, you can track and analyze the 'learning success rate' of your users. If they actually keep forgetting how/where to look for the search button (after they made x successful search attempts) - then YOU are probably right. But this requires to be more data driven - try something and then measure its ssuccess etc. After a few attempts you should (hopefully) see one way of doing it that is by far more effective than the others. But again - this requires data analytics.
dredmorbius 10y ago
Don't blank, or replace, the current page contents as the user starts typing in the search box. I very frequently base search on what is presently visible. Removing that is wrong.
legulere 10y ago
> Use auto-suggestion mechanism That kind of makes me wonder why no text editor implements this.
- grub5000 10y ago
  Notepad++ does this
dbg31415 10y ago
Wasn't this a chapter in Don't Make Me Think? Seems awfully familiar... EDIT: Yeah, Page 16 & 17. http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Common_Sense_Approach_to_Web_Usability_2nd_Ed_2005.pdf http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Commo...
sharpercoder 10y ago
> perfect is the enemy of good
greggman 10y ago
My experience with Google search auto-show results is less than ideal and I really wonder if it's been UX/User tested or if it's just "hey, it's cool we can do this so let's do it" The problem comes up when I search for something. I then want to make a new search referencing something I see in the current search but as soon as I start typing the very text I'm referencing disappears. It's very frustrating.
sschueller 10y ago
2. Is how search is implemented in the ActionBar on android. Every android users knows that pressing the search icon will open the search input field in the ActionBar.
DelaneyM 10y ago
Is it possible to get a React component implementing these suggestions? I appreciate the thought which went into this analysis, and it'd be particularly helpful to have an implementation.
ChristianGeek 10y ago
I agree with most of these, but #2 doesnt apply to mobile apps, where screen space is at a premium.
tofflos 10y ago
There should be a similar guide for which types of search results to display and where to display them. There are way too many search boxes that won't find partial or even exact matches. If I type it and it's on the page it should be found.
JabavuAdams 10y ago
My 85-year-old Dad uses the powered by Google search box on amazon.com, instead of google.com, because it "lets you enter more text". I didn't understand what he meant, so I watched him use it. On google.com, in Chrome, when he starts typing in the search box, focus jumps to the address bar. The problem is that the address bar font is too small -- he's magnified the page content, but not the browser GUI.
franciscop 10y ago
You cannot call it Perfect in the same way that you cannot call a meal or a piece of art Perfect. Anything that depends on the needs of the business or the preferences of the user doesn't have a best solution fits all by definition. For instance, if you wanted to filter a list of 100 items in the front-end this is instantaneous; a filter-as-you-type might make more sense. However if you are in a back-end search you'd want a button and a full page refresh might be acceptable. Finally if the search is going to take few seconds for any justificable reason don't do a full page refresh and leave your user hanging in white; a load indicator or a streaming search might be better suited here.
qrbLPHiKpiux 10y ago
The auto search function can be easily abused by a site developer and owner.

178 points by babich 10y ago

This reads like a summary of what most are already doing. I can't shake the feeling some of these wisdoms could trendy things that are just part of the herd mentality that plagues UI design. Other examples: * Social media share-buttons * Hard to find login links and just have prominent sign-up links * Extra 3rd party toolbars * Interrupting modal email sign-up boxes on a timer * Autoplay video Each of these things (maybe) have a place, but there sure is a lot of "me too" going on as well.

enra 10y ago
I think there is some herd mentality on design trends, but overall with UI patterns it's actually useful to follow certain standardized patterns so you don't have to train the user that much. All of the things you described are not really any good UI or design patterns, but probably something from a "growth hacker", that were a/b tested and increased engagement metrics, so they got added. They didn't get added because someone saw them somewhere else, or the designer really wanted to add social media sharing buttons, 3rd party toolbars or interrupting the user with useless stuff.
electric_sheep 10y ago
Many of those patterns that you list aren't actually trends resulting from received wisdom -- they're dark patterns, known to be actively hostile to the user. Common wisdom regarding UX would vigorously contraindicate their use, but they continue to be used because people either don't know or, more likely, don't care.
- avian 10y ago
  I've seen these dark patterns justified by "UX experts" like so: 1) Make a A/B test with an annoying pop-up sign-up box and an ordinary unobtrusive one. 2) Data shows that more people sign up using the pop-up. 3) Obviously people want to sign up, but can't find the unobtrusive box. 4) Hence, the pop-up design helps people achieve their goal (of signing up) better and is therefore more user friendly.
pharrlax 10y ago
>This reads like a summary of what most are already doing. I can't shake the feeling some of these wisdoms could trendy things that are just part of the herd mentality that plagues UI design. This basically describes all of Babich's writing. He even names some of his articles "Popular Trends in..." or "Popular Techniques for...", but basically all of them are more or less a recap of what's trendy in one facet of UI/UX design.
Marazan 10y ago
There has clearly been a trend towards invisible search boxes that are only activated once you click on a hard to spot icon. This article is a welcome antidote.
- fibbery 10y ago
  they kind of suggest to do that though, at the end of point 7

interfixus 10y ago

Always accompany search box with magnifying-glass icon After, what, twenty-five years of exposure to this particular symbolism - or did it use to bee binoculars? - I still struggle to make the connection whenever I see it. Magnify what? Zoom where? It always takes me a second or two to get, many, many times a day. My mental model of a search goes the other way: I wish to zoom out, get a bird's eye perspective. The loupe iconograhy may be great and perfect. I may be the only human not to get it. Am I?

deevious 10y ago
Sherlock Holmes, man, Sherlock Holmes. http://www.cinelegende.fr/img/2013/Boston/Sherlock-Holmes.jpg http://www.cinelegende.fr/img/2013/Boston/Sherlock-Holmes.jp...
- interfixus 10y ago
  I know. It just doesn't work for me.
wingerlang 10y ago
> Magnify what? Zoom where? The area you are currently looking at? If you use a magnifying glass to look for anything, you generally just magnify/zoom whatever is in front of you and search until you find something. > I may be the only human not to get it. Am I? Probably
- hueving 10y ago
  When I use a magnifying class, it's because I've already found something and want to look at it closer. When I lose my keys I don't whip out the magnifying glass and start scanning the floor on my knees.
  - wingerlang 10y ago
    If you're looking for something smaller you might.
  - 10y ago

kriro 10y ago

So these are just suggestions? I would have liked to see some data backing the claims. "According to usability studies, it is more user-friendly to have no advanced search options" is also pretty weak without linking to said studies. Later the author mentions a study on expected positioning by Shaikh and Lenz without any reference [0]. I guess it's a nice overview but I'd rather read some papers backing up the claims on it than just take the author's word for it. I mean if you'd just link to the relevant papers I wouldn't have to...you know search for them. I'm also a bit skeptical on all of the advice that contradicts what the landing page of google looks like (it's basically centered and has no magnifying glass icon) [0] Shaikh and Lenz source: http://usabilitynews.org/wheres-the-search-re-examining-user-expectations-of-web-objects/ http://usabilitynews.org/wheres-the-search-re-examining-user... Edit: There's also no mention on cultural aspects. Would I want the search button on the other side for visitors who speak Arabic for example etc.

sgift 10y ago
Obviously, just anecdata, but I've worked for 10 years in the search area (enterprise search) and from what I've seen search users fall into two categories. 99% of people never use anything besides the search box. If they don't find what they want, they add more words. Even if you show them that what they want is just one extra click they rather try to find some magic incantation to get what they want from search box usage only. We provided advanced options, facets (only pdfs, only author whatever and so on), usually customized with something the customers deemed relevant, but people just don't use it. The other 1% are the ultra-power users who use every feature you provide and always push for more. They even learned the query syntax for even more advanced searches than possible in the GUI. There was almost no middle ground.
- colmvp 10y ago
  Haha most of the time I fit in the former category. The thing is, I wouldn't be surprised if users used search a lot in their day to day life. Google Search. Google Images. Google Maps / Waze. Amazon. Windows/OSX. Yelp. Youtube. Your typical ecommerce website (e.g. B&H, REI, ). Writing words is an action applicable to all of them and it's something people are comfortable and familiar with. I can type in something ambiguous or improperly spelt in Google and it'll give me the exact answer. And if I get nothing, well maybe it's my own fault, so try something different. Whereas when it comes to facets, users have to mindful of how it differs according to the results, which is something I can remember as a general power user, but not what I would expect from others. From a visual point of view, the facets/filters can be implemented in different ways which further adds to the cognitive load. The way you interact with filters on Yelp on mobile is different than the way they present it on the web. The filters offered on Amazon is presented differently than that of YouTube or Google Images. Certainly, the implementations make sense, but it's an additional thing to remember for that particular app/website. And so my unscientific opinion is that a good portion of the population prefer to go with the behavior we do the most and we know is consistent across the board, which is search by text.

GoToRO 10y ago

Don't erase my query after I hit Search.

lettersdigits 10y ago

I have another tip: divide your use cases into two: a: first x visits (or first visits until the first click on the search box, which means the user now knows it's there) b. all the rest of the visits after he tried it for the first time explanation: a.on the first x visits, or until the user REALIZES that there is a search box - try making it extremely visible. even a blinking animation for a few seconds might do the trick. another nice thing is to animate a text, char-by-char . I have done this on android apps and it even looks sexy to the eye (like those old games) Try to get his attention to the search box at any means possible. b. once the user actually realized that there is a search box and he actually tried to use it - he is now educated. he knows there's a search box. In this case, you can minimalize your search box to a tiny search button. remember - the user already knows it's there. if he needs it - he'll know where to find it Any feedback/criticism will is welcome. (edit: spacing)

scribu 10y ago
What if, after the initial visit when the user discovers the search bar, the user can't find the search bar anymore because now it looks different? What if they forgot what they learned on the previous visit? Humans do that sometimes, especially with things that they don't use very often.
- lettersdigits 10y ago
  you can let him use the full-length search bar for more than once before you minimize it. for example : show him the full-length for the first 5 times, and only then start showing the little one. Also, every time (for the first 5 times) that he clicks on the 'submit search' button/icon - make an animation that will minimize it, allowing him to see how it actually becomes smaller and more compact. Also, when you get to the point of showing only the minimized search box - you can show him an animated tool top that will point to the small button. Again, you can do that only on the first X attempts . Also, you can track and analyze the 'learning success rate' of your users. If they actually keep forgetting how/where to look for the search button (after they made x successful search attempts) - then YOU are probably right. But this requires to be more data driven - try something and then measure its ssuccess etc. After a few attempts you should (hopefully) see one way of doing it that is by far more effective than the others. But again - this requires data analytics.

dredmorbius 10y ago

Don't blank, or replace, the current page contents as the user starts typing in the search box. I very frequently base search on what is presently visible. Removing that is wrong.

legulere 10y ago

> Use auto-suggestion mechanism That kind of makes me wonder why no text editor implements this.

grub5000 10y ago
Notepad++ does this

dbg31415 10y ago

Wasn't this a chapter in Don't Make Me Think? Seems awfully familiar... EDIT: Yeah, Page 16 & 17. http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Common_Sense_Approach_to_Web_Usability_2nd_Ed_2005.pdf http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Commo...

sharpercoder 10y ago

> perfect is the enemy of good

greggman 10y ago

My experience with Google search auto-show results is less than ideal and I really wonder if it's been UX/User tested or if it's just "hey, it's cool we can do this so let's do it" The problem comes up when I search for something. I then want to make a new search referencing something I see in the current search but as soon as I start typing the very text I'm referencing disappears. It's very frustrating.

sschueller 10y ago

2. Is how search is implemented in the ActionBar on android. Every android users knows that pressing the search icon will open the search input field in the ActionBar.

DelaneyM 10y ago

Is it possible to get a React component implementing these suggestions? I appreciate the thought which went into this analysis, and it'd be particularly helpful to have an implementation.

ChristianGeek 10y ago

I agree with most of these, but #2 doesnt apply to mobile apps, where screen space is at a premium.

tofflos 10y ago

There should be a similar guide for which types of search results to display and where to display them. There are way too many search boxes that won't find partial or even exact matches. If I type it and it's on the page it should be found.

JabavuAdams 10y ago

My 85-year-old Dad uses the powered by Google search box on amazon.com, instead of google.com, because it "lets you enter more text". I didn't understand what he meant, so I watched him use it. On google.com, in Chrome, when he starts typing in the search box, focus jumps to the address bar. The problem is that the address bar font is too small -- he's magnified the page content, but not the browser GUI.

franciscop 10y ago

You cannot call it Perfect in the same way that you cannot call a meal or a piece of art Perfect. Anything that depends on the needs of the business or the preferences of the user doesn't have a best solution fits all by definition. For instance, if you wanted to filter a list of 100 items in the front-end this is instantaneous; a filter-as-you-type might make more sense. However if you are in a back-end search you'd want a button and a full page refresh might be acceptable. Finally if the search is going to take few seconds for any justificable reason don't do a full page refresh and leave your user hanging in white; a load indicator or a streaming search might be better suited here.

qrbLPHiKpiux 10y ago

The auto search function can be easily abused by a site developer and owner.