Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

dynamic-expandable-search-bar

Everything on the web is being designed to be compatible with different devices these days, even the smallest elements are being designed in the responsive style to facilitate better UX for the increasing number of mobile and tablet users. Keeping with this trend and the need for compact functionalities, even search bars have undergone a transition. Dynamic expandable search bars have been introduced to make the navigation more compact and user-friendly.

Dynamic expandable search bars are retractable text boxes with the magnifying glass icons or just magnifying glass icons that expand on hovering/clicking and retract back when the interaction with the element ends.In this post the Monks have given a complete low-down on dynamic expandable search bars and how you can incorporate them in your projects. So read on and get enlightened about this latest trend!

Why use dynamic expandable search bars?

1. User Ease

Users are very well acquainted with the use of the magnifying glass icon as a search button, thus a retractable search bar with just the icon or a small text box along with the icon are easily recognizable. If the magnifying glass icon used in the search bar is well designed the need for labeling it “search” doesn’t arise, as users consider the icon to be synonymous with the search function.

2. Saves Space

Compact designs are a must in the mobile era and these search bars are a great space saver and yet very effective for a good UX.

Best Practices

1. Placement

Users expect the search icon to be in the upper-right corner of the window so preferably place it there so that users can locate it easily. Do not clutter or isolate the search button, both of it can harm your UX. If you place too many icons or elements around search, it’ll get lost in the clutter losing its prominence. But isolating it completely and placing it in an odd corner is also not a great idea as it snatches away the visibility of the search button.

2. Design

Use a minimalistic search icon as it helps aid quick recognition. Design an icon that’s large enough to be clicked with a mouse and tapped with a finger; also use strong contrast to make the icon stand out from the background.  Consider retaining a small text box along with the icon for desktops to enhance prominence, you can also use a text box that expands as per text input size. For the mobile version you can just have the icon expand into a search bar.

3. Submission

Allow search submission by pressing the search icon as well as by pressing enter, as many users have the habit of clicking the search icon to submit their search.    

4. Usability

When the user clicks on the search icon the search bar should expand and the cursor should be ready inside the search box for the user to enter text. The user shouldn’t have to click twice, once to expand the search box and second time to place the cursor to type. You can also expand and place the cursor on hover which is even better as users don’t have to click at all!

Here are 4 amazing types of expanded search bar types that most companies use:

Flyout Bubble UI

Floating the search box above, below or around the navigation is style that ensures that the search box pops and stands out from rest of the page.

Above navigation

dynamic-expandable-search-above-navigation

On the My Emma blog the search bar expands above the navigation making the search bar very prominent.

Around the navigation

dynamic-expandable-search-around-navigation

On Hubspot the search bar expands in the navigation area itself without overlapping any of the navigation elements.

Below navigation

dynamic-expandable-search-below-navigation

The search bar flies out and floats below the navigation on extra pixel the color of the search box ensures proper visibility.

Fullscreen Search

dynamic-expandable-search-full-screen-search

On clicking the search icon the search area expands covering the entire window, this is a style that grabs user attention super quick.

Expanding Search Bar

dynamic-expandable-search-expanding-search-bar

This is the most typical style where on clicking the magnifying glass icon it expands into a search bar with a cursor already placed so that users can start typing. The bar retracts once the function is complete.

Navigation Overlap

dynamic-expandable-search-navigation-overlap

In this style upon clicking the search icon the search bar appears and rest of the screen gets overlapped by the search bar, so that you can only use the search option and a few other essential navigation buttons until you close the search.

Takeaway

In the current times where responsive designing is indispensable, dynamic expandable search bars are of great use when it comes to enhancing the UX of mobile and smartwatch users.

Have any comments, suggestions or additional tips? Post them here in our comment section!

The following two tabs change content below.
Avatar

Webby Monks

Webby Monks, a sister concern effort of Email Monks, offers a great deal of PSD to interactive HTML conversion services blended with interactive library of 100+ interactive components enabling clients to pick and choose best interactive components while placing a PSD to HTML conversion order. Some of our USPs include quick turnaround time, W3C validated end product, robust technological competency, 100 % money back guarantee like Email Monks, 100% hand coded HTML, multi-browser compatibility, clean and commended markups and comprehensive workflows.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Quick Consultation

WCAG

Make outsourcing one of your strongest weapon to win the market competition. Get quality work with quick TAT.

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy