icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

According to the 2014 mobile usage statistics, the time an average US consumer spends on mobile has increased to two hours 42 minutes per day, as compared to the two hours and 38 minutes it was last year. Knowing this trend very well, we wrote an article on mobile landing page optimization tips. But optimizing the landing page is just the tip of the iceberg. In order to cater to increased mobile browsing, you must focus on organizing and structuring all your mobile content on websites and apps.

Today, we will give you useful tips to organize mobile content and also provide many real-world examples of websites and apps that give you an idea of how mobile content should be organized. But before we begin, let's take a quick look at the question that lingers in every mobile marketer's mind – Is a mobile app better than a mobile website?

In the Flurry study mentioned above, you will observe that most of people's time is spent using mobile apps – only a fraction is spent on mobile websites. Apps, however, are commonly used for games and social interactions.

Some websites also have apps, but do you think your users will sacrifice their limited phone memory for apps that contain information also found on your website? It really depends on your users' needs.

Regardless, you MUST organize mobile content on both mobile apps and websites to make all your users' lives a tad easier. So, the following guidelines are based on general best practices for organizing mobile content, and are applicable to both mobile websites and mobile apps.

Useful Guidelines for Organizing Mobile Structure And Content:

Generally, there are two major types of mobile content structure; one where content is valued over navigation and the other where navigation is valued over content. Depending on the preferences of your mobile niche you can apply either one of them, or both. Let's take a detailed look at both these types of mobile content structure.

1. Content Over Navigation

The organization of mobile content defines its user-experience. The focus should be on how your end-user utilizes their mobile devices, what their browsing behavior is like and what information they seek.

Navigation plays an important role in the information architecture of mobile apps and websites. Desktop sites have the liberty to give extensive navigational options to its users, but mobile sites and apps must use the simplest possible navigation. Learn the difference between mobile and desktop navigation.

Take, for example, a site like amazon.com.

Desktop Website Of AmazonAmazon's Desktop Website

With a myriad of navigational options to choose from on the drop-down menu on the side, it also has a top search option and a bottom category navigation option. All this is great for a user sitting in front of a large screen.

A mobile user, on the other hand, could be on the move or multi-tasking while browsing the amazon.com website. They may only have half an eye and one thumb interacting with the mobile screen. If all these navigational options available on desktop are regenerated on the mobile version, browsing mistakes are bound to happen, causing a poor user experience.

Thus, amazon has brilliantly simplified the navigation on their moible site, as shown below:

Simplified Amazon Mobile Site

The navigation at the top is limited to three options, Department, Wish List and Deals. The rest of the category navigation is down at the bottom of the page. In between the top and bottom navigation is content consisting of popular products that can be scrolled through horizontally.

In another scenario, sites like Facebook keep the content navigation experience similar on desktop and mobile. Only a couple of changes are observed on the mobile site. The sidebar navigation is hidden and can only be seen when you click the hamburger icon and there is a 'Check-in' button not found on desktop sites.

Look at the sample screenshot below:

Facebook Mobile Site With Ample Screen Space For Content

Some sites use the 'grid' icon to open a hidden menu instead of the hamburger one. See the screenshot below:

Grid Icon That Hides The Sidebar Menu

What you can learn from both of these examples is that navigation is minimized and the focus is on the content that the mobile user would be interested in. Users browsing your website on smartphones that are touch-activated prefer as few clicks as possible to look for content.

Sometimes, however, users are familiar with a site and know what they want. In this case the user does not want to waste time reading through content. For example, say a user wants to book a holiday package and has a specific budget in mind. Users like these are going to be exploring the navigation on your site.

Let's take a look at how to cater your site content to these kind of users in our next section, where navigation is valued over content.

2. Navigation Over Content

Say your user is trying to look for holiday packages with the best deals. Now, if you allow content to take precedence over navigation it may look like the thomascook.com site, as shown in the screenshot below:

Example Of Site Where Content Overtakes Navigation

The landing page gives a form to find flight schedules to specific destinations, which is not what our sample user is looking for. When you scroll further down popular holiday packages are listed. This content may or may not be useful, prompting people to navigate within the site for more options. The hamburger icon provides a list of menu items, but still the explorer has to go through multiple steps to find what they're looking for.

If ThomasCook had clearly classified the type of users that would visit their site before organizing their mobile site, the explorer type would not have to struggle to find the right content.

Now, look at the following example from a flight booking site called MakeMyTrip.com.

Example Of Site Where Navigation Takes Over Content

What you see in the screenshot is a brilliant minimization of navigation options. There is no long textual content displayed on the homepage but just three clear navigation options – flights, hotels and holidays. There is also the hamburger icon hiding the sidebar navigation. A user who is trying to find holiday packages that suit his/her budget can click the 'holidays' button to land on that page, the screenshot of which is shown below.

Holidays Page On The Sample Site

Again there is no content, but two options for the explorer to navigate further. There is a search option for choosing a holiday destination or a direct call-to-action button that let's the explorer speak to a customer executive for information. Both these options come in handy for different situations.

Say the user has a browsing limit and would rather call an executive to find out about packages. Or if they choose to browse further, they only have to enter one field of information, thus keeping the options straightforward and simple for a typical mobile user.

So, businesses who have both the know-what-they're-after type of users and the explorer type of users must consider adding simple navigation elements to take their users to the right information in the fewest possible clicks. Here navigation taking precedence over content seems like the best bet for mobile websites and apps.

Another crucial part of organizing mobile content is placing the menus in a way that facilitates easy navigation for your mobile site visitors. Whether you choose navigation over content or content over navigation, there are some best practices related to placing menus on your mobile site.

Say your website has a huge list of menus and both the know-what-they're-after type and the explorer type need to have a look at them. Where would the optimum location for a site menu be? Let's take a look at some examples.

Zappos is a popular American online shopping portal and it has both a mobile website and mobile app. When you look at the mobile website there are three main navigation tabs placed at the center of it. When you click on each tab, a list of options appear from the bottom of your phone menu.

Look at the two sample screenshots from Zappos below:

Zappos Navigation Menus Placed In the Center Of the Page

While bottom menus with check-in options can be thumb-friendly, having too many of them to scroll through can be frustrating.

Center Navigation Buttons Open A Menu From The Bottom Of The Zappo Mobile Webpage

The saving grace in this type of organization of mobile web content is the search bar on the top.

So, while the search bar caters well to the know-what-they're-after type of customer, the navigation menu seems overwhelming and not very user-friendly for the explorer type user.

Amazon.com, on the other hand, also gives a bottom menu for the site explorer. It is a nested doll menu type (learn more about mobile menu types) which gives you categories and nested sub-categories in an organized fashion.

Take a look at the screenshot of the bottom menu on amazon.com's mobile site, below:

Bottom Nested Doll Navigation Menu On Amazon

This type of menu placement facilitates a smartphone user to easily reach menu items with the hand that holds the phone.

Now let's talk about menus that are not at the top, bottom or center, but are hidden in the sidebar. These menus can be viewed only when you click on the hamburger or grid 'menu' icon.

Take a look at a sample screenshot below:

Example Of A Hidden Sidebar Menu

These menus are great when you want to focus more on the content. But the user must browse to search for the menu if they are not already familiar with the hamburger icon. A better idea might be to use a button that says 'menu' instead. Either way it is a good option for both the know-what-they're-after type and the explorer type of customers.

The only drawback here for users who are not accustomed to a side menu is that if the menu covers the entire screen, it will look like a new page. Out of habit, the user might click the back button on the browser thinking it will take them back to the homepage content, but instead it takes them to the previous URL that was browsed, causing you to lose that visitor. So, the best option is to make sure the sidebar menu only covers a part of the homepage screen when it's open, as shown in the screenshot above. These  examples of side bar navigation may give you inspiration for this type of menu placement on your brand's mobile presences.

Let's take an example of an app for Tumblr to learn another variation in menu placement.

Tumble App Homepage

In the screenshot above you'll see a navigation menu with absolutely no text. The lens icon is for exploring the site and the navigation menu is hidden within the icon on the bottom right corner which looks like a pencil. The navigational elements the pencil icon opens when clicked are shown below:

Menu Placement On Tumblr App

It might take your user some time to figure out the navigation on your app, but since they have installed it on their phone you don't have to worry about high bounce rates that happen on websites with out-of-the-box navigation systems.

In another scenario, apps like Instagram choose to give a simple bottom fixed-position navigation menu that can direct the user to home, explore, profile, news and the center button that turns on the camera. For an app like this, a menu placement of this sort suits perfectly.

Look at the screenshot below:

Bottom Fixed Position Navigation Bar On Instagram App

The menu shown above is a fixed-position navigation bar. Buttons are easy to access with your thumb when they're placed at the bottom. The only drawback here is that some phones have similar icons on buttons at the bottom of the phone screen. The user may click those buttons instead of the fixed-position menu on the app and be taken out of the app.

Instagram probably benefits from a fixed-position bottom navigation bar but in other cases a fixed-position bar on the top might be better.

Take a look at the Twitter screenshot below:

Fixed Position Navigation Bars On The Top Of Twitter App

Menu placement can be decided based on whether you want to focus more on the content or the navigation. Just make sure no two navigation menus offers the same content.

For instance, some sites may have a button on the top and the bottom of the website with the same menu items. Instead, you could keep a button on the top that says 'Menu' and clicking on that button takes you to the menu at the bottom of the website. In such cases always remember to add a 'back to the top' button at the bottom.

To conclude, let's quickly recap the points discussed above and make a list of important takeaways to remember and apply when organizing your mobile site content.

1. Classify Your Users

Decide what type of users come to your mobile site – the know-what-they're-after type or the explorer type. Accordingly, you must focus on content or navigation, and in some cases both, without confusing the user.

2. Remove Unnecessary Buttons With Similar Functions

Some menu items may be too similar to buttons present on popular touch smartphones. This may lead to errors in the browsing experience. For example, the bottom menu on Instagram as we discussed above. There is another button that is unnecessary which is seen on some websites, the back button. Most popular smartphones have the back option and in case of a mobile website there is a back option on the browser.

3. Do Not Add More Than Two Navigation Bars On Top

If the user is seeking content on your website or app, do not fill the top space of the website or app with unnecessary navigation bars or ads.

4. Focus On Users

Your mobile website or app organization should be defined by how people will use it on their smartphones.

5. Finger-Friendly

Include finger-friendly menu buttons.

6. Use Nested Doll Navigation (If Necessary)

Do not overwhelm the explorer type user with a long list of menu items. Use a nested doll structure instead.

7. Fixed-Position Navigation Bars

Do not use more than two fixed-position navigation bars. If you use a top or bottom fixed-position menu, make sure you use one of them but never both. This ensures there is a lot of screen space for the main content.

Basically, organizing mobile structure should be kept as simple as possible, on both your mobile site and app. We hope the pros and cons illustrated in the examples above help you decide what works best when organizing your site or app for mobile.


What type of mobile organization do you prefer for your mobile site or app? Please share your thoughts and experiences in the comments!