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.

What Is Information Architecture?

Simply put, Information Architecture is the structure of all the information in
your appor website. When we put care into the arrangement of information,
we can make iteasier to understand and navigate. It’s similar to how a
writer starts with an outlinebefore they write a story, or how an architect
starts with a blueprint before they choosepaint colors.
In essence, any digital product, website, or app is simply a collection of
information.

Most websites and apps will need their content divided into parts, so it can
both, be understood by users in a quick manner, and be organized so the user
can find all the features the product has. Sometimes, this is done so smoothly
that users never stop to think about how the information is organized for them.

Why is Information Architecture Important?

If you want clean and focused design, you have to start with clean
and focusedInformation Architecture. It forces us to do the thinking, so
our users don’t have to.When we think about the Information Architecture
of an app, we’re forced to view it —not as a collection of pages and pixels
— but rather as a collection of abstract thoughts:nouns and verbs. Nothing
more.
We quickly see that an app or website is just information. The way we
piece thatinformation together determines how well people will be able to
navigate and consumeit.
It’s just like constructing a thought, or sentence, or idea. The arrangement
of the nounsand verbs in the sentence will determine how well the
message is received.
An app is the same thing. An app is just a collection of nouns and verbs: “stuff”
and“actions I can take on the stuff”. The nouns are the really important things.
They makeup the world of your app. The nouns in your app can be things like:

Songs
Folders
Users
Photos
 Restaurants
Money
Friends

The verbs, on the other hand, are the actions the user can take on those nouns.
Hereare some examples:

Share a photo
Review a restaurant
Send money
Add friends

So typically, in an app we can follow a certain pattern. A majority of the

screen(roughly 80%) is devoted to displaying the “nouns”, and a smaller portion is
devoted todisplaying the “verbs” — the available actions that the user can take on
those nouns.

 Keep categories to a minimum – again the simpler things are, the

better the UX on mobile. That doesn’t mean abandon useful data but do
think about the fact that people get lost more often the farther they drill
down for information. 5 levels is enough on the desktop, with mobile you
almost certainly want to aim for less.
 Keep content and categories together – no empty pages, no empty
links. If a user clicks on a navigation item, it must deliver some relevant
content too.
 Keep links to a sensible number too – don’t overwhelm the user with
dozens of links. Ideally, keep the number of links displayed to fewer than
10.
 Prioritize by popularity – “deck placement” is vital to controlling
the simplicity of the experience. The more popular something is within the
app or site; the more vital it is that you make it easy to get to. However, this
can have an impact on the success of new features or content; as it will be
placed lower in the deck and become harder to find. You may need to strike
a careful balance between the two.
 Label navigation items clearly and concisely – this applies to links as
well as menu options; this is very important on phones with very small
screens.
 Provide Clear Navigational Cues
Navigation on mobile is more complicated than it is for desktop. Make your
“breadcrumbs” explicit – if you use a back button, put a label on it to tell
the user where it takes them. Make sure you have a home page icon that is
clear and distinct and will take the person back to the beginning of their
interaction.

In general terms the way you design information architecture (IA) for the
mobile environment is very similar to the way that you design the IA for the
desktop. The approach you use is near identical in fact but there are some
important things to bear in mind when you do so:

 Deliver what’s important on the mobile platform – that means you

should focus on what’s important to the user when they’re using a
smartphone. That doesn’t mean that your users will necessarily be using
your app when they’re on the move or on the street – you need to research
the way that they will use the app. That, in turn, lets you focus on the
content that’s of value to the user and cut down the volume of data that you
present on mobile.
 Content should be focused on mobile – that’s smaller, simpler and
easier to handle content than on the desktop. The limit of screen real estate
makes large volumes of content more confusing on mobile than on a larger
monitor.
 Navigation should be simple – that means limiting the number of
menu options and keeping things focused on what’s important to the user.

Organization systems
The organizational structure is the act of making sense of your content. This is when you mark the
connection between different pieces of information, and try to come up with a framework that helps
the user understand all those connections among all the information your product has.

Once the framework has been implemented, it makes it easier for the user to foresee where certain
information will be as there is a logic to the distribution of all the content – a classic aspect of any
usability test. In their book, Morville and Rosenfeld set out three different frames you can use on your
information architecture.

Over the past few years, Mobile Information Architecture patterns have been
evolved and based on many trial and error, industry have adopted few popular
patterns; which are: Tabbed, Hierarchy, Hub & Spoke, Nested doll, Bento box,
Filtered view etc.
General rule of thumb of using these variations is as follows:
o Hierarchy is good for Organising complicated site structures that need to be close

to standard website’s structure. Hierarchical structures Also known as tree

structures, this would mean using a trickle down-effect, in which you use broad
categories at the top, and more specific and smaller subcategories the user can
navigate through. This visual hierarchy works well to convey the importance of
different pieces of information, as it displays them in a ladder of relevance.

o Hub and Spoke is good for Multi-functional tools, each with a different segment,
navigation and purpose.
o Nested Doll is 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.
o Tabbed view is good for Tools based apps with a similar theme.
o Bento box is good for Multi-functional tools and content-based tablet apps that
have a similar theme.
o Filtered view is 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.

As we live in Smartphone era and Mobile apps and Mobile websites are overtaking
conventional software and websites, understanding how the information and
navigation flows in Mobile application scenarios are becoming more and more
crucial.
As designers, developers, and UX experts put their efforts in to creating successful
and better Mobile applications or Mobile websites, they face the following
challenges:
o What will be the right interface (responsive design, adaptive design, native app,
etc.)?
o How do I design the better navigation?
o How do I maximize the use of screen real estate?
o What type of patterns and screen elements shall I use?
o How do I build prototype and conduct the usability test?
o What type of UI design and user experience approach shall I adopt?
The first two questions concern the structuring and labeling of content, which is
basically the foundation of Information Architecture. Then it gets translated into
the site map and process map diagrams.
The Information Architect accumulates knowledge from the discovery period to
define what the primary objectives are and how it will achieve those. Information
Architect also works with other team members like designers, business analysts
and developers to gain other insights and develop personas.
Next step for an Information Architect is to create the architecture of the site or
app. It is done by means of creating site/ app maps, flow diagrams, wireframes etc.,
to provide an in-depth understanding how the app/site will work from usability
perspective. IAs are required to take different perspectives and contexts into
account such as: users, locations, time, situation, business, technological
constraints, screen constraints, legal implications etc.
Mobile information architecture is all about simplification and elimination;
grouping content and placing them by context; taking into account the uncertain
connection speed and large variety of device and OS features. And of course rapid
changes in the industry. Its’ all about grouping and arranging content and tasks into
a logical flow and help users to easily find information and complete certain tasks.
These tasks could be navigation, reading content, paying bills, signing up, search
etc.
Also mobile use is contextual. We use them while walking, riding bus or car, while
waiting, at the airport, hospital; virtually everywhere. So it is very important for
the information architecture to be relevant depending on the location, time and type
of stuff user is trying to do based on where and when.
If we start with navigation, then it should be easy to learn and use, consistent,
should provide feedback, minimize clicks and maximize results, easy to tap,
properly labeled, should have nice and pleasing transitions, grouped logically by
importance etc.
Navigation should also help user to find key content and perform key tasks easily
and fast. Incorporating navigational cues also help users by giving them a sense of
location within the mobile experience. For example, back button can always bring
user back to Home Screen or navigational hubs. Also make sure that tappable
regions are not too small. User should be able to use their fingertips to precisely
tap and select the specific navigational items.
Information Architecture should be able to impress and engage users with your
application. If it is complicated and confusing, users won’t adapt it.
Once Information Architecture is properly in place, rest of the things such as
Visual Design, System Architecture, Development and Usability Testing can
begin.
When it comes to the tools, IA is more like an analytical and mental job than
something that you can do using just tools. However, tools can help to create site
maps, process maps and wireframes. I also use sticky notes and pen and paper to
draw and note down items for further processing.
When it comes to Mobile Delivery methods, we can think of three key methods:
Mobile Website, Native App and 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).
Over the past few years, Mobile Information Architecture patterns have been
evolved and based on many trial and error, industry have adopted few popular
patterns; which are: Tabbed, Hierarchy, Hub & Spoke, Nested doll, Bento box,
Filtered view etc.
General rule of thumb of using these variations is as follows:
o Hierarchy is good for Organising complicated site structures that need to be close
to standard website’s structure.
o Hub and Spoke is good for Multi-functional tools, each with a different segment,
navigation and purpose. 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.
o Nested Doll is 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. 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.
o Tabbed view is good for Tools based apps with a similar theme. 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.
o Bento box is good for Multi-functional tools and content-based tablet apps that
have a similar theme. 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.
o Filtered view is 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. 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.

Clickstream data are a detailed log of how participants navigate through the Web site
during a task. The log typically includes the pages visited, time spent on each page, how
they arrived on the page, and where they went next. A virtual trail that a user leaves behind
while surfing the Internet. A clickstream is a record of a user's activity on the Internet, including every Web site
and every page of every Web site that the user visits, how long the user was on a page or site, in what order the
pages were visited, any newsgroups that the user participates in and even the e-mail addresses of mail that the
user sends and receives. Both ISPs and individual Web sites are capable of tracking a user's clickstream.
Clickstream data is becoming increasingly valuable to Internet marketers and advertisers.

Wireframing is a way to design a website service at the structural level. A

wireframe is commonly used to lay out content and functionality on a page
which takes into account user needs and user journeys. Wireframes are
used early in the development process to establish the basic structure of a
page before visual design and content is added. Wireframes serve multiple
purposes by helping to: Connect the site's information architecture to its visual
design by showing paths between pages. Clarify consistent ways for displaying
particular types of information on the user interface. Determine intended
functionality in the interface. A wireframe is a visual 2D model of a 3D object.
Within website design, it is a basic, visual guide representing the layout or skeletal
framework of a web interface. ... Designers use wireframes for mobile sites,
computer applications, and other screen-based products that involve human-
computer interaction (HCI).

When it comes to the tools, IA is more like an analytical and mental job than
something that you can do using just tools. However, tools can help to create site
maps, process maps and wireframes. I also use sticky notes and pen and paper to
draw and note down items for further processing.
There are other factors which Information Architects should keep in mind
(however those are more relevant while doing the visual design and defining the
transitions and interactions) such as device dimensions, device density or
resolution, platform limitations, native standards, dimension of each tappable area,
gestures, transition patterns etc.