WEB DEVELOPMENT AND

DATABASE
ADMINISTRATION
LEVEL – III
Unit of Competency - Developing Website Information
Architecture
Competency Code - EIS WDDBA3 M03 0322

Compiled By – Bizuayehu Matiwos

July 15, 2023

1
MODULE CONTENTS:
LO1. Identify content needs
1.1 Identifying strategic intent of website from business requirements and
client expectations
1.2 Developing information requirement based on
1.2.1 Website intent
1.2.2 Intended audiences
1.2.3 Types of client interactions and
1.2.4 long- and short-term goals for the site
1.3. Identifying required information and grouping into business schemes
1.4 Determining content requirements for each processes
LO2. Plan content structure
2.1 Understanding use of website design software and hardware
2.2 Clustering information and documents in related topics.
2.3 Developing hierarchy of information and checking data sequence.
2.4 Ensuring that labels are clear, consistent, coherent and relatively intuitive
for client to access
LO3. Develop navigation system
3.1. Building website navigation system
3.2. Ensuring ease of navigation and providing different ways of searching
during feedback
3.3. Ensuring navigational system to give users flexibility to find
information
3.4. Developing consistent and logical labelling system taking into
account client demographics
LO4. Showcase and sign off
4.1. Constructing prototype of information architecture design

2
4.2. Arranging for a subset of client to test prototype architecture meet client
expectation
4.3. Ensuring site content correctly formatted in business and client technical
environment
4.4. Adjusting architecture based on client feedback
4.5. Signing off and prototype current and future business requirements

3
What is Information Architecture?

Information architecture is all about organizing content or things, describing them clearly and
providing ways for people to get to them.

A lot of information architecture work relates to websites and intranets, but is just as relevant for
music and movies, a computer file system, your paper files at home or even groceries on
supermarket shelves.

Good information architecture helps people to find information they need. It can also help them
learn and make better decisions.

You need to understand three things to create a good information architecture: People, content
and context.

The term is often abbreviated to ‘IA’ (just as I’ll be doing from now on).

Imagine your local supermarket/grocery store has just been renovated. The owners have
expanded it to include more items, and improved the layout so you can move around more easily.
And you’re seeing it all for the first time. You walk in craving chocolate, head to where it’s
usually kept and realize that, wow, everything has been moved. Yikes! How can you quickly
make sense of it and find the chocolate? After all, you don’t want to check every item on every
shelf. You look at the signs, but they all point to where stuff used to be. No help there. You start
looking up the aisles. No, this aisle is all canned food… this one is soft drink… this one is
bread… Aha! Here’s one that looks like it’s full of sweet things (the bright colors and everything
at children’s eye level gives it away). You decide to give this one a go. And lo and behold,
there’s the chocolate. Why was this relatively easy, even though they’d moved? Everything
around? It’s because they put similar things together into groups. And they put those groups into
bigger groups, and those groups into even bigger groups.

So they put all the chocolate – dark, light, white, bars and pieces – together. Then they put it near
other sweet things, which are also arranged into groups of similar items. And so, when we glance
down the aisle, we can quickly figure out what the whole aisle is about. Now let’s extend that
idea to our websites, intranets and other information systems. We could just list everything we

4
have on the home page, but we usually don’t. Instead we put our content into groups, break those
groups into sub-groups, and so on. This is much easier to use than showing all our content in one
long list. However, it isn’t just grouping items that make supermarkets and websites work well.
It’s about creating groups that make sense to the people who use them. After all, supermarkets
could group by color, or even where things were made. They could put the chocolate with the
gravy and other things that are brown.

They could put the Swiss chocolate with the Swiss cheese, and the Belgian chocolate with the
Belgian beer. But as tempting as that may sound, most times it won’t help anyone find the
chocolate in their newly-renovated supermarket. Even when we create categories that make
sense to people, we need to describe them well. So no sealed signs in a supermarket full of non-
Irish speakers, or aisles called Sweeties Treaties. We also need to help people find their way to
the thing they want. In the supermarket this can be done with layout, signage and visual guides;
on websites we use navigation bars, buttons and links.

And that’s what information architecture is all about:

1. Organizing content or objects

2. Describing them clearly

3. Providing ways for people to get to them.

WHERE WE FIND INFORMATION ARCHITECTURE

While most information architecture work these days is used for websites and intranets, you can
find it wherever you need to organize things (information and/or objects) that other people need
to use. So it’s just as useful for figuring out how to organize your music and movies, your file
system at work, and even physical things such as your paper files at home or groceries on a
supermarket shelf

WHY INFORMATION ARCHITECTURE IS IMPORTANT

Information architecture has always been important. Whenever we create groups and describe
things other people need to use, the information architecture (how things are grouped and
labelled) directly affects how easy things are to use.

5
As the amount of information available to us keeps growing, information architecture becomes
even more important. The more information there is, the harder it can be to sift through and find
what you need.

Good information architecture can help people find their way through the information, and
ignore what isn’t relevant. But good information architecture can do more than just help people
find objects and information. It can empower people by making it easier for them to learn and
make better decisions. So what’s a good information architecture? It’s one that is both easy for
people to understand and works well for whatever is being grouped. A bad one is just the
opposite – it’s hard for people to use, and the content doesn’t easily fit.

For example, an online supermarket with a good information architecture may put all the
chocolate together and group it with other snack foods. One with a bad information architecture
may group all grocery items by manufacturer, making people check every manufacturer to see
who produces chocolate. This isn’t easy. For any set of things:

 There will always be more than one way of organizing them. Unfortunately it isn’t
always clear which way is the best way.
 People have different needs.
 People often have different ideas about what goes together and what doesn’t.
 Some people may know a lot about a topic, while others may know nothing at all.

WHAT YOU NEED TO CREATE A GOOD INFORMATION

ARCHITECTURE

You need to understand three very important things before you can design an IA that works
really well:

 People: What they need do to, how they think and what they already know
 Content: What you have, what you should have and what you need
 Context: The business or personal goals for the site, who else will be involved and what
your constraints are.

Without a good understanding of these three things, you simply can’t create a good IA.

6
  If you don’t know enough about people you won’t be able to group content in ways
that make sense to them, or provide ways for them to find it easily.
 Without a good understanding of your content, you won’t be able to create an
information architecture that works well for current and future content.
 And if you don’t know all about the context, you won’t be able to create something
that works for people and the business, and you’ll have endless trouble in the project.

INFORMATION ARCHITECTURE DELIVERABLES

An information architecture The IA will describe:

The overall structure (or shape) of the site: In the broadest sense, how the main parts of the
site relate to one another.

Groups and sub-groups: The main groups and subgroups that will eventually be used in
navigation. This will describe what will be included in each and what they will be called
(labelling).

Metadata: For some sites (particularly product sites), this is what you’ll use to describe each
product and the descriptive terms for each

Navigation

Navigation is the way people will get around the site. It is absolutely dependent on the IA, but in
a project it’s done after the IA is drafted. It will include things like:

 Navigation bars
 Related links
 In-page navigation elements (such as hyperlinks)
 Helpers like A-Z indexes and site maps

HOW LONG THIS TAKES

People often ask how long the IA part of the project takes. The answer to this question is – it
depends.

It will vary depending on:

7
  How much you already know about your audience and content: If you don’t know
much, it will take longer to learn about them than if you already know a lot.
 The amount of content you are working with: Large sites take more work than small
sites.
 How experienced you are with IA work: The more experience you have with IA, the
faster you’ll be able to come up with solutions that work.
 How much communication work will be needed: If you’re working with a small client,
this will be easier than working with a large organization with distributed authors

For very small projects such as a new website for a small business with simple content, this can
be a pretty quick process. You can find out what people need, brainstorm a content list, draft an
IA and sketch some navigation in less than a day.

At the other end of the spectrum you have something like a large corporate website that has been
growing uncontrollably for a few years. It could take you a month just to figure out what content
is already available.

It could take you many more months to talk to all the content authors and figure out what needs
to be kept and what can be deleted. And when you have drafted a new IA, you may need to go
back to all those authors and talk to them about it, where their content will be and what they’ll
need to do to maintain it

LO1. Identify content needs

1.1. Identifying strategic intent of website from business requirements and
client expectations
What is the strategic intent of a business?

Definition. Strategic intent is the term used to describe the aspirational plans, overarching
purpose or intended direction of travel needed to reach an organizational vision.

What is the website strategy?

A website strategy is a plan of action that directs the content, layout and funnel on your business
website. It considers your business objectives and then outlines the ways your website can align
with those plans to actively help you reach your goals

8
What is the strategic intent of a business?

Definition. Strategic intent is the term used to describe the aspirational plans, overarching
purpose or intended direction of travel needed to reach an organizational vision. Beneficial
change results from the strategic intent, ambitions and needs of an organization.
Strategic Intent

The strategic intent of a website can be defined as the goals or purpose of the website.
There are many reasons why a client may decide to build a website,
For example:-
 The website may be seen as a marketing tool
 To provide e-commerce facilities for international customers
 To communicate with customers or suppliers
 Websites can be loosely categorized according to their purpose and audience
1.2. Identifying required information and grouping into business schemes

Information requirements:-
Determine what information needs to be included in the website.
If the website is a brochure, the content is likely to include pictures and details about the
products.
If it is an e-commerce site, the content may include product information, plus a privacy policy
and forms for capturing payment and delivery details.
As part of the process of determining information requirements the information architect must
ask a number of questions, such as:
• What are the long and short term goals of the site?
• Who are the intended audience?
• What types of interaction needs to occur?

Goals of the website

Identifying the goals of the website was discussed in the resource strategic intent
It may be that the client has both long and short-term goals.
Distinguishing between these is important, because a “phased development” may be appropriate
In a phased development, the website development occurs in phases or stages
9
The first stage addresses the short-term goals and then, when feasible, the second (or subsequent)
stages would address the longer term goals
How to Create a Website Information Architecture
Step 1: Defining Key Stakeholders' Goals Defining the key stakeholders' goals is the first
step.
These are what drives the project.
Step 2: Identifying Your Users' Goals
Step 3: Defining Your Site's Content Areas
Step 4: Organizing the Content Areas
Step 5: Creating the Sitemap
1.3 Developing information requirement based on website
what is website?

A website (also written as web site) is a collection of web pages and related content that is
identified by a common domain name and published on at least one web server. Notable
examples are wikipedia.org, google.com, and amazon.com. All publicly accessible websites
collectively establish the World Wide Web.
What is Web Content?

Web content is the textual, visual, or aural content that is encountered as part of the user
experience on websites. It may include—among other things—text, images, sounds, videos, and
animations.
In Information Architecture for the World Wide Web, Lou Rosenfeld and Peter Morville write,
"We define content broadly as 'the stuff in your website.' This may include documents, data,
applications, e-services, images, audio and video files, personal Web pages, archived e-mail
messages, and more.

10
Web Page content

Refers to all the information contained in a website. Page content can be displayed as text, links,
images, audio, animation or videos among other things.

Web Site Vs Web Page

What is the Difference between Webpage and Website? The webpage is a single document on
the web using a unique URL, while a website is a collection of multiple webpages in which
information on a related topic or another subject is linked together under the same domain
address.

11
Web architecture?

Web Architecture can be defined as the conceptual structure of the internet. Types of web
architecture include the client-server model and three-tier model.

Web architecture is the conceptual structure of the World Wide Web. The WWW or internet is a
constantly changing medium that enables communication between different users and the
technical interaction (interoperability) between different systems and subsystems.

The basis for this is different components and data formats, which are usually arranged in tiers
and build on each other. Overall, they form the infrastructure of the internet, which is made
possible by the three core components of data transmission protocols (TCP/IP, HTTP, HTTPS),
representation formats (HTML, CSS, XML), and addressing standards (URI, URL).

 TCP/IP stands for Transmission Control Protocol/Internet Protocol and is a group of

communication protocols used to interconnect network devices on the internet. TCP/IP is also
used as a communications protocol in a private computer network (an intranet or extranet).

12
 Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting
hypermedia documents, such as HTML. It was designed for communication between web
browsers and web servers, but it can also be used for other purposes.
 Hypertext Transfer Protocol Secure (https) is a combination of the Hypertext Transfer
Protocol (HTTP) with the Secure Socket Layer (SSL)/Transport Layer Security (TLS)
protocol. TLS is an authentication and security protocol widely implemented in browsers and
Web servers.
 HTML (Hypertext Markup Language) is the code that is used to structure a web page and
its content. For example, content could be structured within a set of paragraphs, a list of
bulleted points, or using images and data tables
 CSS (Cascading Style Sheets) is the code that styles web content.
 Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. It is a
textual data format with strong support via Unicode for different human languages.
 Universal Resource Identifier (URI) is a member of this universal set of names in registered
name spaces and addresses referring to registered protocols or name spaces.
 A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the
Internet. It is also referred to as a web address. URLs consist of multiple parts -- including a
protocol and domain name that tell a web browser how and where to retrieve a resource.
 A URL has two main components: Protocol identifier: For the URL http://example.com, the
protocol identifier is http. Resource name: For the URL http://example.com, the resource name
is example.com.

What are the three tiers in a 3 tier architecture?

 Presentation tier (also known as the user interface or the client application)
 Business logic tier (also known as the application server)
 Data storage tier (also known as the database server)

13
5 Parts of a Website and their Design Trends

A website is composed of essential parts that help engage users to navigate and learn more
about the products and services of the company. In order to make these basic parts
extraordinary, we have listed the design trends for each of those parts. Here are they:

14
1. Header/Banner

The header or banner is located on top of a website. It includes the logo of the company,
the publisher, or owner of the website. This automatically informs website visitors what
the website is about. Websites that offer products and services usually have banners that
feature their latest offers or even the current news about their company.

Trends
 Logos – are always in no matter how header design innovates.
 Page-sized images – are trending in web design, particularly in banners. Images make
a huge impact in user engagement, especially if the images are interesting and visually
attractive.

15
 Videos – are now utilized on headers. They usually contain the introduction or
summary of the produces that the company is offering.
 User Interface elements – one good example of this is navigation. For instance, a
banner shows a series of images of the latest promotions. These elements are
clickable.

2. Navigation Bar

The navigation bar/menu tab allows the visitors to check other pages of the website. It
appears in all pages within a website for more convenient navigation. Navigation bars are
usually placed just below the banner/header for convenient access.

16
 Trends:
 Sidebar – this refers to the placement of the primary navigation and not the usual
content of a regular sidebar. Usually they put the navigation on the left side.
 Navicon – this is common in Facebook mobile app. The navigation is practically
hidden until you tap the icon similar to this:

Hidden navigation allows users to view the entire page.

 Full screen navigation – this is similar to that of Navicon. The only difference is that
when you click the button to show the tabs, it will go full screen instead of appearing
on the side.
 Super-sized navigation – this navigation trend allows users to see a preview of what
they should expect in a certain tab. For example, the website of a clothing brand has a
tab for “Tops.” This tab can still be narrowed down to blouses, shirts, tank tops, etc.
This basically allows users to explore especially because the categories have
submenus.

17
3. Sidebar

Some websites do not use this part anymore. They say it is an added distraction to some
users, especially if the sidebar displays ads, Twitter feed, etc. But sidebars are still relevant
because of these advantages:

 Content marketing – you will be able to market other contents of your website.
 Promotion – you can promote similar websites or companies in the sidebar.
 Navigation – although this is not a primary navigation, it will still allow users to
navigate other parts of the website through links.

18
 Trends:
Sidebars are basically standard. The trend may appear on the content of the side bar. What
trendy things should we put on the sidebar? Here some of them:

 Social media buttons – these buttons serve as links to the social media profiles of the
website owner or the company.
 Widgets – these widgets could be in a form of feeds (usually social media), polls,
contact us forms, subscription boxes, etc.
 Archives – this content allows users to read your previous posts or entries.

4. Content

19
The quality of a website’s content usually dictates the value of your website. You can find
different types of content in a website. They could come in a form of text, image, audio,
video, or a combination of those.

Trends:
There is no particular design trend when it comes to content, but you still have to consider
the font size, font colors, and background of the content in order to make the content more
attractive and user-friendly. A side from written content, here are the other web content
trends:

 Infographics – these are images, diagrams, and charts that represent certain
information.
 Video streaming – this engages users because videos are easy to understand.
 Image collections – these are common in online shops, real estate websites, and
travel blogs.

20
5. Footer

They say the footer is as important as the header. Of course, the users will reach the footer
if they were engaged with the website’s content. And the purpose of engaging them is to
make sure they convert into clients.

Trends:
The footer is similar to sidebars. They have no particular design. However, they balance
the overall design of the website. The footer is almost the same as the sidebar. The only
difference is that they are located at the bottom part of a website. The footer usually has:

 About us link

 Contact us link

21
  Terms of service

 Privacy policy

 Sitemap

 Social media buttons

 Address

 Phone number

 E-mail address

 Other offers

 Related links/posts

 Subscription boxes
To make it more engaging, some footer includes taglines or images that will immediately
catch the attention of users.

LO2: Plan content structure

2.1 Understanding use of website design software and hardware

Before you get started with your new website or editing your current site, you need to consider
which hardware and software tools you may need to support your efforts.

When it comes to hardware needed this can be very simple or reasonably complex depending on
your particular needs. Of course, if you plan to create a new website (or even view your new
website later) you need a computer. Simple enough, right? Not necessarily. We prefer to work
with Apple Macintosh (OSX Leopard on MacBook Pro) as we do a lot of intensive graphics
work and have previously invested in Adobe Creative Suite software (Photoshop, InDesign,
Flash, Dreamweaver, etc.). It is just as easy to create your new website using your Windows PC
but we would suggest you stay away from using Windows Vista (any version) and migrate to
Windows 7 or stick with Windows XP. These operating systems are just much more stable and
reliable.

22
Another consideration for hardware should be some sort of backup hard drive or removable USB
memory stick(s). It is important that you back up all of your website data to a removable drive in
the event your computer crashes, is broken or is stolen. When you create website files, most of
your data will be stored on the website hosting servers but, in many cases, you will have many
other “builder files” that usually never make it to the hosting servers. If you lose this data you
will be forced to start from scratch in many cases. Another piece of hardware that many forget
about is a HD Video Camcorder. If you plan to include video on your site, you should be
investing in something half decent; you can normally pick up a good video camera that also
captures “still photos” for under $500.00.

When it comes to software needed, this can be somewhat more complicated, again depending on
what your website design goals are. At the very least, you will need some sort of text editing
software, FTP (file transfer software), graphics creation software and then a variety of other tools
as you progress.

Here are some of the most common subjects you should consider when planning the design of
your website product.

COMPUTER

Do you currently have a computer that can process large files (i.e. – video files) quickly and
efficiently?

WEBSITE SERVER

Are you planning to host your own website portal? If so, do you know what type of hardware
and server software you will need?

BACKUP HARD DRIVE or USB STICK

Do you currently have some sort of backup hard drive equipment or plan?

23
VIDEO CAMERA

Will you be creating custom videos for your website and, if so, do you have a HD video camera
ready to go?

MOBILE WEB DEVICES

Are you planning to make your website “mobile web friendly”? If so, do you have an iPhone and
an iPad? Android phone? Blackberry device? These will be needed for testing purposes!

WEBSITE CREATION SOFTWARE

Do you have any website creation software (i.e. – Adobe Dreamweaver or Microsoft Front Page)
installed, licensed and ready to use?

GRAPHICS EDITING SOFTWARE

Are you planning to create your own website graphics or edit pictures? Do you have the
necessary software (i.e. – Adobe Photoshop or Photo Studio)?

DATABASES

Are you planning on creating a database for your website and, if so, do you know which software
to use for this purpose?

Web design software enables users to create and edit the front-end visualization of web pages or
website prototypes. These tools provide layout templates, a library of animations and interactions,
and vector graphic creation to create unique and customized websites.

What is the basic understanding of web design?

Web designing is the process of planning, conceptualizing, and implementing the plan for
designing a website in a way that is functional and offers a good user experience. User experience

24
is central to the web designing process. Websites have an array of elements presented in ways that
make them easy to navigate.

2.2 Clustering information and documents in related topics

One of the best ways to ensure that the user experience of your website is top-notch is by creating a
website that functions perfectly. Well, a website that has no issues whatsoever is probably impossible
to create, but you can try to make your site as good as possible.

To do this, you will need to plan everything you want to do with your website beforehand. Planning
its structure is by far one of the most fundamental tasks you should start from. Hence, here’s the
complete guide on how to plan a website structure.

What Is Website Structure?

To put it simply, your website structure is the way information on your website is organized. It’s the
way your pages are linked and the way navigation on your website works. In essence, it’s like a map
you create beforehand to understand how your website will function so that your site visitors can
easily navigate it.

It’s important to note that website structure doesn’t include everything on your website. It’s more of
a skeleton with all the content being the meat and the muscles on this skeleton. That being said, some
elements could be included in your website structure. For example, the colors in your website
design probably don’t count as your structure, but the special links you include in the design itself
could very well be a part of your site navigation.

Depending on the type of your website, you will want to use one of the three main types of website
structure:

 Linear/Sequential Structure: In this type of website structure, pages are connected in a

linear manner with every page linking to a page after it. Users usually start with the main
page and get to more specific pages by going through pages one after the other. Linear
structure is most suitable for smaller websites.
 Network/Web-Linked Structure: This type of structure is quite rare because of its niche
focus. Here, each page is linked to all the other pages, so users can access any page while

25
 being on any page on the website. If your website is quite small and has a limited number of
pages, the network structure will be perfect for it.
 Hierarchical/Tree-Like Structure: By far the most popular type, the hierarchical structure
can be used on websites of any size. Users start from the main page and then have the option
to get to one of the subsections. Then, they get access to more specific pages from that
subsection.

Why Should You Plan Your Website Structure?

Besides the obvious reason of being able to choose the type of your website structure, there are a
number of other reasons why you should plan it. Elsie-Rose Greenwood, an expert from the writing
services reviews site Writing Judge, puts it this way, “Well-developed website structure is a way for
you to achieve a number of UX goals before you even launch your site.” Here are just some reasons
to plan your website structure beforehand:

 Better UX: The obvious one is better UX. When your website structure is good, your
navigation is good. When your navigation is good, it’s easier to find information on your
website. When users are able to find information on your website quickly and easily, they get
a better overall experience using your site. As simple as that.
 Easier Crawling: At the same time, a well-developed sitemap (which is part of planning
your website structure) ensures that search engines are able to crawl your website easier.
Crawling is necessary to index your website which makes your website then appear in user
search results.
 Enhanced SEO: Speaking of your website showing in search results, website structure
planning can also help you enhance your SEO. When users get a good experience on your
site, they tend to stay longer on it. With longer sessions, your site’s rankings could improve.
 Advanced Internal Linking: When working on your website structure, you can make your
internal linking system more nuanced. This can directly impact your navigation and SEO
while improving your UX as well.
 Aligned Expectations and Goals: By working on your website structure, you can set clear
goals for the performance of your website beforehand. Moreover, you will also have a clear

26
 picture of what you can expect in the outcome. It’s a great way to align your expectations
with your goals.

What Should You Plan for Your Website Structure?

So, what exactly should you plan for your website structure? Caleb Fisher, an expert from the custom
writing reviews site Best Writers Online, explains it this way, “When planning your website
structure, you should focus on several things: main website, blog, and the linking within them.”
That’s why you need to think about website structure at three different levels:

 Simple Structure: This is the most basic way of picturing your website structure. Think
about the main pages and sections of your website and how they will be linked to one
another.
 Sitemap: This is the file that contains all of the info about the content on your website and
how different pieces of it relate to one another. A sitemap is usually used by search engines
for crawling.
 Advanced Structure: This is a more detailed view of your site structure with the linking
between more specific and obscure pages.

Step-by-Step Guide on Planning Your Website Structure

To guide you with the process of planning your website structure, here are all the steps you should
ideally go through:

 Market and Competitor Analysis: Research your market and competitors. See what others
are doing in terms of structuring their websites.
 Business and Target Audience Analysis: Think about your own business needs and
objectives for your website. See what your audience is looking for (perhaps even ask it
directly with the help of surveys or on social media).
 Keyword Research: Research the keywords in your niche to use on your website.
 Website Hierarchy Planning: Choose which type of website structure is the most suitable
for you.

27
  Website URL Structure Planning: Brainstorm URL names for the main pages on your
website. Use relevant keywords in your URLs.
 Simple Navigation Planning: Plan out your website structure and navigation in its simple
form.
 Advanced Navigation Planning (with HTML and CSS): Plan out your website structure
and navigation in its advanced form.
 Internal Linking Strategy Creation: Create the internal linking system for your website
structure.
 Sitemap Creation: Create the sitemap file for search engines to use for crawling.
 User Testing: Last but not least, test your website with users to see what still needs
improvements.

LO3. Develop navigation system

Navigation

Navigation is a fairly all-purpose word that refers to the methods we design that let people move
around information. It includes navigation bars, hyperlinks, buttons and other clickable things.

Navigation is more than just a way of getting people around a site. It can also:

28
  Let people browse to the content or functionality they need
 Show the context of the information
 Show what is related and relevant
 Help people find information they didn’t know about

Navigation is more than just a single bar at the top of the page. It’s an entire system that
combines different pieces for different needs.

TYPES OF NAVIGATION

Here are some common elements of an overall navigation system.

Navigation bars

The simplest approach to navigation is a navigation bar – a horizontal or vertical bar that shows
the categories of the site.

Navigation bars can be used for both simple and more complex sites.

A horizontal navigation bar stretches across the page, usually right at the top, or beneath some
sort of banner or logo. It may contain the same information on every page, or change depending
on the section of the site you’re in.

A horizontal navigation bar is suitable when:

 you have a small number of top-level items that can fit across the screen
 you aren’t likely to be adding new top-level items
 your labels are short enough to fit into the horizontal space
 you aren’t likely to translate the site into a language that uses long, compound words
(which take up more space)
 You want to maximize the amount of page width available for content Simple horizontal
navigation bars can usually display 1-2 levels of a site.

A vertical navigation bar sits at the left or the right of the screen and is most useful when:

 you have more top level groups than would easily fit across a screen
 you may add or change groups over time

29
  some groups may have long labels
 You may want to translate the website

Vertical navigation is also good for hierarchical sites with a few levels. One of the most common
navigation patterns is to display the pages for the section you are displaying, indenting the sub-
categories to show their relationship

Inverted L

By combining horizontal and vertical navigation bars we get inverted-L navigation. This pattern
usually has a horizontal navigation bar that’s consistent right across the site, and a vertical
navigation bar for each section of the site.

This approach is good for large sites, particularly those with the subsites pattern

Tabs

Tabbed navigation is just a variation of the horizontal navigation bar, and is suited to the same
types of websites. However it will always have a second level of categories, and it’s important to
visually connect the two so people can see what part of the website they’re in.

Drop-down

Drop-down navigation uses a horizontal navigation bar, and when someone hovers over a top
level category the second level categories are shown.

The main advantage of drop-down navigation (and fly out navigation, which I’ll explain next) is
people can see what’s included in the next level category without having to click into it. This not
only helps them navigate more efficiently (it’s one less page to load) but also helps them
understand what the site covers and what each category is about. By looking at what is in the
next level, they get a better idea of the category.

Fly out

Fly out navigation is similar to drop-down navigation (showing the next level in a hierarchy
without people having to click into it) except it’s used for vertical navigation bars.

30
The main disadvantage of fly out navigation is it can be hard to use, as people need to carefully
move their mouse across then down. If you know your audience will struggle to select the
navigation items (e.g. if they won’t have the fine motor skills needed) consider a different
approach instead.

Fly out navigation can show a third level of hierarchy. For both fly out and drop-down
navigation, consider these issues:

 Long menus may go off the bottom of the screen, making it impossible to get to the
bottom items. Test on a variety of screen resolutions to make sure this doesn’t happen.
 If they appear too slowly or disappear too quickly, they may be frustrating to use. Test
people’s reaction to them before releasing.
 Many implementations require JavaScript, which is still not supported everywhere. Make
sure people can navigate without JavaScript available.

31
LO4. Showcase and sign of
4.1. Constructing prototype of information architecture design
A major part of software architecture design is learning how specific architectural designs
balance the concerns of stakeholders. We explore the notion of "architectural prototypes",
correspondingly architectural prototyping, as a means of using executable prototypes to
investigate stakeholders' concerns with respect to a system under development. An architectural
prototype is primarily a learning and communication vehicle used to explore and experiment
with alternative architectural styles, features, and patterns in order to balance different
architectural qualities.

The use of architectural prototypes in the development process is discussed, and we argue that
such prototypes can play a role throughout the entire process. The use of architectural prototypes
is illustrated by three distinct cases of creating software systems. The architectural prototyping
can provide key insights that may otherwise be difficult to obtain before a system is built.
Furthermore, they define skeleton systems that serve as communication means and knowledge
transfer among stakeholders.

A five-step process that includes regular tests with users and meaningful
communication with stakeholders at every step.

 Understand the Business Context.

 Understand Users and their Context.
 Understand the Content.
 Design the IA.
 Design the Navigation.
4.2. Arranging for a subset of client to test prototype architecture meet client
expectation

Best Practices for Prototype Testing

You can conduct prototype testing in several ways, but we have compiled a list of best practices
that you should always keep in mind while conducting your prototype tests.

32
1. Prioritize Usability

One of the most important bits of prototype testing is to ensure that it can easily be used by all
the audience members in the real world. The product’s usability can only be maximized by
gathering unbiased opinions during the new product testing phase.

To do that, you should always reach out to the general public who have no prior information
about the product. By having a fresh set of eyes on the product, you will be able to assess the
product from a completely different perspective, giving you an honest look at how your product
is to be used by the general public.

A popular way of collecting user feedback is through emails and feedback forms. However,
using surveys embedded in the product is much more effective and will provide contextual
feedback. Using Qualaroo for embedding surveys in your product will allow you to gain 10 times
more valuable insights than email surveys.

2. Do Not Aim for Perfection

Prototypes are not designed to be perfect; they are designed to be insightful and informative.
When developing your prototype, the only thing you need to keep in mind is not to make these
perfect but to make them in a way that they can convey information to the public and gather
feedback at the same time.

Prototypes should be designed to help testers and developers improve these by identifying their
strengths and weaknesses through feedback and insights.

Remember you don’t have to fix everything.

Try to figure out which usability problems are critical for the user. If you cannot make a
decision, invite a person or a few people to a good old debriefing session. Share the results you
have with them and try to pick their brain. You don’t have to invite people from outside of your
company, and the people you invite do not have to be UX experts.

33
Be realistic about how much you can fix before the next round of testing or before handing in
your designs to the dev team.

3. Keep an Open Communication

It is always helpful when your users can communicate to you about how they feel about your
product. Keeping an open communication would allow the developers to get accurate and up-to-
date information through user experience, which you can use to make necessary changes during
the new product testing for a better user experience.

4. Develop Buyer Personas

When designing a product, you should always be mindful of the audience using your product.
Keeping in mind the demographics of your target audience will allow you to design your product
in a way that is preferred by your audience.

Developing accurate buyer personas also proves to be important at this stage. By doing so, you
will be able to help your team develop a shared understanding of the targeted buyers and predict
their behavioral patterns accurately.

Buyer personas will help you make decisions strategically instead of intuitively.

Related Read- To learn more about building customer personas, take a look at How to Build
Customer Personas: The Complete Guide.

5. Be Considerate Towards Your Audience

If you are collecting any personal information about your test participant, get their consent first.
This also applies when you are recording them while they test your prototype. You should be
particularly careful when conducting the study in the European Union, where GDPR would
apply.

However, please mind that outside the EU more and more countries (and some states in the
USA) are introducing similar regulations.

34
Make sure you not only get the consent to collect information on participants and/or record them
but also inform them these will only serve to prepare conclusions and a summary of the study
and that they will only be used internally and not published anywhere.

6. Give Clarity to the Participants

Make it very clear that the usability test (or UX/ user/ prototype test/ study/ research) is not about
testing the user (them) but testing the functional design. This means participants can only help us
verify whether the prototype is good or not. Be sure to tell your participants they can’t be wrong.

7. Tell Your Participants You Did Not Build the Prototype

If they think you are the one who developed the prototype they will refrain from critical remarks
to not hurt your feelings. To encourage honest feedback, be open and engaged. If this is a face-
to-face study, don’t defend the prototype and design solutions in it. Be neutral and try to avoid
emotionally loaded words whenever you are describing the prototype or its elements.

8. Conduct Tests in a Wide Spectrum of Environments

After designing your prototype, your testing should be as diverse as possible. You should ensure
that your new product testing is done by a diverse group of audiences in a range of different
environments. This will allow you to know which environments work in favor of your product
and which ones don’t.

It is very much possible for a product to succeed in one environment and completely fail in
another. But the only way of knowing this is to actually put it to the test in a wide spectrum
of environments.

Example:

If you are launching a hotel booking application, then your testing environments should typically
involve users from different geographies and of different age groups who travel frequently. You
can segment your customers based on different demographics like age: young (18-25), mature
(26-35) and adult (36 and above), gender, income, and also different states of the country.

35
This will paint an accurate picture of people representing different demographics and geography,
based on their response and likeliness, to opt for your hotel booking application instead of
conventional modes of booking.

4.3. Ensuring site content correctly formatted in business and client technical
environment

Content is an effective way to reach prospective buyers and drive revenue. Content marketing
focuses on creating and distributing relevant content to your target audience. It can be used to
attract, engage, and educate prospects so they can make informed buying decisions.

How would you create a content strategy and present it to a client?

How to Create a Content Strategy Framework

1. Define your goal.
2. Conduct persona research.
3. Run a content audit.
4. Choose a content management system.
5. Determine which type of content you want to create.
6. Brainstorm content ideas.
7. Publish and manage your content.

4.4. Adjusting architecture based on client feedback

As an architecture firm, it is important to have an effective client feedback and review process in
place. This process allows you to obtain feedback from your clients throughout the design
process, ensuring that the final product meets their expectations. By creating an effective client
feedback and review process, you can build better relationships with your clients, increase their
satisfaction, and deliver successful projects.

Here are some key steps to follow when creating an effective client feedback and review process
for your architecture firm:

36
Establish Clear Communication Channels

Establish clear communication channels with your clients, such as emails, phone calls, or
meetings. Ensure that they know how to reach you and who to contact in case of any concerns or
issues. Make sure to communicate regularly with your clients to keep them updated on the
project's progress and address any concerns they may have.

Define the Review Process

Define the review process with your clients and ensure that they understand it. Make sure that
they are aware of what they should be reviewing, what feedback you need, and the timeline for
each review. This will help avoid confusion or misunderstandings later in the process.

Set Clear Expectations

Set clear expectations with your clients for each phase of the design process. This includes
outlining the timeline, deliverables, and milestones. Ensure that they are aware of what they are
responsible for and what you are responsible for during the review process. Partnering with
Billdr makes this process easier by giving you and your client access to our project management
services which delivers facilitated communication and weekly updates.

Learn more about the benefits of working alongside a Billdr project manager.

Use Collaboration Tools

Use collaboration tools to streamline the review process. You can use tools such as online project
management software, which allows your clients to view and comment on the design progress.
This can help ensure that all feedback is in one place, making it easier to manage and incorporate
into the design.

37
Incorporate Feedback into the Design

Incorporate the feedback you receive from your clients into the design process. Make sure to
consider their opinions and concerns when making design decisions. This will help ensure that
the final design meets their needs and expectations.

Review the Design

Review the design with your clients regularly. This will help ensure that the design meets their
expectations and that they are satisfied with the final product. Make any necessary adjustments
based on their feedback.

Establishing strong relationships with clients and carving out a space in which clear and honest
communication can occur is pertinent to running a successful architecture firm. Nurturing a
collaborative relationship between you and your client can be challenging, but by focusing on
setting clear expectations and regularly reviewing the design, you can build better relationships
with your clients and deliver successful projects. By following these steps, you can ensure that
your clients are satisfied with the final product, which can lead to loyal customers and positive
referrals.

4.5. Signing off and prototype current and future business requirements

Who signs off business requirements?

Once the Business Analyst (BA) has elicited and analyzed, changed, put them through the cycle
again and stabilized the business requirements, they must be reviewed and signed off by the
senior stakeholders of the project.

What are the 5 stages of requirement gathering?

The full six steps are:
 Identify the relevant stakeholders.

38
 Establish project goals and objectives.
 Elicit requirements from stakeholders.
 Document the requirements.
 Confirm the requirements.
 Prioritize the requirements.

39