Search boxes are starting to evolve for the better. What we have always seen before is the search field followed by a separating space and the button.
What we’re starting to see now are search boxes that do away with the separating space. This change might seem minor, but it does have some benefits to it.
When you do away with the separating space, it makes aligning the button with the field easier to get right. There are so many websites that have the search button misaligned with the search field, often resulting in the following:
This situation is like holding two magnets with opposite poles together. It’s really hard to keep them sized, spaced and aligned perfectly. A better way is to do away with the separating space and connect the field and button together. This makes the sizing, spacing and alignment of the field and button easier to pull off. A flush search box not only does away with the extra space, but it also does away with the extra work you have to do to align the field and button ever so perfectly. It takes less effort to align the field and button flush together, and there’s less room for error when you do.
A flush search box can also make the relationship between the field and button visually stronger for users. Users won’t have to visual fixate on the separating space. In a glance, they’ll quickly know that field and button function as one. If you want to take it even further, the flush alignment also allows your field an extra character space.
Simplicity is about cutting out what is unnecessary, so that the necessary can shine. A flush search box is a small example of that. There are many benefits to a flush search box. It not only looks better, but it’s easier to get right.
Book
Affiliate
Thank you for this! I have been struggling to keep my search form consistent throughout multiple browsers, this should work great 😀
I think I may be missing something. How is it easier to keep a field and button aligned if they are placed right next to each other than if they are separated by a space? I think it’s easier to SEE that they are sized and positioned correctly if they touch, but I don’t get how that makes it easier to achieve.
I agree. When I’ve done this, I’ve had to make the wrapper around both inputs styled like the search box, and then hide the real background and border of the search box. This certainly does look better, but it actually takes quite a bit longer to get everything right (especially across browsers).
Either way you choose, it’s going to take some work. But being able to see the sizing and positioning better makes it easier to pull off because well… you can see it better. So if the positioning is off, you’ll know it’s off. You also don’t have to worry about that extra space in between. You won’t have to ask yourself how much space is too much and how much space is too little. You’ll be able to get a consistent look for multiple search boxes a lot easier.
Ask a few developers to each align a button and field flush with each other, and you’ll likely have all of them looking consistent. Ask them to align it with a space in between, and you’ll have inconsistent looking search boxes across the board.
anthony, I don’t get it. How can I achieve that? It looks good etc. but how does the css looks like? The approaches on youtube and twitter (and google) are actually very different. Any pointers would be very appreciated.
I’m not sure I get how solving the alignment issues would be any easier here. In fact it looks like you’d be making it more difficult ensuring that your CSS person will absolutely have to ensure pixel perfect rendering in every conceivable browser. This method would also require fixed heights on everything ensure people using UA stylesheets.
I’m not saying I don’t think it looks good however… It looks great and does build a stronger visual relationship. In the end something like this would fit in to a component library where once things are set up people can just copy and paste the markup to get it done.
I’m merely trying to point out that this look would likely require more heavy lifting up front and that it’s a bit of a misgiving to say that it would be easier to achieve at dev time.
Also, I believe it is a good improvement to replace, in the button, the word “Search” with a graphic element.
This way you also solve issues that might be created when localizing the application.
This is how Facebook does it and we’ve also applied it in eRepublik: http://images.bbgsite.com/games/images/erepublik/l_erepublik_04.jpg