Build and deliver frontend experiences fast, with intuitive visual editing tools.
A low-code content management solution for non-technical teams.
An AI-powered website search.Surface content from any source or in any format.
AI chatbot with a governance interface. Secure, personalized support, without hallucinations.
Build and deliver dynamic forms in minutes, with a visual form builder.
An integration platform to connect your systems, data and content together.
Maximize the impact of your content and drive successful conversions.
Easily build and deploy web components across all your sites, at scale.
Centralize and manage customer data for personalization and analysis.
Deliver experiences the way users expect – consistently, securely, and lightning-fast.
Unify and manage your entire tech stack from a secure, centralized AI-Powered Platform.
Transform your digital citizen experience.
Create meaningful student lifecycle journeys.
Attract and retain clients with personalized experiences.
Accessible experiences that customers demand.
Hit campaign goals and make data-driven decisions.
Skip the developer queue to build pages and forms.
Audit, pilot and scale at speed, without major project work.
Make every event easily discoverable across your channels.
Bring your solution to life with expert partners in strategy, design and development.
Unify your systems, content, data and workflows with Squiz Digital Experience.
Upgrade to Matrix 6 (SaaS) and get the full benefits of Squiz's new content authoring experience.
Log in to access partner resources.
Let's grow together. Join our partner network.
Explore our network of agencies and implementation partners.
Discover all our pre-built integrations to popular services, or build your own.
Supercharge your DXP with components, templates, extensions, and more.
Speed up your development, get answers, and discover new DXP functionalities.
Join the discussion, share your experience and get help from other DXP users.
Your go-to place to get hands-on experience and deepen your DXP knowledge.
Submit a suport ticket or contact our 24/7 global support team.
Read the latest articles on all things digital.
Success stories from our amazing clients.
Watch on-demand and register for upcoming online sessions.
We're focused on delivering the best product in the market. See what's ahead.
Stéphane Recouvreur 09 Nov 2022
Like an iceberg, the common search bar hides much of its functionality and brilliance beneath the surface.
An interface that has stayed visually the same since its first appearance in 1990, the search bar is now one of the most utilized digital tools in existence. Each day, Google processes over 8.5 billion searches, with over half of these done by mobile.
If little has changed on the surface, everything has changed behind the scenes. The complexity of the algorithms and programming that drive search bars today dwarf those of twenty years ago. User expectations have also evolved. This is why it’s so important your search bar both looks and functions in line with the needs and expectations of anyone navigating your website.
There’s no hard-and-fast rule for when you need a search bar. Some recommend that any website with over 200 pages requires search, or if there is a library of content to browse, such as a streaming service.
Consider this: if a user needs to click more than three times to find any of your content, think about implementing a search bar.
Before creating a search functionality, make sure the content structure of your website is as simple and user-friendly as possible. Do you have 200+ pages because you have duplicated content or content that’s either out-of-date or redundant?
A content audit is the first step to make sure your site structure is easy to navigate. If you’ve created a structure with as few clicks as possible but users still need to dig further to discover all your content, then it’s time for search.
With trillions of searches being made each year globally, the importance of good search bar design is clear. Some expected benefits for you and your users include:
Most importantly, a good search bar design and functionality help people feel in control of their experience. This underpins the work of UX and UI designers, as we recognize the need for people to feel in control of their surroundings. Support this feeling and you will build positive associations with your website.
You can break up your approach to search across three areas.
Search box location – A key part of considering the design of your search bar is its location. As one of the most recognized icons, the white search bar, and the magnifying glass should be easily identifiable, to match user expectations.
Some other considerations for the location of your search include:
Once you have tested and decided on the location of your search bar, consider its design.
Iconography – Always have a magnifying glass visible, as it generates immediate recognition for users. This is most important when designing for mobile and when you have limited real estate on your navigation bar.
Color – A white search bar remains the standard as it supports an intuitive experience. Your magnifying glass might align with your brand colors, but make sure there is enough contrast for it to comply with accessibility guidelines.
Length – Your search bar should be long enough to accommodate a query. If you already have a search, look at the average search length on your site and design your bar to make sure a user can read their entire query. If you don’t yet have a search, this is something to test and make iterative changes to.
The words you use to educate and engage users will shape how your search is utilized.
Research from Nielsen Norman Group has shown that, despite decades of experience with the search bar, people continue to struggle when it comes to refining an initial search. In fact, Nielsen found in one study that over half of users whose first search failed gave up immediately, and those who tried to refine their search had diminishing success each time.
This is why it’s so important to help users understand how to use your search bar. It all depends on the capabilities of your search, with more advanced systems able to surface accurate results based on a variety of inputs. If your search relies heavily on keywords, then you want to avoid users typing out full-sentence queries.
With this in mind, here are some tips for your search bar content:
The key to keeping your content design clean and concise is considering what users are trying to achieve with your search. If your website contains documents of different formats, then you might need a more descriptive instructional copy. If all your content is live on your website without any downloadable, then you can afford to keep your instructions minimal.
The final piece of the puzzle is how easy your search is to use – in other words, its functionality. Below are some common things to consider when designing the interface of your search.
Predictive search – Google is a master of predictive search, and including it in your own search can help boost a user’s experience and perception of your brand. Some benefits of predictive search include:
Tip: ensure you use text styling to make it obvious what the user has typed vs. what the algorithm is suggesting. If your system suggests a word or phrase at the end of a query, highlight the suggestion to differentiate it.
If your predictive text suggests entire phrases that appear on either side of a query, highlight the user’s search term instead.
Animation/buttons – consider what happens when a user interacts with your search bar or magnifying glass. If they type a query and click on the magnifying glass, make sure they get visual confirmation that a search is underway in case their internet connection is slow. This can simply be a color change that indicates an action.
Advanced search – avoid promoting advanced search from the start of the journey. Nielsen's research found that the mean query length was only two words and that users were not on average adept at using advanced features of a search. If you do have an advanced search, such as filters, include these on your results page.
Search history – on the results page, keeping a user’s search query in the search field can help them successfully refine their search again.
Suggest something every time – make sure your search platform never sends back a ‘We found zero results' for your search query message. This increases the chance of a user leaving your site. Always provide a suggestion to encourage users to try again.
Grid vs. list view – choosing how to display your search results depends on two things. Firstly, what type of pages or products are you displaying? If you’re a retailer, you will likely have a grid view for people to browse your products. If you’re a government department, you might list our relevant pages. Secondly, are your users searching or browsing in general? If they’re browsing, a grid view with imagery is preferable.
Shape user behavior – beyond a list view, any additions to your search result page, such as image results or featured snippets, affect how users engage with your results. The greater the number of visual differences on the page, the more people engage in a ‘pinball’ search pattern. Being aware of this can help you design a friendly user experience.
By splitting up your approach to search across those three areas – visual design, content design, and functionality – you’ll be able to better plan and track your testing and manage different stakeholders more easily. Remember to test individual components sequentially, so you can accurately measure their impact.
Join our community of experts and enthusiasts by subscribing to our newsletter today.
You can unsubscribe anytime.