The Rising Trend of Dynamic Expandable Search Fields

Tuesday, March 25, 2014

Anybody who follows web design trends will know about expanding search fields. These are typically small input boxes or magnifying glass icons which grow in size whenever given focus. As the user de-focuses off the element it’ll usually retract back to the compressed form.

I love this idea because it saves a lot of room on the page, and it works the same for most any website. Most people browsing the web have developed a sense of understanding for how these expandable search fields behave. In this article I want to cover some more unique design styles for building dynamic search forms. As trends evolve I expect to see more of these search boxes in the coming months and years.

Design with Style

Google only returns a small handful of articles detailing this technique. I’ve also found plenty of free code examples which break down the process for developers, but usually don’t go into much explanation. The search interface should fit perfectly into any website and still provide an effortless user experience.

The example above is linked from CodePen using only HTML/CSS3. Expandable search fields may require JavaScript but it’s not always necessary. JavaScript is compatible with more browsers, yet CSS3 is easier and often quicker to code. I’d recommend testing both methods to see which fits your website the best.

Just keep in mind that simplicity is a big factor. Users will notice the lone magnifying glass and immediately translate this symbol into “search here”. It draws attention and gets people focused right away. The only thing you need to plan is extra space on the page. Ensure that the search field doesn’t overlap or break any elements in your header or navigation menu.

Navigation Overlap

This is an obscure but catchy animation for an expanding search field. Whenever the user targets the form it will hide the navigation or push it out of the way to display a larger search input. The example below is from Nebula, a responsive WordPress theme on ThemeForest.

This method works great because it grabs your attention right away. All of the nav links are still available and reappear once the search field is closed. It does get annoying if you’re trying to navigate the website and the links end up disappearing. But it’s not difficult to move the navigation elsewhere in the header, or conversely make the search field semi-transparent.

Flyout Bubble UI

Floating the search box above or around the navigation is another choice. You’ll find a great example in the Flatik WP theme which has a popover/flyout type of design. The layout is mobile responsive and beyond a certain threshold the search field is rendered invisible.

Some developers prefer to move the search field above or beneath the navigation. You could even build an individual page made for the website’s search form. The point is to stay as consistent as possible whenever users are trying to search. They need to know exactly where to find that magnifying glass input field and how it operates.

The flyout/dropdown search boxes are great because they incorporate the entire form into the design. Some designers prefer to omit the submit button, while others will include this as part of the interface. It all depends on your audience and how you wish to structure the form.

Hidden Form Boxes

I always enjoy finding search boxes with dropdown animation styles. Most developers would need jQuery or some other JavaScript code to get this working properly. The search field acts like a toggle interface which slides down from the top of the page. It doesn’t cover anything, but instead pushes the page down to make room.

The example above is from Eden which is another WordPress theme. You’ll notice the designer included a small ‘x’ link button to close the search box. UI/UX fundamentals would suggest using the magnifying glass icon as a toggle link. But it doesn’t hurt to give visitors another more distinct option to close the search box.

Also when scrolling down the page this top navigation bar stays fixed and scrolls with the visitor. This is how people can still access the search field even way down at the footer. It’s all relative to the navigation bar, and you should keep this in mind as a possibility when designing a new web project.

Fullscreen Search

Admittedly this is one of the stranger effects I’ve seen, but it sure does grab your attention quickly. The entire navigation is responsive which adapts nicely to any viewport. When clicking on the magnifying glass icon the search field takes over the entirety of the page in a modal-style window.

This is from a premium WordPress magazine called Stream. Excellent design style and it works just as you would expect. Yet one big problem with this search field is not having a submit button readily accessible.

Users are expected to know that hitting “enter” will submit the form. Granted most users do know this so it’s not a large gamble. However it’s also not the best technique for overall user experience.

As time moves on I expect to see web developers coming up with even greater solutions. For now it’s amazing to see what can be accomplished in modern web development.

Sample Tutorials

Along with the design trends in this post you may also wish to code your own expanding search field. Thankfully many web developers have written tutorials or shared their own work online. I’ve put together this small collection of free code snippets you can use to build a lightweight expandable search input field on any website.