Navigation For Mega-Sites By Paul Boag

For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough.

Typically, sub-navigation displays the parent, siblings and children of the current page. A persistent primary navigation bar shows top-level pages, allowing users to move between sections.

However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a “mega-site”.

A mega-site is typically owned by a large organization that encompasses a broad range of services or products. The organization also often supports a diverse user base.What Is A Mega-Site?

Organizations with mega-sites include institutions such as the BBC, companies with diverse portfolios such as Microsoft, government bodies, higher-education institutions and large charities that run many campaigns, such as the World Wildlife Fund.

These websites:

• are extremely large,
• are many levels deep,
• are made up of many micro-websites and subsections,
• cater to many audiences,
• have multiple entry points.

Websites of this size and complexity bring some unique navigational challenges.

The Challenges Of Navigation On Mega-Sites

At our company, we do a lot of work on mega-sites, and they can prove to be particularly challenging, especially when trying to use traditional navigation.

TRADITIONAL NAVIGATION CANNOT SUPPORT DEPTH

The deeper the website, the more that traditional navigation struggles. Navigation can comfortably accommodate three levels; beyond that, one of two things happens. Either the navigation expands to the point where more screen real estate is dedicated to navigation than to content (a problem made worse by the sheer number of pages on a mega-site), or higher pages in the information architecture no longer appear in the navigation.

In the latter case, if the user is deep within the website, they will lose the context of where they are because they are not seeing where the current page fits in the website’s structure.

While traditional navigational approaches, combined with breadcrumbs, can scale to accommodate mega-sites, they do so at the cost of ever-increasing real estate. Larger version.

The latter problem can be partially mitigated by well-implemented breadcrumbs. However, this is not the only issue with traditional navigation.

TRADITIONAL NAVIGATION CANNOT SUPPORT MULTIPLE ENTRY POINTS

Traditional navigation can confuse users who enter the website via a micro-site or subsection.

Take a student who is considering attending a university for post-graduate studies. This person is probably more interested in a particular faculty or school than in the institution as a whole. They could, therefore, very well enter the website at that level, rather than at the university’s home page.

Another example would be a single mother wanting to know about child benefits. They are more likely to arrive on the benefits subsite than on the government’s home page. In such situations, the user’s focus is on their current context (i.e. post-graduate studies or child benefits). They are not immediately interested in the broader mega-site.

Unfortunately, traditional primary and secondary navigation exposes the user to this broader context, whether they want it or not.

Does a section labelled “Research” on a university’s page refer to the entire university or just the school being viewed? What about when the same label appears twice but goes to two separate places? Larger version.

To make matters worse, the current context can actually alter the user’s perception of the navigation items. For example, would our post-graduate student think that a link labelled “About us” is about the school in question or about the larger institution. In some extreme cases, you can even find the same navigation labels being used for both the current context and the broader institution (for example, information about the university and about the school might both be labelled “About us” on the same page).

How, then, can we solve the navigation problems of mega-sites?

Navigation Solutions

As with all things, there is no perfect solution. However, there are solutions that are a step forward from navigation better suited to small websites. The first of these solutions is the most radical.

GET RID OF NAVIGATION ENTIRELY

I first heard of this approach in Russ Weakley’s talk about doing away with traditional navigation back in 2006. It rejects the idea of imposing a navigational structure upon users, instead allowing them to find their own path through the website.

This is achieved by making each Web page a standalone document and tagging it with appropriate meta data. Users can then find pages through a combination of search and navigating by tags. Pulling in links to related documents based on the meta data associated with each page would also be possible.

This approach has several advantages:

• It supports a website of limitless size.
• It is ideally suited to users who come to the website from a deep link.
• It allows for a much more dynamic relationship between pages and easily accommodates pages being added and removed.

Of course, it is not without its challenges. While individual sections of the website could still have a landing page (for example, section.acme.com), the business may well struggle with the idea of not having a specific website to manage. More importantly, this approach relies heavily on having well-tagged documents and powerful search functionality, both of which are hard to achieve with a mega-site.

That said, it is an option, and one that shouldn’t be quickly dismissed.

SPLIT THE WEBSITE INTO SMALLER MICRO-SITES

Another approach is to break the mega-site into a number of smaller more manageable micro-sites. This is the approach adopted by the BBC.

Instead of treating its Web presence as a single entity, the BBC has broken it down into subsites, such as news, sports, TV, radio and so on. Each website has its own navigation and thus avoids the problems associated with mega-sites.

The way the BBC avoids a disjointed experience for users who move between micro-sites is to ensure consistency in top-level navigation and in the user interface.

The BBC avoids being a mega-site by splitting its Web presence into a number of smaller websites, while maintaining consistency in navigation and design language. Larger version.

Although the BBC’s micro-sites do vary in appearance, they make use of the same primary navigation, and also have a consistent design language for things like typography, layout and modules. This language, defined on the BBC’s Global Experience Language (GEL) website, is consistent enough to ensure a stable user experience yet flexible enough to cater to different audiences and subject matter.

It is a fine line to walk. Make each micro-site too different and users will become confused by changes in the UI. Make them too similar and users will be thrown off upon finding that the website does not have a single navigational structure.

USE A BREADCRUMB-DRIVEN APPROACH

A third solution is the one adopted by Gov.uk. It does away with dedicated areas for navigation, and instead uses the page’s content to link to its children. It then uses breadcrumbs to help the user identify where they are within the navigational hierarchy and to move back up the tree when needed.

Gov.uk relies almost exclusively on breadcrumbs for navigation. Larger version.

The approach has many advantages. For a start, it minimizes the space dedicated to navigation, while at the same time allowing for much more detailed descriptions of each child. In that sense, it is the simplest, cleanest and easiest to understand of the approaches.

It also translates well to mobile devices, which account for 45% of Gov.uk’s Web traffic.

The prominent breadcrumbs make clear to the user where they are on the website, while in-page navigation to child pages makes the next step obvious. Most of all, the emphasis on content, rather than navigation, appeals to me the most.

Unfortunately, it does have its downsides.

By relying entirely on breadcrumbs and in-page links to children, the user has little context of their current position. They are unaware of the siblings of the current page and of the overall shape of the website (for example, they are unaware of the top-level sections).

This is not a problem if the user is trying to complete a specific task and the website has catered to that task by bringing all content related to it in a single place. However, when a user is in general research mode or when the content related to the task is spread across multiple pages, this approach can prove frustrating.

The frustration is caused by the breadcrumb navigation requiring the user to navigate up and down the website’s structure. There is no way to enable jumping between sections.

Fortunately, there is a hybrid approach, which uses breadcrumbs as the primary navigational tool, but augmented with more traditional navigation.

My Preferred Solution

My preferred solution is inspired by the navigational approach used by BBC Sports before GEL was introduced.

Instead of running them horizontally, the BBC flipped the traditional breadcrumbs vertically. At the end of each breadcrumb list, the current page also showed its children. When you reached the bottom of the tree, the navigation would continue to display the siblings of the current page, instead of its children.

The old BBC Sports website used vertical breadcrumbs as the primary navigation tool. When the user entered a section, such as football, all other sports (i.e. the siblings) would be removed, focusing the user on the subject at hand. Larger version.

This approach grouped all navigation together in a single place, gave the user a clear sense of their location and reduced the space dedicated to navigation. Yet, it still suffered from the problems of Gov.uk.

When working on the University of Brighton, we proposed BBC Sports’ approach, but added one important thing. We suggested keeping a consistent top-level navigation bar. While this adds more navigation to the page, it gives the user an instant overview of the structure of the website. This enables users who require information from multiple sections (say, a prospective student researching courses as well as accommodation) to jump quickly between those sections.

In many cases, this is enough to create a simple yet powerful user experience. However, it does not address the need to be able to see the siblings of the current page.

Showing Siblings While Using Breadcrumb Navigation

So far, I have considered two possible solutions to this issue.

One works on the assumption that siblings often have a relationship with each other; they are part of the same story, if you will. On that basis, the simple addition of “next” and “previous” buttons (such as you find on many blogs) might be enough of a solution. Users could then move between siblings with the single click of a button.

An alternative approach would be to make each level of the breadcrumb navigation a flyout menu, thereby exposing the siblings of that level. This would enable the user to jump to any sibling on any level of the website and potentially do away with the need for a separate primary navigation bar.

By adding flyout menus to the vertical breadcrumb navigation, you give users quick access to any sibling on any level of the website. Larger version.

This could work whether you use vertical breadcrumb navigation or traditional horizontal breadcrumbs.

That said, I haven’t tested this approach, and some will have concerns about touch devices.

Create Demo: An Easy Way To Present Adobe Fireworks Design Prototypes

With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding.

The Create Demo extension addresses some of these issues. It automatically converts your Fireworks documents into portable presentations, which can then be easily presented in any browser — desktop or mobile.

WHY IS IT NEEDED?Overview

This extension makes the process of preparing and exporting your Fireworks PNG files as presentations quick and painless. It can be used to show multi-page website prototypes, designs and sets of slides.

The only thing you will need to think about is where to upload the presentation (i.e. whether to present it online or on your iOS or Android device). The generated slideshows will render identically on all devices, with automatic thumbnail navigation.

A BIT OF BACKGROUND

The “Demo Current Document” used to be a great feature in Fireworks that I often used to show off website concepts and designs to clients. Unfortunately, its reliance on Flash and the success of the iOS and Android platforms means that, today, it cannot be used to reliably present your ideas on every screen and in every situation. We needed to move from Flash to a pure HTML solution if we wanted to have full cross-browser and cross-platform support.

Having read Viktor Goltvyanitsa’s excellent article about the making of the original extension and knowing what can be achieved today with the capabilities of modern browsers, we knew it was time to accept the challenge. This is how the Create Demo extension was conceived (you can read more on our blog).

INSTALLATION AND REQUIREMENTS

The extension works with Adobe Fireworks CS3 or later and has been tested extensively on both Mac and Windows platforms.

1. Download Create Demo from Adobe Exchange. The extension is free, but you’ll need anAdobe ID in order to download it (if you’ve ever downloaded Adobe software — Fireworks, for example — then you likely already have an ID).
2. When download is complete, simply double-click the CreateDemo2.0.5.mxp file.
3. Click on “Accept” when the Adobe Extension Manager opens.
4. If installation was successful, you’ll see Create Demo listed in the Extension Manager list.

Installation steps.

Advice to Windows 7, 8 and Vista users: run the Adobe Extension Manager as Administrator to prevent any errors during installation.

SUPPORTED BROWSERS AND PLATFORMS

The exported demo files generated by this extension have been tested on a variety of platforms and browsers, including iOS, Android, Windows, Linux and Mac OS X. Tested browsers include Safari, Firefox, Chrome, Opera and Internet Explorer.

HOW MUCH DOES THE EXTENSION COST?

The extension is absolutely free for everyone and is licensed as “donation-ware”; the only limitation of the free version is a small credit that appears at the startup of every presentation. If you decide to contribute, you’ll have the option to remove this screen, and we’ll personalize the interface with your name (you can choose how much — or how little — to donate, starting from only £5).

Licensed version (personalized).

Last-minute note: If you are a CS6 user, you should know that the process of obtaining and managing your extensions is currently being overhauled. To ensure that we can continue to support and provide updates in the future, we have put the extension in the new Adobe Exchange panel. For detailed information on installing the extensions using this panel, see our detailed blog entry about it.

Create Demo: How To Use It

BASIC USE

Once the Create Demo extension is installed, you can access it from the menu: Commands → Web Engineer → Create Demo.

The extension’s interface is grouped into two key sections: settings and pages. Settings can be customized on a per-document basis, so if you change them, you will need to save your Fireworks document to ensure they are not lost.

The key sections of the Create Demo extension: settings and pages.

Settings section

The settings panel groups the common general options for exporting your demo. The current version (2.0.5) gives you the following options:

• Stage
  The color of the area outside your slide.
• Highlight
  The color of the highlight applied to the selected slide’s thumbnail.
• Max thumb size
  The width and height of the bounding box within which your slide’s thumbnails will be sized to fit. The thumbnail’s size is not limited, however, for best results, use a thumbnail size that fits your target device.
• Auto-hide thumbs
  An option to hide thumbnails automatically (handy for slideshows).
• Click left side to go back
  Navigate both forwards and backwards through the slideshow depending on where you click. When not enabled, a click always advances you forward.
• Shadow
  Adds a CSS-based shadow to your slide (ideal for presenting photos).
• Show splash screen (licensed version only)
  Removes the splash graphic on launch.
• Use export settings
  This will respect the export settings specified in your Fw PNG document. If unchecked, the slides will be exported as high-quality JPEG files.
• Use HTML5 cache
  Enables your slides to be cached for offline browsing.
• Enable gestures
  An option to use gestures (flicks) on mobile devices to advance the slides and to show and hide the thumbnails. This works well on touchscreen devices that support it, but the feature is optional and not enabled by default. If you want to experiment, an explanation of the handling of gestures is featured in the third example.
• Auto-advance
  When set to a non-zero value, this is the delay in milliseconds before the next slide is shown (note that an interaction will restart the timer). 1000 milliseconds equals 1 second, so be sure to input a large enough value.

Pages section

The pages section shows which pages will be exported from your Fireworks document. Simply clicking on a page name will toggle its inclusion.

Fireworks’ Pages panel (left), and Create Demo page selection (right).

One of most valuable Fireworks features for Web and mobile designers is pages. Pages essentially enable you to capture your design concepts in one document, with the help of shared layers, states and symbols. The Create Demo extension relies on the pages feature in Fireworks when it prepares your design for exporting as a multi-page presentation.

The Pages panel is usually located to the right of the Fireworks workspace, docked with the Layers panel. If it’s not open, press F5 or go to Window → Pages.

A NOTE ON LOCATIONS (FOR EXPORTED PRESENTATIONS)

• If you create a new Fireworks PNG file, save it somewhere in your computer, and run Create Demo, then the extension will suggest to save the presentation in the same location where the Fw PNG file is currently located.
• If you create a new Fireworks PNG file, save it somewhere in your computer (let’s call it location “A”), export it via File → Export… or File → Export Preview… (location “B”), and run Create Demo, then the extension will suggest to save the presentation to location “B” (and not where the Fw PNG file is located).

This is by design and could save you a few mouse clicks as you prepare your presentation!

PRACTICAL EXAMPLES

The following series of examples demonstrate the key features of Create Demo. The first slide in each example also shows the settings that were used to create it.

Example 1: This is a demo of a website prototype. The page shadow has been turned off, and the background is set to “match.”

Example 2: In this demo, the images have been framed with a shadow; large thumbnails have been chosen; and the “auto-hide” option is enabled (i.e. if you don’t interact with the mouse, the thumbnails will be hidden after a short delay).

Example 3: This example demonstrates some of the features added in the 2.x release, focusing on HTML5 enhancements (including caching and better device support).

TOUCH, KEYBOARD KEYS AND MOUSE

Featuring keyboard control, mouse control and gesture support (iOS only), Create Demo makes navigating your pages both swift and smooth.

Keyboard controls (overview).

You can show and hide thumbnails of your pages for quick navigation. Images are handled with care, with a focus on presenting them efficiently and elegantly. Thumbnails are centered in the view, giving quick access to adjacent pages (making it similar to how Flickr’s navigation works). With a few clicks you can flip through a large number of slides, if the size you selected for the thumbnails is reasonable.

Create Demo: In More Detail

HOW IT WORKS

The slideshows are created using nothing more than HTML and JavaScript. Create Demo produces configuration files, a manifest file (if the content caching option has been enabled), images, and the script required to create a versatile presentation that will run on a wide variety of devices.

Manifest is part of the HTML5 standard:

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

Simply put, it gives the browser the complete list of resources that are required to store pages locally. It is associated with the presentation in the HTML by adding the manifest attribute to the document. For example:

<!DOCTYPE HTML>
<html manifest="cache.manifest">
…

The manifest file itself contains the list of resources, which might require you to configure your server to add the manifest MIME type. For those using Apache, a configuration file is automatically exported with your files.

To learn more about the application cache, HTML5 Rocks has a good introduction. To ensure that users see your latest presentation when the content cache is enabled, clear the browser’s cache or upload the presentation to a new URL.

You can also link to specific pages directly in your presentation simply by adding #X to the end of the URL, where X is the page number that you want the presentation to jump to. This can be extremely useful when you want to email a series of links and annotations to a client to explain a prototype in more detail.

ADAPTS TO THE DEVICE

The presentation will adapt to the device (whether desktop or mobile) on which it is being viewed. Depending on the capabilities of the device, the presentation will make the best use of what is available. On the desktop, the fixed positioning helps to keep the thumbnails placed nicely at the bottom of your slideshow, and by adding a margin to the bottom of the page, none of your presentation images will be obscured.

When viewing the presentation on a mobile device, the thumbnails are moved to the top of the screen for easier navigation. The pages are not downscaled to fit the size of the screen, since mobile browsers usually have excellent zoom and pan functionality.

Mobile view (left) versus desktop view (right).

IOS APPLICATION MODE

The presentations created by the Create Demo extension fully support iOS’ application mode. By simply supplying a page with a given name and dimensions, you can automatically export icons and the startup screen directly from your Fireworks file. For icons, simply set the page name to the icon size in pixels, prefixed with @ (currently, 57, 72 and 114 pixel sizes are supported). For the startup page, name the page @startup, and it should match the standard startup image size of 320 × 460 pixels. For a full explanation and example of this in action, see the third practical example.

KNOWN ISSUES

The extension has had a number of updates. I plan to develop and improve it further in the future.

Currently, only a few limitations are known:

• If Google Chrome is your default browser on OS X, then when you launch the presentation as an export from Fireworks, the browser ends up with an extra / in the URL. I believe this is a known issue with Fireworks (and will hopefully be fixed in a future release by Adobe).
• Gesture support for Android has been removed due to issues with scrolling. Touch and gesture support will likely be reviewed and updated in future releases of the extension.
• The current exporting format is not suitable for large presentations (i.e. large images), but whether this should be supported at all is questionable.

Download A Fireworks PNG Template For iOS

I have created a simple template containing icons and a startup screen. It contains four pages and provides a handy starting point for creating your presentations. The icons all share the same symbol, so they can be edited in one place, with the rest updating automatically. The icons and startup images are named and sized correctly and will automatically be converted on export (although that they won’t be shown as pages included in the output of the final presentation). This demo does not include a design concept because it’s meant to be a starter file.

Download the template Fireworks PNG file (ZIP, 650 KB).

After downloading, simply unzip the file, and open it in Fireworks. You can then assemble your presentation, add and edit pages, and customize the icons. This template is not required by the extension; it’s intended merely to save you a little time when you want to quickly create the full set of iOS icons and a startup screen.

Note: You’ll need to first add pages to the Fw PNG template; after that you can run the extension.

If you no pages are in your document (other than the icons and the splash screen) and you try to export the demo, you’ll see a warning, and a blank index.html file will open.

This message will appear if you try to create the presentation without having actual pages in the Fw PNG document.

QUICK DEMO

This very simple example of a presentation was automatically created with the help of the iOS Fw PNG template. It contains three content pages, navigation with thumbnails, an iOS startup page and three icons.

Click the link (or scan the image using your mobile device) to view the demo.

Conclusion

I’ve attempted to keep this extension robust in order to solve a simple problem, which is to quickly and reliably present multi-page Fireworks designs on any device. The key was to make it easy to use; it shouldn’t leave you puzzled and desperately looking for a manual. We’ve found this extension to work well for our team, and I hope it works well for you, too.