Landing : Athabascau University

Site Navigation Model: Revision

Last updated July 14, 2011 - 6:28pm by Dickson Wai Hei Lam

A good design social site navigation system is very important to the retention of site users. Getting people to sign up is hard enough. In the conversional signup flow (confirm personal info -> add your friends -> invite others -> getting started), only 14% made it through the entire process out of 100% people who visited the site started the signup process (http://bokardo.com/talks/designing-for-social-traction.pdf). I believe the site navigation system is perhaps the second thing your new users are going to care the most in the overall user experience of the site. The new users are going to explore the site and see what it actually offers before committing to using it long-term. A good navigation system helps the new users to understand the site structure beyond the initial home page. This article (http://www.webbizdesigns.com/web-architecture/website-navigation-models-social-networks) talks about the Website Navigation Models for Social networking Websites and I am going to summarize them and add my 2 cents here:

1.       Breadcrumb Trail – This is highly important for social sites with a great depth and breadth site structure. It really helps for the users to navigation in and out of a section of a site and gives hint of the site structure. Also helps to find familiar interesting content by clicking on a particular part of the breadcrumb trail, i.e, Site -> Friends -> User A -> Friends In Common -> User B.

2.       Horizontal Top Bar – This is the section where the high level functions of a social site will be displayed. Looking at LinkedIn for example. It has, Home, Profile, Contacts, Groups, Jobs, Inbox, Companies, News and More.

3.       Vertical Side Bar – Normally used a drill-down menu after the user navigates to a top level section of site via the top menu. This side bar should be dynamic. The information that was shown should be context sensitive and relevant to the current user.

4.       Paging – Paging helps to reduce the amount of information appears at any given time. Normally used in a data list that displays information more than the visible portion of the size of the page.

5.       Tabs – Use to further divide a section into subsection of a site’s feature. For example, if you navigate to “Profile” in LinkedIn, you will be presented with two tabs: Edit Profile and View Profile.

In additional to laying out an initiative UI with a predictable site structure, it is just as important to limit the number of clicks to access the information the visitors seek (http://www.rocketface.com/organize_website/website_navigation.html), preferably do so in only 2 clicks. In fact, many of the design principles apply to general website design and not just social sites. But they are many times more important if the intent is to grow and maintain the user base.

Dickson