Navigational Ease
by J.D. Shipengrover

Navigational ease is crucial to the effectiveness and success of an intranet. The concept is simple: If something is hard to use, people won't use it. In the same vein, if something is hard to find, it will rarely be found. This is where navigational ease is necessary. You could have the meaning of life and the cure for cancer on your site, but what good would it do if no one could figure out how to get there?

• Planning: Failing to plan is planning to fail.
• Design: Persistence and consistency are key.
• KISS: (Keep It Simple, Stupid).
• Sub-navigation: Create levels of navigation to match the levels of your site.
• Site map: Let people see an overview of the site.
• Advanced Web technologies: Since you know what kind of browsers your visitors have, you can use the latest technology.
• Using Fusion to add the latest apps.
• Starting out the easy way, using SiteStyles.

Creating navigational ease has two major parts.

• First is site content planning.
• Second is design.

As I have been known to say, Content Drives Design. So in my world, planning your content comes first. After all, how can you design an effective navigational system if you don't know where the navigation is supposed to go?

Planning

I will highlight some major planning goals and processes here. At a later date, I will write columns specific to these processes, but today's focus is navigation.

I had a teacher once who was overly fond of telling me, "Failing to Plan is Planning to Fail." Cliché, yes, but true. So, how do you plan your intranet content? It is a deceptively simple process.

1. Set the goal(s) for the intranet. What do you want to accomplish?
2. Brainstorm. Sit down and just throw out ideas. Ideas for content, ideas for how to present the content, ideas on how to interact with your user. Don't think about whether the ideas are viable or silly; there is no judgment at the brainstorming step. Just ideas of all kinds.
3. Sort out your brainstorming ideas. Put the ones that are viable in one list, ones that are maybes in another list, and set aside the ideas that are not possible.
4. Now that you have a list of viable ideas, you have to sort them into categories. Once they are sorted into categories, the category is given a name, and those names become your navigational menu options.

The goal at the end of planning is to have an outline or flowchart of all that will be on the site. What will be at the top level (navigation menu options), on down to the last page on the site. This is your site's navigation.

Navigational design

Persistence and consistency are key. Don't change the way the navigation works or looks. The easiest type of navigation to design and use is persistent navigation. Persistent navigation is the navigational piece of the design that never changes significantly or moves. It is always in the same place on the screen. Commonly, you will find persistent navigation across the top of the screen and/or along the left side of the screen.

Keep it clean and simple

As sites grow, and they will grow, navigation can get more complicated, and making it clean and simple gets more complicated. There are several ways to keep large sites organized.

Use sub-navigation. What does this mean? It means you have a master navigational system, and then inside that navigational system are smaller navigational systems. For example, you can have Company Information, Products, and Customer Services as three main navigation options. Then, inside each of these, there is another navigational system. Let's say the company in question is a large conglomerate. It owns many companies. Then, the Company Information menu option would have its own navigational system going into each company the conglomerate owned, and so on.

As a possible option, when sites get this large, it can be good to think of each sub-navigation piece as its own site. For example, our conglomerate owns six other companies. The Company Information link would have a menu option for Companies. This link would simply go to a page listing each company's name and a link to that company's Web site.

Site maps are often a good idea. A site map is usually an HTML version of the flowchart you developed in the planning stage. A little fancied up to look nice, but essentially that is what it is. I like to offer users a site map as an alternative way to navigate a site. In my experience, they are very handy and successful. (Note: this is an supplement to your main navigational system. A site map should not be the primary navigational system.)

Take advantage of advanced Web technologies

As Web browser software matures, so does the technology you can use to manipulate the browser. If you are fortunate enough to know what browser your users will be using, and you know it is either Microsoft Internet Explorer 4.x or Netscape 4.x, then you have a greater flexibility in the Web technology you can employ to develop a navigational system.

More specifically, you can use JavaScript, Java, or DHTML to create an interactive navigational system. Of course, this is a bit more technical than most of what we have talked about and will take a better knowledge of Web technologies to use. I don't want to discourage you. You always want to challenge yourself, but don't bite off more than you can chew. If you aren't comfortable with the more advanced stuff yet, don't try it. Keep it as a second-generation idea for when you are ready to take your site to the next level. (And yes, there is always a next level.)

Using Fusion to insert JavaScript or Java applets

If you are ready to use the more advanced technologies, then NetObjects Fusion makes adding JavaScript or Java applets to your site very simple. If you don't use NetObjects Fusion, then you'd better be a programmer because writing JavaScript is programming, and it can become extremely complex since Internet Explorer and Netscape Navigator each want different things from a script. If you use NetObjects Fusion, it writes all of this for you. What it writes works perfectly on both major browsers, and you get the results you want without having to be a programmer or spending countless hours testing and debugging.

• If you want something like a rollover button, it can take a lot of complex JavaScript. But not in NetObjects Fusion. Fusion will create rollover buttons for you automatically.
• If you want complicated actions such as "when the visitor's mouse goes over this, then that slides in from the left," you can do all that without programming by using NetObjects Fusion's "Actions" features (which work kind of like PowerPoint—very point and click; no programming involved).
• If you want to insert custom scripts someone else has written for you into NetObjects Fusion, you can insert them anywhere you want, between <head> tags, within individual text or graphics, anywhere. Just right click on an object and choose "Object HTML," or right click on the page and choose "Master HTML" and insert the code. Where can you find JavaScripts? All over the place. There are thousands and thousands of JavaScripts on the Internet, ready for you to use. A good site to find scripts is www.scriptsearch.com. This site has all types of scripts and applets, not just JavaScript.
• Also, NetObjects has an add-on program called ScriptBuilder. This program allows you to create JavaScripts quickly and add them to your site. If you are familiar with scripting, this is an awesome tool.
• As for Java applets, these are a little more advanced to use and implement, but if you can find one already written, there isn't too large a learning curve to use it. In Fusion you can easily add an applet by using the Java Applet Tool. This tool allows you to use one of the many Java applets included with Fusion, or add one of your own. Again, Java applets are easy to find on the Internet; www.javaworld.com is a good place to start.

Taking the easy way out

I realize there is a lot of information so far in this article. Anyone new to the process of Web site development and management would be overwhelmed. Well, NetObjects Fusion makes it very easy for you to start off with a well-designed navigational system. With NetObjects, you can choose from more than 200 predefined SiteStyles. The 50 new Version 4 styles even include automatic rollover buttons!

SiteStyles are predefined Web site templates, of a sort, where all you have to do is plug in your content. Don't worry, if you find a SiteStyle that is almost right, you can tweak it to fit your needs. SiteStyles are a wonderful thing. The entire site is designed for you, and all you have to do is put in the content (not a small task), and plug in some company logos and colors, and you are done.

In terms of navigational ease, SiteStyles offer predefined persistent navigation in styles that will be familiar and easy to use for most current Web users, while also being easy to figure out for new Web users. You really can't lose by using them.

About the author

JD Shipengrover has been in the Intranet developing business for over four years, including building a worldwide Intranet for CompuServe Inc.'s Customer Services department, (A project on such a large scale it took 2 years to complete!) Currently, she consults at BMW Financial Services, designing several Intranets for their dealer networks. She also teaches Web Site Design at a Columbus State Community College and has a BA in Journalism.

Illustration: Metropolis by Rob Porazinski from www.artville.com