<?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>Usability, Information Architecture, Mobile Apps, UX, Interaction Design : Usability Factors &#187; drop down menus usability</title>
	<atom:link href="http://www.usabilityfactors.in/blog/tag/drop-down-menus-usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.usabilityfactors.in/blog</link>
	<description>It's all about Usability!</description>
	<lastBuildDate>Fri, 19 Feb 2010 12:38:05 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Navigation Design Guidelines &#8211; Best Practices</title>
		<link>http://www.usabilityfactors.in/blog/2009/07/web-site-navigation-design-guidelines-best-practices/</link>
		<comments>http://www.usabilityfactors.in/blog/2009/07/web-site-navigation-design-guidelines-best-practices/#comments</comments>
		<pubDate>Wed, 08 Jul 2009 10:53:07 +0000</pubDate>
		<dc:creator>Vishal Vaidya</dc:creator>
				<category><![CDATA[User-centered Design]]></category>
		<category><![CDATA[drill down navigation]]></category>
		<category><![CDATA[drop down menus usability]]></category>
		<category><![CDATA[mobile web application design]]></category>
		<category><![CDATA[navigation design]]></category>
		<category><![CDATA[User interface design]]></category>

		<guid isPermaLink="false">http://www.usabilityfactors.in/blog/?p=180</guid>
		<description><![CDATA[When a user visits a website, the very first thing he tries to find is a way to access a website or an application &#8211; that&#8217;s &#8220;navigation&#8221;. If the navigation is not designed properly, precisely a non-intuitive navigation, it is obviously going to make user&#8217;s life difficult. If we are making website users to think [...]]]></description>
			<content:encoded><![CDATA[<p><strong>When a user visits a website, the very first thing he tries to find is a way to access a website or an application &#8211; that&#8217;s &#8220;navigation&#8221;.</strong> If the navigation is not designed properly, precisely a non-intuitive navigation, it is obviously going to make user&#8217;s life difficult. If we are making website users to think how to use the respective site, it clearly indicates that some core things are missing.</p>
<p><strong>A great navigation is intuitive, easy-to-understand, and easy-to-use</strong> and ideally, should not need some plug-in to be downloaded to use navigation. For example, a site navigation is designed using Flash and no alternative way of navigation is not provided, can you imagine how miserable an experience a user can have who doesn’t have flash installed on this machine?</p>
<p><img class="alignnone size-full wp-image-179" title="Navigation Design Guidelines for Web and Mobile" src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/07/navigation-design-guidelines-july2009.gif" alt="Navigation Design Guidelines for Web and Mobile" width="375" height="240" /></p>
<p>So, we must design sites to good navigation to make the website or an application successful in terms of end-users&#8217; experience while using our website / application.</p>
<p>Below given are some of the points which can help us design a better navigation that helps users to use your site:</p>
<p><strong>1. Navigation Placement:</strong><br />
Make sure that the navigation is placed at an easily visible location, so that the users don’t have to “guess” or “search” for it.</p>
<p><strong>2. Place important things on high:</strong><br />
Keep the important things on the top area of the page, preferably in the first half of the page. Such significant information should get displayed first to the user.</p>
<p><strong>3. Banner Blindness:</strong><br />
As Wikipedia describes it &#8211; “Banner blindness is a phenomenon in web usability where visitors on a website ignore banner-like information.</p>
<p>Make sure that you don’t put any content above the ad banners as users are tend to ignore all the content that’s displayed above ad banners. Make sure especially that navigation is not placed above such banners, as ‘navigation’ is very important &amp; should not be ‘lost’.  [Read more about "<strong><a title="READ: What is Banner Blindness?" href="http://www.usabilityfactors.in/blog/2009/07/what-is-banner-blindness-banners-usability/" target="_blank">Banner Blindness</a></strong>"]</p>
<p><strong>4. Avoid being unconventional:</strong><br />
Designing website navigation in an ‘unconventional’ way to make the site stand out from the crowd is NOT a good method of navigation design. It becomes difficult for the users who are now quite used to the general web design practices of designs, navigation &amp; such other generic functionality.</p>
<p><strong>5. Ideally, an easy way to come back to homepage, like a HOME link should be always there:</strong><br />
Homepage being core of any website, a back-link to the homepage should always be there. Also, it is very much possible that user might have landed up on your website through some search engine or have come directly to your sub-page / inner page, a &#8220;home&#8221; link always helps them to come back to the homepage of your website.</p>
<p><strong>6. Keep the navigational elements consistent across the website:</strong><br />
Make sure that all the links &amp; navigational elements are kept consistently on the same place as there have been anywhere else, in terms of links, styles, etc. User can find them easily anywhere in the site.</p>
<p><strong>7. Design it to ‘load fast’:</strong><br />
Do all your design &amp; development by considering a user having low-speed internet connections. Make sure that your all your site&#8217;s HTML, CSS, Flash components (if any) loads faster,  so that users do not leave the site quickly even before it loads as they may not be ready to wait or may switch to your competitor&#8217;s site.</p>
<p><strong>8. Quality as against to Quantity:</strong><br />
Internet users like minimum options &amp; clicks to get the desired information. Create sub-sections &amp; sub-categories to help the user to “navigate easily &amp; locate the required content easily &amp; quickly”.</p>
<p><strong>9. Browser-Compatibility:</strong><br />
There is multi-browser application scenario.  Do compatibility tests for your website before it goes live on major browsers like “MS Internet Explorer, Mozilla Firefox, Netscape Navigator, and Opera” &amp; check if the look &amp; feel as well functionality of JavaScript used in the site is working well.</p>
<p><strong>10. ONLY essential stuff in the navigation:</strong><br />
Non-core Information like “Privacy Policy, Terms of use, even Contact Us (in most cases)” should not be in the main navigation &amp; can be placed in the “bottom menus” zone.</p>
<p style="padding-left: 30px;"><strong>Also read:</strong></p>
<p style="padding-left: 30px;"><strong><a title="READ: Mobile Web - Navigation Design" href="http://www.usabilityfactors.in/blog/2009/06/mobile-web-navigation-design-usability-for-mobile-website/" target="_blank">Navigation Design for Mobile Web &#8211; Best Practices</a></strong></p>
<p style="padding-left: 30px;"><strong><a title="READ: Drop Down Menus - Usability" href="http://www.usabilityfactors.in/blog/2009/06/drop-down-menus-usability-accessibility/" target="_blank">Drop Down Menus &#8211; Usability</a></strong></p>
<p>Do provide your suggestions / insights that can imprve the way we design navigation.</p>
<script type="text/javascript">  linkscolor = "000000";  highlightscolor = "c32f2f";  backgroundcolor = "fbe77b";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" href="http://www.addmarx.com"><img style="padding:0px; margin:0px" src="http://www.usabilityfactors.in/blog/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->]]></content:encoded>
			<wfw:commentRss>http://www.usabilityfactors.in/blog/2009/07/web-site-navigation-design-guidelines-best-practices/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Drop Down Menus &#8211; Usability</title>
		<link>http://www.usabilityfactors.in/blog/2009/06/drop-down-menus-usability-accessibility/</link>
		<comments>http://www.usabilityfactors.in/blog/2009/06/drop-down-menus-usability-accessibility/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 05:35:18 +0000</pubDate>
		<dc:creator>Vishal Vaidya</dc:creator>
				<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User-centered Design]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[desktop application GUIs]]></category>
		<category><![CDATA[drop down menus usability]]></category>
		<category><![CDATA[usability trends]]></category>
		<category><![CDATA[User interface design]]></category>
		<category><![CDATA[web design trends]]></category>

		<guid isPermaLink="false">http://www.usabilityfactors.in/blog/?p=149</guid>
		<description><![CDATA[Using drop down menus is cumbersome for users, as it needs scrolling efforts by end-users, leading to usability and accessibility issues. Now, there is a new trend in the web design – of using large drop down menus. New mega drop downs are far better than regular drop downs, which hides several options when they [...]]]></description>
			<content:encoded><![CDATA[<p>Using drop down menus is cumbersome for users, as it needs scrolling efforts by end-users, leading to usability and accessibility issues. Now, there is a <strong>new trend in the web design – of using large drop down menus</strong>. New mega drop downs are far better than regular drop downs, which hides several options when they open and may be a long scroll is involved to see all of them and still they all can’t be seen at the same time – involving usability issues like motoring and short-term memory.</p>
<p><img class="alignnone size-full wp-image-151" title="Usability for Drop Down Menus" src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/drop-down-menus-usability.gif" alt="Usability for Drop Down Menus" width="375" height="240" /></p>
<p>These new kind of drop down menus has features like:</p>
<ul>
<li><strong>Everything visible at the same time</strong>, so users don’t have to scroll (in most cases).</li>
<li>Split into two or more panels for an <strong>easy to understand navigation interface and grouped sensibly.</strong></li>
<li>Has features like <strong>usage of typography, icons</strong> (even may be thumbnails), assistive features like tool tips.</li>
<li>Users don’t have to remember a lot, everything being visible upfront (as the <strong>short-term memory</strong> is involved while browsing such objects and several users may miss it as they rely on short term memory).</li>
</ul>
<p>These kinds of menus are easy-to-use and have been rated good on usability as per tests done by the Jakob Nielsen&#8217;s (<a title="Read: Mega Drop-Down Navigation Menus Work Well" href="http://www.useit.com/alertbox/mega-dropdown-menus.html" target="_blank">Alertbox</a>, March 23, 2009).</p>
<p>Also, in <strong>desktop application interfaces</strong> (GUIs) like <strong>Microsoft<small>© </small>Office 2007</strong> , this kind of drop down menus with illustrations has been used effectively.</p>
<p><img class="alignnone size-full wp-image-154" title="Microsoft Office Word 2007 - Formatting " src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/microsoft-office-word-2007-formatting1.jpg" alt="Microsoft Office Word 2007 - Formatting " width="432" height="235" /></p>
<p><em>Microsoft Office Word 2007 &#8211; Formatting</em></p>
<p><img class="alignnone size-full wp-image-155" title="Microsoft Office PowerPoint 2007 - Publish Slides " src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/microsoft-office-powerpoint-2007-publish-slides1.jpg" alt="Microsoft Office PowerPoint 2007 - Publish Slides " width="432" height="235" /></p>
<p><em>Microsoft Office PowerPoint 2007 &#8211; Publish Slides </em></p>
<p><strong>Below given are some of the examples:</strong></p>
<p><a href="http://www.microsoft.com/en/us/default.aspx" target="_blank"><img class="alignnone size-full wp-image-156" title="Microsoft US website Homepage" src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/screenshot-microsoft-usa.jpg" alt="Microsoft US website Homepage" width="430" height="273" /></a></p>
<p><em><strong>Microsoft US homepage</strong></em></p>
<p><a href="http://www.bp.com" target="_blank"><img class="alignnone size-full wp-image-157" title="BP Homepage" src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/screenshot-bp.jpg" alt="BP Homepage" width="430" height="273" /></a></p>
<p><em><strong>BP homepage</strong></em></p>
<p><a href="http://compareindia.in.com/" target="_blank"><img class="alignnone size-full wp-image-158" title="Compare India homepage" src="http://www.usabilityfactors.in/blog/wp-content/uploads/2009/06/screenshot-compare-india.jpg" alt="Compare India homepage" width="430" height="273" /></a></p>
<p><em><strong>CompareIndia.com homepage</strong></em></p>
<p>You can read more about the Mega Drop Down menus on <strong>Jakob Nielsen</strong>&#8217;s website: <a title="Mega Drop-Down Navigation Menus Work Well" href="http://www.useit.com/alertbox/mega-dropdown-menus.html" target="_blank">http://www.useit.com/alertbox/mega-dropdown-menus.html</a></p>
<script type="text/javascript">  linkscolor = "000000";  highlightscolor = "c32f2f";  backgroundcolor = "fbe77b";  channel = "none";   </script><script type="text/javascript" src="http://www.addmarx.com/dynamicbookmark_compressed.php"></script><span><a onClick="clickDynamic1(this); return false;" href="http://www.addmarx.com"><img style="padding:0px; margin:0px" src="http://www.usabilityfactors.in/blog/wp-content/plugins/addmarx/sharebookmarx.png" border="0"></a></span><span style="position:absolute; z-index:1000001; margin-top:24px; margin-left:-127px; visibility:hidden;"><iframe id="addmarx_empty" scrolling="no" frameborder="0"></iframe></span><p class="addmarx_spacer"></p><!-- Please place the above code into your site where you want to have a bookmark/share/publicize link. Please do not change any of the code aside from the link text or image, or else the code may not work properly.  -->]]></content:encoded>
			<wfw:commentRss>http://www.usabilityfactors.in/blog/2009/06/drop-down-menus-usability-accessibility/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

