Hacker News new | comments | show | ask | jobs | submit login
Design a Perfect Search Box (uxplanet.org)
178 points by babich on Feb 28, 2017 | hide | past | web | favorite | 56 comments

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

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.

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.

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.

IMO _the_ resource on search UI design is http://searchuserinterfaces.com/ - very well researched booked, although getting a little dated (was written before the mobile app boom took off) but for example detailed coverage of the topic at hand - the design of the search box - http://searchuserinterfaces.com/book/sui_ch4_query_specifica... (the whole book is free to read online) e.g.

"Some interfaces allow the searcher to cut-and-paste long swaths of text into the search box, whereas others present short entry forms and limit the number of terms that the system will accept for processing. Researchers have speculated that short query forms lead to short queries. To test this hypothesis, [Franzen and Karlgren, 2000] designed two different query entry form boxes. The first showed one empty line and only 18 visible characters (but would accept up to 200 characters) and the second showed 6 lines of 80 characters each, which allowed arbitrarily long queries to be entered. The authors asked 19 linguistics students to use one of the two interfaces and to find relevant documents for three queries. There was a statistically significant difference between the two conditions, with those using the short box using 2.81 words on average, versus 3.43 for those using the larger box."

[Franzen and Karlgren, 2000] K. Franzen and J. Karlgren. Verbosity and interface design. Technical report, Technical Report T2000, 2000.

In addition, that usability research is from 2001, and reassessed in 2006, with the conclusion "As technology changes the face of the internet, users’ expectations seem to shift as well." It's hard to wrap my head around how vastly different sites were designed (by and large) over 15 years ago. The basic UI skeletal structure is mostly there, but that's about it I think.

Some of the research still applies, but I wouldn't hold it up as a pinnacle of useful data during a discussion about best practices in 2017.

> what the landing page of google looks like (it's basically centered and has no magnifying glass icon)

The Google landing page does have a magnifying glass on mobile.

True, interesting that it doesn't on desktop and that I've mentally saved the desktop version even though I probably search a lot more on mobile overall...granted rarely through the landing page.

Interestingly when you start typing and it goes to result preview page which includes a magnifying glass.

I am thinking the reasoning is google main page and its only job is searching things so they just decided not to add it. results page is a lot more complex so the icon is added

… could also that they’ve just never had one on their home page, too. (https://upload.wikimedia.org/wikipedia/en/b/b7/Google1998.pn...)

I do like to think it's more philosophical: Google is search … and so much beyond it at the same time. Including a search glyph in the field is almost misrepresentation.

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?

I think it has something to do with the transition from skeuomorphic metaphor to iconographic symbol.

As a skeuomorphism you might look at a magnifying glass symbol and say "that looks like a magnifying glass, which is a tool for making things bigger, therefore this thing makes things bigger".

As that symbol beds in and becomes part of language, it loses its connection, and its meaning is derived entirely from context and usage. I haven't used any Microsoft software for a while, but from my memory the floppy disc icon outlived floppy disks by quite a while.

You can argue that words shouldn't mean different things to what their etymology suggests, but that's the losing battle of a language prescriptivist, not a practical language user. I'm saddened when I see people use "utilize" instead of "use", or "everyday" instead of "every day" or whatever, but everyone knows what they mean. Like it or not, language changes.

So the magnifying glass has lost its etymology to popular usage. That's my theory anyway.

And I think you are right.

I am not really arguing for or against, just providing my own little anecdotal data point: That I haven't so far been able to internalize this particular piece of symbolism. The floppy disk icon I grasp immediately, even if it annoys me for its datedness.

I always thought the magnifying glass for search made sense as it was like a detective looking for clues.

It is shown in the famous Cluedo board game [1] (aka "Clue" in the USA). It's typically associated with forensics when looking for fingerprints.

[1] https://upload.wikimedia.org/wikipedia/en/6/61/Cluedo_1956_S...

I don't think you don't have to internalize it necessarily. I'm going to continue to care about and use Standard English spelling and grammar, and it's ok to notice when someone uses something slightly off-standard, as long as it doesn't affect anyone else or interfere with good-faith conversation.

I run a specialized search engine myself and I had no hesitation in using the icon, only because it's a well understood symbol.

Any idea what a better search icon would be?

Binoculars were used decades ago. Not sure if they're still used. Ditto a little funnel for filtering.

Definitely agree that binoculars are less conspicuous, the magnifying glass can also mean zoom. But, I think users are (for better or worse) used to the magnifying glass.

I know. It just doesn't work for me.

Magnifying-glass icon is for `search`, because in the western culture we use one to search clues. Thank you Sherlock Holmes.

Yep. And it's going to follow us everywhere like the floppy disk icon for save.

I always use a text button labelled "go" or "search" or "find" depending on the specific application and what clicking that button will do. Sometimes if it's a very specific search box I add more to the button such as "find customers" or "search map" or "search for incidents"

Of course I build custom business applications usually for domain experts who, if they don't already, are willing to learn a tool or process if it will help them do their job. This is, of course very different from sites where half a second of confusion can lead to a lost sale or closing the tab.

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


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.

You could see it like this:

You've found the website and want to look closer at what it has to offer.

If you're looking for something smaller you might.

Among teens asked, seems like 70% think "search", 24% think "zoom" when they see that icon. https://youtu.be/kylikelQBqg?t=558

Watch that whole presentation, it's pretty fun (and yes it covers the floppy disk icon)

I think of this symbol as a way to find a needle into an haystack. You have so much data that you a need to "zoom in" to a precise location in order to find what you really need.

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.

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.

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.

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.

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.

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.

they kind of suggest to do that though, at the end of point 7

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

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.

Don't erase my query after I hit Search.

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.

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.

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

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


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)

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.

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.

Please. don't. do. this.

Every time one thinks of something clever one should consider if it fits the principle of least surprise.

> Please. don't. do. this.

Don't do what specifically ? and why not ? and what should I do instead ?

All of these answers are missing in your comment.

WhatsApp is doing something quite similar - displaying a small search icon. When you click on it - the search box expands to 100% (with animation, of course) and the keyboard input pops up.

Looking at your proposed solution again, a question popped up: if the UI can comfortably support an expanded search bar, then what's the point in minimising it, ever?

if there's enough space for an expanded search bar - there's no point, in my opinion.

But for example - on map based apps I would personally prefer to have the map with as little distractions (icons, buttons,text inputs, labels) as possible.

In Google's Android Chrome the url box is hidden once you start scrolling down. I like that . And they probably have the data to show you that other people like that as well, because this 'hide-when-scrolling-down' feature is there at least a year or so, If I remember correctly.

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.

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.

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

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

> Use auto-suggestion mechanism

That kind of makes me wonder why no text editor implements this.

Notepad++ does this

> perfect is the enemy of good

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.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact