Creating smart design for the mobile web is one thing, but along with smaller screens, various devices, and the fact that users have mobile web on the go, the way we organize content for the mobile web must be different from the traditional web as well.
Information architecture is the way to lay out, organize, and structure content in order for it to be consumed by our users in the most efficient way possible. Because mobile users often times use their mobile devices for purposes entirely different than one would use on a non-mobile device, we must use information architecture in an entirely different way when we create our mobile websites.
In this article we’ll go over the basics of why information architecture is different for mobile, and some best practices on how to create effective information architecture for this most modern era.
Context of the Mobile Web
What context do the majority of users use their mobile devices for when it comes to accessing the web? There can be several reasons, but many of these reasons are not in line with why many people sit down to access the web on a desktop or a stationary laptop computer. Knowing the context of why mobile users are using the web is the first step to understanding IA for the mobile web.
Quick Info
Mobile users are looking to gain quick information, often times essential information on the go. This is in contrast to traditional web use, in terms of a user looking for a longer, more in-depth experience. Quick information may be something like looking up movie showings and times, a map to the next bus stop, or the address of a physical location.
Even when mobile users are not using their mobile device to find quick information while in transit, they are often trying to look up information on a quick subject. Perhaps they want to look up a quick fact on a medical website like WebMD.com. It may be out of curiosity, need, or interest – either way, on a smaller mobile device, they will want to look up something specifically and quickly. A similar visit to the site via the non-mobile web may mean more casual browsing, less of a need for quick information, and a demand for more features.
Their Own Info
Another main context in which people use the mobile web is to access their own information quickly. The most common use of this context is probably a user wanting to look up bank information to quickly review their accounts, or make simple transactions and processes.
Other examples of this may be looking up the status of social networking sites, viewing the status of their progress with a particular app, or following up with a community they’re a part of , whether it be a blog, forum, or etc.
Best Practices
In order to ensure efficient information architecture for mobile users, there are several best practices and common practices that a designer/developer can abide by. Planning is the most important thing that can be done, and decisions not only lie in what order and layout the content will be shown, but also what content should be there at all.
Here are a few best practices and methods for going about planning the information architecture of a mobile website.
Create a Sitemap
Create a visual sitemap for you to go by, including everything from primary navigation down to all sub navigation. What content will go under which section? How will the user filter down to each piece of content that will be available?
Creating a sitemap will also help to decide which content should be included at all. First, make a list of what content should be included, and make sure there is a valid reason why. Does it match up to the context of why users will be using the mobile version of the website? If something doesn’t have a good place within the sitemap, reconsider the structure, or reconsider that content being used within the site.
Make Priority Content Easy to Find
On a standard website, an address and contact information may be in the footer. When we think about the mobile version of that same website, though, what comes to mind? Many users may go to the website on a mobile device in order to look up the physical location, phone number, or other contact information immediately. For your next mobile website, what would a mobile user likely be trying to get to?
It is important to take this information and make this content easy to get to. A user should not have to scroll down to the bottom of the page to find an address, but instead see it directly at the top or be provided with a quick link to the contact page, where it will be first priority. A map, address, and phone number should be given higher priority on a mobile website, as in contrast a contact form may be given higher priority on a non-mobile website.
In order to find priority content, use the popular technique of card sorting.
Vertical Lists and Navigation
This is a design trend as well, and a user-friendly approach to mobile website design. Having navigation in vertical list format is a good idea for usability, but also a great idea for information architecture. Just as breadcrumbs are organized for a standard website, why not make navigation buttons act in the same way breadcrumbs do, but rather narrowed down to specified content from screen to screen?
Content Layout
Just as navigation should be vertical, with a smaller screen so should content. Sidebars are great for wider screens, but once a certain threshold is reached, sidebars should drop below to leave more space for more essential information (the content) on top. On even smaller screens, is this additional side content even needed at all? As horizontal images, sections, or content areas become smaller, increase usability and focus for mobile users by beginning to stack content. Remove content as necessary.
As content gets longer on websites, pagination is often needed. For smaller screens that would be common among mobile devices, pagination design is surely something to consider. For mobile websites, it’s important to include both a mixture of easy to touch (easy to navigate with) buttons, such as large arrow icons for next and previous. It’s also important however to minimize the number of steps someone would need to take from page to page, especially in a mobile environment. So, keeping page numbers within pagination for a user to quickly click on can be beneficial too; perhaps consider minimizing the number of pages shown at one given time though to save space.
Ensure Readability
First and foremost, the content that will be displayed should be easily legible. Helping a user find a piece of content on a mobile device quickly is one thing, but once the user is there, it’s important to help them process the information. Ensure the text is big enough, often times it can be best practice to up the font size just a bit on smaller screens. Also, make sure there is enough whitespace to limit distraction and strain on the eyes for viewing such a small screen.
Search Functionality and Layout
Because of the context in which many users use the mobile web, having search functionality is needed. Because many users go onto a mobile site to do something or find something specifically and quickly, searching for it is oftentimes the best option. Always include a search function if it is a content heavy site, or any site that has more than, say, ten pages. Include it towards the top, and treat is as importantly as the primary navigation on a mobile site.
Search is used much more on a mobile site than it is on a standard website, where casual browsing is more common.
Conclusion
Information architecture is important to focus on for any type of website — mobile, web app, blog, or informational website. Plan effectively, and focus on information architecture for the mobile web just as much as any other type of website.
It can even be argued that information architecture is even more important for mobile users, as it’s such a different yet common new use of the web. Because of its limitations, at the same time new possibilities, and entirely new context, careful planning with how content is displayed, laid out, and organized on the mobile web is more important today than it ever has been.
