M03 Website Information Architecture

Web Development and Database
Administration Level-III
Based on November 2023, Curriculum Version II
Module Title: Website Information Architecture

Module code: EIS WDDBA3 M03 1123
Nominal duration: 60 Hours
Prepared by: Ministry of Labor and Skill
November, 2023
Addis Ababa, Ethiopia
Table of Contents
Acknowledgment ........................................................................................................................... 3
Acronym ......................................................................................................................................... 3
Introduction to the Module .......................................................................................................... 5
Unit One: Identification of content needs ................................................................................ 6
1.1. Strategic Intent of Website ........................................................................................ 7
1.2 Development of information requirement ............................................................... 11
1.3 Identification and Categorization of Information ................................................... 15
1.4 Content requirements ............................................................................................... 15
Self-Check 1 ................................................................................................................................. 19
Unit Two: Content Structure ................................................................................................. 21
2.1 Web design Software and Code Editor ..................................................................... 22
2.2 Information and Documents Clustering .................................................................. 23
2.3 Hierarchy of information......................................................................................... 25
2.4 Navigation Tools planning ...................................................................................... 28
Self-Check 2 ................................................................................................................................. 30
Unit Three: Navigation System ............................................................................................... 31
3.1. Website navigation system ...................................................................................... 32
3.2. Enhancement of Site Navigation ............................................................................. 33
3.3. User-Friendly Web Navigation Techniques ............................................................ 36
3.4. Developing Demographics-Driven, Logical Labelling Systems ............................. 37
Self-Check 3 ................................................................................................................................. 38
Operation sheet: 3.1 Develop Navigation bar ........................................................................... 39
Lap Tests ...................................................................................................................................... 41
Unit Four: Showcase and sign off .......................................................................................... 42
3.1. Information Architecture Prototyping ..................................................................... 43
3.2. Prototype Usability Testing ..................................................................................... 45
3.3. Site Content Formatting: Practices and Tools ......................................................... 49
3.4. Adjustment of architecture based on feedback........................................................ 50
3.5. Confirmation of Business Requirements with Signed-off Prototypes .................... 50
Self-Check 4 ................................................................................................................................. 53
Operation Sheet: 4.1 Information Architecture Prototypes .................................................... 54
LAP Test....................................................................................................................................... 56
Reference ...................................................................................................................................... 57
Developer’s Profile ...................................................................................................................... 58
Ministry of Labor and Skills Website Information Version -1

Page 2 of 58 Author/Copyright Architecture November, 2023
Acknowledgment
Ministry of Labor and Skills wish to extend thanks and appreciation to the many
representatives of TVET instructors and respective industry experts who donated their time and
expertise to the development of this Teaching, Training and Learning Materials (TTLM).
Acronym

BBE --------------------------------------------------- Best before End
CMS -------------------------------------------------- Content Management System
CRM -------------------------------------------------- Customer Relationship Management
CSS ----------------------------------------------------Cascading Style Sheets
FTP -----------------------------------------------------File Transfer Protocol
HTML -------------------------------------------------- Hypertext Markup Language
KPI ----------------------------------------------------- Key Performance Indicator
PDF ---------------------------------------------------- Portable Document Format
SSL ---------------------------------------------------- Secure Sockets Layer
URL ---------------------------------------------------- Uniform Resource Locator
UX ------------------------------------------------------User Experience
WWW -------------------------------------------------- World Wide Web
XML ---------------------------------------------------- eXtensible Markup Language

Introduction to the Module
Welcome to the comprehensive course on developing effective website information architecture!

In today's digital age, a well-structured and user-centric website is fundamental to a successful
online presence. Information architecture (IA) lies at the core of organizing and structuring
content to enhance user experience, streamline navigation, and ensure that users find what they
need intuitively. This Learning Guide helps to know the need of content, methods of planning
for content and also including navigation system for website and show-off from projects.
This module is designed to meet the industry requirement under the Web development and
database administration occupational standard, particularly for the unit of competency: Develop
Website Information Architecture.
Module covers the units:
 Identification of Content Needs
 Content structure
 Navigation system
 Showcase and sign off
Learning Objective of the Module
 Identify content needs
 Plan content structure
 Develop navigation system
 showcase and sign off
Module Instruction
For effective use this modules trainees are expected to follow the following module instruction:
1. Read the information written in each unit
2. Accomplish the Self-checks at the end of each unit and
3. Read the identified reference book for Examples and exercise
4. Do the ―LAP test‖ giver at the end of each unit and
5. Read the identified reference book for Examples and exercise

Unit One: Identification of content needs
This unit is developed to provide you the necessary information regarding the following content
coverage and topics:
 Strategic intent of website
 Development of information requirement
 Identification and Categorization of Information
 Content Requirements
This unit will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
 Identify strategic intent of website from business requirements and client expectations
 Develop information requirement
 Identify required information and grouping into business schemes
 Determine content requirements for each processes

1.1. Strategic Intent of Website
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 for website development refers to the overarching goals and purpose that
drive the creation and evolution of a website. It goes beyond just the technical aspects of
development and encompasses the broader business or organizational objectives. Here are
some key elements that may be part of the strategic intent for website development:
 Business Objectives:
- Identify and align the website's goals with the overall business objectives.
- Determine how the website can contribute to revenue generation, brand awareness,
customer acquisition, or other key business metrics.
Example: Increase online sales by 20% within the next fiscal year. Or enhance brand visibility
and engagement by attracting 30% more unique visitors to the website.
 Target Audience:
- Clearly define the target audience for the website.
- Understand the needs, preferences, and behaviors of the target audience to tailor the website
accordingly.
Example: Identify the primary target audience as tech-savvy millennial interested in sustainable
living. Or understand the needs of B2B clients in the healthcare industry seeking efficient supply
chain solutions.
 Brand Image and Positioning:
- Ensure that the website reflects and enhances the organization's brand image.
- Consider how the website contributes to the overall brand positioning in the market.
Example: Ensure the website design and messaging aligns with the brand's values of innovation
and environmental consciousness. Or position the brand as an industry leader through thought
leadership content and a professional, modern website design.

 User Experience (UX):
- Prioritize an excellent user experience to keep visitors engaged and satisfied.
- Consider usability, accessibility, and responsiveness across various devices.
Example: Implement intuitive navigation and a clean layout for easy browsing. Or prioritize
mobile responsiveness to cater to users accessing the site from various devices.
 Content Strategy:
- Develop a content strategy that aligns with the overall marketing and communication goals.
- Plan for the creation and maintenance of content that resonates with the target audience.
Example: Develop a blog that consistently publishes articles on industry trends, demonstrating
expertise. Or create engaging multimedia content, such as videos and info graphics, to convey
complex information in a digestible manner.
 Technology and Functionality:
- Choose the right technology stack and functionalities based on the website's goals.
- Ensure scalability, security, and flexibility to adapt to future needs.
Example: Choose a content management system (CMS) that allows easy content updates by
non-technical staff. Or implement an e-commerce platform with secure payment gateways for
online transactions.
 Analytics and Measurement:
- Establish key performance indicators (KPIs) to measure the success of the website.
- Implement analytics tools to track user behavior, conversions, and other relevant metrics.
Example: Set KPIs like conversion rates, average session duration, and bounce rates to measure
website performance. Or utilize tools like Google Analytics to track user behavior and gather
insights for continuous improvement.
 Integration with Other Systems:
- Consider how the website integrates with other systems within the organization.
- Ensure seamless data flow and consistency across different platforms.

Example: Integrate the website with the customer relationship management (CRM) system for
streamlined lead management. Or connect the e-commerce platform with inventory management
to ensure real-time stock updates.
 Adaptability and Future Growth:
- Plan for the website's adaptability to changes in technology and market trends.
- Anticipate future growth and scalability requirements.
Example: Choose a modular architecture that allows easy integration of new features and
technologies. Or plan for scalability by selecting a hosting solution that can accommodate
increased traffic and data storage needs.
1.1.2 Difference Between a Webpage and Website
When it comes to the internet and browsing, there are a lot of jargons and technical terms doing
the rounds, of which webpages and websites also make the list. In this article, we try to give a
definition of these terms and compare them. These are two related terms, but with different
functionalities. While it is easy to get them mixed up, we have tried to explain the difference
between webpage and website in this article.
A. Website
A website is a combination or collection of webpages grouped together, often handled by a

person or an organization, which can be accessed anywhere and anytime by anyone via the
internet. This is also a good method to market the businesses and help them grow well. All these
pages are linked together using the hyperlinks. Websites can also be either static or interactive.
In the meantime, some popular categories of websites are affiliate websites, e-commerce
websites, dating websites, social networking websites and more.
B. Webpage
Webpage, in the meanwhile, is a single document or page that is displayed in web browsers like
the Firefox, Google Chrome, Opera and so on. This is used to make up the World Wide Web
(WWW) and is used chiefly to sell products and services to users or visitors. A unique URL
address is also attached to the webpages and is used to render or access that particular page.
Webpages can also be either static or dynamic.

 Distinguishing Between a Website and a Webpage
Table 1.1. Distinguishing Between a Website and a Webpage
Webpage Website
A webpage contains content about a specific topic A website houses content on a variety of topics
Created using HTML and CSS Content is coded in HTML
Can be accessed via a direct URL link or through a Accessed through a domain address
website
A single hypertext document linked to a website A collection of various pages hosted on a server
Stores the content or resources to be displayed on a Stores the content or resources to be displayed
website on a website
Generally, simpler to develop Can be more complex to develop
Takes less time to develop Development may take more time
1.1.1 Website strategy
Developing a comprehensive website strategy begins with a clear definition of the website's
purpose and goals. Whether it's an informational platform, an e-commerce site, or a lead
generation tool, setting specific and measurable objectives is crucial. Understanding your
audience is equally vital, necessitating the creation of detailed user personas that outline
demographics, behaviors, and preferences. Additionally, conducting competitive analyses helps
identify unique value propositions and potential areas for improvement.
Maintaining brand consistency is key to building trust and recognition. This involves ensuring
that the website's design, messaging, and tone align with the overall brand identity. A strong
focus on user experience (UX) design is essential, encompassing intuitive navigation, a clean
layout, and mobile responsiveness. Usability testing is often employed to identify and address
any issues that may impact the user experience.
A robust content strategy is pivotal for success, aligning with business goals and resonating with
the target audience. This includes a mix of content formats, such as blog posts, videos,
infographics, and downloadable resources. Quality and relevance are paramount to establishing
the website as a valuable resource. Search Engine Optimization (SEO) is another critical
element, involving keyword research, on-page optimization, and the development of a backlink
strategy.

In the realm of technology and development, choosing a suitable content management system
(CMS) and prioritizing security measures are paramount. Performance optimizations contribute
to faster loading times, enhancing the overall user experience. Analytics and measurement tools,
like Google Analytics, are instrumental in tracking user behavior and key performance
indicators (KPIs), providing valuable insights for ongoing improvement.
Social media integration should align with your content strategy, fostering engagement and
sharing. For e-commerce websites, a seamless and secure online shopping experience is crucial,
involving features like product recommendations and a user-friendly checkout process.
Legal and compliance considerations, including data protection and privacy laws, should be
addressed through clear communication of terms of use and privacy policies.
Regular testing, including A/B testing, facilitates continuous improvement, guided by user
feedback. Marketing and promotion efforts, spanning email marketing, social media, and online
advertising, contribute to driving traffic and engagement. Designing the website architecture
with scalability in mind ensures adaptability to future growth and technological advancements.
Regular updates to the website strategy are necessary to stay responsive to changing business
goals and market conditions.
Developing an effective website strategy involves a series of steps to ensure alignment with your
business goals, target audience needs, and the ever-evolving digital landscape.
By following these steps, you'll create a holistic website strategy that considers not only the
technical aspects but also the user experience, content, branding, and ongoing optimization
required for a successful online presence.
1.2 Development of information requirement
Website requirements are a list of necessary functions, capabilities, or characteristics related to
your website and the plans for creating it. There are several types of requirements that may be
defined during the process that come together to focus and prioritize the project plan.
At a higher level, most can fall within one of the following categories:
 Business Requirements define the objectives and what problems the stakeholder
intends to solve with the product.
 User Requirements describe how user expectations and how they will interact with
the product. Use the features, functions, and content described in your scenarios to
develop your requirements. Your user scenarios should outline the tasks your users
want to complete on your site.
 Functional Requirements provide details of how a product should behave and
specify what is needed for development.

 Quality-of-Service Requirements detail what characteristics a product must
maintain in order to maintain its effectiveness and any constraints.
 Implementation Requirements are used to detail changes in process, team roles,
migration from one system to another, etc.
Website requirements only tell you what your website must have and what it must allow users to
do. Requirements do not tell you how to design or develop the site to have those features,
functions, and content. The other design steps help you figure out how to make sure that the site
is organized, written, and designed to satisfy the requirements.
 Requirements Best Practices
Requirements can begin as a phrase or one-sentence description of what the site must have or
must allow users to do but will become more detailed as you move through the process.
Requirements gathering can be complex but they help ensure project success. The following
characterize strong requirements documents. They should be:
 Specific and not conjugate two distinct requirements
 Complete and well thought out
 Consistent with and prioritized based on the objectives outlined in governance
documents and charters
 Able to be verified during testing
What do you need to build a website is the following:
1. Domain name
8. Web Designer
2. Web Hosting
9. SSL (Security Socket Layer)
3. Business email address
10. Google Analytics
4. Logo design
11. XML Sitemap
5. Favicon (Favorites Icon)
12. Website security and firewall
6. Images
13. Website maintenance
7. Text content
1.2.1 Intended Audience
An intended audience helps you focus your marketing efforts and reduce the chances that your
marketing campaign will fail. The audience is an essential part of every marketing campaign.
Whether launching a new product or service, you‘ll need to decide who your target audience is.
After all, it will be hard to market if you don‘t know who your offer is best suited for. But who
is the target audience? And how do you find a target audience?

 Your Audience
The ―intended audience‖ is the group of people for which the service or product is made. You
could also think of this group as the ―targeted audience‖ in another sense. A target audience is a
group of people to whom you want to sell a product or service. It may show the kind of people
who are more likely to buy that product or service
A target audience could be working moms in San Francisco between the ages of 25 and 34 who
are interested in healthy food and make between $4,000 and $5,000 a month. These customers
can be described by their age, income, interests, and past purchases. Some of these things are a
person‘s location, age, job, level of education, and annual income. Companies also use target
audiences to describe their buyer personas or ideal customers. But a perfect customer profile is
even more specific than a target audience.
 The importance of identifying your intended audience
Know your audience is a common phrase. These sage words can serve as the foundation for
successful marketing campaigns. It‘s impossible to reach everyone at once. So defining your
target audience is extremely important. Businesses of all sizes can compete in today‘s market if
they target a small but targeted audience. You can save time and money by focusing on the
needs of your current customers when developing your marketing strategy.
Targeting a specific group of people may appear exclusive, but this does not mean that you are
excluding those who do not meet your criteria. To get the most out of your marketing dollars, it
is essential to know your target audience. Using this method, you‘ll be able to generate business
leads cost-effectively and efficiently.
 Tips to determine intended audience

Fig 2.1: Types of audience
1.2.2. Types of client interactions
After all that research, you‘ll have a lot of information at your disposal. But you‘ll also need to
analyze that data to get a clear picture of your intended audience, their likes and dislikes, their
habits, and their demographic and psychographic data.
Using your collected information, you can look for patterns to further divide your audience and
make more targeted marketing campaigns. You can also make personas and determine value
propositions based on how you interpret the data.
Each type of customer interaction is unique and demands slightly different responses. Let‘s go
over them:
 Requests: These interactions involve customers asking for new features and functionalities.
Let such customers know that you‘ve received their requests and will get back to them.
 Questions: Customers that don‘t understand how to get something done or are trying to
figure out your tool will reach out with questions. Providing an in-app resource center with
rich materials will enable these customers to solve most of their problems themselves.
 Complaints: All customer interactions are important, but complaints should be taken very
seriously. Not every user that encounters friction will come complaining. Best believe the
few who do represent a large chunk that will rather lag or churn than send complaints
 Compliments: These interactions come from satisfied customers who reach out to praise
your brand. Appreciate them for taking the time to compliment you. You could also
encourage them to leave a review if they can.
1.2.3 long- and short-term goals for the site
Website Development Company analyzes the client requirements. They create goals and timeline
to start with the work.
 Realistic goals - Being realistic means, you‘re aware of your goals. Such goals avoid any
frustration, when you repeatedly fail to achieve goals. For example, few people always set
high – goals and give up soon. As a result, they fail to achieve it. While setting long-term
or short-term goals, make sure they are achievable.

 Short-term goals - It‘s simple to create such goals because; designers achieve within hours
or minutes. In Web designing, it can take up to few days or months. Because of this short-
period, it‘s easy to understand the factors that might hinder your goals. Therefore, be
certain to achieve goals within the given timeline. Also, web design companies will break
down longer goals into small chunks. They attach a date to achieve each chunk and move
on to next.
Long-term goals - Making long-term goals is quite difficult especially in Dubai or Abu
Dhabi. Because, these middle-east emirates grow digitally every second. So, have an
option to change your long-term goals with the trend. While, setting long-term goals
consider few factors. Prefer goals that are not too rigid, with the options of changing as
time progress. Be flexible, because people always rewrite and adjust long-term goals. In a
web design firm, end results are specific. For instance, you aim to open a branch of your
business within five years. This goal will motivate towards expanding your business. Keep
long-term goals at the forefront and see if you have achieved them
1.3 Identification and Categorization of Information

How do you identify needs in a business? Identifying your business needs consists of
noting each business problem, goal, or scenario, and the related progression of actions
required to resolve it. For example, if your business need is to process customer orders,
you might note the following actions: Receive order.
Information assets include documents, emails, web content, business data, images, video
and other content in both physical and digital form. An information asset has a dominant
and logical concept or grouping. It is not determined by a physical manifestation.
Although it is logical, it also has tangible business meaning. To recognize the logical
nature of an information asset, focus on its purpose, ignoring the underlying applications
and technologies
1.4 Content requirements

A. Content Requirements
Much of the time, when we talk about content, we‘re referring to text. But images, audio,
and video can be more important than the accompanying text. These different content types
can also work together to fulfill a single requirement. For example, a content feature
covering a sporting event might have an article accompanied by photographs and video
clips. Identifying all the content types associated with a feature can help you determine
what resources will be needed to produce the content (or whether it can be produced at all).

The expected size of each of your content features has a huge influence on the user
experience decisions you will have to make. Your content requirements should provide
rough estimates of the size of each feature: word count for text features, pixel dimensions
for images or video, and file sizes for downloadable, stand-alone content elements like
audio files or PDF documents. These size estimates don‘t have to be precise—
approximations are fine. We only have to collect the essential information needed to design
an appropriate vehicle for that content.
Designing a site to provide access to small thumbnail images is different from designing a
site to provide access to full-screen photographs; knowing in advance the size of the content
elements we have to accommodate enables us to make smart, informed decisions along the
way.
It‘s important to identify who will be responsible for each content element as early as
possible. Once it has been validated against our strategic objectives, any content feature
inevitably sounds like a really good idea—as long as someone else is responsible for
creating and maintaining it.
If we get too deep into the development process without identifying who will be
responsible for every required content feature, we‘re likely to end up with gaping holes in
our site because those features everybody loved when they were hypothetical turned out
to be too much work for anyone to actually take on.
And that‘s what people often forget when developing requirements: Content is hard work.
You might be able to hire on contract resources (or, more likely, stick someone down in
marketing with the job) to create the content in time for the initial launch, but who will
keep it up to date? Content—well, effective content, anyway— requires constant
maintenance. Approaching content as if you can post it and forget it leads to a site that,
over time, does an increasingly poor job of meeting user needs.
This is why, for every content feature, you should identify how frequently it will be
updated. The frequency of updates should be derived from your strategic goals for the
site: Based on your product objectives, how often do you want users to come back? Based
on the needs of your users, how often do they expect updated information? However,
keep in mind that the ideal frequency of updates for your users (―I want to know
everything instantly, 24 hours a day!‖) may not be practical for your organization. You‘ll
have to arrive at a frequency that represents a reasonable compromise between the
expectations of your users and your available resources.

B. Content types:
1. By purpose: Selling, entertainment and educational (informational);
2. By format: Text, graphic, video and audio materials.

C. Text Content
Includes product descriptions, various articles, reviews, announcements, and

other similar formats. The main types of text content:
 Copyright
A text written by a journalist or copywriter from scratch. Represents unique content that
is preferred by both search engines and users. Authorship material increases loyalty to the
product, service and the company itself, its recognition, which is reflected in conversion
and sales.
 Rewrite
A modified version of the finished text. Replacing words from the original article with
synonyms and rearranging sentences that does not have a positive effect on the style,
perception and position of the site in the search results. However, rewriting with a changed
structure and information from several sources in quality is similar to copyright.
 Adapted Material
Language translation of the article. It is considered unique content from the point of view
of search engines, since the translation creates author's material.
 Copy-Paste
Copying an article from other sources without making changes of the text. Despite the
ease and speed of filling up the site with such content, copy-pasting is not recommended
for use.
Consequences of such method:
 Getting the resource under the sanctions of search engines;
 Violation of copyrighting law;
 Negative impact on the company's reputation.

 Visual and Auditory Content
The advantages of this format in comparison with text content are greater attractiveness,
memorability and accessibility.
 Images
The graphic accompaniment of the text facilitates its perception and increases the
possibility of its complete reading. Graphic support means pictures, photographs,
illustrations, diagrams, animation, screenshots and slides. The most effective infographics
are those that increase traffic by 12% on average. Combine statistics and interesting facts
not to overload the article with numbers and improve its perception of the target audience.
Data visualization works better than textual explanations of complex concepts and
processes, justification of the value and principles of product use, etc.
 Video and Audio Content
Filling the site with audio and video content allows you to extend the time that users
spend on the resources, which is taken into account when ranking. One Third of all the
activities on Internet accounts is video content watching. Embedding videos in landing
pages increases conversions by 80%, according to Hubspot. This makes video one of the
best content marketing tools to reach and attract target audience. Short and compelling
informational videos help to engage consumers at the awareness stage. Video tutorials and
demos work through the buying decision stages. Audio content is varied: music,
recordings of interviews, lectures and webinars, podcasts. Use audio content as training
material or testimonials to build trust in the company and increase awareness of a product
or service.
 Selling Content
Selling copy identifies a problem and proposes a solution for your product or service.
Such content accounts for 10-15% of all placements. When compiling selling texts, we
recommend that you refuse to use specific terms and long explanations. Deliver
information to the point: concise and accessible. Highlight possible doubts, objections and
questions from potential customers to build them into the text and close problems. For
example, if the price is high, offer options for a phased payment, purchase on credit or
installments, a discount to regular customers or those who brought a friend. Rely on
proven facts.

Self-Check 1
I. Read each statement and say 'True' or 'False'.
1. Strategic intent for website development is solely focused on technical aspects

rather than broader organizational goals.
2. Defining the target audience for a website is unnecessary as it doesn't impact

strategic intent.
3. Content strategy is not a part of strategic intent for website development.
4. Integration with other systems within the organization is irrelevant to strategic

intent for website development.
5. A modular architecture that allows easy integration of new features is not

important for strategic intent.
II. Choose the best Answer
1. What is a crucial first step in developing a comprehensive website strategy?
A) Conducting market research
B) Creating detailed user personas
C) Implementing SEO strategies
D) Designing the website architecture
2. Which aspect is vital to maintaining brand consistency on a website?
A) Regularly updating website content
B) Conducting usability testing
C) Aligning design, messaging, and tone with brand identity
D) Integrating social media elements
3. What does a robust content strategy for a website involve?
A) Implementing security measures
B) Focusing solely on blog posts
C) Prioritizing quality and relevance of content
D) Conducting analytics and measurements

4. Which element contributes to enhancing the overall user experience on a website?
A) Legal and compliance considerations
B) Regular updates to the website strategy
C) Usability testing
D) Choosing a suitable content management system (CMS)
5. Why is regular testing and iteration essential in website development?
A) To implement social media integration
B) To conduct market research
C) To identify and make iterative improvements based on user feedback
D) To determine the intended audience
III. Elaborate the following
1. What are long- and short-term goals for the site
2. List types of client interactions

Unit Two: Content Structure
This unit to provide you the necessary information regarding the following content coverage
and topics:
 Web design Software and Code Editor
 Information And Documents Clustering
 Hierarchy of information
 Navigation Tools planning
This guide will also assist you to attain the learning outcomes stated in the cover page.
 Understand Useful Software and Code Editors for Website
 Organize and cluster Website Content
 Know Hierarchy of information
 Plan Navigation tool

2.1 Web design Software and Code Editor
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 is central to the web designing process. Websites have an array of elements presented
in ways that make them easy to navigate. 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.
Aside from a computer and an internet connection, most of the tools you need to build a website
are software programs, some of which may already be on your computer. You need a text or
HTML editor, a graphics editor, web browsers, and an FTP client to upload files to your web
server.
As far as the software needed, this can be found online or perhaps already built into your
computer. Software is what makes it possible to create and edit the webpages themselves. Often
called text editors, some operating platforms offer their own free software, or you can choose to
go with a third party. Obviously the free ones don‗t tend to have as many tools and functions as
the third party options. Some of the built-in ones don‗t include webpage coding, which is
necessary in order to build the site.
Before you even start learning Web Development, one must choose and download the code
editor of your choice. This part right here is crucial — your journey, yours learning curve is at
stake. This will be the tool that you will be using as you start to write your code, and there are
various code editors for you to choose from.
For those who have started coding 10+ years ago, the most used platform was Notepad++, and
other code editors followed after were Text Wrangler, BBEdit, Coda, Sublime Text, VSCode,
Text Mate, Atom, Ultra Edit, Vim, Brackets and Coffee Cup HTML Editor. In Modern
Technology, the choices have been narrowed down into few namely, Sublime Text, Atom,
VSCode, Vim, Brackets.
As you study along, you will find different teachers or instructors who preferred to use different
text editor, it doesn‘t matter if you follow them and use the same editor, or choose your own,
what matters is you are comfortable with your chosen text editor. Choose whatever makes you
more productive because it will help you become a better programmer.

Here are some text editors so, choose wisely.
A. Visual Studio Code
Visual Studio Code is a free and open-source code editor developed by Microsoft. It is a
lightweight but powerful editor that is used by millions of developers worldwide.
B. Sublime Text
Sublime Text editor is the best code editor for a complete development environment as it groups
code, markup, and prose in a single tool.
C. Notepad++
Notepad++ has an amazing execution speed. It is lightweight and uses fewer computing
resources, so it is suitable for users with low-end systems. This text editor is also simple and
efficient.
D. Atom
Atom is a robust text editor that supports real-time collaboration. Developers can code together
using the Teletype tool, available in beta form. Additionally, this text editor is available for
cross-platform editing so users can also work across operating systems.
2.2 Information and Documents Clustering
Organization of website content is all about organizing information about your website and for
that matter clustering of information is very important. Clustering is used in information
retrieval systems to enhance the efficiency and effectiveness of the retrieval process. Clustering
is achieved by partitioning the documents in a collection into classes such that documents that
are associated with each other are assigned to the same cluster. There are two types of
clustering, term clustering and document clustering. Term Clustering allows expanding
searches with terms that are similar to terms mentioned by the query (increasing recall)
documents clustering allows expanding answers ,by including documents that are similar to
documents retrieved by a query (increasing recall).
Cluster architecture arranges website content into related groups or clusters. This architecture is
very similar to silo architecture, with a few key differences.
In cluster architecture, the main difference is that pages are not grouped into strict categories but
rather into themes or topics. This allows for greater flexibility in terms of thinking about
categories.

The main elements are:
 Categories / Subcategories
Categories are used to group together similar content on your website. And Subcategories are
used to further group together similar content within a category. Categories are easier to manage
and change as necessary in the cluster architecture as they aren‘t hardcoded in the URL
structure.
 Menus and Navigational items
Subcategories are presented as dropdowns for main Categories. Ideally, it‘s recommended to
have only one subcategory following the main category in the menu. This is because a lot of
dropdowns tend to confuse users and might result in a higher bounce rate. The menu should give
a clear indication to the user about the website sections and the content they will find there.
Besides considering User Flow aspects, it‘s essential that users should be able to move from one
category to another related one without any additional effort. The website architecture should
allow for an easy user flow without any hindrances.
The cluster architecture is more flexible when it comes to navigation, as you don‘t have to worry
about fitting pages into a hierarchy. The cluster topics can be listed in the navigation without any
need for nesting. Each of these cluster topics as menu items can then directly link to the high-
value pages in the drop-down.
 URL Structure
The URL is very simple to implement in the cluster architecture as you can simply include the
keyword without the need for any categories and subcategories.
 Keywords
Keywords are the words or phrases that people use to search for content on your website. Cluster
architecture offers more flexibility for targeting keywords as pages can be optimized for any
number of related keywords.
Fig 2.2: Website Architecture

2.3 Hierarchy of information
The hierarchy of information is a universal design principle that should be used in all forms of
design, including e-Learning design. By definition, it is the arrangement of elements or content
on a page/screen in such a way that it reveals an order of importance (either ascending or
descending).
Design elements can consist of anything including typography, graphics, colors, contrast,
weight, position, size and space (including negative space). The trick is how you use these
elements to accomplish the order of importance that you want.
Guidelines for applying the hierarchy of information to your own work:
A. Make a list of the different points of information that you‗re working with and order
them numerically.
B. Now make sure that number one is standing out a little bit more than number two, you
can do this by adjusting the elements of this particular point of information (i.e. its size,
color, weight, etc.).
C. Carry on with this throughout the list and then you would have created a descending
hierarchy of information (do the reverse for an ascending hierarchy).
D. And remember it doesn‗t matter in which direction the document flows, just as long as it
flows in a specific direction.
The principles of the hierarchy are actually pretty simple and easy to implement, but can have a
massive impact on how your message is perceived and received.
The hierarchy of information design principle allows the designer/developer to point out to the
viewer what he wants the viewer to see first. This is very important in today‗s society as most
people are in a hurry, even on the web. With the hierarchy principle, a designer can shout out
‗what he thinks is most important on the page/screen‘ before the viewer gets bored and moves
on.
Website structure is the way all a website‘s pages are organized and connected to each other and
how navigation to different pages is managed. The four types of website structures fall into two
categories: top-down or bottom-up.
 Top-down approach

A top-down approach focuses first on general categories of the content. Designers can logically
divide the content by gradually breaking it up into categories. This can help inform the
taxonomy or hierarchical structure of the website.
Fig 2.3: Top down approach

 Bottom-up approach
The bottom-up approach is, as you can probably tell, the opposite of the top-down approach.
Where the top-down approach focuses on cataloging content into categories, the bottom-up
approach focuses first on creating a structure based on the content that is available for the
website by grouping the elements into categories of the lowest level first and in turn grouping
these categories into higher level ones.
 The 4 Types of Website Structure
Below is a breakdown of the four main types of website structures used today with use cases on
when each one is more appropriate.
1. Hierarchical
A hierarchical structure, which is sometimes referred to as a tree structure, is the most popular
website structure. It moves from larger, more general category pages into smaller, individual
pages.
Hierarchical structures are great for websites with large amounts of data like e-commerce. First,
you would establish your informational pages and other categories that would be important to
your visitors. A good place to start is with the pages that receive the most traffic.From there, you

would determine how the rest of your pages fit amongst those categories. Always make sure you
approach this in a way that makes sense for users and crawl bots since it will be very
challenging to change this later.
Fig 2.4: Hierarchical Web structure
2. Sequential/ liner Structure

A sequential, or linear, website structure is one that follows a simple page-to-page path. These
are more common for simple websites or when creating a campaign with multiple landing pages.
If you‘re a startup or a small business, you probably only have a few essential pages you want to
display so this approach would make sense.
Fig 2.5: Sequential/ liner Structure

3. Database
A database structure is one of the most complex website structure types using a bottom-up
approach.
This approach requires special attention to tagging and metadata in order to create a searchable
database for users to access. Site search is becoming more and more popular and can be a
valuable tool for increasing conversions.

Fig 2.6: Database website structure
4. Matrix
A matrix structure is one of the oldest structure types on the internet. It‘s complex and non-
traditional that is best navigated using search and internal links. Wikipedia is a prime example of
a matrix structure. There are seemingly endless possibilities for the next steps a user can take
and with more than 80 percent of their traffic coming from organic searches, it works.
Fig 2.7: Matrix website structure
2.4 Navigation Tools planning

Labeling or using a label is describing someone or something in a word or short phrase. In the
most basic sense, is a type of representation. On the web, we use labels to represent larger
chunks of information simply because we can‘t crowd every page with all of the information on
the entire website – it‘s just not practical and it doesn‘t look very nice.
A. Types Of Website Labels
 Navigation Labels
Navigation labels are the tags that we use to describe the information displayed under each of
the menu items on a navigation menu and other navigation elements. This includes the main
menu, website‘s footer, and any secondary menus, if applicable.
Getting your navigation labels right is crucial for boosting the overall desirability and usability
of your website. Think about landing on a website where none of the menu labels make sense,
and you have no idea where you will find the information that you are looking for. The chances
are that you would most likely leave the website rather than trying to figure it out.
This is why when labeling the items on your navigation menus; you need to have your users in
mind. The easiest way to do that is by conducting a card sort with UXtweak‘s Card Sorting tool.

It will help you to better understand your users‘ mental models and the expectations they have of
your navigation structure. Nailing your navigation labels will lead to great user satisfaction,
lower those high bounce rates, and increase your website conversion rate.
 Content Labels
Content labels are another really important category of website labeling that needs extra
attention. These are descriptive tags referring to the content that the user will consume.
There are a lot of different types of labels that fall under this category, including headings and
subheadings. These are particularly important since they help the user scan the copy easier and
consume the content with ease. Content labeling is equally important for the overall SEO health
of the page, or website in general. This means that search engines can understand the type of
content that you are displaying and can index it. You can test the quality of your content labels
by conducting Content Testing.
 Metadata Labels
‗Metadata labels‘ is another essential category of website labeling that you need to pay close
attention to. These tags are used to give more information about the content of your
website. Although these labels are not visible to users, they are extremely helpful data points for
search engines.
If added and structured properly, metadata can have a hugely positive impact on your
website’s SEO.
B. The importance website labeling

As you might have guessed by now, getting your website labeling right is quintessential for the
overall performance of your website. On-point website labeling means that you offer a
frictionless, user-friendly experience to every single user, including those who are visiting your
website or buying your product for the first time. Descriptive, clear labels can have a host of
advantages. Here are some of the key ones:
 Effective navigation
Clear navigation and content labeling can undeniably lead to more effective navigation through
a page or a website. This will provide the foundation upon which you will later build your entire
information architecture. Improving the website navigation can, in return, lead to a higher task
completion rate, lower bounce rates, and increased conversion rate.
 Enhanced accessibility

Getting the website labeling right is set to make your website more inclusive for users with
disabilities. Making use of accessibility tags such as alt texts or captions will lead to increased
accessibility but also overall enhanced usability.
Self-Check 2
I. Say TRUE or FALSE
1. Web designing primarily focuses on aesthetics rather than functionality and user
experience.
2. Web design software allows users to create and edit the back-end functionality of
websites.
3. Notepad++ is a text editor that supports syntax highlighting and auto-completion
features.
4. Sublime Text is a text editor that is not efficient for handling large projects and heavy
coding.
5. Atom is a text editor that does not support real-time collaboration for developers.
II. Choose the best answer
1. What is the primary purpose of the hierarchy of information in web design?
A. To arrange elements randomly on a webpage.
B. To prioritize the visual appearance of the website.
C. To guide the viewer's attention to the most important content.
D. To create confusion and complexity within the website structure.
2. Which website structure type is best suited for a website with large amounts of data like e-
commerce, gradually moving from general to specific categories?
A. Sequential/linear structure C. Matrix structure
B. Database structure D. Hierarchical structure
3. What are Navigation Labels primarily used for on a website?
A. To describe the content displayed within the website's pages.
B. To improve accessibility for users with disabilities.
C. To enhance the visual appearance of the navigation menu.
D. To represent larger chunks of information under menu items and navigation elements.
5. How does Cluster Architecture differ from Silo Architecture in terms of URL structure?

A. Cluster Architecture utilizes keyword-inclusive URLs without strict categories or
subcategories.
B. Silo Architecture structures URLs by including categories and subcategories.
C. Both Cluster and Silo Architecture use the same URL structure approach.
D. Cluster Architecture incorporates nested URLs to denote strict categories.
Unit Three: Navigation System

This learning guide is developed to provide you the necessary information regarding the
following content coverage and topics:
 Web Navigation Design
 Enhancement of Site Navigation
 User-Friendly Web Navigation Techniques
 Developing Demographics-Driven, Logical Labelling Systems
 Build website navigation system
 Enhance Site Navigation
 Ensure Flexible Navigation for User-Friendly Information and Product Access
 Develop Demographics-Driven, Logical Labelling Systems

3.1. Website navigation system
Web navigation refers to the process of navigating a network of information resources in the
World Wide Web, which is organized as hypertext or hypermedia the user interface that is used
to do so is called a web browser.
Website navigation is the act of clicking and looking through resources on the internet, such as
the various pages that make up a website. Users navigate websites using a web browser and
clicking on links that transport them to other pages when clicked. There are two kinds of links
you might use for website navigation:
 Internal links: Internal links connect to pages within the same website.
 External links: These links connect to other websites.
A website navigation menu is an organized list of links to other web pages, usually internal site
pages. Navigation menus appear in page headers or sidebars across a website, allowing visitors
to access the most useful pages quickly.
A. Types of web navigation
The use of website navigation tools allow for a website's visitors to experience the site with the
most efficiency and the least incompetence. A website navigation system is analogous to a road
map which enables webpage visitors to explore and discover different areas and information
contained within the website.
A complex web site often includes several types of navigation systems. To design a successful
site, it is essential to understand the types of systems and how they work together to provide
flexibility and context.
B. Hierarchical Website Navigation
The structure of the website navigation is built from general to specific. This provides a clear,
simple path to all the web pages from anywhere on the website. Hierarchical – shows the
information hierarchy from main elements to their sub-categories. An example is drop-down
menus for large websites.
C. Design of Web Navigation

What makes Web design navigation difficult to work with is that it can be so versatile.
Navigation varies in design through the presence of a few main pages in comparison to
multilevel architecture. Content can also vary between logged-in users and logged-out users and
more.
Because navigation has so many differences between websites, there are no set guidelines or to
do lists for organizing navigation. Designing navigation is all about using good information
architecture, and expressing the model or concept of information used in activities requiring
explicit details of complex systems.
3.2. Enhancement of Site Navigation
Enhancing site navigation is a crucial aspect of web development that significantly influences
user experience (UX), user engagement, and overall site performance. Effective navigation
enables users to find information quickly, improves accessibility, encourages exploration, and
contributes to a positive impression of the website.
On ease of a website, a navigation menu is an organized list of links to other web pages, usually
internal pages. Navigation menus appear most commonly in page headers or sidebars across a
website, allowing visitors to quickly access the most useful pages. Now, it would be easy to
leave it there and call it a day.
To sort them out, try thinking like a visitor, not a designer. Take time to consider how visitors
perceive the navigation mechanisms. Understanding the type of navigation, a menu represents
can help people predict links and reorient themselves on new pages. But what makes a main
navigation the main navigation? What makes a related link different than a local navigation?
 Diverse Search Options

Website feedback is first-hand information straight from the customers about their experience,
issues, concerns, complaints, and appreciation of your website. It gives you actionable insights
into what customers are doing on your website and why they are doing it. Collecting customer
feedback can steer your business towards website optimization and growth.
A. Importance of Website Feedback
Website feedback is important because it gives you the answer to – ‗what‘ & ‗why.‘
 Why are people abandoning your cart?
 Why don‘t the visitors fill out a form?
 Why do your pages have a high bounce rate?
 What else can you do to improve their experience?
 Why do the prospects exit without buying?

 What are the elements that customers find annoying on your website?
B. Types of Customer Feedback
Not all feedback forms are equal. Before delving into how to collect customer feedback, let‘s
divide them into various types.
1. Based on Customer Motivation
 Prompted
Prompted customer feedback is where you ask the customer to leave their feedback.
 Unprompted
Unprompted feedback is the one that customers leave on their own. It can be a social post, a
proactive email letter, etc. This feedback type requires special attention because it might cover
the issues you are unaware of.
2. Based on Your Business Objective
 Individual
This feedback type focuses on individual feedback. It involves the customer leaving feedback
based on their recent experience. The customer can click on the feedback form or button to
provide their feedback at any time.
 Targeted
Targeted feedback focuses on a specific visitor or customer segment that interacted with a
feature or service for which you want to collect the feedback. This type of feedback aims at
collecting the customers‘ feedback to test and optimize the desired aspect of your website.
 Indicative
The indicative feedback type evaluates the goals and KPIs by targeting customers to leave their
feedback about the overall experience. It helps establish performance tracking, identify brand
loyalty, overall customer satisfaction, and other business goals.
3. Based on the Type of Interaction
 Product feedback
Product feedback type collects information about product features and issues. It can include
questions related to product bugs, feature requests, etc.
 Service feedback
Service feedback type is when you ask for customer feedback after they interact with a service
channel such as customer support, technical department, or any other team. It maps out the
difficulties the customers face to get their queries resolved by the team.
 Marketing and research feedback

This feedback type involves exploring marketing opportunities such as new product types,
promotions, identifying audience segments, etc. It helps you to do market research and
competitive analysis.
C. Ways to collect feedback from your Users
Use Community Forums Now that we know about the different types of customer feedback, it is
time to explore some of the most effective ways to collect it from your visitors, users, and
customers.
 Surveys
Surveys are focused, personalized, and highly targeted. They are one of the best methods to
collect customer feedback. They offer various metrics and techniques to collect feedback, such
as rating scales, popups, emoji‘s, single choice questions, and more.
A survey is a macro category that can be divided into different subtypes depending on the
objective. There are multiple survey types, each intended to collect feedback at a specific time
from various customer segments.
 Add an Easy Access Website Feedback Button or Widget
Arguably, the most convenient way to collect customer feedback because:
The website feedback widget or button is easy to embed on any or all web pages. It is easily
visible to the visitors. It also has a psychological effect to prompt the customer to proactively
leave feedback based on their recent experience. It makes it a real-time feedback tool for your
website, product, or app.
 Emails
Email is an efficient way to follow up with your website visitors and customers. You can set an
automated email delivery system that gets triggered when a condition is met, such as successful
purchase, a new subscription, etc.
 Live Chat Button
42% of the customers prefer the live chat option over any other support medium. Live chat is
increasingly becoming an integral part of any website design. It brings the opportunity to
provide real-time support to customers and also collect real-time feedback.
 Mine Feedback Through Social Media Channels
Social media has become the central hub for user activity, reviews, feedback, recommendations,
and complaints. They act like proactive feedback mediums for customers and users all around
the world.
 Offer Incentives

Filling out surveys and leaving feedback takes time. Not all customers are willing to invest time
and fill out the forms. So, is there a way to prompt the customers to leave feedback and increase
the response rate? Incentives in exchange for customer feedback. An effective way to improve
the response rate is to offer an incentive to the respondent It can be a discount coupon, free
shipping offer, a personalized report based on the responses, free eBook, guide, etc.
 Run Usability Tests
Usability tests are conducted to test your website, product, or app‘s functionality by observing
real users while they interact with it.
 Make the Most of Customer Interviews
Getting more personal with your customer with one on one interviews does two things: It shows
that you value your customers‘ opinions.
It provides in-depth insights about their fears, concerns, and issues with your products in their
own words.
 Use Session Replays to Analyze the Customer Journey
Session replay is a Customer journey mapping technique that can provide feedback about how
people are using the website, which paths they are taking to complete different actions, the most
interacted parts on the web pages, and much more.
 Leverage Reviews, Ratings, and Testimonials
Reviews and ratings act as potential conversion magnets for new visitors.
According to a Bizrate Insights report ‗92% of surveyed respondents said they read at least one
review before making a purchase decision‘. Even Google shows website and product reviews in
their search result snippets to help users find what they are looking for.
D. Discussion Groups & Suggestion Boards
Community forums and discussion groups consist of users and customers. Hence they are the
most targeted points to mine for valuable feedback.
3.3. User-Friendly Web Navigation Techniques
Navigation keys provide a great deal of functionality to your users. Use navigation keys to:
• Allow users to navigate to new pages or search programs
• Allow users to transfer to an external system or web page. After setting up this data, your users
may be able to access this external URL from a menu, a context menu, their favorite links, etc.
A. How to Improve Your Website Navigation
 Keep it consistent. Consistent navigation – in both how and where it appears on your site
promotes ease of use and increases your visitor‘s ability to find relevant information more

quickly. If your navigation is constantly changing from page to page (except where absolutely
necessary), visitors lose their on-site bearings and must reorient themselves constantly.
 Divide categories clearly. If your navigation contains multiple sections, categories or sub
categories, these categories must be clearly and visually defined. In other words, category
headings must be separated visually from the sub-categories, even if the categories are links
themselves.
 Make all navigation elements clickable links. When using multiple categorical divisions in
your navigation, all heading elements should be clickable links. This is true even with drop-
down. Menus where clicking a sub-category link may be the natural inclination of the visitor.
 Use accurate navigation titles. Visitors should have a general idea of what they should find on
a page even before clicking any navigational link. this is true whether it‗s a main navigation
link or an internal text link. Use accurate text to describe the linked page so visitors know
what they‗re going to get. Cryptic or misleading navigation text confuses and annoys visitors,
possibly to the point of site abandonment. Make sure all link verbiage, whether textual or in
an image, accurately portrays the corresponding pages.
 Ensure every clickable image has ALT text. This is true of every image, but even more
important for images that link to other pages. Be sure to include the ALT attribute with
descriptive text. This ensures that everybody knows what the link is, regardless of how they
are viewing your site.
 Ensure your search feature works. When using an in-site search feature, the search results
page must always produce relevant results. It must compensate for misspellings, show related
items and even produce results for products you don‗t have while displaying similar products
you offer. Never produce a search result as ―no products found.
3.4. Developing Demographics-Driven, Logical Labelling Systems

Labeling is a way of representing content on the web. It helps users understand and navigate the
website efficiently, without wasting space or time. Labels should reflect the organization and
navigation systems of the website, and use professional language that builds user confidence.
Labels are short and simple links to more detailed information. They are important for making
the website easy to organize and navigate, so they should be designed for the specific audience
of the website and summarize the concepts they represent.
To create a logical labeling system for a website, designers need to consider the demographics
of the target audience and categorize and label the content based on their characteristics,
preferences, and behaviors. This aims to create intuitive and user-friendly navigation that
resonates with the specific demographic groups visiting the site. Designers need to conduct
demographic research and analysis, and understand the diversity within the user base. For
example, language preferences are crucial for multilingual audiences, and labels should be
understandable and accessible in different languages.

Moreover, logical labeling systems should match the cognitive processes and mental models of
the targeted demographics. Labels should use terminology and language that are familiar and
relatable to the users, reflecting their interests and expectations. An effective demographic-
driven labeling strategy requires empathy and a deep understanding of users‘ goals and
motivations when they interact with the website. Consistency, testing, and feedback are also key
aspects of a logical labeling system, as they facilitate ease of navigation, reduce confusion, and
improve the effectiveness of the labeling system.
Self-Check 3

1. Internal links connect to pages within the same website, while external links connect to pages
on other websites.
2. Hierarchical website navigation typically structures information from specific to general,
providing a clear path to web pages across the site.
3. Developing demographics-driven labeling systems for websites involves a one-size-fits-all
approach, catering to a broad audience without considering specific user characteristics.
4. True or False: Conducting user tests, surveys, and analyzing user behavior metrics are not
essential for refining and optimizing demographic-driven labeling systems for websites.
1. Which of the following is NOT a type of website feedback based on customer motivation?
A. Prompted
B. Indicative
C. Organic
D. Unprompted
2. What is the primary purpose of a website navigation menu?
A. To display external links to other websites
B. To list only the main pages of a website
C. To provide an organized list of links to internal site pages
D. To act as a footer element across all website pages
3. Which strategy contributes to the effectiveness of a demographic-driven labeling system?
A. Using unfamiliar language and terminology
B. Employing inconsistent labeling conventions
C. Conducting regular testing and feedback collection

D. Providing a one-size-fits-all approach to labeling
4. What does a website feedback widget/button primarily offer for website optimization?
A. Real-time feedback and personalized product recommendations
B. Instant access to external websites
C. User behavior analysis and automated testing
D. Efficient collection of user feedback on their recent experience
Operation sheet: 3.1 Develop Navigation bar

Operation Title: Developing Navigation Bar
Purpose: To help website user browse through a website effortlessly
Tools and Equipment:
 Code editor installed windows computer
 Internet connection
Steps in doing a task:
1. Create a rough sketch or wireframe of the navigation bar layout, in this case include
Home, courses, programming fundamentals and frontend Development.
2. Decide on design elements like font, colors, hover effects, and alignment for a visually
appealing and user-friendly navigation bar.
3. Open your code editor.
4. Start with the <nav> tag:
7. Add links:
5. Create an unordered list:
6. Add list items: 8. Create a dropdown menu

9. Add links to the dropdown menu
10. If you need to add more navigation items: Repeat steps 3-6 to add more navigation
items.
Quality criteria: Display clickable menus

Lap Tests
Instructions: Given necessary templates, tools and materials you are required to perform the
following tasks accordingly.
Task 1: Develop a Header navigation bar that have Home, Gallery, Teachers menus and under
teachers menu A level, B level, C level
Task 2: Develop a Footer navigation bar as displayed

Unit Four: Showcase and sign off
This learning guide is developed to provide you the necessary information regarding the
following content coverage and topics:
 Information Architecture Prototyping
 Prototype Usability Testing
 Site Content Formatting: Best Practices and Tools
 Adjustment of architecture based on feedback
 Confirmation of Business Requirements with Signed-off Prototypes
 Construct prototype of information architecture design
 Test Prototype Usability
 Ensure Proper Formatting for Site Content Across the Environments
 Adjust architecture based on feedback
 Confirm Business Requirements with Signed-off Prototype

3.1. Information Architecture Prototyping
A prototype is a functional, not final version of a product or service that can be used for testing,
feedback, and investment purposes. It is a visual and interactive representation of the product‘s
design, features, and behavior. It helps to explore and experiment with different options and
scenarios, and to communicate the product‘s purpose and value to various stakeholders.
A prototype is built through a systematic process of defining goals and audience, conducting
research and gathering content, organizing content and creating categories, sketching the site
structure, developing wireframes or mockups, testing and iterating, documenting and finalizing,
presenting and implementing, and reviewing and refining. Prototyping is an essential skill for
designers, but it is often misunderstood or skipped. Prototyping requires constant evaluation and
improvement, as well as alignment with client expectations and user needs.
Creating a prototype involves outlining the navigation, content hierarchy, and overall structure.
Here's an example of an information architecture prototype for a hypothetical educational
website:
Website: "LearnWebDev"
Main Sections:
1. Home
 Welcome Message
 Featured Courses
 Latest Updates
2. Courses  Frontend Development
 Programming Fundamentals  Backend Development

 Full-Stack Development  Online Tools
 Web Design Principles  External Learning Platforms
 Advanced Topics  Glossary
3. Tutorials 5. Community
 HTML & CSS Basics  Forum
 JavaScript Essentials  User Profiles
 Framework Tutorials  Events & Meetups
 Database Management 6. About Us
 Resources  Mission & Vision
 Meet the Team
4. Recommended Books  Contact Information
Navigation Structure:  Privacy Policy
Header Navigation:  Terms of Use
 Logo (Linked to Home)  Sitemap
 Courses Content Organization:
 Tutorials Courses Section:
 Resources Each course includes:
 Community  Course Description
 About Us  Syllabus
Footer Navigation:  Instructor Information
 Contact Us  Enroll Now Button
Tutorials Section:
 Divided into categories (HTML, CSS, JavaScript, etc.)
 Each tutorial includes:
 Topic Description
 Step-by-step Guide

 Code Samples
Resources Section:
 Curated lists of books, tools, platforms, and glossary with brief descriptions and links.
Community Section:
 Forum for discussions on various topics
 User Profiles for networking
 Calendar for upcoming events and meetups
About Us Section:
 Detailed information about the website's mission, team, and contact details.
Prototype Notes:
 Consistent navigation across all pages for easy user access.
 Clear and descriptive labeling for sections and content.
 Emphasis on user engagement through the community section.
 Responsive design considerations for mobile and desktop viewing.
This prototype outlines the structure, content organization, and navigation flow for the
"LearnWebDev" website, aimed at providing comprehensive learning resources for web
development enthusiasts. Adjustments and detailed design elements would be further
incorporated in the development phase.
3.2. Prototype Usability Testing

Prototyping is a vital skill for designers, but it is often misunderstood or skipped. Prototyping
involves a systematic process of creating, testing, and iterating a product‘s initial drafts. It helps
to evaluate the product‘s usability and user experience. To create a prototype, designers need to
define goals and audience, conduct research and gather content, organize content and create
categories, sketch the site structure, develop wireframes or mock-ups, test and iterate, document
and finalize, present and implement, and review and refine.
3.2.1. Prototype Evaluation and Client Feedback
A. Prototype Design

That practical explanation of how something works has a number of high-value benefits,
including:
 Making it real – Before any prototypes are built, the product is completely conceptual!
That‘s fine for a little while, but eventually it must become something that stakeholders and
users eventually understand and appreciate. A prototype is the first step in moving from
conceptual to actual.
 Work a problem – Sometimes, we have a design challenge without a solution. As a skill,

prototyping is a great way to visualize the problem and introduce solutions quickly. If it
doesn‘t work, throw out the prototype and try again.
 Iterate – Prototyping comes in stages, but the result is the same: to evolve your ideas. From
sketches to hi-fis, each new iteration offers a plethora of behaviors and functions to test. And
with more data, we can iterate both faster and smarter.
 Detect unintended scenarios – Once something is visible, we have the limitations of our
product available for study, which also provides better context on what should be there…and
what shouldn‘t!
 Detect usability problems – This is where many designers live: Once a product has a
prototype of any kind, usability challenges suddenly become easy to spot and fix.
B. Starting the Prototyping Process
Because prototypes are built on so much other information, it‘s important to gather the necessary
details in advance to putting pen to paper. Consider the following checklist and review the
details provided by your client or manager:
 Goals of the project
Start with the big picture. Does the product solve a real need? How does it solve that need?
Understanding the product‘s utility is critical to delivering any sort of viable solution.
 Competitive products people currently use
A strong competitive analysis will provide a clear picture of the state of the marketplace for the
product type, plus what today‘s a user expect.
 Audience and their goals
Understanding demographics and user needs provides the context necessary to create products
geared toward providing for those particular user types and fulfilling their needs.
 Type of product and device
With so many different technologies and solutions, designers need to know how the product will
be used (web app, responsive website, mobile app, etc.), on what device(s), and how different
versions will coexist (if at all).

 Visual precedents
If the product already exists and the project is for improvements or a redesign, it‘s possible that
some requirements exist in consideration of current user behavior with the product.
 Deliverables
Setting expectations about deliverables and the process is critical for your planning and
workflow. Every project is different, but if the deliverables are well defined, the rest of the UX
design process has a higher chance of going smoothly.
C. Prototypes Drawing
Initial sketches in design serve to explore the available space, highlighting potential and
limitations. While designers may have preconceived layout ideas, these sketches ensure a
comprehensive understanding of what is and isn‘t possible.
Gather your writing instruments of choice, be it pencil and paper or whiteboard and marker. The
sketching process is akin to a writer free writing, or a musician strumming; draw what you feel
based on all the work you‘ve done in advance, and considering the pieces below:
 User Flows – Follow identifying user flows. See how the users meet their goals and how
they interact within the system.
 Information entities – Each user flow will show some user inputs and outputs.
Identify what they are, how they relate to the user behavior and expectations, what
interactions they are involved with, and how they work. First sketches – After getting an idea
of who will use the system, what they are going to do, and with what, it‘s time to see how.
Sketch your user flows—no need to create the layout yet, just get the functionality resolved.
 Sketch a rudimentary structure – After your user flows are sketched, you will have a
better idea of the best layout for the product. This will include content (text, photos, video,
etc.) that‘ll show up as basic boxes or scribbles. When written by hand, they won‘t fit to size,
so all structure and content is just for visualization, not for actual use.
D. Prototype with Purpose
Prototyping is a process that begins and ends with purpose, requiring understanding of screen
behavior, feature operation, and user needs. Despite careful construction of wireframes,
considering user stories, and using information architecture as a guide, elements can still be
overlooked. This is the challenge of prototype design: remembering that prototypes are not final,
but iterative drafts in the UX design process. Conducting a usability test for the information
architecture prototype of the "Learn WebDev" website will help identify potential issues and
gather feedback from users to improve its usability. Here's a sample usability test plan:

Usability Test Plan for "Learn WebDev" Information Architecture Prototype:
Goals of the Test:
 Evaluate the ease of navigating through different sections.
 Assess the clarity of content organization.
 Gather feedback on the overall user experience.
Test Participants:
 Target Audience: Individuals interested in web development education (2-5 participants).
 Consider including a mix of beginners, intermediate learners, and professionals.
Testing Materials:
 Prototype: Interactive prototype or clickable mockups showcasing the website's
structure and navigation.
 Tasks List: List of tasks to be performed during the test (e.g., finding a specific course,
navigating to the community forum, etc.).
 Questionnaire/Feedback Form: Structured questions to gather feedback on usability
and user experience.
Test Procedure:
1. Introduction (5 mins):
 Welcome the participant.
 Briefly explain the purpose of the test and the "LearnWebDev" website.
 Emphasize that the focus is on evaluating the website's usability, not the participant's
skills.
2. Task-based Testing (20-30 mins):
 Present participants with specific tasks related to navigating the website prototype (e.g.,
"Find a course on Frontend Development").
 Encourage participants to verbalize their thoughts and actions while performing tasks.
 Observe their interactions, note any difficulties, confusion, or successes.
3. Post-task Questionnaire (5-10 mins):
 Ask participants to provide feedback using a structured questionnaire or feedback form.

 Include questions about navigation clarity, content organization, ease of finding
information, and overall impressions.
 Encourage participants to suggest improvements or mention any issues encountered.
4. Follow-up Discussion (5-10 mins):

 Engage in a discussion about their general experience, likes, dislikes, and suggestions for
improvement.
 Encourage participants to share any additional thoughts or features they would like to
see.
Test Environment:
 Conduct the usability test in a quiet and distraction-free environment.
 Use screen recording software to capture participants' interactions for later review and
analysis.
 Provide necessary instructions and guidance without influencing participants' decisions.
Analysis and Iteration:
 Review collected data, including observations, feedback forms, and recordings.
 Identify common issues, pain points, and positive aspects highlighted by participants.
 Make necessary iterations to the prototype based on the feedback received to improve
usability and user experience.
3.3. Site Content Formatting: Practices and Tools
Good content is what sets a website apart from the masses and delivers the right message into
the hearts and minds of customers. The success of a website is determined primarily by its
content. Although some aspects of content can be subjective, there are many tried-and-true
practices that can differentiate good content from bad.
Let‘s review what website content can consist of and take a look at the best practices for
creating website content.
 Content of a Website
The content of a website includes the text, images, sounds, videos, and animations that users
experience on a website. Website content is the utmost important tool you can use to achieve
your marketing strategy and communication to your customers about your brand.
Let‘s cover the three main types of web content:
 Written website content: should inform all other content of your website. It can
encompass a call to action or brief product description on your landing page, case studies,
white papers, industry reports, eBooks, testimonials, and blogs.
 Graphic content: consists of photographs, fact sheets, infographics, branded images,

and data visualizations. Graphic content is generally supported by written and video content
and has the opportunity to help your audience visualize what your brand is about.

 Video and audio contents: are very valuable pieces of content that include explanatory
videos, podcasts, and possibly music.
3.4. Adjustment of architecture based on feedback

Feedback is thus a systemized learning process which fills gaps in existing knowledge besides
updating it. It is essential because styles, preferences and human behavior patterns change with
time. Every building tells a story; all have some good, some bad features.
Being able to provide useful web design feedback is more important than you might imagine. As
you and your web agency build a site for the future, you have to take the power of good UX
seriously. According to a recent study conducted by Stanford, 75% of users admit to making
judgments about a company‘s credibility based on their website‘s UX design. Another study
says that it takes less than two seconds for users to form an impression of a website.
Knowing the ins and outs of good web design feedback is also important because it will create a
great rapport with your partner agency and will help the project move forward smoothly and
quickly.
Everyone has an opinion of how the perfect website should look. Some are wowed by bells and
whistles. Some prefer minimalist or dead-simple web design. The possibilities are endless.
However, the best designs all have a few things in common: they employ user-centered design
principles and focus on providing great user experience.
Good web design is a team sport. It involves extensive user research, shared understanding and
buy-in from both the web design agency and client. But getting to that point can be difficult if
the right type of web design feedback is not given right from the start.
Giving constructive web design feedback not only helps you save time but also helps the design
process move forward. Don‘t be afraid to raise questions or any concerns you might have with
your agency. After all, it is their job to find unique and creative solutions for your project. But
remember that feedback is a two-way street. A collaborative effort will achieve the best results.
3.5. Confirmation of Business Requirements with Signed-off Prototypes

What is design sign off? Sign off typically implies that the design is final and no further
revisions are possible. The development process may contain several sign off points where you
will be expected to approve changes, before the designer can continue the process.

Designs sign off is a safety net that is supposed to serve and protect both designer and client, but
in practice we've often found traditional hard design sign-off to be damaging in the context of
web design.
A. Sign-off Sheet Indispensability
Sign-off sheets are vital in the creative process, serving as a record of agreements, project
progress, and final approval. They ensure alignment among the project team and client regarding
the project concept, deliverables, and timeline. Despite the paperwork, they are beneficial as
they clarify expectations and provide a reference for project stages and approvals.
 3 benefits of sign-off sheets

1. Manage expectations between client and creative team
2. Allow space for additions or changes while keeping communication clear
3. Maintains ultimate accountability for each stage of the project
Using sign-off sheets prevents projects from getting ahead of themselves, which is especially
important in any creative firm. Each major stage of the project is reviewed and approved to
ensure that all stakeholders are happy with its progress before moving forward.
B. Process for Completed Deliverables
At the end of a project, a client review is conducted to align the deliverable with expectations.
Tools like File stage can consolidate feedback from all stakeholders. Once approved by all, the
sign-off sheet is signed by primary stakeholders, officially marking the project‘s completion
C. Process for Completed Projects

A sign-off sheet, crucial for marking the end of a project, ensures that all deliverables are
completed and approved, is protecting against changing client requirements.
It allows the team to start a new project with fresh payment terms, preventing endless work on a
single project for limited pay. Post-completion, the project is reviewed to identify strengths and
areas for improvement, potentially incorporating client feedback on the project, deliverable
quality, and team-client communication.
D. File stage Sign-off Sheet Template for Deliverables

The best way to keep client and project team expectations on track is by using a sign-off sheet
for each project deliverable. By doing this, you'll avoid the client making last-minute requests
that fall outside the project's scope.

A sign-off sheet for a prototype serves as an official document to confirm stakeholders' approval
or acceptance of the prototype before proceeding to the next phase of development. Here's an
example of a sign-off sheet for the "LearnWebDev" information architecture prototype:
Project Name: LearnWebDev Information Architecture Prototype
Date: [Insert Date]
Project Team:
 Project Manager: [Name]
 Web Developer: [Name]
 Content Writer: [Name]
Prototype Overview:
The prototype presented represents the information architecture and content structure for the
"LearnWebDev" website aimed at providing web development education resources.
Prototype Components Reviewed:
 Information Architecture: Navigation structure, main sections, and content hierarchy.
 Content Details: Home page, courses, tutorials, resources, community, about us, and
additional sections.
 User Interface Elements: Basic wireframes/mockups outlining layout and content
placement.
Stakeholder Sign-off:
We, the undersigned, have reviewed and hereby approve the information architecture prototype
for the "LearnWebDev" website:
1. [Stakeholder Name 1]: _______________________ (Signature & Date)
2. [Stakeholder Name 2]: _______________________ (Signature & Date)
Comments/Notes (if any):

[Insert any comments, suggestions, or notes regarding the prototype here.]
Project Manager's Notes: (If applicable)

[Insert any additional remarks or specific instructions regarding the prototype sign-off process
here.]

This sign-off sheet signifies the agreement and approval of stakeholders regarding the
information architecture prototype for the "LearnWebDev" website. All parties involved are in
consensus to proceed with the development phase based on this prototype.
[Footer: Company/Project Logo & Contact Information]
Self-Check 4

1. Prototypes are the final versions of a product or service, ready for launch to a wider market.
2. Graphic content in website creation includes only photographs and fact sheets, excluding
infographics and data visualizations.
3. Obtaining formal sign-off indicates the design is final, and no further revisions are possible.
4. Prototypes are solely a visual tool and do not contribute to problem-solving or detecting
unintended scenarios in product design.
1. What is the primary purpose of a prototype?
A. To create the final version of a product
B. To visualize design work and test functionality
C. To skip the testing phase before launch
D. To present an incomplete conceptual model
2. What are the three main types of web content?
A. Text, images, and videos
B. Written, graphic, and video/audio contents
C. Text, graphics, and animations
D. Images, videos, and audio files
3. What is the purpose of a sign-off sheet in a project?
A. To complicate the communication between client and team
B. To track the project's progress
C. To prevent any changes in the project

D. To maintain ultimate accountability and manage expectations
4. What does the completion of a sign-off sheet signify in a project?
A. It implies the project is still in progress
B. It marks the official end of a project or completion of a deliverable
C. It allows for unlimited revisions
D. It indicates the need for further client approvals
Operation Sheet: 4.1 Information Architecture Prototypes

Operation Title: Developing Information Architecture prototype
Operation purpose: To develop a prototype for website architecture
Equipment Tools and Materials:
 Computers
 Internet connection
Steps in doing the task:
Step1: Define the Website's Purpose and Identify Target Audience
Step 2: Conduct Research and Gather Content
Step 3: Organize Content and Create Categories
Step 4: Sketch the Site Structure Create a Sitemap and Navigation Planning
Step 5: Develop Wireframes or Mockups

Step 6: Test and Iterate
Step 7: Document and Finalize
Step 8: Present and Implement

LAP Test
Instructions: Given necessary templates, tools and materials you are required to perform the
following tasks accordingly.
Task 1: Prepare a prototype for ―ABC‖ Website.

Reference
BOOKS
Information Architecture: For the Web and Beyond: 4th edition by Louis Rosenfeld, Peter
Morville, and Jorge Arango
Web ReDesign 2.0: 2nd edition by Emily Cotler
The Design of Sites: 2nd edition by Douglas Van Duyne, James Landay, Jason Hong
URL
Information Architecture for Web Design: Step by Step Guide (altexsoft.com)
Complete Beginner's Guide to Information Architecture | UX Booth
Website Information Architecture Design Strategy Examples (& Best Tools) (slickplan.com)
Information Architecture Basics | Usability.gov
What is Information Architecture? — updated 2023 | IxDF (interaction-design.org)
Information Architecture – UX Collective (uxdesign.cc)
Web Design: Strategy and Information Architecture | Coursera

Developer’s Profile
Mobile
No Name Qualification Field of Study Organization/ Institution E-mail
number
1 Frew Atkilt M-Tech Network & Information Bishoftu Polytechnic College 0911787374 frew.frikii@gmail.com
Security
2 Gari Lencha MSc ICT Managment Gimbi Polytechnic 0917819599 Garilencha12@gmail.com
3 Kalkidan Daniel BSc Computer Science Entoto Polytechnic 0978336988 kalkidaniel08@gmail.com
4 Solomon Melese M-Tech Computer Engineering M/G /M /Polytechnic College 0918578631 solomonmelese6@gmail.com
5 Tewodros Girma MSc Information system Sheno Polytechnic College 0912068479 girmatewodiros @gmail.com
6 Yohannes BSc Computer Science Entoto Polytechnic College 0923221273 yohannesgebeyehu73@gmail.com

Gebeyehu
Ministry of Labor and Version -1

Page 58 of 58 Skills Website Information Architecture September, 2023
Author/Copyright

M03 Website Information Architecture

Uploaded by

Copyright:

Available Formats

M03 Website Information Architecture

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

M03 Website Information Architecture

Uploaded by

Copyright:

Available Formats

Web Development and Database

Module Title: Website Information Architecture

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

Welcome to the comprehensive course on developing effective website information architecture!

 Identification of Content Needs

 Showcase and sign off

Learning Objective of the Module

 Identify content needs

 Plan content structure

 Develop navigation system

 showcase and sign off

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

- Clearly define the target audience for the website.

 Brand Image and Positioning:

Ministry of Labor and Skills Website Information Version -1

- Prioritize an excellent user experience to keep visitors engaged and satisfied.

- Consider usability, accessibility, and responsiveness across various devices.

 Technology and Functionality:

- Ensure scalability, security, and flexibility to adapt to future needs.

 Analytics and Measurement:

 Integration with Other Systems:

- Ensure seamless data flow and consistency across different platforms.

Ministry of Labor and Skills Website Information Version -1

 Adaptability and Future Growth:

- Anticipate future growth and scalability requirements.

1.1.2 Difference Between a Webpage and Website

A website is a combination or collection of webpages grouped together, often handled by a

Ministry of Labor and Skills Website Information Version -1

Table 1.1. Distinguishing Between a Website and a Webpage

1.1.1 Website strategy

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

1.2.1 Intended Audience

Ministry of Labor and Skills Website Information Version -1

 The importance of identifying your intended audience

 Tips to determine intended audience

Ministry of Labor and Skills Website Information Version -1

1.2.2. Types of client interactions

1.2.3 long- and short-term goals for the site

Ministry of Labor and Skills Website Information Version -1

1.3 Identification and Categorization of Information

1.4 Content requirements

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

1. By purpose: Selling, entertainment and educational (informational);

2. By format: Text, graphic, video and audio materials.

Includes product descriptions, various articles, reviews, announcements, and

Consequences of such method:

 Getting the resource under the sanctions of search engines;

 Violation of copyrighting law;

 Negative impact on the company's reputation.

Ministry of Labor and Skills Website Information Version -1

Ministry of Labor and Skills Website Information Version -1

1. Strategic intent for website development is solely focused on technical aspects

2. Defining the target audience for a website is unnecessary as it doesn't impact

3. Content strategy is not a part of strategic intent for website development.

4. Integration with other systems within the organization is irrelevant to strategic