42244

econsultancy_xml

<ul> <li> Navigation menus at left or top of the page This is the convention for the great majority of websites and is exactly where users will be looking for it. The current convention is to use the top navigation bar for the main product categories, while the left hand menu tends to be for more detailed product menus, as with <a href="http://www.amazon.com">Amazon</a>: </li> <a href="http://www.amazon.com"> <img alt="Amazon" src="http://farm3.static.flickr.com/2194/2231955995_81509b8617_o.jpg" /> </a> <li> Short, clear and precise language in menu options Users tend to scan quickly, so keep the language in menu options clear and to the point. </li> <li> Don't have too many options Something like six or seven main navigation options should be enough for the homepage - any more and you risk confusing users. </li> <li> Consistent navigation The simplest way to avoid confusion for customers is to have consistent positioning of navigation on every single page of the site, with the possible exception of the checkout. This is useful to avoid customers reaching a dead end on the site and having to click the back button or leave. It also benefits SEO as it helps search engine spiders access most of the pages. </li> <li> Use breadcrumb trails Breadcrumb trails show a user's path to their current page, allowing them to access previously visited parts of the site with a single click. <a href="http://www.cotswoldco.com"><img alt="Breadcrumb trail" src="http://farm3.static.flickr.com/2349/2231942939_03626a27c2_o.jpg" /></a> Breadcrumb trails also deliver the added benefit of allowing customers to refine their product searches by removing certain product features, and saving them the hassle of beginning the search all over again. </li> <li> Avoid dropdown menus Dropdown menus, as used by <a href="http://www.marksandspencer.com/gp/node/n/42966030?ie=UTF8&mnSBrand=core">Marks & Spencer</a> below, are a good method of saving space, but can be very frustrating for users. First of all, they prevent users from seeing all their navigation options in a single glance, and can lead to frustration when the cursor moves away from the menu and the user has to start all over again. <a href="http://www.marksandspencer.com/gp/node/n/42966030?ie=UTF8&mnSBrand=core"><img alt="M&S dropdown menu" src="http://farm3.static.flickr.com/2249/2230466841_d3834079b0_o.jpg" /></a></li> </ul> <ul> <li> Make the logo link back to the homepage This is a convention that web users have become accustomed to, and provides a handy shortcut back to the main navigation. </li> <li> Clear fonts Navigation headers and other options should be distinguishable from the rest of the page, so they should be in bold and in a larger font than the content. </li> <li> Sitemap This is crucial for any website, and should provide links to every category, subcategory, and page on your site. This provides a third way for customers to navigate through your site, as well as making it easier for the search engines' spiders to access all of your website. </li> <li> Search box While most customers will choose to navigate through the site by using the main navigation categories, a search box provides a useful alternative, especially for customers that are searching for a specific product. This means that the search box is not only important for user experience, but is also an easy way to increase conversions. </li> </ul> Related research: <a href="http://econsultancy.com/reports/web-design-best-practice-guide">Web Design Best Practice Guide </a> <a href="http://econsultancy.com/reports/online-retail-user-experience-benchmarks-2006">Online Retail User Experience Benchmarks </a> Related stories: <a href="/blog/1769-sky-sports-redesign-has-it-affected-usability">Sky Sports redesign - has it affected usability? </a> <a href="/blog/1811-10-reasons-why-your-website-sucks">10 reasons why your website sucks </a>

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <List Type="Disc"> <ListItem> <Emphasis>Navigation menus at left or top of the page<LineBreak /><LineBreak /></Emphasis>This is the convention for the great majority of websites and is exactly where users will be looking for it. <LineBreak /><LineBreak />The current convention is to use the top navigation bar for the main product categories, while the left hand menu tends to be for more detailed product menus, as with <Link URL="http://www.amazon.com" Window="Self">Amazon</Link>:<LineBreak /><LineBreak /></ListItem> <Paragraph> <Link URL="http://www.amazon.com" Window="Self"> <Image AlternateText="Amazon" Source="http://farm3.static.flickr.com/2194/2231955995_81509b8617_o.jpg"> </Image> </Link> </Paragraph> <LineBreak /> <LineBreak /> <ListItem> <Emphasis>Short, clear and precise language in menu options<LineBreak /><LineBreak /></Emphasis>Users tend to scan quickly, so keep the language in menu options clear and to the point.<Emphasis><LineBreak /><LineBreak /></Emphasis></ListItem> <ListItem> <Emphasis>Don't have too many options<LineBreak /><LineBreak /></Emphasis>Something like six or seven main navigation options should be enough for the homepage - any more and you risk confusing users. <LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Consistent navigation<LineBreak /></Emphasis> <Paragraph>The simplest way to avoid confusion for customers is to have consistent positioning of navigation on every single page of the site, with the possible exception of the checkout. <LineBreak /><LineBreak />This is useful to avoid customers reaching a dead end on the site and having to click the back button or leave. It also benefits SEO as it helps search engine spiders access most of the pages. <LineBreak /></Paragraph> </ListItem> <ListItem> <Emphasis>Use breadcrumb trails<LineBreak /><LineBreak /></Emphasis>Breadcrumb trails show a user's path to their current page, allowing them to access previously visited parts of the site with a single click. <LineBreak /><LineBreak /><Paragraph><Link URL="http://www.cotswoldco.com" Window="Self"><Image AlternateText="Breadcrumb trail" Source="http://farm3.static.flickr.com/2349/2231942939_03626a27c2_o.jpg"></Image></Link></Paragraph><LineBreak /><LineBreak />Breadcrumb trails also deliver the added benefit of allowing customers to refine their product searches by removing certain product features, and saving them the hassle of beginning the search all over again.<LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Avoid dropdown menus<LineBreak /><LineBreak /></Emphasis>Dropdown menus, as used by <Link URL="http://www.marksandspencer.com/gp/node/n/42966030?ie=UTF8&mnSBrand=core" Window="Self">Marks & Spencer</Link> below, are a good method of saving space, but can be very frustrating for users. <LineBreak /><LineBreak />First of all, they prevent users from seeing all their navigation options in a single glance, and can lead to frustration when the cursor moves away from the menu and the user has to start all over again.<LineBreak /><LineBreak /><Paragraph><Link URL="http://www.marksandspencer.com/gp/node/n/42966030?ie=UTF8&mnSBrand=core" Window="Self"><Image AlternateText="M&S dropdown menu" Source="http://farm3.static.flickr.com/2249/2230466841_d3834079b0_o.jpg"></Image></Link></Paragraph><Emphasis></Emphasis></ListItem> </List> <Paragraph> </Paragraph> <Paragraph> <Emphasis> <LineBreak /> </Emphasis> </Paragraph> <List Type="Disc"> <ListItem> <Emphasis>Make the logo link back to the homepage<LineBreak /></Emphasis> <LineBreak />This is a convention that web users have become accustomed to, and provides a handy shortcut back to the main navigation. <LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Clear fonts<LineBreak /><LineBreak /></Emphasis>Navigation headers and other options should be distinguishable from the rest of the page, so they should be in bold and in a larger font than the content. <LineBreak /><LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Sitemap<LineBreak /><LineBreak /></Emphasis>This is crucial for any website, and should provide links to every category, subcategory, and page on your site. <LineBreak /><LineBreak />This provides a third way for customers to navigate through your site, as well as making it easier for the search engines' spiders to access all of your website. <LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Search box<LineBreak /><LineBreak /></Emphasis>While most customers will choose to navigate through the site by using the main navigation categories, a search box provides a useful alternative, especially for customers that are searching for a specific product. <LineBreak /><LineBreak />This means that the search box is not only important for user experience, but is also an easy way to increase conversions. </ListItem> </List> <Paragraph> <Emphasis>Related research:</Emphasis> <LineBreak /> <Link URL="http://econsultancy.com/reports/web-design-best-practice-guide" Window="Self">Web Design Best Practice Guide </Link> <LineBreak /> <Link URL="http://econsultancy.com/reports/online-retail-user-experience-benchmarks-2006" Window="Self">Online Retail User Experience Benchmarks </Link> </Paragraph> <Paragraph> <Emphasis>Related stories:</Emphasis> <LineBreak /> <Link URL="/blog/1769-sky-sports-redesign-has-it-affected-usability" Window="Self">Sky Sports redesign - has it affected usability? </Link> <LineBreak /> <Link URL="/blog/1811-10-reasons-why-your-website-sucks" Window="Self">10 reasons why your website sucks </Link> </Paragraph> </FormattedContent>

2008-01-30T12:32:00+00:00

econsultancy_xml

An effective and easy to use navigation system is essential for any site and can be the difference between making a sale and losing a customer. The navigation should be easy to find and use, and should work consistently across the site. Make users work too hard and you risk losing them to another, more usable rival. Here are some checkpoints for making your navigation more effective:

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <Paragraph> <Emphasis>An effective and easy to use navigation system is essential for any site and can be the difference between making a sale and losing a customer.</Emphasis> </Paragraph> <Paragraph>The navigation should be easy to find and use, and should work consistently across the site. Make users work too hard and you risk losing them to another, more usable rival. </Paragraph> <Paragraph> <Quote>Here are some checkpoints for making your navigation more effective:</Quote> </Paragraph> </FormattedContent>

false 2126

Refer also to Econsultancy's <a href="http://econsultancy.com/reports/user-experience-buyers-guide">User Experience Buyer's Guide</a> and <a href="http://econsultancy.com/reports/effective-web-design-best-practice-guide">Effective Web Design Guide</a> for more information about best practice in these areas.

364961

Ten tips for website navigation false

2008-02-07T08:30:00+00:00

ten-tips-for-website-navigation

2009-04-28T23:04:25+01:00

2009-10-13T09:30:50+01:00

483