
Design a Perfect Search Box - babich
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
======
kriro
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...](http://usabilitynews.org/wheres-the-search-re-examining-
user-expectations-of-web-objects/)

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

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

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

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

~~~
SkyMarshal
Any idea what a better search icon would be?

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

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

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

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

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

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

------
GoToRO
Don't erase my query after I hit Search.

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

------
dbg31415
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...](http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Common_Sense_Approach_to_Web_Usability_2nd_Ed_2005.pdf)

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

~~~
JupiterMoon
Please. don't. do. this.

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

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

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

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

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

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

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

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

------
legulere
> Use auto-suggestion mechanism

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

~~~
grub5000
Notepad++ does this

------
sharpercoder
> perfect is the enemy of good

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

