Design a Perfect Search Box
uxplanet.org
uxplanet.org
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.
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.
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.
"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.
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.
The Google landing page does have a magnifying glass on mobile.
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
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.
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?
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.
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.
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 run a specialized search engine myself and I had no hesitation in using the icon, only because it's a well understood symbol.
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.
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
You've found the website and want to look closer at what it has to offer.
Watch that whole presentation, it's pretty fun (and yes it covers the floppy disk icon)
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.
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.
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.
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.
This article is a welcome antidote.
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.
I very frequently base search on what is presently visible. Removing that is wrong.
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.
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.
Seems awfully familiar...
EDIT: Yeah, Page 16 & 17. http://www.avis.it/userfiles/file/Dont_Make_Me_Think_A_Commo...
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)
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.
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.
Every time one thinks of something clever one should consider if it fits the principle of least surprise.
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.
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.
If I type it and it's on the page it should be found.
That kind of makes me wonder why no text editor implements this.
I appreciate the thought which went into this analysis, and it'd be particularly helpful to have an implementation.