<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Search Nuggets &#187; search design</title>
	<atom:link href="http://blog.comperiosearch.com/blog/tag/search-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.comperiosearch.com</link>
	<description>A blog about Search as THE solution</description>
	<lastBuildDate>Mon, 13 Jun 2016 08:59:45 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.9.40</generator>
	<item>
		<title>Five quick design improvements to your search design</title>
		<link>http://blog.comperiosearch.com/blog/2012/01/19/5-quick-fixes-search-graphic-design-for-non-designers/</link>
		<comments>http://blog.comperiosearch.com/blog/2012/01/19/5-quick-fixes-search-graphic-design-for-non-designers/#comments</comments>
		<pubDate>Thu, 19 Jan 2012 09:44:13 +0000</pubDate>
		<dc:creator><![CDATA[Johannes Hoff Holmedahl]]></dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[enterprise search]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[ideas]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[link colors]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[search design]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://nuggets.comperiosearch.com/?p=777</guid>
		<description><![CDATA[OK. I know you want it. Quick fixes to make your search results look better. These five points will not give you a perfect or necessarily user friendly search results page … but maybe it will be a bit better than before. 1. Enlarge your search box! Why are you hiding it ? Screenshot: TMZ.com&#160; [...]]]></description>
				<content:encoded><![CDATA[<p><strong>OK. I know you want it. Quick fixes to make your search results look better. These five points will not give you a perfect or necessarily user friendly search results page … but maybe it will be a bit better than before.</strong></p>
<table style="float: right; width: 300px; margin-left: 20px; font-family: arial; font-size: 11px; line-height: 100%;">
<tbody>
<tr>
<td><span style="font-size: 24px;">1.</span><br />
<img src="http://blog.comperiosearch.com/wp-content/uploads/2012/01/01_smallsearchbox1.png" alt="Enlarge your search box! " width="300" /><br />
Enlarge your search box! Why are you hiding it ?<br />
Screenshot: <a href="http://www.TMZ.com">TMZ.com</a>&nbsp;</p>
<p>My favorite search box:  <img src="http://blog.comperiosearch.com/wp-content/uploads/2012/01/searchbox.png" alt="Search box" width="300" /></p>
<p><span style="font-size: 24px;">2.</span><br />
<img src="http://blog.comperiosearch.com/wp-content/uploads/2012/01/03_searchbutton.png" alt="Make your search button big and clickable." width="300" /><br />
Make your search button big and clickable.<br />
Screenshot: <a href="http://www.CNN.com">CNN.com</a> (Edited. CNN uses the correct version)</p>
<p><span style="font-size: 24px;"><br />
4.</span><br />
<img src="http://blog.comperiosearch.com/wp-content/uploads/2012/01/02_commondesign.png" alt="Use colors common to your users!" width="300" /><br />
Use colors common to your users!<br />
Screenshot: <a href="http://www.google.com">google.com</a></td>
</tr>
</tbody>
</table>
<p>5 quick fixes for non-designers who want to enhance their search results page:</p>
<ol>
<li><strong>Enlarge your search box</strong>. Almost every second site I see, internal or external, &#8220;hides&#8221; their search box – maybe because designers think they’re ugly.<em> If you want your people to search: make it easy</em>. I like to add a little gradient on the top of the search box, and to make the corners round. That makes it look inviting to write in.</li>
<li><strong>Make your search button big and clickable</strong>. Make sure the search-button is as tall as your search box, but make it come out of the page, with a clear color or an embossment. The goal is not to make it look cheesy… but to make it look clickable.</li>
<li><strong>Use already designed material as an inspiration.</strong> Make sure that your search results, and the rest of the website for that matter, matches your company brand identity or design hand book. Use the correct colors and fonts – they are probably thought through by a designer already.</li>
<li><strong>Use colors familiar to your users. </strong>- Blue is for links &#8211; Green is for URLs etc. telling visitors where the result came from &#8211; Red is for alerts and error messages If your brand identity doesn’t have hex-codes for these colors … ask your designer or design partner for then. Kindly.</li>
<li><strong>Enlarge your body text size</strong>. Many designers tend to user small text in their sketches … maybe to get more room for nice pictures? Your users are probably interested in the result when they are searching, so why don’t we make the text readable. A nice size for a readable body text is 14 og 15px, with a line-height of 17/18 px. <span style="font-family: arial; font-size: 12px;">Not 12 px Arial&#8230;</span></li>
</ol>
<p><strong> </strong> <strong>And a general tip: Don’t try to reinvent the wheel!</strong> When working with search design, see how Google, Amazon and Bing format their URLs, links, file type-icons, etc. and make your version of it. Surely you can try another way, but then you should also user test it properly before you launch it.</p>
<p><em>What are your suggestions to improve search design?</em></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.comperiosearch.com/blog/2012/01/19/5-quick-fixes-search-graphic-design-for-non-designers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
