One Page Navigation

The navigation of most books is linear.  You start at the beginning and flip pages until you reach the end.  Perhaps reference books are slightly different, and (for those born in the 1980s) Choose Your Own Adventure books had a unique navigation that led the reader to choose their navigation based on the situation described in the book.  I’m at a loss as to whether a book has been written to be read in reverse.  Footnotes often change the navigation system slightly as well, as do glossaries and appendices.  In general, however, book navigation is straight forward.

One pagers, or single page sites, are equally straight forward, but the navigational techniques for one pagers is surprisingly more complex than it might seem.

There are four basic types of one pager navigation systems:

1. Horizontal

2. Vertical

3. No navigation

4. Experimental

Horizontal navigation systems are those in which the different sections of the page are shown horizontally, and (in the best cases) the user knows where they are based on a horizontal marking.  Horizontal navigation best practices include sticky navigation so that, for example, the about section of the single page is not confused with the contact section.  It’s not necessary to have sticky navigation, but it’s a big help.  These pages are similar in structure and “feel” to that of multi-page websites.  Here are some examples:

http://joelglovier.com/Hor1

Note that on Joel Glovier’s page, the menu bar is horizontal and it highlights the section of the page the user has scrolled to.

http://eyal.shahar.co.il/Hor2

Like Joel Glovier, Eyal Shahar uses a sticky navigation but here the horizontal navigation does not highlight the section.

Vertical navigation systems are those where the page order and different sections are shown vertically.  Often as the user scrolls the section of the page is highlighted.  This is an overwhelmingly popular style, although it is often poorly executed.  While horizontal navigation pages often mirror multi-page websites in their horizontal navigation bar, vertical one-pagers are a step back from the standard page.  Since scrolling is the main goal of many one-pagers, vertical navigation encourages scrolling.  Here are some examples:

http://peeltheorange.com/Vert1

This beautiful example of a one-pager includes a vertical navigation.  Note that on the side of the page we can see that we are clearly on section four.  Scrolling through each section causes the corresponding area to be highlighted.

http://grindspaces.com/Vert2

This classic style one pager is another example of vertical navigation.

Because one page websites are, in general, small, many have opted to eliminate navigation. Sites with no navigation are similar to books.  The entire page is on scroll, the user is often induced to scroll by seeing partial images and it is not important to know where on the page you are because the distance from top to bottom is small enough that confusion is unlikely.  A great example of this is Pintrest and the influx of pages with infinite scroll often confront a new navigation style that could be considered “no navigation”.  Here are some examples of portfolio pages:

http://janploch.de/NoNav1

&

http://www.natalielatinsky.com/NoNav2

In both of these portfolio pages, there are gallery pages but beyond the galleries there are no internal pages.  In both cases there is no navigation.  This is a common design for portfolios.  The user simply knows to scroll down to see more information, but doesn’t need to be automatically directed there.

Finally, there are one-pagers that try to break the mold.  For lack of a better term, I have labelled these as “experimental navigation” pages.  In some ways these pages might not even be considered one-pagers, but for all intents and purposes they are.  These pages are few and far between, but they represent what could be future trends so they are no less important in the one-pager genre.  Here are some examples:

http://marisapassos.com/#home

Exp1

This site has the “feel” of a vertical navigation page, but the information is not presented in a way that demands the user to scroll.  Instead the information is projected through smaller sub-headings.  The user is not sent to different pages, so this is a one-page design, but the navigation is a kind of hybrid.

http://www.jlern.comExp2

This page shows the use of an accordion style.  The accordion shows all the option on one page and then invites the reader to click where they’d like to view the information.  The user does not leave the main page, so it should be considered a one-pager, but the information is grouped in such a way that navigation is unique.

These four types of navigation represent different ways to group information on a single page.  There are likely to be more ways in the near future, especially the accordion form, but at the moment these four reign.  If you have other great examples of navigation on one-pagers, please leave them in the comments!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s