Handling Complex Navigation for Large Responsive Websites

14 Oct 13, Kelly N. Wilson

A smooth and well-structured navigation system can make the worlds of a difference for any website. But if the website is large, for example an institutional website, the oodles of content often leads to much confusion as tiers of navigation are added on.

I’m going to focus on the method and concepts that can be applied to such a website with multiple layers of navigation, and how to organize them so that they behave both in a structured manner and responsively.

Work With the Client

This may seem obvious, but it is even more essential and more likely to be ignored with a large client. Learn about the project, collaborate with the client, research the audience and make sure the client is with you on the same page of the design process, especially the information architecture.

Research the Audience Well

While we are not suggesting you try to find their hobbies and about their personal relationships, going through the demographics, the kind of information the target audience generally looks for, etc. are very essential to guide you through the design process. For instance, for a hospital or healthcare center, you need to see the kinds of information people generally search for on health-related websites. This way, you will be able to decide on the priority content that needs to be served first.

There are many ways of doing this audience research. For example, you can have a few real users walk through the wireframe of the website; or you could consulting with experts from the client’s side as to which pages and information are more important than the rest.

Build an Information Hierarchy

Once you get to understand the relative importance of each layer of content and each page, you can start building a hierarchy of content based on their importance. It is important to group the content into sections and areas and integrate all the similar categories together in order to allow easier navigation for the user.

Stick to Fewer Parent Elements

The purpose of grouping the content is to further group them according to the parent elements which should be much fewer in number. These parent elements will become the key navigation tabs for the website. For topics that do not fit into the primary parent elements, a separate supporting menu can be made. After the navigation is streamlined, you can build it into your wireframe.

Real world users can then walk through the wireframe and help you decide for sure whether your information architecture is user-friendly.

The Interface Design

Once the basics are done, you are almost set for the actual website. You will show the mockup view on the mobile phone to your client, decide the style of navigation depending on the target audience (for instance, the hamburger style of navigation doesn’t suit older users of the website), see how you’d want to stack the navigation for the mobile screen, etc.

Remember that a complex navigation system needs to be simplified until it becomes very user-friendly. Make sure to get your client and real users involved to get the best out of the information architecture of your responsive website.


Leave a Reply