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 acomplete 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?
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.
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
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.
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.
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.
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
On the My Emma blog the search bar expands above the navigation making the search bar very prominent.
Around the navigation
On Hubspot the search bar expands in the navigation area itself without overlapping any of the navigation elements.
Below navigation
The search bar flies out and floats below the navigation on onextrapixel the color of the search box ensures proper visibility.
Fullscreen 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
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
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.
Some other resources tht can be of use to you while designing a search bar can be found on this link http:\www.smashingmagazine.com\2008\12\04\designing-the-holy-search-box-examples-and-best-practices\ . You can also view some good dynamic expandable search bar tutorials here http://www.freebiewebresources.com/2013/09/free-css-search-forms-with-tutorials.html.
Have any comments, suggestions or additional tips? Post them here in our comment section!
Webby Monks
Latest posts by Webby Monks (see all)
- Dynamic Expandable Search Bars - January 5, 2024
- Love WordPress? Top 4 Divine WordPress Frameworks To Meditate! - December 22, 2023
- Why Node.js is the Future - Advantages and Applications - December 15, 2023
