Information Architecture and User Experience Design

Introduction

A website is not merely a collection of pages. It is an information environment in which users attempt to locate information, complete tasks, make decisions and develop trust in an organisation. Information architecture (IA) determines how content is organised, labelled and connected. User experience (UX) design considers the quality of the complete interaction, including usefulness, ease of use, accessibility, credibility and satisfaction.

For digital marketers, IA and UX are strategic concerns. A well-structured website improves discoverability, supports search-engine optimisation, reduces user frustration, strengthens conversion pathways and makes analytics more meaningful. Conversely, confusing navigation, inaccessible interfaces or poorly designed mobile experiences can undermine otherwise strong campaigns.

This chapter explains how to plan navigation, site structures, page hierarchies, wireframes and user flows. It applies usability principles, responsive design, mobile-first practice and the accessibility principles associated with the Web Content Accessibility Guidelines (WCAG).

Learning Objectives

By the end of this chapter, you should be able to:

• distinguish information architecture from user experience and user interface design;
• organise website content into logical structures and hierarchies;
• design navigation systems, labels and user flows;
• create and evaluate low-fidelity wireframes;
• apply mobile-first and responsive design principles;
• use usability principles to identify and reduce interaction problems;
• explain practical WCAG-based accessibility requirements; and
• connect IA and UX decisions with digital marketing performance.

1. Information Architecture as Strategic Structure

Information architecture is the deliberate organisation of information so that people can understand where they are, what is available and how to reach their goals. It includes four closely related systems:

1. Organisation systems: how content is grouped, ordered and classified.
2. Labelling systems: the words and symbols used to represent content or actions.
3. Navigation systems: the mechanisms that allow users to move through the site.
4. Search systems: the tools that help users find content directly.

A useful IA answers three questions: What content exists? How is it related? How will users locate it?

IA, UX and UI Compared

These disciplines overlap but are not interchangeable. A visually attractive interface cannot compensate for an incoherent content structure. Similarly, a logical sitemap may still produce a poor experience if pages are slow, inaccessible or difficult to operate on a phone.

2. Understanding Users and Their Tasks

Effective IA begins with evidence about users rather than internal organisational preferences. Relevant evidence may come from interviews, customer-support records, search logs, web analytics, competitor reviews and usability tests.

Personas and Scenarios

A persona is a research-informed representation of a significant user group. It should describe goals, behaviours, constraints and context rather than rely on stereotypes. A scenario explains what the person is trying to accomplish in a particular situation.

For example, a prospective student may need to compare course duration, fees, entry requirements and employment outcomes. The user’s goal is not “visit the programmes page”; it is “decide whether this programme is suitable and how to apply.” Designing around the underlying goal produces more useful navigation and content.

User Stories and Tasks

A user story expresses a need from the user’s perspective:

As a prospective student, I want to compare programme options so that I can choose an appropriate course.

Tasks should be specific enough to observe. “Find the application deadline” is more testable than “understand the website.” Task analysis helps designers identify required content, decision points, dependencies and potential failure points.

User Journey and User Flow

A journey describes the broader experience across stages and channels. A user flow is a more specific sequence of screens, decisions and actions needed to complete a task. A typical flow might be:

Advertisement → landing page → programme comparison → course details → application form → confirmation.

Flows should include alternative paths. For example, a user may abandon the form, request help, return to compare another course or encounter a validation error. Designing only the ideal path produces fragile experiences.

3. Organising Content and Building Site Hierarchies

A sitemap represents the structural relationship among pages. A common hierarchical model begins with the homepage, proceeds to major sections and then divides those sections into more specific pages.

A simple hierarchy might be:

• Home
• Programmes
• Certificate Programmes
• Diploma Programmes
• Programme Detail
• Admissions
• Requirements
• Fees
• Application Process
• Student Support
• About
• Contact

Hierarchy should reflect user expectations and content relationships, not necessarily the organisation chart. Users generally think in terms of goals, products, services or problems rather than departmental divisions.

Breadth and Depth

Breadth is the number of choices at a level. Depth is the number of levels a user must pass through. Extremely narrow structures create excessive depth; extremely broad structures may overwhelm users with choices. The best balance depends on the content, audience, task frequency and device context.

There is no universal rule that a site must contain a particular number of menu items or levels. Claims such as a fixed “seven-item limit” should not be treated as design laws. Choice difficulty depends on familiarity, grouping, visual presentation and task importance.

Classification Schemes

Common classification approaches include:

• Topic-based: content grouped by subject, such as “Marketing” or “Finance.”
• Task-based: grouped by action, such as “Apply,” “Track an Order” or “Book a Consultation.”
• Audience-based: grouped for user types, such as “Students,” “Employers” or “Partners.”
• Format-based: grouped by content type, such as “Guides,” “Videos” or “Reports.”
• Chronological: grouped by time, such as news archives or event schedules.

A site may combine these schemes, but the primary organising logic should remain clear. Mixed schemes can confuse users when categories overlap or use inconsistent levels of abstraction.

Card Sorting and Tree Testing

Card sorting asks representative users to group content labels and name the groups. Open card sorting allows users to create categories; closed card sorting provides predefined categories. It reveals users’ mental models and vocabulary.

Tree testing evaluates whether users can find items in a text-only hierarchy. It helps test labels and category placement without the distraction of visual design. Neither method replaces usability testing, but both are efficient early-stage research techniques.

4. Navigation and Labelling

Navigation is the visible expression of IA. Common navigation types include:

• Global navigation, which provides access to major sections across the site;
• Local navigation, which exposes options within a section;
• Utility navigation, which supports functions such as login, language selection or accessibility settings;
• Contextual navigation, such as related articles or recommended products;
• Breadcrumb navigation, which shows the current location within a hierarchy; and
• Footer navigation, which provides secondary access and organisational information.

Navigation should communicate location, available choices and next actions. A user should not need to remember the path taken to understand the current page.

Labelling Principles

Labels should be familiar, specific, consistent and meaningful. “Fees and Funding” is generally more informative than “Information.” Labels should match the language users employ in search queries and support requests, while still reflecting organisational accuracy.

Avoid:

• unexplained internal abbreviations;
• clever but ambiguous phrases;
• inconsistent grammatical forms;
• labels that describe the organisation rather than the user’s task; and
• categories that overlap substantially.

The same concept should normally have the same label throughout the site. If “Programmes” appears in the main navigation, using “Courses” elsewhere may introduce unnecessary uncertainty unless the terms have intentionally different meanings.

Search and Filtering

Search is especially important for large or frequently changing websites. Effective search includes clear input instructions, relevant ranking, spelling tolerance, useful filters and understandable empty-result messages. Filters should reflect meaningful attributes and show the number or status of available results where appropriate.

Search should supplement, not excuse, poor navigation. If users must search for basic information that should be visible, the IA requires improvement.

5. Usability Principles

Usability refers to the extent to which specified users can achieve specified goals effectively, efficiently and satisfactorily in a specified context. Several principles are particularly useful in website evaluation.

Visibility of System Status

The interface should show what is happening. Examples include progress indicators for multistep forms, confirmation messages after submission and loading feedback for slow operations.

Match Between the System and the Real World

Use language and sequences familiar to users. A checkout process should use terms such as “delivery address” and “payment method” rather than internal database terminology.

User Control and Freedom

Users need undo, back, cancel and edit options. Destructive actions should be reversible where possible and should require appropriate confirmation.

Consistency and Standards

Similar controls should behave similarly. A button that looks like a link or a link that behaves like a button can create confusion, particularly for keyboard and assistive-technology users.

Error Prevention and Recovery

Prevent errors through sensible defaults, constraints and clear instructions. When errors occur, identify the field, explain the problem and state how to correct it. “Invalid input” is less useful than “Enter a valid eight-digit telephone number.”

Recognition Rather Than Recall

Make options and relevant information visible. Users should not have to remember information from one page while completing a later task.

Flexibility and Efficiency

Experienced users may benefit from shortcuts, saved preferences or autofill, while new users require clear guidance. Good design supports both groups without making the basic path obscure.

Aesthetic and Minimalist Design

Every element should support the user’s task. Removing irrelevant content improves comprehension, but minimalism does not mean removing necessary explanations or accessibility information.

6. Wireframes and Page Hierarchy

A wireframe is a simplified representation of a page’s structure. It shows content regions, hierarchy, controls and relationships without committing prematurely to colours, imagery or polished visual styling.

Low-, Mid- and High-Fidelity Wireframes

• Low-fidelity wireframes use simple blocks and labels. They are fast and suitable for exploring structure.
• Mid-fidelity wireframes show more precise layout, content types and interaction behaviour.
• High-fidelity prototypes resemble the intended interface and may support realistic interaction testing.

A wireframe should make the following visible:

• page purpose and primary user task;
• heading hierarchy;
• primary and secondary calls to action;
• navigation and wayfinding;
• content priority;
• form fields and validation areas;
• responsive changes across screen sizes; and
• accessibility-relevant interaction states.

Content Hierarchy

Page hierarchy guides attention and communicates importance. A typical landing page may contain a clear heading, a concise value proposition, a primary call to action, evidence or benefits, supporting detail and a secondary action. This is not a universal template; the order should follow the user’s decision process.

HTML heading levels should represent logical structure rather than visual size. A page should generally have one clear main heading, followed by nested headings in a meaningful sequence. Visual styling can make headings appear different without changing their semantic level.

7. Responsive and Mobile-First Design

Responsive design allows a site to adapt to different viewport sizes, input methods and device capabilities. It is not simply the shrinking of a desktop layout.

Mobile-First Practice

Mobile-first design begins with the smallest practical layout and prioritises essential content and actions. Designers then enhance the experience for larger screens. This approach encourages content prioritisation, reduces unnecessary complexity and exposes constraints early.

Mobile-first does not mean mobile-only. Desktop users may require richer comparison views, keyboard shortcuts or expanded navigation. Responsive decisions should consider:

• viewport width and orientation;
• touch, keyboard and pointer input;
• text scaling and zoom;
• network speed and device performance;
• content density; and
• changes in navigation patterns.

Practical Responsive Principles

Use flexible layouts, relative sizing where appropriate and breakpoints based on content rather than on a list of named devices. Controls must remain operable with touch and keyboard input. Text should remain readable without horizontal scrolling, and important actions should not disappear behind inaccessible menus.

Images should be appropriately sized and have meaningful alternative text when they convey information. Decorative images should be ignored by assistive technologies rather than given redundant descriptions.

8. Accessibility and WCAG-Based Design

Accessibility is the practice of designing products that can be used by people with diverse abilities, including visual, auditory, motor, cognitive and speech-related disabilities. It is both an ethical responsibility and a practical requirement in many legal and organisational contexts.

WCAG organises accessibility around four principles: content should be Perceivable, Operable, Understandable and Robust (POUR).

Perceivable

Information must be available through more than one sensory channel where necessary. Provide text alternatives for meaningful images, captions for video, transcripts for audio and sufficient colour contrast. Do not communicate essential meaning through colour alone.

Operable

All functionality should be available through a keyboard or an equivalent non-pointer mechanism. Users need visible focus indicators, logical focus order, adequate time and controls that can be operated without precise gestures.

Understandable

Use predictable navigation, clear instructions, consistent labels and comprehensible error messages. Forms should identify required fields and explain input formats.

Robust

Content should work reliably across browsers, devices and assistive technologies. Semantic HTML, correctly associated form labels and appropriate use of accessible names support robust implementation.

Accessibility should be integrated from research and architecture through design, development and testing. Automated tools can identify some issues, but they cannot reliably judge meaningful alternative text, logical task order or whether language is understandable. Manual keyboard testing, screen-reader checks and testing with disabled users provide complementary evidence.

9. A Practical Design Process

A manageable website design process can follow these stages:

1. Define objectives and audiences. Identify organisational outcomes and user goals.
2. Audit existing content. Record page purpose, owner, quality, duplication and status.
3. Research users. Examine evidence, vocabulary, tasks and barriers.
4. Model content and relationships. Create categories, metadata and a draft taxonomy.
5. Develop the sitemap. Test hierarchy, labels and depth.
6. Map priority user flows. Include successful, alternative and error paths.
7. Create mobile-first wireframes. Focus on structure, content priority and interaction.
8. Add responsive states. Show how layouts change at larger widths and different input modes.
9. Prototype and test. Use representative tasks and observe behaviour.
10. Iterate and govern. Establish ownership, review dates, analytics monitoring and accessibility checks.

A design is not complete when the wireframe is approved. Content quality, implementation fidelity, performance and ongoing governance determine the delivered experience.

10. Applied Case: Redesigning an Online Training Website

The following is an illustrative case.

Background

A small training provider promoted certificate programmes through paid search and social media. Analytics showed substantial traffic to programme pages but a low proportion of completed enquiries. Customer-support staff reported repeated questions about fees, duration and entry requirements.

Problem Analysis

An audit found that programme information was divided across several pages. The main navigation used internal categories such as “Academic Services” and “Learning Solutions.” On mobile devices, the navigation menu was difficult to operate, and the enquiry form returned a generic error when users omitted a required field.

User interviews indicated that prospective learners wanted to answer four questions quickly:

1. Is the programme relevant to my goals?
2. How long does it take?
3. What does it cost and what are the entry requirements?
4. How do I enrol or request further information?

Approach

The team created a content inventory and grouped information by user task. Card sorting supported the following top-level structure: Programmes, Admissions, Student Support and About. Each programme page used a consistent hierarchy: overview, learning outcomes, duration, fees, entry requirements, delivery format, assessment and application action.

The main user flow became:

Search or campaign → relevant programme page → compare essential facts → inspect requirements and fees → enquire or apply.

The team produced mobile-first wireframes with a persistent page title, a concise summary, an anchored contents list and a clearly labelled enquiry action. The form used explicit labels, field-specific error messages and keyboard-accessible controls. The design was then expanded for desktop screens with comparison features and wider content columns.

Outcome and Evaluation

Usability testing showed that participants found key information more quickly and described the labels as more familiar. The provider then monitored completed enquiries, form abandonment, internal search terms, page performance and accessibility defects. These metrics were interpreted together rather than treating any single conversion measure as proof of success.

Learning Points

The case illustrates that conversion problems may arise from structure and clarity rather than from a lack of traffic. IA, UX, content and marketing are connected. A campaign landing page must fulfil the expectations established by its advertisement, and the destination must make the next step obvious, credible and accessible.

11. Measurement, Governance and Professional Implications

UX decisions should be evaluated through both qualitative and quantitative evidence. Useful measures include task success, time on task, error frequency, abandonment, search refinement, support requests, form completion and conversion rate. Metrics require interpretation: a longer time on page may indicate engagement or confusion, depending on the task.

Content governance assigns responsibility for creation, review, approval, updating and removal. Without governance, websites accumulate duplicate, outdated or contradictory information. Each important page should have an owner, a defined audience, a purpose and a review trigger.

Designers and marketers must also protect privacy. Analytics, personalisation and testing should follow applicable data-protection requirements, provide appropriate transparency and avoid collecting data unnecessary for the stated purpose. Dark patterns—such as deceptive urgency, hidden fees, difficult cancellation or preselected consent—may increase short-term actions while damaging trust and potentially creating regulatory risk.

Artificial intelligence can assist with content inventories, search-log classification, draft labels and prototype analysis. However, AI-generated recommendations require human review for accuracy, bias, accessibility, privacy and organisational context. AI should support evidence-based design, not replace user research or accountability.

Challenges and Limitations

IA and UX work involves unavoidable trade-offs. Different audiences may use different vocabularies. Business stakeholders may prefer organisational categories that users do not understand. Simplifying navigation can hide important content if prioritisation is careless. Personalisation may improve relevance but can reduce transparency or create inconsistent experiences. Accessibility testing can reveal serious issues late if it is treated as a final inspection rather than a design requirement.

Research methods also have limitations. Card sorting may reflect the vocabulary of a small sample, analytics may represent existing users rather than excluded users, and usability tests can be influenced by artificial tasks. Strong practice therefore triangulates multiple evidence sources and continues testing after launch.

Best-Practice Checklist

Before launch, confirm that:

• the site structure reflects user goals and content relationships;
• labels are familiar, consistent and specific;
• major tasks have documented user flows;
• mobile layouts prioritise essential content and actions;
• responsive states support different input methods;
• headings, links, forms and focus order are semantically meaningful;
• errors are prevented where possible and explained clearly;
• keyboard and assistive-technology testing has been completed;
• content has owners and review processes; and
• analytics and feedback are used for continued improvement.

Chapter Summary

Information architecture organises content, labels, navigation and search so users can find and understand information. UX design extends this concern to the complete quality of interaction, including usefulness, efficiency, accessibility and trust. Effective website planning begins with user goals and evidence, then develops classification systems, sitemaps, navigation models, user flows and wireframes.

Usability principles such as visibility of system status, consistency, error prevention and recognition rather than recall provide practical evaluation criteria. Responsive design should adapt to different screens and input methods, while mobile-first practice prioritises essential content under constrained conditions. WCAG-based accessibility requires content to be perceivable, operable, understandable and robust.

Professional practice is iterative. Audits, research, prototyping, testing, analytics and governance work together. For digital marketers, strong IA and UX improve the relationship between campaign promise, landing-page experience and conversion action while supporting inclusion, privacy and long-term trust.

Key Terms

Information architecture: The organisation, labelling and structuring of information for effective use.

User experience: The overall quality of a person’s interaction with a product, service or system.

User interface: The visual and interactive layer through which users operate a digital product.

Sitemap: A representation of the pages and structural relationships within a website.

Taxonomy: A classification system used to organise content or concepts.

Navigation: Controls and pathways that help users move through information.

Global navigation: Navigation that provides access to major sections across a website.

Breadcrumb: A pathway display showing a page’s position in a hierarchy.

User flow: A sequence of screens, actions and decisions supporting a particular task.

Persona: A research-informed representation of a significant user group.

Scenario: A description of a user, context and goal.

Wireframe: A simplified representation of page structure and interaction.

Responsive design: Design that adapts presentation and interaction to different contexts and devices.

Mobile-first design: An approach that designs the smallest practical experience before larger layouts.

Usability: The extent to which users achieve goals effectively, efficiently and satisfactorily.

Accessibility: The design of products that can be used by people with diverse abilities.

WCAG: Web Content Accessibility Guidelines for accessible web content.

Semantic HTML: HTML whose elements communicate the meaning and structure of content.

Content governance: Policies and responsibilities for creating, maintaining and retiring content.

Dark pattern: A deceptive or manipulative interface practice that steers users against their interests.

Review Questions

Short Answer Questions

1. What are the four main systems of information architecture?
2. How does a sitemap differ from a user flow?
3. What is the purpose of card sorting?
4. State the four WCAG principles.
5. Why is mobile-first design useful?

Long Answer Questions

1. Explain how user research should influence a website’s navigation and labelling system.
2. Discuss the relationship between information architecture, UX design and content strategy.
3. Explain how usability principles can be applied to an online application form.
4. Describe a practical process for developing and testing responsive wireframes.
5. Discuss why accessibility should be integrated throughout the design lifecycle rather than checked only before launch.

Analytical / Application Questions

1. A charity website receives many visits to its donation page but few completed donations. Its navigation uses internal departmental terms, and the mobile form displays errors only after submission. Diagnose the likely IA and UX problems and propose a redesign approach.
2. Design a top-level information architecture for a university website serving prospective students, current students, staff and employers. Justify your classification scheme and navigation labels.
3. Evaluate the ethical risks of using personalisation and AI-generated recommendations in website UX. Identify safeguards that would protect user autonomy, privacy and accessibility.

Multiple Choice Questions with Answers

Question 1

Which activity primarily tests whether users can locate content within a proposed hierarchy?

A. Tree testing

B. Colour contrast testing

C. Load testing

D. A/B testing of advertisements

Correct Answer: A. Tree testing

Question 2

What is the main purpose of a user flow?

A. To define brand colours

B. To show the sequence of actions and decisions for a task

C. To list all website owners

D. To measure server capacity

Correct Answer: B. To show the sequence of actions and decisions for a task

Question 3

Which navigation type shows a page’s position within a hierarchy?

A. Utility navigation

B. Contextual navigation

C. Breadcrumb navigation

D. Footer navigation

Correct Answer: C. Breadcrumb navigation

Question 4

Which practice best reflects mobile-first design?

A. Designing only for older mobile phones

B. Beginning with essential content and actions for a constrained layout

C. Removing all desktop functionality

D. Using a fixed-width desktop layout on every device

Correct Answer: B. Beginning with essential content and actions for a constrained layout

Question 5

Under the WCAG principles, keyboard access is mainly associated with which principle?

A. Perceivable

B. Operable

C. Understandable

D. Robust

Correct Answer: B. Operable

Question 6

Which error message is most useful?

A. Error

B. Invalid input

C. Something went wrong

D. Enter a valid eight-digit telephone number

Correct Answer: D. Enter a valid eight-digit telephone number

Question 7

What is the main purpose of a low-fidelity wireframe?

A. To finalise photographic assets

B. To explore page structure and interaction quickly

C. To replace accessibility testing

D. To measure advertising reach

Correct Answer: B. To explore page structure and interaction quickly

Question 8

Which classification scheme groups content according to what users want to accomplish?

A. Task-based

B. Chronological

C. Format-based

D. Department-based

Correct Answer: A. Task-based

Question 9

Why should accessibility not depend on colour alone?

A. Colour always slows page loading

B. Some users cannot perceive colour differences reliably

C. Colour cannot be used in responsive design

D. Search engines ignore coloured text

Correct Answer: B. Some users cannot perceive colour differences reliably

Question 10

Which statement best describes content governance?

A. A method for selecting website fonts

B. A process for assigning responsibility for content throughout its lifecycle

C. A technique for compressing images

D. A system for encrypting payment data

Correct Answer: B. A process for assigning responsibility for content throughout its lifecycle