Please tone down or remove the auto-expansion of the search box

Question

In the last few hours, the search box has taken on a new behavior: if you click on it, the toolbar blanks out, and the search text field expands, moving a few hundred pixels to the left. This causes the text cursor to jump a few hundred pixels to the left, as well.

This is—for lack of a better or more tactful word—crazy, and it violates the principle of least astonishment.

That is, one expects the search box to work like nearly every other search box in existence: when one clicks on it, it shouldn't move, it shouldn't expand, and unrelated things shouldn't disappear.

Edit

Brandon pointed out Apple.com's use of a similar behavior for their search box, but it differs in a few ways:

• It only expands by a fraction of its original size
• It continues to be clearly designated a search box (see update)
• Unrelated elements don't disappear: they move slightly to accomodate the new search box size

While still not ideal (the text cursor moving is perhaps the worst part of this), modifying the behavior of Stack Exchange's search box to be more like Apple.com would help to mitigate the problem.

Rebecca Chernoff and Kate Gregory had two other suggestions that would also help make the search box less of a jarring experience:

• Don't expand until you need the room
• Leave the position of the text cursor alone, and don't expand to the left: expand instead to the right.

Edit 2

Jeff points out that Google moves the search box when you search. However, there are several key differences between Google's search box and Stack Exchange's search box:

• Google's search box doesn't move the moment you click on it. It moves after you start typing (suggested above) (see update)
• There is no animation involved in the movement.
• The search box doesn't move to the left or expand, it jumps upward
• The movement has a specific purpose to offset its usability problems: it immediately provides search results
• It doesn't hide unrelated elements.

The most important difference, however, is that you can turn it off:

So, if the new Stack Exchange search box is an attempt to be more like Google, it should go whole-hog and provide search results instantly and provide a way to turn it off.

Answer 1

We just deployed some changes that heavily tone down the way it works.

1. Auto expand ninja thing only shows up after you start typing (something real ... not tab or arrows)
2. We use html placeholders so the word "search" does not prefix your search if you click on the box too early
3. We have a big FAT search box in the search results page.

These changes, imho, make the change digestible. If we still believe this is not good enough please open a separate request asking to totally remove the super-mega-expando.

Answer 2

I have a headache now from trying to search for stuff. Click, type the first few letters, look up - huh? what? where's the - oh, why did it move over there? Where was I?

Assuming this is solving a real pain, could it move a little more slowly? Say, after I've typed 20 characters, move over about 2 characters worth, and continue to move 2 characters for each character I type? That way, the text will not be far from where it was before, and if I type short keywords, I'll never notice any difference.

Answer 3

Perhaps all would be happy if we could search upside down...that way the cursor can start at the right and not jump once the box has expanded...I think we'd all fairly quickly get use to reading like this as well :P

Answer 4

I think I'd like the auto-expansion better if the word Search: is placed in front of the text box when it auto-expands. As it is, the expanded text box, all by itself, looks a little bare.

Also, tapping the escape key twice causes the word "search" to be entered into the search box, which is probably not intended behavior.

Answer 5

Here's a greasemonkey implementation of Kate's suggestion:

(function() {
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined') { 
            window.setTimeout(GM_wait,100); 
        } else { 
            $ = unsafeWindow.jQuery; letsJQuery(); 
        }
    }
    GM_wait();
    function letsJQuery() {
        $(window).load(function() {
            var search = $("#search input").css("max-width", "none");
            var temp = $("<span></span>").css("font-family", search.css("font-family")).hide().insertAfter(search);
            var width = search.width();
            var max = $("#header").width() - $("#portalLink").outerWidth(true) - ($("#topbar").outerWidth(true) - search.width());
            search.unbind().bind("keydown keyup", function() {
                temp.text($(this).val());
                var w = Math.min(Math.max(width, temp.width() + 10), max);
                $(this).clearQueue().animate({width: w + "px"}, 50);
            }).bind("focus", function() { if ($(this).val() == "search") { $(this).val(""); }
            }).bind("blur", function() {  if ($(this).val() == "") { $(this).val("search"); }
            });
        });
    }
})();

Basically grows the box as you type (minimum size is as the search box currently is & maximum size is set to 400px, which seems enough to still fit in all the normal header stuff for me at least). will take up as much space as is available in the header.

Answer 6

Since there is blank space underneath the search box,
how about just expanding it to a larger textbox with the same width?

Of course there's a lot of space between the Global Inbox and the Profile Name, so you could just make it slightly larger to start with, or when widening it just move the elements to the left instead of eliminating them.

Answer 7

Search box to the left and the Inbox to the right.

This way the search box will expand to the right.

Answer 8

The best possible way is the searchbox must remain in the rightside itself. Let it expand too, as its useful to many. Let the cursor start from the rightside. While typing, the word moves character-by-character towards the left. Thus the expanded searchbox problem, rightside or leftside problem, and the problem of shifting our eye focus from one place to another can all be avoided.

Answer 9

Google itself does this.

I go to http://google.com and I start typing...

Suddenly my search box moves as I am typing! Notice it's no longer in the middle of the page but has been forcefully moved to the top of the page without my prior written express consent!

Ditto for the new Twitter design. Before:

Who moved my cheese, man?