Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
   
Services Clients About Omni FAQs Design tips Links and resources Request a quote
   
     Home > Design & UX tips > Information architecture tips > IA & Site Navigaton for Mobile Websites   
   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

Information Architecture and Site Navigation for Mobile Websites

How do you architect a mobile-friendly website? Most SEO professionals rely on the wrong tools...resulting in a confusing & cluttered mobile experience.

Mobile SEO - photo

Here is how to create an information architecture and navigation system that make content easy to find on mobile devices.

In This Article

Adapt to a narrow-and-deep architecture

Numerous studies have shown that content is easier to find when a website has a broad-and-shallow information architecture (IA).

With the mobile-first approach, the information architecture usually migrates to a narrow-and-deep format. Meaning? Now desirable content will often be more difficult for users to discover and locate.

Migrating to a narrow-and-deep information architecture
Types of website navigation from the book Information Architecture for the World Wide Web

Figure 1: Adapted from Information Architecture for the Web and Beyond by Peter Morville, Louis Rosenfeld, and Jorge Arango. Used with permission.

 

The biggest mistake I see when migrating to a narrow-and-deep IA is using the wrong tools. A/B and multivariate tests are useful for comparing design prototypes, making tweaks in landing page designs, and calculating best conversion rates.

However, when it comes to determining mobile information architecture, there are 3 tests that people should use instead:

  • Open card-sort test
  • Closed card-sort test
  • Tree test

There are great tutorials about card sorting on the OptimalWorkshop.com website. If you are new to these types of tests, I highly recommend reading Card Sorting 101: Your Guide to Creating and Running an Effective Card Sort.

Donna Spencer also wrote a fantastic book about card sorting called Card Sorting: Designing Usable Categories.

If you have never conducted these types of usability tests, hire an information architect. Even better, get a knowledgeable, experienced information architect as a mentor and learn how to do it yourself. The Information Architecture Institute has a great mentorship program.

A/B testing is the wrong tool for determining the information architecture of a mobile website. Use the right tool for the job.

Include supplemental and contextual navigation

According to the Nielsen Norman Group study, Mobile First is NOT Mobile Only, site navigation is used a lot more on mobile sites than desktop sites.

Meaning? Your mobile website must have a clear, consistent navigation system from users’ point of view.

Most websites should have 5 types of navigation:

  • Global
  • Local
  • Supplemental
  • Contextual
  • Utilities

According to the book Information Architecture for the Web and Beyond:

One key to success is simply recognizing that global, local, and contextual navigation elements exist together on most pages in websites and in many content-driven apps as well.

When integrated correctly, they can complement one another.

But when designed independently, the three systems can combine to monopolize a greate deal of screen real estate...overwhelm(ing) the user and drown(ing) out the content....

Therefore, I recommend that your mobile site's information architecture and navigation system are not relegated to different groups. Let the information architect to his or her job (wireframes are a typical deliverable). Then have the information architect work with your design and technical teams.

Two types of navigation that information architects typically curate are (a) supplemental navigation and (b) contextual navigation.

Supplemental navigation

Supplemental navigation includes items such as a (wayfinder) site map, a site index, and guides.

I like to think of a site map or site index as a form of error prevention. In the event users get lost on a mobile website, a site map or site index can help them reorient themselves. They can also make it easier for them to quickly locate desired content.

My favorite (in terms of formating) is the US Center For Disease Control's site index.

Guides can also help users quickly locate desired content. They also have the added benefit of being good targets for link development.

So don’t skip supplemental navigation on your mobile websites. They help users/searchers as well as search engines.

Contextual navigation

Contextual navigation becomes more important on mobile interfaces for (a) SEO and (b) mobile user experience.

I highly recommend curating contextual navigation as much as possible. Simply programming 3-7 related content types at the end of an article, for example, is not good enough. Search engines can easily detect programmable "Related Links." Additionally, the "Related Links" often do not contain both quantity AND quality of context.

One type of contextual navigation is called an inline text link. The practice of inline text linking (or embedded text linking) is placing hypertext on words or phrases within sentences and/or paragraphs on content contained in the architectural framework of a website.

Inline text links are usually placed on content AFTER content is written. According to the folks at User Interface Engineering (UIE), the inline text links between 7-12 words provide the most clear context and information scent.

Inline or embedded text links provide context & information scent
Length of contextual links graph

Figure 2: Inline contextual links can communicate context better than other types of navigation links. From User Interface Engineering. Used with permission.

Well-placed inline text links carry a lot of weight in SEO.

Therefore, I highly recommend creating multiple content templates:

  • Short content
  • Medium content
  • Long content

Too many inline text links on a short-content page makes it: (a) less readable, and (b) more prone to touch errors. If you have a page with long content, there is more room for inline text links without sacrificing readability.

From the book Information Architecture for the Web and Beyond:

Moderation is the primary rule of thumb for guiding the creation of these links. Used sparingly..., contextual links can complement the existing navigation systems by adding one more degree of flexibility.

Used in exess, they add clutter and confusion.

In other words, use inline text links wisely...and in moderation.

So in conclusion, use the right tools for the job. Card-sorting tests and tree tests are the best tools to determine a website's information architecture.

Learn how to add shortcuts, cross referencing, term rotation, upsells, cross-sells, and other types of contextual inks. Not only will your site be mobile friendly, it will also be search-engine friendly.

This article originally appeared in http://dmargaritov.com/mobile-first-index-tips/ and has been updated by the author.

References



IA

Information Architecture Services

Usability

Website Usability Services

UX design

Web
Design
Services


If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.

Top