Make Navigation Easy

Make it easy for visitors to locate content on your site, and to jump from one page to another. A lot of topics come under this heading:

Make Home easy to find

Can visitors easily get back to your main page, and recognize it as such? Some considerations:

  • Is "Home", "Main page", etc. a highly-visible part of your site's main menu?
  • Does clicking on your site logo take visitors to your main page? There's no law saying it has to, but most people have come to expect it.
  • Does your main page's design make it clear that it's the main page? A unique design, or big welcome message, can help there. 
  • Do you use a "splash page" that visitors have to click through before they get to the main page or other real content? If so, is it really needed for your site?

The Drupal connection: Drupal handles these considerations with aplomb.

First, you don't need to place your home page in your primary menu or any other menu, but it's simple to do so, and there's no reason not to!

Second, when you set a logo for your theme, Drupal will automatically make that logo link to your main page. Schweet!

Finally, while Drupal doesn't automatically bestow a special design upon your main page, it makes that goal easy. Some Drupal strengths related to the main page:

  • It's simple to make a "node list page" out of your main page in Drupal, with the built-in "Promoted to front page" functionality.
  • It's easy to set which pages display blocks, making the main page (or any specified page) stand out.
  • It's easy to set any given node as your main page at admin/settings/site-information
  • The great Front Page module enables all kinds of tricks, including splash pages that depart from your theme, different main pages for anonymous and authenticated users, different main pages for user roles, PHP code in the main page, custom behavior of HOME links, and custom mission statements.

Make key content easy to find

I always like sites that highlight key content, typically via links in a sidebar. Great examples:

  • Recent posts
  • Recent comments
  • Recent changes to content
  • Related or similar posts
  • Most popular posts
  • Highest-rated content 
  • Content with specific tags
  • Most emailed/forwarded posts

Another great idea is to hand-pick content as suggested reading. A selection of links to posts with your best work, or content that best explains what the site is about, is an especially good way to welcome new visitors.

The Drupal connection: Drupal makes blocks with those links possible. Its core modules create blocks for popular content, recent blog posts, and recent comments. The Poll and Forum modules create blocks for most recent polls and recent forum activity. [Note: Corrections appreciated if required!] In addition, the following modules add features:

Many more useful modules are available. Best of all, the Views module lets you create custom lists of nodes based on nearly any criteria.

Make old content easy to find

Old content can get buried in your navigation system. Keep it alive via any of the methods above for key content, as well as the now-classic link to archives (monthly, yearly, or whatever works).

Don't just leave it to readers to find your old content via such sidebar links, though. As you write, actively include links to older relevant content within your text.

Offer a site map

What better tool than a map to find something? A site map that outlines your whole site will let a visitor get just about anywhere. A text-based site map is great for letting the search engines see the whole picture, too. 

The Drupal connection: The Site Map module and XML Sitemap module create site maps. 

Keep navigation consistent

Simply put: Keep the same menu structure throughout your site, and keep the menu(s) located in the same spot. 

Sub-menus that change with the item selected in a main menu are, of course, fine, as long as they too are consistent and easily identified as sub-menus.

The Drupal connection: Drupal makes it easy to create and manage menus at admin/build/menu. Drupal also allows for two special menus, the primary menu and secondary menu; you give normally-created menus these special designations at admin/build/menu/settings. Most Themes provide for pre-determined locations to display the primary and secondary menus.

Keep choices limited

Multiple menus scattered all over, or menus longer than an NBA player's arm, scare off visitors. Keep it simple: group content into as few distinct menu items as you can.

The more content you have, the harder this gets. Keeping menu choices limited will mean "going deep", with sub-menus and sub-sub-menus... though the experts warn against content that can only be reached by lots of clicks. 

Ideal navigation is more art than science. Plan from the start how content items will fit into a menu structure, and keep experimenting with changes as you build!

The Drupal connection: Drupal menus are as flexible as you like, with built-in support for heirarchical menus too. It's easy, too, to create a menu item that links to a specific node: just set the menu item to the target node's path, and it's done. 

If there's any built-in problem, it's a conceptual stumbling block for some new Drupal site builders: the way Drupal builds pages that list multiple nodes. Unlike some CMSes, it's not via first building the "container" page, and then directing various nodes to go to that page; rather, it's via a) deciding the criteria for grouping the nodes, b) building the nodes with those criteria, and c) creating a menu item (or other link) that tells Drupal to build a new page out of all nodes meeting the criteria.

That approach can be immensely powerful, but in my opinion requires a little more up-front planning: you have to not only decide the menu items that content will fall under, but also the criteria that will define the content under each menu item, allowing Drupal to gather up the appropriate nodes. Similarly, reorganizing menus isn't a matter of telling a node to move from one container page to another container page; it requires changing the relevant criteria attached to the node, so it will now be gathered up under a different menu item.

It's clumsy stuff for me to explain, but actually sensible and powerful once fixed in the head. For any reader still stumbling a bit, some additional reading:

Make choices clear

Not quite conflicting with the above: Whatever choices you do offer, make them visible. Specifically, if you've got nested "drop-down" menus, consider opening up those menus so sub-menu items are always visible.

Balancing the above two is your task. If the menus are unavoidably long, it may be best to show sub-menu items only when the parent item is selected. If menus are short, on the other hand, it may be fine to always show the nested sub-menus. (Then again, if the menus are really short, you might ask whether sub-menus are even needed.) 

The Drupal connection: You can choose whether any sub-menu items are visible always or only when the parent item is selected, by setting the "Expanded" selector when editing the parent menu item at admin/build/menu.

Use breadcrumbs

Breadcrumbs are the "trails" of links that show where the currently-viewed page exists within the site heirarchy. The links let visitors return "up" the heirarchy, all the way back to the main page. Typically, the heirarchy shown in the breadcrumb trail will match the heirarchy of the menus used to reach the viewed page. 

Experts agree: Breadcrumbs are good for helping visitors feel structure and a sense of "place" within your site, and of course to help them navigate. Use breadcrumbs when you can.

The Drupal connection: Breadcrumbs work great with a site that has a clear heirarchy of content, and a Drupal site can be built that way – though, per the above discussion of menu item choices, it can also be built with no real heirarchy of pages. Drupal will show breadcrumbs if your site's Theme support the feature, but unlike CMSes which dutifully place all content into prescribed heirarchies, the breadcrumbs for a Drupal site may make no helpful sense at all!

It's a big topic that deserves a big discussion. For now, some useful resources for creating meaningful breadcrumbs from your site structure:

Another note: A comment on this page claims that placing your content under the stock Navigation menu aids in automatic creation of natural breadcrumbs, without extra modules. I haven't tried this yet; experiment and see whether it's an improvement.

Use sensible paths

Make paths meaningful

The path that your content shows in the browser address bar is important. A short path made from few, easy-to-grasp words is easy for visitors to grok, and is better-liked by search engines too. A long path full of mysterious characters has the opposite effect.

Make your paths meaningful and clean. You get bonus points if your paths' hierarchies (like news/domestic/2008/election_update) match the hierarchies of menus and breadcrumbs. Navigation heaven!

The Drupal connection: By default, Drupal gives content paths that aren't tasty at all, like ?q=node/42. Bleah. Fortunately, Drupal has ready tools for fixing that. The following are your friends in enabling meaningful, clean, unique paths:

Meaningful paths: For Drupal 5.x and lower, the Path module lets you give nodes nice custom paths. The Pathauto module goes one further, automating the work for you! It's a powerful module with many features, including the ability to create path-based hierarchies from otherwise-non-hierarchical content, and is highly recommended for any Drupal site.

Clean paths: Nice human words in your paths are a good start, but there's still something wrong with ?q=news/domestic. Get rid of the ugly ?q= by enabling Clean URLs at admin/settings/clean-urls.

Keep paths unique

Multiple paths leading to the same content can crop up easily when moving a site from one domain to another, or making other large-scale changes in structure. It happens to me a lot just during day-to-day fiddling with paths for specific nodes.

These multiple paths are bad for your search ranking. External sites will link sometimes to one path and sometimes to the other, meaning your vital "link juice" gets split between them. In addition, search engines can view the setup as multiple instances of the same content – an SEO no-no – even though all paths lead to a single page.

Let a given piece of content have just one unique path. Simply deleting extra paths isn't often the answer; there may be incoming links to that that, which will now result in errors. That's bad for visitors and for SEO. 

Google recommends 301 redirects to solve the problem. The same goes for sites that can be reached at both domain.com and www.domain.com; you're creating multiple working paths for each piece of content. Deploy the 301 redirects, or see whether your hosting service has a quick solution. (My host DreamHost, for example, easily allows webmasters to set whether the www is automatically added or removed, or whether – should you really want it – either version works.)

The Drupal connection: The easy advice is "never create two paths to the same piece of content", but that's easier said than done. The main culprit: At times you'll want to change the path of a content piece for some reason, yet the old path will remain in the database as well. To fix that, you can find and delete the old path at admin/build/path, but that leaves a problem: external web sites and search engines may point to the old path, which no longer exists! And dead links are bad for you. 

The smart answer: use 301 redirects from the old path to the new. That's a big topic, with many ways to handle implementation. Fortunately for the time-pressed, there's a nice solution in the Global Redirect module, which does this tech-ish work for you behind the scenes. Go get it!

Resources

Keep links friendly

Make text links visible

Can visitors easily see the links on your site? Making links bold is itself not enough; bold text alone doesn't say "link" to the reader. Web users have come to expect text colors and/or underlining to mark links. Blue, underlined text may look like an online cliche, but it's actually appreciated by many users, especially those who don't spend as much time on the web as we geeks do.

Separate the appearances (generally, colors) used for unvisited links and for visited links, and use those appearances consistently.

The Drupal connection: Link appearance is controlled by your Theme's CSS (typically within the theme's style.css file).

Make sure links work

Broken internal links are an unavoidable bane of webmastering. They'll throw off visitors and search engine crawlers alike.

Continually check internal links to make sure they're working. (If you've got a friendly user community, why not appeal to them to report any broken links?) You can also make use of services like the W3C Link Checker or Google's Webmaster Tools to find broken links.

The Drupal connection: There's a Links checker module that offers to help with this task.

Resources

Handle external links with care

Not everyone thinks this is important, but I like sites that don't unexpectedly toss me to another site when I had still planned to stick around for a while. One way to keep external links from surprising readers is by some visible marker separating them from normal internal links - typically, a small graphic indicating an external link, or even some appropriate added text. Another method is simply to have all external links open in a new window or tab, so the reader gets to the new site without losing his open page on your site.

The Drupal connection: I like and use the External Links module, which adds a small graphic (see it there?) to external links, and even offers the option of making those links automatically open in a new window. That kills both the above birds with one easy stone.

Other modules with similar functionality include the External Links Filter module, and the External Link Page module, which offers a third tack: redirection to a "you are about to leave this site" warning page. That's a mroe intrusive method than I like to use, but some big sites go for it.

Tag content

Metadata is great stuff. Visible metadata "tags" on an article help visitors instantly grok what the article's about. Even if you don't make tags visible, behind the scenes they can let you organize your data in all sorts of ways helpful for navigation. Letting visitors call up all content with a given tag is one great feature.

The Drupal connection: Taxonomy – the art and science of applying tags ("Terms") and managing groups of tags ("Vocabularies") – is a huge Drupal strength and a massive topic on its own. Suffice to say that Drupal excels in letting you tag your content in any way you like and then perform nifty tricks with those tags.

Some reading for the newcomer:

Make search easy

Nothing complex here. Have a search feature (with advanced functions like date ranges if the site calls for it) and keep it visible in a standard location. Also, make sure that your Search Results page looks and acts like the rest of the site, with normal navigation menus, etc.

The Drupal connection: Drupal provides a search box for sites; most Drupal Themes will not only support the search box but also allow you to choose whether or not it displays.

Of course, the built-in Drupal search box isn't your only choice. You can easily use the search widgets provided by other parties, such as the ubiquitous Google-powered search box. Most Drupal site builders will do this by placing the Google-provided code into a block.

Help the lost

Visitors will try to access pages that don't exist, whether via their own error or via broken links and other glitches within your site navigation. Help them get back on track:

Offer useful client error (HTTP 4xx) pages

What do users see when trying to get to a nonexistent or restricted-access page? A page with an error message and number, like 401, 404, etc. Consider placing the following features on the page:

  • Make clear that the page isn't available – that is, something like "The page you were looking for could not be accessed", not just "Error".
  • Give possible reasons for the failure. This may be clear if you serve up a different page for every error, like "The page doesn't exist" for 404, and "You do not have permission to access this page" for 401. But if you use a single page for many such error types, list several of the possible causes.  
  • Get visitors back on track. Make sure that a navigation menu is there, or if nothing else, a link back to your main page. Links to a number of helpful pages – help pages, FAQs, the main page, popular pages, an advanced search page, etc. – might be best of all.
  • For a 401 error, redirecting visitors to a user login page may be helpful.
  • Maintain the site's look. There may be nothing horribly wrong with an error page jarringly different from the rest of your site, but visitors may be less put off if the page matches the rest of the site. 
  • If you expect lost visitors using many languages, make a multilingual page. 

The Drupal connection: At admin/settings/error-reporting you can easily set the page that visitors will see upon receiving 403 (access denied) and 404 (not found) errors.

I like setting these to the site map, based on the Site Map module, which provides an instant full menu of places to head. Needless to say, this also preserves the site Theme as part of the page visitors see. You can configure this module's site map at admin/settings/sitemap, including the explanation of the error that visitors will see.

Another solution for 404 errors is the Search 404 module, which initiates a search for words inside a failed URL path. So, a user trying to reach the nonexistent page www.drupalace.com/modules would at least receive search results for "modules", possibly leading to the page she had in mind.

Make a user-friendly "server error" (HTTP 5xx) page

An error of 500, 501, 502, etc. means the server failed to fulfill an apparently valid request.

More information on this to come.

More resources

Add new comment