How To Build the Right Information Architecture for A Responsive Website

Submitted by Sara Parks on 04/16/2014 - 03:58:pm

You Need to Serve Your Mobile Users

No matter if it's B2B or B2C, your company has mobile users. These users deserve your attention, so you need to understand them before creating a mobile site or responsive site.

Ask Yourself These Questions First:

  • What are users looking for when they hit your desktop site? Use your analytics to determine their navigation path.
  • Why did they come to your site from a mobile device? They have an immediate, specific need that you need to figure out using your analytics.
  • What do you want those users to be doing on your mobile site? This helps you figure out what calls to action you need to focus on.
  • How can you make your goal easy for them to accomplish on the mobile version? Focus on the essential elements and hide everything else.
  • When are mobile users accessing your site? At home, on the go, etc. check out this article about the mobile use case.

Follow This Cycle:

With those answers, now you can plan your strategy. Remember that you don't want to limit your users' access to information just because they are on a smaller screen. Use tools to highlight necessary information and hide the other stuff (but don't eliminate).

  1. Build your information architecture to fit both the desktop and mobile versions of the site. Stack Information so that it fits on a mobile screen. Increased scrolling is not a bad thing because research shows users don't necessarily mind scrolling when browsing. Just make sure that action items are easy to find, like an address or phone number.

  2. Testing is essential. Don't assume that simply adding some extra menus will get you results, as you can see with the Red Robin example later. There are lots of ways to solve this because users are different in every situation, so the best way is to take some general advice and test it on your user base.

  3. Implement your design after you have tested it successfully with users. If you have done your research with the questions asked above, you should be on the right track. Keep in mind that this cycle is just that, a cycle. If your design doesn't test well, don't implement it but go back to the questions and work through the process again.

Applying the Strategy

I want to walk you through some examples. This should help illustrate the process. Keep in mind that the specific features I talk about are not the only options when creating a responsive site. There are other ways to implement the design, but I am merely focusing on the importance of knowing your users because that will drive the right design.

Red Robin is doing a great job by having a responsive site to serve mobile users. They recognize the need, yet their calls to action do not cater to a mobile user:

  1. Location (in green) is clear on the desktop but hidden in mobile site, where it is typically more important.
  2. The food menu (in red) is also clear on the desktop site but gets put into a menu toggle, making it harder to get at from a mobile user perspective who is likely on-the-go and doesn't have a lot of time to spend searching on their phone.
  3. Current offers (in blue) are displayed prominently on both versions ahead of food or location information. Red Robin could have improved this by doing more research about their mobile users.

 

Hubspot executed their responsive site well:

  1. Menu (in blue) changes between versions because the mobile user doesn't need this info front and center. Hubspot knew that their mobile users most likely needed to sign-in and check their accounts quickly or get some quick info about Hubspot so that stays in the same place with each version.

Our Experience

While we usually prefer to create a mobile specific site, there are good reasons to use responsive. If a company needs a stepping stone solution while they get their larger plan under way or as a way to direct users to a mobile app, like Red Robin, then this option fits that need.

With our recent work rebuilding the multi-site system for the City of Colorado Springs, we applied the same approach. Even though we built a mobile-specific site for them, we worked hard to understand the end-user perspective and tested every aspect before moving onto implementation.

eBook Download for "Complete Guide to Preparing for a Website Redesign"

 

Thinking about a redesign?

Download our free guide on redesigning your website today.

access your Free guide here