Scribd
Upload
31 views

INFOT 2 Chapter 2 Web Systems and TEchnologies

Uploaded by

Zel Lie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

INFOT 2 Chapter 2 Web Systems and TEchnologies

Uploaded by

Zel Lie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

OBJECTIVES:

Understand basic web technologies


Discover the history of the Internet and the World
Wide Web
Learn the common means of accessing the web
Identify the kinds of web browsers and elements
Learn the basic design principles, web contents
and planning
Chapter 2:
Information Architecture
• Information architecture (IA) is the structural design
of shared information environments;
the art and science of organizing and
labeling websites, intranets, online
communities and software to support usability and
find ability; and an emerging community of
practice focused on bringing principles
of design, architecture and information science to
the digital landscape.
• Typically, it involves
a model or concept of information that is used and
applied to activities which require explicit details of
complex information systems. These activities
include library systems and database development.
Information Architecture Concepts

This Venn diagram demonstrates the three conceptual circles of


information architecture.
Business/Context
• Understanding an organisations’ business
objectives, politics, culture, technology,
resources and constraints is essential
before considering development of the
information architecture.

7
Content
• The most effective method for understanding
the quantity and quality of the content (i.e.
functionality and information) proposed for a
system is to conduct a content inventory.
• Content inventories identify all of the
proposed content for a system, where the
content currently resides, who owns it and
any existing relationships between content.

8
Users
• An effective information architecture that
must reflect the way people think about
the subject matter.

9
What is information architecture?

Information architecture (IA) is the science of


structuring content as it is applied to news,
websites or blogs, online stores, booking apps,
downloadable software, etc.
The goal of information architecture is to
classify the content in a clear and
understandable way and arrange it according
to relations between the content pieces,
allowing users to find what they need with less
effort. Not applied solely when creating a
product from scratch, IA is used in redesign.
• Information architecture is a part of
interaction design that considers
content, context, and users. This
means that user needs, business goals,
and different types of content must be
taken into account while structuring a
product’s information.
• Usually, information architecture
design falls under the care of UX and
UI designers or an information
architect.
Main Components of Information Architecture

• Peter Morville, the co-author of Information


Architecture for the World Wide Web, explains the
role of an information architect as a person who
bridges users and content by designing search and
navigation, embodying the abstract ideas into
prototypes, units, and disciplines to turn the
concepts into something understandable.
• An information architect who works along with a
UX designer can concentrate solely on information
architecture design, and devotes more time to
research.
The Five Steps of Information
Architecture Development
1. Conduct Customer Research
The aim of this stage is to learn about a user’s
needs. You must work with a customer profile
and the results of customer and stakeholder
interviews. The data revealed at this stage will
allow you create a user persona profile, list
business requirements, and get an idea of what a
user wants. Because these tasks belong to a UX
designer or business analyst, you need the
results of their activities.
2. Update And Review The Content
When you know what a user wants, you can
update the content of an existing website and
list it. The main activities to perform at this
stage are content inventory and content
audit.

• Content Inventory Audit


The goal of this activity is to create a list of
information elements on all the pages of a
website and classify them by topic and sub-
topic.
3. Apply Card Sorting For Content
Classification
All types of content must be classified
and have proper names that won’t
confuse a user. You need a taxonomy to
do it. Taxonomy is another word for
classification. In the case of IA, it’s an
attempt to group different unstructured
pieces of information and give them
descriptions.
Types of Card Sorting
• Open – for free labeling. This approach allows
you to understand how the users think in
terms of classification. Open type is used to
design new products.
• Closed – with pre-designed categories. This
method of card sorting is usually applied in
redesign.
• Hybrid – unites elements of both types, or
starts with an open type, moving to the closed
type to follow user logic.
4. Build A Website Hierarchy For User-
friendly Navigation
Every website or an app needs a solid
navigation system that helps a user find what
they need. As soon as you have the results of
card sorting activities, you will understand
how to embody and classify the content in
reality.
Navigation
Is the act of going to different places on the internet
or on a particular website in order to find what you
want.
A navigation system consists of many elements –
buttons, menus, and tables of content. There are
four main type:
• Hierarchical – shows the information hierarchy
from main elements to their sub-categories.
• Global or site-wide – present across all the
pages, this navigation enables the users to get to
the main page from every location, for example,
left- or right-sided, top-centered, footers, etc.
• Local – shows the navigation of a specific
area: a page or a part of a site and its
content. It can be present in the form of
lists.
• Contextual – relates to specific content,
like document, page, video-audio object, or
related products. Remember to make a
clickable logo that directs a user right to a
homepage.
5. Create A UI Prototype For Future Development
Although a sitemap is the first prototype in
information architecture development, you still
have to create advanced prototypes by
wireframing and data modeling.

• Wireframing
A wireframe is a schematic representation of a
website or an app that displays the navigation and
interface of a website. An IA wireframe shows all
the pages and screens of a product, with
headlines, tags, labels, and grey boxes where the
• Data Modeling
The final step before development. You can
embody the content structure in data
modeling systems.
The Eight Principles of
Information Architecture
These eight principles were defined by Dan
Brown, a co-founder of EightShapes design
company. An information architect should stick to
them to build a product:
• Principle of objects – a content is a living thing
with its lifecycle, behaviors, and attributes.
• Principle of choices – the pages of a product
should offer a number of meaningful choices to
users.
• Principle of disclosure – the users mustn’t be
overloaded with information; show only
enough information to help them understand
what kinds of information they’ll find as they
dig deeper.
• Principle of exemplars – the best way to
describe the content categories is to show
examples of the contents.
• Principle of front doors – assume at least half
of the website’s visitors will come through
some page other than the home page.
• Principle of multiple classification – offer
users several different classification
schemes to browse the site’s content.
• Principle of focused navigation – don’t
mix different categories in your
navigation scheme.
• Principle of growth – assume the content
you have today is a small fraction of the
content you will have tomorrow.
Examples of Information
Architecture
• BBC Weather
The information architecture of BBC Weather
features a strict hierarchy design pattern with
three hierarchy levels. The main categories
involve forecast pages, UK weather, coast and
sea, weather presenters, and story pages. A
homepage features a map that sends visitors
right to the cities they want and video. This IA
allows a user to access the information from the
home page.
• Global Seed Network
The Global Seed network is an initiative that
supports diversity and protects the public
food system by encouraging farmers and
gardeners to share seeds of different plants.
The site’s information architecture has a
simple navigation system and allows new
visitors to sign up in two steps and find the
available types of seeds right at the
homepage. Also, the homepage features
recent news. All this shows the visitors the
advantages of an initiative and helps them to
make a decision.
• Spotify
This is an example of not-so-good information
architecture. Spotify’s website features a co-
existing hierarchy pattern with reiteration and
partial reiteration of some sections. This
makes the information architecture a little
messy. Renee Lin, a UX designer, found a way
to improve it by simplifying it and removing
some sections.
Next topic

Chapter 3

You might also like