This document discusses information architecture for mobile devices. It covers topics like a brief history of mobile devices, the mobile ecosystem, types of mobile applications, and mobile design. It defines information architecture and discusses how it differs for mobile, including keeping designs simple, using site maps, clickstreams, wireframes, and prototypes to test designs. Specific tips for mobile include limiting mistakes in site maps and using content to confirm user paths. The goals are to organize content effectively and allow intuitive interaction on smaller mobile screens.

1. INTERFACE DESIGN
FOR
MOBILE DEVICES
Courtesy:
1. Mobile Design and Development, Brian Fling, O’Reilly Publications
2. Ivano Malavolta, Assistant Professor @ Vrije Universiteit Amsterdam

2. Topics covered :
1. Brief History of Mobile (Chapter - 1)
2. Mobility Ecosystem (Chapter - 2)
3. Types of Mobile Applications (Chapter - 6)
4. Mobile Information Architecture (Chapter - 7)
5. Mobile Design (Chapter - 8 )
6. Mobile 2.0 (Chapter -10 )

3. 4. What is Information Architecture ?
● The structural design of shared information environments
● The combination of organizations, labeling, search, and
navigation systems within websites and intranets
● The art and science of shaping information products and
experiences to support usability and findability
● An emerging discipline and community of practice focused on
bringing principles of design and architecture to the digital
landscape

4. information architecture - as an umbrella to describe unique disciplines
● Information architecture - The organization of data within an informational
space.
● Interaction design - The design of how the user can participate with the
information present, either in a direct or indirect way, meaning how the user will
interact with the website of application to create a more meaningful experience
and accomplish her goals.
● Information design - The visual layout of information or how the user will
assess meaning and direction given the information presented to him.
● Navigation design
● The words used to describe information spaces; the labels or triggers used to
tell the users what something is and to establish the expectation of what they
will find.
● Interface design - The design of the visual paradigms used to create action or

8. 4. Mobile Information Architecture
● Keep it Simple
○ Support your defined goals
○ Clear, Simple Labels
● Site Maps
● ClickStreams
● WireFrames
● Prototypes

9. 1. Site Maps
○ A classic information architecture
deliverable.
○ They visually represent the
relationship of content to other
content and provide a map for how the
user will travel through the
informational space
○ Mobile site maps aren’t that dissimilar
from site maps we might use on the
Web. But, there are a few tips specific
to mobile that we want to consider.
4. Mobile Information Architecture

10. 1. Site Maps
○ Mobile site maps aren’t that dissimilar from
site maps .
○ there are a few tips specific to mobile
that we want to consider.
i. Limit opportunities for mistakes
ii. Confirm the path by teasing content

11. 1. Site Maps
○ Limit opportunities for mistakes
○ Eg : An example of a bad mobile
information architecture that was
designed with desktop users in
mind rather than mobile users

12. 1. Site Maps
○ Confirm the path by teasing content
○ Eg : Teasing content to confirm the
user’s expectations of the content
within

13. 2. Clickstreams
○ used for
i. showing the behavior on websites,
ii. displaying the order in which users travel through a site’s
information architecture,
○ usually based on data gathered from server logs.
○ usually historical, used to see the flaws in your
information architecture,
○ typically using heat-mapping or simple percentages to
show where your users are going.
4. Mobile Information Architecture

14. An example
clickstream
for an iPhone
web
application

15. An example
process flow
diagram

16. 4. Mobile Information Architecture
3. WireFrames
○ The next information architecture tool
○ a way to lay out information on the page, referred to as
information design.
○ Site maps → how our content is organized in our
informational space
○ Wireframes → how the user will directly interact with it.
Wireframes are like the peanut butter to the site map jelly in
our information architecture sandwich.
○ serve to make our information space tangible and useful.

17. An example of an
iPhone web
application
wireframe, intended
to be low fidelity to
prevent
confusion of visual
design concepts
with information
design concepts

18. 4. Mobile Information Architecture
4. Prototyping
○ wireframes lack the capability to communicate more
complex, often in-place, interactions of mobile
experiences. This is where prototypes come in.
○ Types of Prototypes
i. Paper Prototype
ii. Context Prototype
iii. HTML Prototypes

19. A paper
prototype, where
the interaction is
nothing more than
drawings on note
cards

20. An example of a
context prototype,
or taking images
loaded onto a
device and testing
them in the mobile
context

21. An XHTML
prototype that you
can actually interact
with on real mobile
devices

22. Summary
Different Information Architecture for Different Devices