New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating progressive navigation

From: User Experience Fundamentals for Web Design

Video: Creating progressive navigation

Ultimately your site is all about getting information across to your visitors. This information is either going to help them choose what to buy, to sign up for a service you offer, or just to let them know more about a topic. Everything else-the Navigation Structure, the Search function and so on-is only on the site in order to support this task, to get people to the place where the information lives. Having said that; any site with more than a couple of information pages is going to need a way to lead visitors to the correct content. That normally means adding Summary pages that roll up content into categories. Typically these categories are the same as your top-level menu items.

Creating progressive navigation

Ultimately your site is all about getting information across to your visitors. This information is either going to help them choose what to buy, to sign up for a service you offer, or just to let them know more about a topic. Everything else-the Navigation Structure, the Search function and so on-is only on the site in order to support this task, to get people to the place where the information lives. Having said that; any site with more than a couple of information pages is going to need a way to lead visitors to the correct content. That normally means adding Summary pages that roll up content into categories. Typically these categories are the same as your top-level menu items.

Category Pages of the top-level pages for each section of the site. They provide an introduction to the collection of articles that make up a section of the site. Category pages work as a drilldown point for information within the section. Obviously, they also help by informing visitors about the key points within the section and allow them to navigate to sub-content. The Category page is meant to display just the most important or the most recent information in this area of the site. People can drilldown to more detail by clicking on the links to Detail Pages, or to Sub-categories if you have those too.

So, within Categories, there are often several topics. A topic it might be ordered around a particular task, such as planning flowers for a wedding, or around a specific product, such as types of lilies. On the smaller site, each link on your Category page might go straight to a Detail page. Once your site reaches a certain size, you will most likely end up with Sub-category pages for each topic area. These will normally correspond to submenus on your Main Navigation Structure. Sub-category pages follow a similar layout to Category pages, with individual detail pages that are linked off from within the text.

This way people can either get a high-level overview, using the Sub-category page, or drilldown to read the nitty-gritty by clicking on a link to a Detail page. Detail pages cover only one concept or item. Remember that many users will come to a Detail page from search or a related links area. For that reason, Detail pages should have a small introduction so that users can orient themselves and understand whether they have reached the right content. The Detail page should focus on its core topic. After reading this content, visitors should have the answers they need and be ready to move on.

If other Detail pages contain similar information, the page should include these in a related links area. This type of page should also make use of resources links to show downloadable content, where it's applicable. Detail pages will not usually have an entry in the main navigation menu, in fact, if you think a Detail page needs a menu entry, it's probably a category rather than a Detail page. What this layout gives your visitors is a way to quickly work out what part of your site they need to visit and different levels of information, depending on their needs.

If they came in from a search engine, the site's navigation components, like Breadcrumbs and Related links, will help them to quickly work their way up or down the levels of content, they'll find exactly what they need. Some people might get their questions answered after reading the summary on the Category page. That's great! You saved them a whole bunch of time and they'll love for that. Other people will follow the path from a Category page all the way through to individual Detail page, because the information they need is very specific. Next, we'll talk about how to format those Detail pages to help people find the specifics that they care about.

Show transcript

This video is part of

Image for User Experience Fundamentals for Web Design
User Experience Fundamentals for Web Design

52 video lessons · 24986 viewers

Chris Nodder
Author

 
Expand all | Collapse all
  1. 1m 7s
    1. Welcome
      1m 7s
  2. 4m 37s
    1. Building a site for your visitors
      1m 29s
    2. Understanding how people browse the web
      45s
    3. It's all about information
      48s
    4. What causes people to leave sites?
      1m 35s
  3. 3m 50s
    1. Simple design
      1m 9s
    2. Consistent design
      1m 11s
    3. Standard design
      1m 30s
  4. 20m 55s
    1. Elements of navigation
      1m 21s
    2. Content has a structure
      2m 18s
    3. Understanding menus
      3m 19s
    4. Reviewing some menu myths
      2m 4s
    5. Working with site maps
      1m 5s
    6. Adding search to your site
      2m 53s
    7. Understanding links
      3m 43s
    8. Exploring clickable elements
      1m 18s
    9. Understanding Fitts's Law
      2m 54s
  5. 11m 19s
    1. People can begin from any page on your site
      1m 24s
    2. Elements every web page should have
      3m 25s
    3. Creating progressive navigation
      3m 22s
    4. Arranging your content
      3m 8s
  6. 8m 7s
    1. How people read on the web
      2m 31s
    2. Writing for information exchange
      1m 43s
    3. Formatting pages for information exchange
      3m 53s
  7. 7m 21s
    1. Using your homepage as a site summary
      1m 50s
    2. Creating fresh content
      1m 20s
    3. Displaying navigation and search
      1m 25s
    4. The five-second test
      2m 46s
  8. 8m 8s
    1. Showing people what you've got
      3m 50s
    2. Making comparisons easy
      1m 24s
    3. Creating landing pages from ad campaigns
      2m 54s
  9. 11m 22s
    1. The real purpose of detail and product pages
      1m 16s
    2. Writing descriptive text
      2m 4s
    3. Using images to set context
      2m 17s
    4. Showing the price for products
      2m 27s
    5. Have a call to action
      1m 36s
    6. About Us: a special detail page
      1m 42s
  10. 10m 58s
    1. Ask for information in context
      2m 25s
    2. Making forms as painless as possible
      2m 34s
    3. Creating form fields
      3m 37s
    4. Handling errors gracefully
      2m 22s
  11. 9m 9s
    1. Using different types of media
      1m 55s
    2. Simple question: Does it enhance the experience?
      2m 15s
    3. Using graphics for explanation, not decoration
      1m 17s
    4. What is interactive content?
      1m 58s
    5. Laying out your page for media
      1m 44s
  12. 5m 3s
    1. Making money without selling out
      1m 37s
    2. Adding graphical ads
      2m 10s
    3. Creating text ads
      1m 16s
  13. 3m 42s
    1. Simple, consistent, and standard design
      2m 4s
    2. Consider your users and you'll be fine
      1m 38s
  14. 1m 31s
    1. More resources
      1m 31s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.