Type as navigation

My selfie

James Turner,

Tags: Typography

Like the captain of a ship, the reader of a webpage needs some help to figure out where she is, where she᾿s been and where she᾿s going next, along with the tools to get there. For me at least, that᾿s what navigation means. In this, my second blog post about A List Apart, I look at best practice for navigation, I reflect on how ALA does it, and I see what tips, tricks, dos and don᾿ts I can glean.

Skip to navigation

Top Tips for Navigation

For this post, I᾿ve consulted a number of sources for advice on building in clear navigation:

In the sections that follow, I᾿ll summarise the main points. Many of them are common sense, but there are a few gems hidden away. I divide them into four general sections: user expectations, traceability, accessibility and content support.

Skip to navigation

User Expectations

With the internet being around for 20 years or so, we as users have come to expect websites to behave in certain ways. Familiar patterns include a horizontal menu near the top of the page and/or a vertical menu down the left-hand side, links that are styled in a particular way (blue, underlined, purple for visited links), and so on. Newer innovations, such as the hamburger menu, are still gaining traction. Here are some pointers from the above sources:

Skip to navigation

Traceability

Traceability means that a reader should be able to see from the site᾿s navigation menus and content where she is, where she᾿s been and what᾿s coming next. Here are some guidelines from the info sources above:

Skip to navigation

Accessibility

As with the wider meaning of accessibility in web design, here I᾿m thinking about navigation that works for all users, regardless of device, viewport width or browser, and for users with all kinds of needs due to visual, auditory, physical, speech, cognitive and neurological disabilities (see Introduction to web accessibility for more info). Here᾿s the lowdown:

Skip to navigation

Content Support

The internet is constantly changing, and our navigation tools must be built to cope with change. That᾿s what I mean by content support. The advice I found for this is pretty common sense:

Skip to navigation

Navigation on A List Apart

So, now I want to have a look at ALA and find out to what extent its navigation system follows the above guidelines.

Hamburger is on the menu

At small screen widths (below 600px), the main navigation bar at the top of the page condenses into a pretty hamburger menu. I think this is appropriate for this screen size, as it should only be mobile users that see it. I tried using it with the keyboard only, and although I can open the menu, I can᾿t tab through the options, so ALA loses points for that.

The triple lines of the hamburger menu stick to the top of the screen. When clicked, they reveal the main menu items: home, articles, columns, blog, topics, and write for us.
Figure 1: ALA᾿s hamburger menu
Skip to navigation

Horizontal nav bar

Above 600px, the main menu jumps into a phone booth, does a lightning-quick costume change, and steps out in the guise of a horizontal nav bar. The type is very pretty, the slightly transparent background hints interestingly at the image underneath, and most importantly it behaves itself for keyboard users. A big improvement on its nerdy alter ego!

A horiztonal menu which sticks to the top of the screen and includes the same main menu items as above
Figure 2: The main menu in its horizontal navigation bar guise.
Skip to navigation

Best footer forward

The footer includes a secondary menu intended for those who are interested in A List Apart itself rather than its excellent content, such as contributors and sponsors. The simple menu behaves at lower screen widths, wrapping unobtrusively onto the next line when the width gets too small. There᾿s no attempt to make it look pretty because it᾿ll probably be overlooked by the majority of readers.

A horizontal menu with six items, heavy black text on a grey background
Figure 3: The secondary menu appears as simple black text on a grey background.
Skip to navigation

We have issues

As far as I can tell, ALA publishes two new articles once every two weeks, and groups these two articles into an ‘issue’. It᾿s very easy to navigate to the issue contents page with this convenient link. At lower browser widths, the link appears above the article title (left), but over 600px, it changes into a funky rosette and moves to the bottom corner of the main illustration (right).

The issue link at lower browser widths on the left, and higher widths on the right
Figure 4: From the narrow-width ugly duckling (left), the ‘in this issue’ link changes into a beautiful swan, figuratively speaking (right).
Skip to navigation

In other news

Another way to navigate to each article᾿s sibling is to click on the ᾿Also in issue no 406᾿ link that appears towards the end. This is a good example of having more than one way to navigate your site. It᾿s position is also quite clever, pre-empting the reader᾿s desire to read more when they get to the end of the article.

The link to the article's sibling appears in a grey box, which is slightly exdented from the main body
Figure 5: Another way to navigate the site᾿s content
Skip to navigation

The master index

The final important way to navigate the site is to click on the ‘topics’ link in the main menu. This takes you to a page of tags grouped into superordinate categories and accompanied by the number of articles on the site that contain each tag. I think a master index like this is important for a site that publishes lots of content (100 articles a year in ALA᾿s case). The clever illustrations and descriptions of each category are also great ways for the reader to find what she᾿s looking for.

Each category heading is followed by a witty illustration, a paragraph describing what the category contains, and a short list of links, each with the number of associated articles
Figure 6: ALA᾿s master index
Skip to navigation

The Verdict on ALA

So, how does ALA measure up to the four criteria above? First of all, in terms of user expectations, I think the site does pretty well. The main navigation is in the most obvious possible place, and the links contained therein are ones that a general reader is most likely to need. The navigation is consistent across the whole site, including some of the more obscure admin pages (the style guide, for example, has exactly the same navigation menu as the lead article). Less important links—for example, to articles in the same issue—are sprinkled helpfully throughout each page, and although the styling of some of them is not very traditional, I᾿d say it᾿s OK because there are other, more obvious ways to get there. Lastly, links don᾿t really indicate whether they take you away from the site.

In terms of traceability, the site has many examples of good practice. The main menu at the top and secondary menu in the footer do a pretty good job of reflecting the way content is structured on the site. In the main menu, the currently selected link receives a heavy border, which helps readers to locate where they are. Each article᾿s introduction is very similar to the teaser text which appears on other navigation-oriented pages, giving all-important consistency. One thing that᾿s missing is a colour change, or other visual indication, on links that the reader has previously visited.

Skip to navigation

ALA seems to be an acceptably accessible website. Links are clickable, tappable and tabbable—when the screen size is large enough. The site is fully responsive, and I᾿d imagine it᾿s been tested on a range of devices. The website has a fairly flat structure, and any submenus are kept appropriately away from the main navigation. The main menu is not sticky, but it can be accessed via a fairly unobtrusive scroll or swipe to the top of the page. Links to related content are sprinkled judiciously throughout each article. Finally, off-canvas navigation is employed for small screen sizes; I don᾿t have any way to test how accessible the site really is, but I᾿ll assume it᾿s within acceptable tolerances. Also, links within the body copy have only one feature to distinguish them, colour, which isn᾿t great news for users with poor eyesight.

Finally, ALA᾿s logical navigation structure is designed to accommodate new content on a rolling basis. When new content is added, users instantly know about it, as the landing page is the issue contents page.

All in all, I᾿d say that ALA is an excellent example of a navigation system that works. It᾿s clear, consistent, and allows readers to get to the content they need with minimum fuss. I᾿m not completely convinced by the off-canvas menu at small screen sizes; it seems like a design indulgence rather than a necessity. However, ALA is run by some of the most influential people in the world of web design, so I᾿ll give them the benefit of the doubt!

Skip to navigation

Conclusion

For me, this has been an important exploration of the ingredients of a good navigation framework. Here are some of the lessons I᾿ve learnt:

Choosing the right typography for a web site is probably one of the most important steps that a designer has to make, and the navigation system is a crucial part of that decision. Hopefully, from now on my websites will all have perfect navigation.

Skip to navigation