Module Objectives

• Benefits of smart information architecture

• Principles of information architecture
• Information architecture and key steps
• Pro tips for information architecture
• Jumpstart Information architecture with FIGMA
 Information Architecture and
Wireframing

Benjamin Odoi-Lartey
[email protected]
0244361636

Benjamin Odoi-Lartey

Benjamin Odoi-Lartey

@odlabenonline
 What is Information Architecture
• Introduction:…..
• Information architecture (IA) is a science of organizing and structuring the content
of websites, web and mobile applications as well as social media software.
• An American architect and graphic designer called Richard Saul Wurman, is
considered to be a founder of the Information Architecture field
• Information Architecture is the practice of deciding how to arrange the parts of
something to be understandable
• IA aims at organizing content so that users would easily adjust to the functionality
of the product and could find everything they need without any bigger effort
 What is Information Architecture
• “Information architecture is the art of organizing content for the product you're
designing, so that the content hierarchy and wayfinding make sense to your
users,
• 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 behaviors, content, and flows.
• You can use principles of information architecture to improve usability, findability,
and user experience. By labeling and structuring content, global navigation, and
search metadata, you can meet user needs better
 Benefits of Smart Informaiton Architecture
• Helping users wayfind, is a big part of a well-designed IA at the product, site,
and/or page level. When a user tries to accomplish a task or goal, the
information architecture helps make it happen.
• Mapping information is crucial for effective UX and UI design. Information needs
to flow naturally from one step to another.
• Designers need to ask themselves, ‘How should content connect from the user
perspective? Intuitive flows help users easily find what they’re searching for.
• Clear content labels make IA more intuitive.
• Simple navigation system cues make an onboarding flow easy to complete, for
a quick, satisfying user experience.
 Principles of Information Architecture
• Organization systems. User research activities like card-sorting and creating personas can help
you understand user behavior and identify top user tasks. These insights can inform your content
hierarchy and user flows.
• Labeling systems. This includes categorization, contextual links, navigational terms, keywords, and
taxonomy. Consistent information systems with accurate, meaningful labels help users quickly
understand your site or app.
• Navigation systems. Users figure out how to get from the home page or screen to their end goal
with global, local, and contextual navigation systems. If early usability testing reveals that user flows
aren’t intuitive, you might improve functionality with wizards and guides.
• Search systems. To help users search your site or product, you need to decide how to index
content—for example, by topic, audience segment, or content type. User testing can help you
decide how best to show and sort search results to meet user needs.
 Information Architecture Examples and Key Steps
• Sitemaps: A UX sitemap is a visual tool that organizes a website's content and
structure. It displays how web pages connect and relate. It identifies gaps,
prioritezes content and fosters a cohesive design so users navigate websites
easily with a clear, logical flow
• Designers create a sitemap or navigation flowchart for digital products to show
how pages or screens relate to each other.
• Sitemaps capture a digital product’s organization and navigation systems, which
reflect user needs and behavior.
• What are the benefits of using Sitemaps in Web Design?
• EXERCISE ON HOW TO CREATE A UX SITEMAP
An example of
Sitemap
Information Architecture Examples and Key Steps
• User flows: A user flow diagram shows how users navigate through a
set of screens or pages to accomplish a goal.
• User flows sometimes called UX flows, or flowcharts are diagrams
that display the complete path a user takes when using a product.
• The user flow lays out the user's movement through the product,
mapping out each and every step the user takes—from entry point
right through to the final interaction.
• Test and revise your flows and interaction design until your target
users find them usable and useful.
An example of
User flow
 Information Architecture Examples and Key Steps
• TAXONOMY: In Information Architecture, Taxonomy refers to how information is
grouped, classified and labeled within a shared information environment.
• There are so many different ways to carve information up into a taxonomy and
the key drivers for determining that are your content and, of course, your users.
Your taxonomy needs to make sense to your users.
• Good Informaiton Architecture classifies content into clear, standardized
categories, subcategories, and tags.
• Taxonomy helps users find what they need through dynamic content, filtered
search, and content personalization and recommendations.
 Taxonomy cont...
• The first step when creating an initial taxonomy is to do a comprehensive audit of
your content by asking the following questions
1. Ask yourself, is your content relevant?
2. Is it up-to-date? Is it all necessary?
3. Are there opportunities to delete or condense content?
4. Once you have your content sorted, you’re ready to move on to the next
step of running a card sort with users.
• A website taxonomy makes it easier for users to navigate and to find the content
they are looking for. Site maps show us what goes where, and how certain pages
are connected.
 Differences: Site Maps vs Navigation vs Taxonomy
• A site map lists the page structure of your website, detailing the actual pages that
will be on your site.
• Navigation is the different ways users can look through your site to find content,
whether it’s the navigation across the top, or on the page itself. The navigation
doesn’t need to match the site map exactly. You can highlight whatever pages or
elements create a better user experience.
• Taxonomy allows you to tag those pages with different terms and expose them in
different ways on different pages. Taxonomy tells you what the specific piece of
content is and what it’s about, regardless of where it appears in the page hierarchy.
Site Maps
Navigation
Taxonomy
 Information Architecture Examples and Key Steps
• Wireframes: in UI/UX design is one of the most crucial steps which involves
visualizing the skeleton of digital applications. A wireframe is a layout of a product
that demonstrates what interface elements will exist on key pages.
• Wireframe outlines how UI/UX elements may appear on a user interface and as
such remains a crucial part of interaction design process.
• Designers use wireframes to showcase interface design at a lower fidelity and get
feedback on high-level architecture and design decisions.
• Wireframe also provides a blueprint of the page structure layout, information and
functions. This in turn gives a clear idea to the stakeholders about the functioning
and visual representation of application UI
A typical Wireframe for Mobile and Web Application Design
 Why do UI/UX designers use Wireframes?
• As part of the User-Centered Design process, wireframes are used at the beginning of the design
phase. Similar to how an architect first thinks of the blueprint of a building and decides the
relative positioning of different rooms with respect to each other before thinking of interior
design. During Designing Mobile and Web App wireframes designers visualize the whole skeleton for
the digital application.
• Wireframes are used to answer these questions:
• What will be displayed in the user interface?
• Where will elements be placed on the page
• How will users interact with the page elements
• How will the web page or application work
• Some reasons why wireframes are used are; saves time, helps in gathering feedback and helps in
creating accurate designs.
 What are the different types of Wireframes
• The three common types of Wireframes are:

• Low, Medium and High Fidelity Wirefraem

Low Fidelity Wireframe (Lo-Fi)

They are also known as paper wireframes,

which are created roughly. They do not contain

detailed grids, scales, or pixels. But, functions,

contents, headings, topics are present in a raw form

without an accurate structure.

 What are the different types of Wireframes
• The three common types of Wireframes are:

• Low, Medium and High Fidelity Wirefraem

Medium Fidelity Wireframe (Mi-Fi)

These types of wireframes can be commonly used

for communication with the stakeholders and end-

users. Mid-fidelity wireframes contain grid, scale,

and pixel hence, they are more accurate than low-

fidelity wireframes. This makes it one of the most

used types of wireframes among the UI/UX

designers.
 What are the different types of Wireframes
• The three common types of Wireframes are:

• Low, Medium and High Fidelity Wirefraem

High Fidelity Wireframe (Hi-Fi)

Low Fidelity and Mid Fidelity wireframes are devoid
of feature images and written content. They make an
appearance in high fidelity wireframes. With more
concrete shape to UI Components, this type of
wireframe contains the complete blueprint of the
design and is the most accurate and almost similar
to visual design screens without much of colors.