<p>Published on <a href="https://blog.prototypr.io/5-easy-and-effective-tips-to-get-more-out-of-your-search-f53d55d063de?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chaymae Lougmani </p>
<p>Top tips for search design</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*a1M6eZ8Ijot7Rxonmh8rDg.png">Top tips for search design</p>
<h3>A good search tool can both enhance brand perception and increase sales</h3>
<p>Search is a big deal, especially in an e-commerce business. It gives users control over what to search for and make it easy for them to locate a desired product.</p>
<blockquote><p><em>“In our recent e-commerce usability study, 83% of users searched on one or more sites.” — </em>Nielsen Norman Group</p></blockquote>
<h3>What is search?</h3>
<p>In the computing world, It’s <strong>running a query </strong>on a database. Users <strong>input</strong> key words that are found (or not) in the <strong>database</strong> and returned as <strong>search results</strong>. I’ll talk more about best practice in search results in a future article.</p>
<p>Design wise, search is an <strong>input field</strong> and a <strong>search button</strong>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1QGBaSfVYFKdPQxYq-J_Ng.png">ww.yahoo.com</p>
<h3>How to optimise your search design?</h3>
<p>Make it prominent and work on the positioning, contrast and sizing.</p>
<h3>1. Put the search box where users expect to find it</h3>
<p>A study by A. Dawn Shaikh and Keisi Lenz in a survey of 142 participants shows that users expect the search input field on the top right corner of the header. You can read the full detail about the study in <a href="http://usabilitynews.org/wheres-the-search-re-examining-user-expectations-of-web-objects/">Where’s the Search? Re-examining User Expectations of Web Objects</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/338/1*5uzyE7ZwLZyxMFVmNl8IuA.gif">Expected location of site search engine</p>
<p>Wikipedia has changed the position of their search bar. The case study gives a good insight on the decision behind the new positioning <a href="https://blog.wikimedia.org/2010/06/15/usability-why-did-we-move-the-search-box/">Usability: Why Did We Move The Search Box?</a></p>
<h3><strong>2. Make your search recognizable</strong></h3>
<p>To make your search recognizable, you can play with the contrast and the visual representation of your search.</p>
<p>Increasing the contrast between the input field and its border is one of the most effective ways to emphasize the search box.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6V3rLXu4p-oGKxr5UTlg3w.png"></p>
<h3>3. Use a Magnifying glass icon</h3>
<p>The magnifying glass is a worldwide recognized icon. Various applications and operating systems use it to convey search. This contributed to user’s familiarity and expectations about the icon.</p>
<ul>
<li>Use a schematic icon and avoid adding details, the simplest, the better</li>
<li>Less is more, fewer graphic details in your magnifying glass speed up recognition</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/986/1*GQkjKnI5zq6BHcnhmC-_SA.png">Bing search engine</p>
<p><strong>Directional icons</strong> need to be <strong>mirrored</strong> when designing in a right-to-left (RTL), such as Arabic and Hebrew. The search icon represents holding an object with the right hand. It <strong>should not be mirrored</strong> in a RTL-writing country.</p>
<blockquote><p>“The majority of users in RTL-writing countries are also right-handed, so such icons should not be mirrored.” <a href="https://material.io/guidelines/usability/bidirectionality.html#bidirectionality-ui-mirroring-overview">Usability–Bidirectionality, Google Material Design</a></p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/896/1*nJpmneiu_VNjDHQKAmPzEw.png"></p>
<h3>4. Make your search bar wide enough to accommodate your user’s query</h3>
<p>In Jacob Nielsen article, <a href="https://www.nngroup.com/articles/magnifying-glass-icon/">The Magnifying-Glass Icon in Search Design: Pros and Cons</a>, the search input field should be wide enough to contain 27-characters. This would accommodate 90% of queries in the world.</p>
<p>Small input search forces the user to go right to left and vice versa to read the full query. Forcing the query’s scroll harms usability.</p>
<blockquote><p>“My recommendation is now to make the search box 27 characters wide.” Jacob Nielsen</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/866/1*QuVnB3as-Pn6biU27j8LWA.png"><a href="https://duckduckgo.com/">https://duckduckgo.com</a></p>
<p>There are some design tips to keep it good-looking and accommodate for the user queries. You can design a small box that expands when the user clicks on it.</p>
<h3>5. Don’t make these mistakes</h3>
<h4>Avoid placing the search box in an unusual place or hiding it in the navigation menu</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/557/1*KL-dRaCsKcHjrUzAtB7LKg.png"><img alt="" src="https://cdn-images-1.medium.com/max/897/1*dT-O1fuIKSg6mSuQHMu9YA.png">Hermes search bar</p>
<h4>Avoid crowding the surrounding area with other icons</h4>
<p>Give the search its space</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/645/1*Axzvd9_AuU0Lh4QH2U0J9Q.png"><a href="http://inspirationfeed.com/">http://inspirationfeed.com/</a></p>
<h4>Other common mistakes</h4>
<ul>
<li>Making the input field too short which forces users to use short, imprecise queries</li>
<li>Making the submit button too small, especially for touch devices</li>
<li>Crowding the surrounding area with other icons</li>
</ul>
<h3>A good search is not enough</h3>
<p>A good design offers helpful integration between search and navigation. The goal is to help users find and execute search in a quick and effective way.</p>
<p>All these steps are low effort and would improve on the user’s experience.</p>
<h4>Before you go!</h4>
<p>If you liked this article, clap and share. Get in touch if you have any questions or any examples you want to share.</p>
<p>If you liked this article, you might also like:</p>
<ul>
<li><a href="https://blog.prototypr.io/use-these-top-10-tips-when-you-design-forms-d095d6e3ab8a">Use these top <strong>10 tips</strong> when you design for<strong> forms</strong></a></li>
<li><a href="https://blog.prototypr.io/why-testing-with-real-content-is-better-than-lorem-ipsum-c7c79586ee72">Why Testing with <strong>Real Content</strong> Is Better Than <strong>Lorem Ipsum</strong></a></li>
<li><a href="https://medium.com/@ChaymaeLougmani/communication-layers-you-need-to-know-about-ux-leadership-55fd05f23f62"><strong>Communication</strong> layers you need to know about in <strong>UX Leadership</strong></a></li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f53d55d063de" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/5-easy-and-effective-tips-to-get-more-out-of-your-search-f53d55d063de">5 Easy and Effective Tips to Get More Out Of Your Search</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


5 Easy and Effective Tips to Get More Out Of Your Search

A good se…

Top Stories