Designing for Mobile:

Information Architecture
How is mobile different?
The first thing we need to understand about mobile design
is that it’s different – and not just with regards to size. The
physicality and specifications of mobile devices impart
different design affordances and requirements. Because
mobile devices are lighter and more portable, we often
find it more convenient to use them. Consequently,
through this more regular use, we feel a unique,
emotional connection to them.

Physicality and specifications

Most mobile devices employ touch screens, where users
rely on gestures – in addition to simple interface elements
– to interact with them. Because of their smaller
dimensions, we sometimes expect the content structures
to be simpler and smaller. Also, because of their limited
bandwidth and connectivity, mobile devices require
designs to be optimized for loading time, with reduced
data requirements.
How, where and when
Because we have constant access to our mobile devices,
we tend to use them more frequently. They come with us
on the bus, walking down the street, or watching TV. We
often use them while “doing” something else. This means
we may use the device under difficult viewing
conditions, or among a variety of distractions.

How we behave and feel

Finally, we have different attitudes, behaviors and
priorities while using mobile devices. As part of their
Going Mobile 2012 study, User Experience Design
agency Foolproof found that these devices have given us a
new sense of freedom and control. In turn, some users feel
a very real affection for their mobile device. Foolproof
found that 63% of people felt lost if their smartphone was
not in easy reach. They described their mobile devices as
‘alive’ … an extension of their own body and personality

Because mobile devices have fundamentally changed user

expectations, it’s extremely important that we, as
designers, follow a user-centered design process to arrive
at our solutions. The only problem is that our traditional
best practices may not always apply.

How mobile affects designers

Mobile’s differences directly impact all parts of the user-
centred design process: from user research to the final
development and testing of the solution. The biggest parts
of the process it affects are our delivery methods and our
information architecture.

Mobile delivery methods

Unlike traditional websites, there are four popular mobile
delivery methods. Mobile users that choose to view
content in their browser are best served with either a
mobile-specific site – optimized for mobile devices – or a
responsive site – which re-orients/arranges itself for
mobile devices. Those who choose to install an
application on their phone either receive a native
app(lication) or a hybrid app. Native apps are self-
contained: every screen of the application is defined up
front. Hybrid apps offer a bit more flexibility, loading
 content from the web (as it’s viewed in a browser) but
providing users with an “app-like” interface (or chrome).

Each delivery method has different pros and cons. Choose

what’s right for you based on your project’s design
context. (In the following table, higher star values are
better)

Mobil Responsiv
Consideration Native Hybrid Comments
e e

Tailored to user A Mobile first approach can improve responsive

★★★ ★★ ★★★ ★★★
priorities design’s rating to three stars.

Responsive sites (and hybrid apps) are more

Content delivery ★★ ★★★ ★★ ★★★
easily indexed in search engines.

Native apps provide access to device features (e.g.

Functionality ★★ ★★ ★★★ ★★★ GPS, Camera), allowing more engaging
experiences.

Responsive design is easily viewed on any screen.

Compatibility ★★ ★★★ ★ ★ Mobile sites and applications are dependant on the
device for which they’re designed.

Dependent on if you are developing a whole site

from scratch. Responsive design incurs extra build
Development costs ★★ ★★★ ★ ★★
time, but not as much mobile + conventional
design.

Individual native apps require individual

Maintenance costs ★★ ★★★ ★ ★★ maintenance. However, responsive design results
in a single site that needs to be maintained.

Mobile Information Architecture

Mobile devices have their own set of Information
Architecture patterns, too. While the structure of a
responsive site may follow more “standard” patterns,
native apps, for example, often employ navigational
structures that are tab-based. Again, there’s no “right
“way to architect a mobile site or application. Instead,
let’s take a look at some of the most popular patterns:
Hierarchy, Hub & spoke, Nested doll, Tabbed view,
Bento box and Filtered view:
Hierarchy
The hierarchy pattern is a standard site structure with an
index page and a series of sub pages. If you are designing
a responsive site you may be restricted to this, however
introducing additional patterns could allow you to tailor
the experience for mobile.

Luke Wroblewski’s Mobile First approach helps us focus

on the important stuff first: features and user journeys that
will help us create great user experiences.

Good for
Organising complicated site structures that need to follow
a desktop site’s structure.

Watch for
Navigation. Multi-faceted navigation structures can
present a problem to people using small screens.
Hub & spoke
A hub and spoke pattern gives you a central index from
which users will navigate out. It’s the default pattern on
Apple’s iPhone. Users can’t navigate between spokes but
must return to the hub, instead. This has historically been
used on desktop where a workflow is restricted (generally
due to technical restrictions such as a form or purchasing
process) however this is becoming more prevalent within
the mobile landscape due to users being focused on one
task, as well as the form factor of the device, making a
global navigation more difficult to use.

Good for
Multi-functional tools, each with a distinct internal
navigation and purpose.

Watch for
Users that want to multi-task.

Nested doll
The nested doll pattern leads users in a linear fashion to
more detailed content. When users are in difficult
conditions this is a quick and easy method of navigation.
It also gives the user a strong sense of where they are in
the structure of the content due to the perception of
moving forward and then back.

Good for
Apps or sites with singular or closely related topics. This
can also be used as a sub section pattern inside other
parent patterns, such as the standard hierarchy pattern or
hub and spoke.

Watch for
Users won’t be able to quickly switch between sections so
consider whether this will be suitable, rather than a barrier
to exploring content.

Tabbed view
This is a pattern that regular app users will be familiar
with. It’s a collection of sections tied together by a toolbar
menu. This allows the user to quickly scan and understand
the complete functionality of the app when it’s first
opened.

Good for
Tools based apps with a similar theme. Multi-tasking.

Watch for
Complexity. This pattern is best suited to very simple
content structures.
Bento Box/Dashboard
The bento box or dashboard pattern brings more detailed
content directly to the index screen by using components
to display portions of related tools or content. This pattern
is more suited to tablet than mobile due to its complexity.
It can be really powerful as it allows the user to
comprehend key information at a glance, but does heavily
rely on having a well-designed interface with information
presented clearly.

Good for
Multi-functional tools and content-based tablet apps that
have a similar theme.

Watch for
The tablet screen gives you more space to utilize this
pattern well, however it becomes especially important to
understand how a user will interact with and between each
piece of content, to ensure that app is easy, efficient and
enjoyable to use.

Filtered view
Finally, a filtered view pattern allows the user to navigate
within a set of data by selecting filter options to create an
alternative view. Filtering, as well as using faceted search
methods, can be an excellent way to allow users to
explore content in a way that suits them.

Good for
Apps or sites with large quantities of content, such as
articles, images and videos. Can be a good basis for
magazine style apps or sites, or as a sub pattern within
another navigational pattern.

Watch for
Mobile. Filters and faceted search can be difficult to
display on a smaller screen due to their complexity.

Next steps
It’s been almost two decades since I first saw that large
brick shaped mobile phone, (and around twelve years
since I bought my first mobile). Now me, my dad and
almost everyone I know has a smart phone, where we
regularly, and frequently, interact, communicate and
manage our lives. Each year technology takes another
leap, and with that, it’s clear we need to change along
with it.

Developing a mobile and tablet friendly information

architecture is just the first step in creating a great mobile
experience. In Part 2 – Design Considerations I’ll
explain how the differences in the mobile context will
impact how you develop your final design solution.