42244

econsultancy_xml

To start with, here are the main purposes of navigation systems: <ul> <li>To provide a summary of site content. </li> <li>To direct users to relevant content through text labels and images. </li> <li>To provide context for site visitors. </li> <li>To provide both direction and context for search engine robots and ranking algorithms. </li> </ul> And here are some best practice tips: <ol> <li> Follow convention For many websites, the main navigation usually uses a combination of the top and left of the browser window. However, right-hand navigation can have benefits in persuasion – this <a href="http://www.egg.com">Egg.com</a> example shows how locating the navigation on the right tends to encourage the visitor to scan the other content. <img alt="Egg.com" src="http://farm2.static.flickr.com/1192/551668011_3c77e50a9f_m.jpg" />The <a href="http://www.microsoft.com/en/gb/default.aspx">Microsoft home page</a> uses a rollover to select the content. In our view this is not learnable and not usable since it flouts convention. It also forces the user to move the mouse horizontally when moving from the tabs to the content to avoid selecting another option. </li> <li> Be consistent In the majority of cases usability is improved through placing the main navigation on all pages on the site. The current convention tends to be to use the top global navigation for the main product categories, services or tasks such as search, contact, log-in etc. The left hand menu tends to be for more detailed product menus and is not necessarily present throughout the site. </li> <li> Provide context Use highlights, tints or arrows to highlight the current site position within a hierarchy. <a href="http://www.dabs.com/homepage.aspx">Dabs.com</a> provides a good example of this feature: <img alt="Dab.com side navigation" src="http://farm2.static.flickr.com/1312/551688577_28db584835_o.jpg" /></li> <li> Provide text-based navigation elements unless they are consistent with brand values of site. Text-based links are better for findability, accessibility and SEO. They are best for SEO since search engines use the keyphrases in the link anchor text as an indication of the content of target phrases. They also use the alt attributes of images for similar purposes, but the weighting is likely lower. </li> <li> Don’t take the decision lightly to use a dynamic (drop-down) main navigation. The <a href="/blog/974-m-s-launches-new-amazon-powered-website">recently redesigned M&S website</a> provides an example of this - while it makes for less clutter on the page, it can be confusing for users. Like the Microsoft example, it forces the user to move the mouse vertically to avoid selecting another option. </li> </ol> For more information, see our <a href="http://econsultancy.com/reports/web-design-best-practice-guide"> Web Design Best Practice Guide </a> , which provides best practice approaches for all the topics that anyone involved with website design needs to do an effective job.

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <Paragraph> <Quote>To start with, here are the main purposes of navigation systems:</Quote> </Paragraph> <List Type="Disc"> <ListItem>To provide a summary of site content.<LineBreak /></ListItem> <ListItem>To direct users to relevant content through text labels and images.<LineBreak /></ListItem> <ListItem>To provide context for site visitors.<LineBreak /></ListItem> <ListItem>To provide both direction and context for search engine robots and ranking algorithms. </ListItem> </List> <Paragraph> <Quote>And here are some best practice tips:</Quote> </Paragraph> <List Type="Numeric"> <ListItem> <Emphasis>Follow convention</Emphasis> <LineBreak />For many websites, the main navigation usually uses a combination of the top and left of the browser window. However, right-hand navigation can have benefits in persuasion – this <Link URL="http://www.egg.com" Window="New">Egg.com</Link> example shows how locating the navigation on the right tends to encourage the visitor to scan the other content.<LineBreak /><LineBreak /><Paragraph Align="Center"><Image AlternateText="Egg.com" Source="http://farm2.static.flickr.com/1192/551668011_3c77e50a9f_m.jpg"></Image></Paragraph><Paragraph Align="Left">The <Link URL="http://www.microsoft.com/en/gb/default.aspx" Window="New">Microsoft home page</Link> uses a rollover to select the content. In our view this is not learnable and not usable since it flouts convention. It also forces the user to move the mouse horizontally when moving from the tabs to the content to avoid selecting another option. <LineBreak /><LineBreak /></Paragraph></ListItem> <ListItem> <Emphasis>Be consistent</Emphasis> <LineBreak />In the majority of cases usability is improved through placing the main navigation on all pages on the site. The current convention tends to be to use the top global navigation for the main product categories, services or tasks such as search, contact, log-in etc. <LineBreak /><LineBreak />The left hand menu tends to be for more detailed product menus and is not necessarily present throughout the site.<LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Provide context</Emphasis> <LineBreak />Use highlights, tints or arrows to highlight the current site position within a hierarchy. <Link URL="http://www.dabs.com/homepage.aspx" Window="New">Dabs.com</Link> provides a good example of this feature: <LineBreak /><LineBreak /><Paragraph Align="Center"><Image AlternateText="Dab.com side navigation" Source="http://farm2.static.flickr.com/1312/551688577_28db584835_o.jpg"></Image></Paragraph></ListItem> <ListItem> <Emphasis>Provide text-based navigation elements unless they are consistent with brand values of site.<LineBreak /></Emphasis>Text-based links are better for findability, accessibility and SEO. They are best for SEO since search engines use the keyphrases in the link anchor text as an indication of the content of target phrases. They also use the alt attributes of images for similar purposes, but the weighting is likely lower.<LineBreak /><LineBreak /></ListItem> <ListItem> <Emphasis>Don’t take the decision lightly to use a dynamic (drop-down) main navigation.</Emphasis> <LineBreak />The <Link URL="/blog/974-m-s-launches-new-amazon-powered-website" Window="New">recently redesigned M&S website</Link> provides an example of this - while it makes for less clutter on the page, it can be confusing for users. Like the Microsoft example, it forces the user to move the mouse vertically to avoid selecting another option. </ListItem> </List> <Paragraph> <Emphasis>For more information, see our</Emphasis> <Link URL="http://econsultancy.com/reports/web-design-best-practice-guide" Window="New"> <Emphasis>Web Design Best Practice Guide</Emphasis> </Link> <Emphasis>, which provides best practice approaches for all the topics that anyone involved with website design needs to do an effective job.</Emphasis> </Paragraph> </FormattedContent>

2007-06-15T10:58:00+01:00

econsultancy_xml

Any decision on a website's navigation is critical to usability, findability, accessibility and SEO. It can be difficult to undo if you select a poor design. So usable navigation is best established early on in a web project. There are many different examples of main navigation systems, (i.e. the main method for accessing content in different site sections) but the 'three Cs' of convention, consistency and context are important whatever the design.

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <Paragraph> <Emphasis>Any decision on a website's navigation is critical to usability, findability, accessibility and SEO. It can be difficult to undo if you select a poor design. So usable navigation is best established early on in a web project.</Emphasis> </Paragraph> <Paragraph>There are many different examples of main navigation systems, (i.e. the main method for accessing content in different site sections) but the 'three Cs' of <Quote>convention, consistency </Quote>and<Quote> context</Quote> are important whatever the design. </Paragraph> </FormattedContent>

false 1359

363576

Navigation tips for websites false

2007-06-20T10:00:00+01:00

navigation-tips-for-websites

2009-04-30T04:59:00+01:00

618