<?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>Design vs Art Blog &#187; Menus</title>
	<atom:link href="http://www.designvsart.com/blog/category/menus/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designvsart.com/blog</link>
	<description>Interaction Design and User Experience</description>
	<lastBuildDate>Tue, 08 Nov 2011 08:24:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<cloud domain='www.designvsart.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>Designing Different Ways of Website Navigation</title>
		<link>http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/</link>
		<comments>http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/#comments</comments>
		<pubDate>Mon, 04 Feb 2008 05:31:47 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Good Design]]></category>
		<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Menus]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/' addthis:title='Designing Different Ways of Website Navigation ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Users tend to navigate websites in different ways, some like searching for an specific item or product, some like to navigate through product pages. A website should help users to get their goal, to find something they want to buy, &#8230; <a href="http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/' addthis:title='Designing Different Ways of Website Navigation '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/' addthis:title='Designing Different Ways of Website Navigation ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>Users tend to <b>navigate websites</b> in different ways, some like searching for an specific item or product, some like to navigate through product pages. A website should <b>help users to get their goal</b>, to find something they want to buy, through different paths.</p>
<h3 style="text-align: center;">
<i> &quot;It is very important to place all those navigation options always in the same location&#8230;&quot;</i></h3>
<p>
Place different <b>navigation options</b> in your website, like <b>search, menus and pagination</b>. It is very important to place all those navigation options always in the same location, that way you avoid confusing users. </p>
<p>A good example of this <b>usability pattern</b> is <a href="http://ww32.1800flowers.com/" target="_blank">1800flowers.com</a>, the online flower shop. They give users many <b>navigation options</b>, search, a way to narrow the search, a top menu and pagination. Notice that navigation options stay in the same place through the whole site. Good design.</p>
<p>&nbsp;</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><img width="500" height="398" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Flowers 20080204.png" alt="1800flowers Navigation Options" /></td>
</tr>
<tr>
<td style="text-align: center;">
<p>&nbsp;</p>
<p>Navigation options stay in the same place&#8230;</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><img width="500" height="396" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Plants 20080204.png" alt="1800flowers Navigation Options Stay the Same" /></td>
</tr>
</tbody>
</table>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=334&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/' addthis:title='Designing Different Ways of Website Navigation '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/02/04/designing-different-ways-of-website-navigation/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Designing Jump Menus, Examples</title>
		<link>http://www.designvsart.com/blog/2008/01/14/315/</link>
		<comments>http://www.designvsart.com/blog/2008/01/14/315/#comments</comments>
		<pubDate>Mon, 14 Jan 2008 06:06:40 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Menus]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/01/14/315/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/14/315/' addthis:title='Designing Jump Menus, Examples ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Jump menus are a way of saving space on large websites, specially when there is not enough real estate to place links to every section or category. They hide links to other sections, when clicked they display the list of &#8230; <a href="http://www.designvsart.com/blog/2008/01/14/315/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/14/315/' addthis:title='Designing Jump Menus, Examples '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/14/315/' addthis:title='Designing Jump Menus, Examples ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p><b>Jump menus</b> are a way of saving space on <b>large websites</b>, specially when there is not enough real estate to place links to every section or category. They hide links to other sections, when clicked they display the list of links.</p>
<h3 style="text-align: center;">
<i>&quot;make the jump menu obvious and give some context&#8230;&quot;</i></h3>
<p>The <b>website design</b> should make the jump menu obvious and give some context, so users could easily understand what is that menu about. <b>Jump menus </b>could be made of <b>simple HTML</b> or more complicated, like the Yahoo! Shopping one.</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;">
<p>HTML Jump Menu</p>
<p><img width="200" height="66" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Safari 20080114.png" alt="HTML Jump Menu" /></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;">
<p>Yahoo! Shopping Jump Menu</p>
<p><img width="418" height="313" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Yahoo Shopping 20080114.png" alt="Yahoo! Shopping Jump Menu" /></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>For example <a href="http://shopping.yahoo.com" target="_blank">Yahoo! Shopping</a> places the jump menu as part of the <b>category menu</b> on top of the page, it&#8217;s called &quot;more&quot; and it is located after top categories like computers and electronics. <br />
<br clear="all" /><br />
(I use the Yahoo Shopping menu tabs as an example, but it has some <b>usability</b> problems, <a href="http://www.designvsart.com/blog/2007/11/27/tabs-bad-design-yahoo-shopping/" target="_self">read here the article I wrote before</a>).</p>
<p>&nbsp;</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=315&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/14/315/' addthis:title='Designing Jump Menus, Examples '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/01/14/315/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

