Vidyavardhaka College of Engineering, Mysuru

Autonomous Institute, Affiliated to VTU

Accredited by NBA | NAAC with ‘A’ Grade

MODULE 3
BUILDING THE INFORMATION
ARCHITECTURE
Anjali R
7 SEM
th
Assistant Professor
Dept. of CSE (AI & ML)
Our Vision: “VVCE shall be a leading Institution in engineering and management education enabling individuals for significant contribution to the society”

07/02/2024 1
 Information Architecture

• Information architecture (IA) is, like a blueprint, a visual representation of the

product’s infrastructure, features, and hierarchy.
• The level of detail is up to the designer, so IA may also include navigation,
application functions and behaviours, content, and flows.
• It involves blueprinting the experience in the form of wireframes, sitemaps,
annotations, specifications and illustrations.
 Information Architecture
Wireframes - a two-dimensional illustration of a page's interface that
specifically focuses on space allocation and prioritization of content,
functionalities available, and intended behaviours.
 Information Architecture
Sitemaps - a file where you provide information about the pages,
videos, and other files on your site, and the relationships between them.
 Information Architecture
Annotations - a separate layer on top of a wireframe, used to clarify
concepts and explain ideas when the designer isn't in the same room as
the stakeholders.
 Information Architecture
Specifications - a document that describes what most of the elements on
designs do and how they behave.
Information
Architecture

Illustrations - a visual interpretation of a

particular concept, text, or process.
 Benefits of Good Information Architecture
• Usability
• Efficiency in the UX design process
• Cost to maintain the experience
• Satisfaction
Creating a Sitemap as the Framework of your
experience
• A sitemap is a planning tool that presents a list of website pages,
typically organized in a hierarchical fashion, that are accessible
to users.
• Site mapping is a useful process for designers and UX professionals to
improve website navigation, understand the scope of work, and avoid
missing out on critical parts of a website’s architecture.
 Assessing your content
• Primary content – Content that must be highlighted persistently and
consistently.
• Secondary content – plays a supporting role in user’s journey in
making decisions
• Tertiary and contextual content – It can be background company
information, legal disclaimers.
Example
Primary Pages
Example
Secondary Pages
 Good
Sitemaps

A good sitemap represents all key pages of the site and structures them
in a way that is clear to the user and doesn’t feel cluttered.
 Bad
Sitemaps

The site map presented above is rearranged in a way that feels cluttered
(it has 13 pages instead of nine) and at the same time, it’s not complete
and some parts of the site are not mentioned.
 Creating a sample browse path
It requires taking a user’s journey through one of the primary content areas and
identify
• Sample content
• Page type
• User mode
 Creating a
sample
browse path
Creating a sample browse path

Sample content: The user

Browse path: browsing Content depth: Site looks
is exploring the range of
through four levels of site to be 4 level deep in
content within the content
below home page. example seen above
category.

Page type/template: Helps

User modes: How user
to identify types of pages
team may be navigating
that will help support user
through this journey.
at each step.
 Templates versus pages
Templates: consistent underlying structure for all the pages within an
experience.
Template development process involves,
1. Wireframe based on page type with inputs from a content strategist on
which type of content reside within it.
2. Visual designer creates a comp off the wireframe
3. Technology team ensures for building and supporting content management
system.
4. Rules are created for which content are served up within it.
Components
of the page
template
Home page template: Browse and scan Article template: Consuming
 Modular
design system
 Template inventory
• Home page
• Section(Landing) page – Level1
• Subsection page – Level2 & 3
• Article page/product page – Level 4 or 5
• Search listing – Level 1
 Constructing a blueprint with wireframes
Wireframe is a schematic representation of a page intended to
illustrate page contents, functionality and features.
It focuses on,
• The kinds of information and content displayed
• The range of functions available
• The relative priorities and hierarchy of the page content
• The rules for displaying certain kinds of information, in the form of
annotations.

Popular tools: Axure, Visio, InDesign and OmniGraffle.

 Examining components of a wireframe
• Navigation and masthead
• Branding elements and company logo
• Content modules
• Search boxes, User login areas and other utilities
Example

• Masthead
• Primary navigation
• Products section page
• Below the fold content
• footer
Audience for Clients
Wireframes
Developers

Visual designers

Copywriters

Future self
 Annotating your Wireframes
• Wireframe provide a bridge between the UX designer and the
technology developer.
• Hence, even a basic functionality should be documented and defined
within the wireframing process.
• They are simply footnotes and callouts on the wireframes defining
how the experience will react and behave for the users.
• They are located on the right of wireframe and numbered
numerically.
Annotating your Wireframes
Functions of Annotations
• Identify any interactive functionality.
• Define any technology dependencies
on underlying systems.
• Provide a rationale for design
decisions.
• Call out variables that may affect key
modules.
• Provide needed contextual information
for any of the key template
components that remain abstract on
the wireframe.
Maintaining sitemaps and wireframes
• With changes in content, document must
be kept up to date.
• Maintain the document over n continuous
changes.
Wireframe Navigation
• Navigation falls under primary, secondary, tertiary and footer areas.
• Create a set of sample paths based on the experience such that it
requires fewest number of clicks.
Limitations of Wireframing
Strength Weakness
Convey sample page contents in form of modules Cannot accurately convey all actual content
Illustrate hierarchy of page elements No visual representation
Define key functional and technical requirements Cannot define every requirement
Give a sense of interaction of experience Cannot precisely convey the interactivity and
response.
Identify problems in usability like confused navigation Cannot foresee all the problems, must be tested
or information overload. before taking live.
Be created quickly and easily Cannot be annotated and maintained without a level
of commitment.
Class Activity

Case Study Question: Case Study Question:

You're tasked with designing the sign-up screen for a weather app. The You are tasked with designing the main screen of a note-taking app.
goal is to make it easy for users to quickly create an account and start The goal is to create an intuitive interface for users to easily create
using the app's personalized features. and view their notes.
Requirements: Requirements:
1.Sign-up Screen: 1.Main Screen:
1. Design a clean and straightforward screen for users to sign
up. 1. Design a screen that allows users to view and organize
their notes.
2. Collect essential information: username, email, and password.
2. Include a button for creating a new note.
3. Include a "Sign Up" button to complete the registration
process. 3. Each note should display a title and a short preview.
Task: Task:
Create a wireframe for the "Sign-up Screen" that focuses on simplicity Create a wireframe for the "Main Screen" of the note-taking app.
and ease of use. Consider the placement of input fields, labels, and the Focus on simplicity and efficiency in organizing and accessing notes.
overall visual hierarchy. Provide brief annotations or notes explaining Provide brief annotations or notes explaining your design choices to
your design choices for a seamless user sign-up experience. enhance the user experience for note creation and organization.
Changing Trends in UX
Changing Trends in UX
Designing for Mobile Phones
Common
Characteristics
for Usability
1. Mobility
2. Phone functionality
3. Smaller and variable
screen sizes.
Mobile website design best practices
1. For smartphones account for the fact
that finger size vary. For testing use a
thumb to tap the navigation and buttons.
2. The font size must be large enough to
read the text on small screen. Hold
device at arm length and test for 20/20
vision.
3. Limit use of large file sizes for images
else bandwidth will be a problem.
4. Use one column to display information.
5. Place the important content at the top of
experience.
6. Limit content and features on mobile
phones.
Mobile website design
best practices
7. Leverage user testing to determine
which content and features are most
critical for mobile use.
8. Navigation should be flattened so user
can find information easily.
9. For larger sites use collapsible
navigation.
10. Allow user to see the full desktop web
experience by providing a link to it.
Mobile website
design best practices
11. Form fields such as search boxes/ text input boxes must be
large enough to interact with.
12. Ensure back button is operational.
13. Use larger font sizes for textual hyperlinks.
14. Limit the use of pop-ups.
15.The site must be viewable in different lighting conditions.
16. Some technologies work only on certain phones.
17. Try not force user to adjust screen from horizontal to
vertical.
18. Breadcrumbs or longlist of links are not necessary.
19. Icons used must be understood by user.
20. Color change on roll over doesn’t work well in phones.
Special functionality
for mobile sites
1. Click to call functionality
2. Click to map
3. Wayfinding – inside/outside maps
4. Coupons and featured deals
5. Shopping lists functionality – marking lists
6. Loyalty programs and digital loyalty cards –
Track purchase and reward.
7. Reviews of product and services.
8. Product comparison tools optimized for
mobile phones
9. Price comparison functionality
10. Purchasing decision making tools
Measuring UX
performance as UX
strategy
Understanding UX as an ongoing
process with repeatable steps to
ensure it is continuously optimized
for unanticipated future user needs,
technology, constraints and
requirements.
1. Discover
2. Define
3. Design
4. Build
5. Test and Launch
6. Maintain
Measuring UX performance as UX strategy
Implications of the approach
1. Closed loop
2. Measured and optimized
3. Ensured relevance
4. User-centric
Defining specific metrics to measure
1. User-path or clickstream:

• Clickstream is the series and sequence of steps the user completes to get to a certain
point.
• It is measured in singular channel.
• User-path is the overall steps a user undertakes to complete a task.
Defining specific metrics to measure
1. User-path or clickstream:

We need to keep track of from where the user is entering the website,
• Direct visitors
• Referred visitors
• Search Engine
Defining specific metrics to measure
2. Length of visit

• How long user engages with the particular experience.

• It tells which module of the website is important to him.
Defining specific metrics to measure
3. Conversion : % of users who takes a desired action

• To capture which area of conversion are or are not successful.

• Conversion includes when,
 Purchases the product.
 Purchases additional items with a product, such as an accessory.
 Completes a registration form or creates a user profile.
 Views product information.
 Downloads a document such as whitepaper, annual report or an app
• We need to focus on the conversion metrics that demonstrate the business value of
experience.
• Used in websites like E-commerce.
 Defining specific metrics to
measure
4. External Search keywords:

• Terms a user applies in an online search engine external to the experience.

• We need to focus on,
 Which top keyword searches are conducted for the site.
 Which type of content is important for the user.
 This metric is important part of user path and displays for the first step in
process.
 Analyze the reasons for bouncing to another website.
 Why google, instead of internal site search.
Defining specific
metrics to measure
5. Onsite Search keyword:

• Keywords refers to the term's user leverages to conduct

a search with your experience.
• Focus on,
 Top searched keywords: Use search log
 Not finding or not able to easily navigate.
 Look for top failed searches.
 Check for preferred search terms.
Defining specific
metrics to measure

Other metrics:

5. Depth of visit
6. Visits to convert
7. Value of interaction: total revenue generated per visit.
8. Cost to convert
9.Exit metrics
10. Bounce rates
11. User interaction history: Helps in personalized view.
Social media metrics

1. Post rates: Rate at which content is posted.

2. Share of voice: No of times you are mentioned versus
the competitor.
3. Referral traffic: indicates from where your users are
coming from.
4. Social sentiment: What user feels about experience.
5. Repeat engagement: Which users continuously
engage within the experience.
6. Tracking influencers
Tools to capture metrics
1. Google analytics
2. Adobe marketing cloud
3. Hoot suite and SocialMention
4. Tree testing
5. Foresee