Writing web applications is a beautiful thing. Everyone who uses a computer understands a little about a web browser so they automatically have one less barrier to learning your new program. Plus, many people have their browser open so they don’t have to switch to a desktop application. However, there is one part of the learning curve that you cannot bypass. The user is still going to need to learn how to move around in your app. They still need to learn to use the menu(s) and navigation in your program.
Now, granted, people know how to navigate a web site by clicking contextual links and a menu is a menu, no matter where it is on the screen, but there is so much freedom in how each of these is implemented that we really need to pay close attention to the expectations of our users, or else we run the risk of making a very bad and lingering first impression.
This is a time when you really need to know your audience. For instance, my audience is quite often administrative or management personnel in a business environment, a fair percentage of whom are not very tech savvy. They know what they need to know about computers to get their jobs done or they may be quite proficient with their desktop of enterprise programs, but they are certainly not web design students at the local tech school or social media experts. Knowing this, I employ very obvious and fairly standard menus and navigation and try to offer as much context sensitive help as I can.
In desktop applications you generally find the menus at the top of the screen. Unless we plan to force a very short page height or provide alternative means of site-wide navigation, most web applications will use some form of side menu. Another exception that I have used a number of times is a tabbed form of navigation, appropriate when an app has various sections that users will use at random and often. A complex app or large web site might use both types of menus or provide a progress bar to show depth or steps in a process.
The pros, cons, and how-tos of menus I’ll leave for another time, but let’s touch on other navigation. Hyper-linking is important to people, especially when they are looking for certain certain things. They are important to first-time visitors who are following breadcrumbs, but also for return visitors who know what they are after. I have a unified theory of navigation that works for me. I’ve heard contrary opinions and have tried other ideas, but I keep coming back to this formula.
Three types of link:
1) Internal Hyper-link — the common link that does what you expect by taking you to another page when clicked. Always use a contrasting color to make it stand out, usually underline the link, always use a title so that both mouse hoverers and text readers know where the link goes. The link must make sense in the context and in its text; context in that it leads on to the next thought, and text meaning that the words in the link having meaning as a reference to the landing page or page section. It is also helpful to have the visited links somehow show that they have been visited. Very helpful for return visitors to web sites. However, don’t do this little trick with web apps that are used daily.
2) External Hyper-link — here I break with some of the current thinking. I believe that external links should be obviously different and that they should usually open in a new tab or page. I understand that most savvy surfers these days know how to click links in a way that will allow them to open in a new window, but I still like to cater to two other classes of people, namely the not-so-savvy (or forgetful) user who could get lost on another site and forget that they wanted to finish up on my site, and for the customer for whom I am creating the web site, who quite often is expecting that external links will not drive people away from their site.
That being said, I do not hard code this effect into external links. I use a little snippet of jQuery that will 1) restyle the link, 2) add a title that explains that the link goes off of the current site, and 3) causes the link to open in a new window. With this technique I have the ability to change the behavior site-wide by modifying a single line of code.
3) Expanded Info non-link — because there are times when some users need just a little extra information, help or guidance, I sparingly use little info spans. I again use jQuery to style little snippets of text with a dotted underline and a balloon filled with expanded text that will come up when the user hovers for a quarter of a second. It might be a word definition (like the word jQuery above) or a proper noun, or some concept that is not necessarily common to all users.
There is plenty of room for variation in these “rules”, but I don’t get too fancy unless the situation or customer warrants. No crazy hover effects, no bolding or italicizing of links… in other words, no distractions. Make navigation obvious and consistent and a large majority of your users will be pleased.