Intro
There is no right or wrong navigation model for a social networking website. Social networks usually combine more than one method in their website architecture, providing a choice for website users. Too much choice can risk causing confusion and cluttering your design. In this article, we shall guide you to choosing an intuitive and attractive website navigation model for your social network.
From their experiences elsewhere on the web, website users have engrained views on how your website navigation should work. Consider this when formulating your navigation model and reduce the friction involved in navigation.
Breadcrumb Trail
Breadcrumb trail navigation lets you know where you are in the hierarchy of a website. In the example below, you know you are inside News > World news > United States. This allows your website users to know where they are in a website, and provides a navigational shortcut to skip back.
- Know where you are at all times.
- Move back steps with minimal interruption.
Great for social networks when:
- You present structured data. Your schooling listings might present USA > Illinois > Colleges > Illinois College > Illinois College ’05 > Philip West. Users can easily navigate away from Philip West’s profile back to others who graduated in the same year (Illinois College ’05), or even back to “Colleges” if they wish to find a friend who attended another college.
- You want to increase page views by encouraging visitors to check out similar categorizations.
Horizontal Top Bar
Horizontal top bars are among the most common navigation models used on all websites, including social networking websites. Here is an example of a simple horizontal top bar used on Twitter.
While website users are comfortable browsing vertically, they are less comfortable browsing horizontally. Try to keep this is mind when formulating your navigation – make sure the number of links is known in advance. Adding friends, applications or switching on options should not add more links to a horizontal top bar unless this has been tested and creates a comfortable browsing experience.
- Users are comfortable using a horizontal top bar due to their widespread adoption.
- Do not include “dynamic” options that could cause the website to expand horizontally in the browser.
Great for social networks when:
- You want to create an easy and simple method of navigating to key tasks that users perform on your network.
Horizontal Top & Vertical Side Bar
A top and side bar method is deployed on most prominent social networks. Usually the top bar will be used for top-level navigation, while the side bar will allow users to access sub-categories. The side bar will be used for any conditional or dynamic links. It is easier to add additional links vertically, but you must be more careful when adding additional links horizontally. This is the method favored by Facebook.
- Use top bar for top-level navigation
- Use side bar for drilling down sub-categories and expanding navigation options.
Great for social networks when:
- You need to add “dynamic” links and expand navigation options.
- You want to leverage an approach that users will feel comfortable with through their experience on other social networking websites.
Horizontal Top Bar With Revealed Drop Downs
This has become an increasingly popular navigation method, which comes with some variations. Sometimes you click on a menu and a further sub-menu or link is revealed. In other occasions, simply hovering over the menu causes this to be revealed. One advantage of this method is space efficiency. The menu takes up little room and it can provide an intuitive method of navigating social networks with a deep structure.
While this has become an increasingly popular navigation method, it also has some serious downfalls. Not least, a lack of familiarity with the approach can cause confusion. For those with disabilities or poor IT literacy, it can cause difficulties. Another issue arises from users being unaware of what is below a particular menu option until they hover over it. In the example below, Myspace has deployed this method.
- This can be a great way to optimize space efficiency.
- There are some usability concerns with this approach.
Great for social networks when:
- You prefer an interface focused around a horizontal top bar, but your site is too big to accommodate all links within the main menu.
Paging
This is a method used by social networks where content spans several pages. News websites will sometimes use this method to break up larger articles. Social networks often use this approach to browse through profiles and present search result pages. Look at the example below, on Myspace.
This allows users to skip back and forward between results, and browse from start to finish easily. When your social network displays search results, this can be the most intuitive way to present them to your users.
- Paging is ideal for presenting search results.
- Allows users to skip back and forward easily.
Great for social networks when:
- You wish to structure large amounts of content in a list format, unsuitable to fit on one page.
- Let’s say a user can see a list that is sorted in date format and they want to find the oldest data in the list. They know they can go to the last page to quickly find what they are looking for.
Tabs
Tabs are usually a type of horizontal navigational bar, although they can be used in other settings too. They serve to make it easy for the user to know the section of a network they are on. Tabs have rapidly became a major feature of web browsers, so users are now increasingly comfortable with their use. In the example below, check out how Linkedin uses tabs.
- Tabs clearly distinguish the page or section of a social network a user is currently visiting.
- The popularity of using tabs within website browsers has made users more comfortable with the concept.
Great for social networks when:
- You want to create a clear distinction between different sections of your network. Users know they cannot be active on more than one tab at once.