14. AI-Enabled Design and Emerging Web Experiences

Introduction and Context

Artificial intelligence is changing the way digital products are researched, designed, written, prototyped, built, and evaluated. In UI/UX practice, generative AI can summarise research material, propose interface alternatives, generate microcopy, create visual concepts, produce code, and simulate different user interactions. At the same time, conversational agents, multimodal interfaces, spatial computing, adaptive personalisation, and privacy-preserving technologies are expanding what a web experience can be.

These developments do not make design expertise unnecessary. Rather, they change the nature of expertise. A designer must now be able to formulate useful prompts, judge generated outputs, identify unsupported claims, protect sensitive information, preserve accessibility, and make accountable decisions about automation. The central professional question is not whether AI can produce an output, but whether that output is appropriate for a particular user, context, organisation, and risk level.

This chapter examines AI as a design collaborator and engineering assistant while treating it critically. It presents practical workflows for research synthesis, ideation, content, prototyping, and code assistance. It also considers hallucination, bias, intellectual-property concerns, privacy, security, accessibility, and governance. The chapter then evaluates emerging forms of web experience: conversational, multimodal, spatial, personalised, and privacy-preserving systems.

Learning Objectives

After studying this chapter, students should be able to:

1. Explain how generative AI can support major stages of UI/UX and responsive web development.

2. Distinguish useful assistance from inappropriate delegation of professional judgement.

3. Design a controlled workflow for AI-supported research synthesis, ideation, content creation, prototyping, and coding.

4. Evaluate AI outputs for hallucination, bias, accessibility, security, privacy, and intellectual-property risk.

5. Compare conversational, multimodal, spatial, personalised, and privacy-preserving web experiences.

6. Apply governance, documentation, testing, and human-review practices to an AI-enabled design project.

From Interface Production to Experience Orchestration

Traditional interface design generally begins with a problem definition, user research, information architecture, interaction design, visual design, implementation, and evaluation. Generative AI can participate at every stage, but it does not replace the relationships among these stages. A plausible screen generated without evidence may solve the wrong problem; elegant code may implement an inaccessible interaction; and persuasive copy may make an unsupported promise.

AI-enabled design is therefore best understood as an orchestration activity. The designer supplies context, constraints, evidence, evaluation criteria, and ethical boundaries. The model generates possibilities or transformations. The designer and wider team then verify, select, revise, test, and document the result. This is a human-in-the-loop process rather than a fully automatic pipeline.

Two distinctions are particularly important. First, generative AI creates or transforms content, whereas predictive or analytical AI may classify, rank, forecast, or detect patterns. A recommendation engine, for example, may rank products, while a language model may generate an explanation of those recommendations. Second, automation and autonomy are not identical. A system can automate a low-risk formatting task while remaining under direct review; an autonomous agent may plan and execute a sequence of actions with limited supervision. The latter requires considerably stronger controls.

Important Concepts and Terminology

A foundation model is a large model trained on broad data and adapted for multiple tasks. A generative model produces new text, images, audio, video, code, or structured outputs. A large language model generates language by predicting likely sequences from an input context. A prompt is an instruction or information package supplied to a model. Prompt engineering is the deliberate design of prompts to improve relevance, consistency, and controllability.

Retrieval-augmented generation, or RAG, supplies a model with selected external documents at the time of generation. It can reduce unsupported answers when the retrieved sources are authoritative and current, although retrieval itself may be incomplete or inaccurate. A hallucination is an output that presents false, fabricated, or unsupported information as if it were reliable. Grounding means connecting an output to verifiable evidence, rules, data, or system state.

Human-in-the-loop design retains human review at consequential points. Human-on-the-loop design allows an automated system to operate while humans monitor performance and intervene when necessary. Personalisation changes content, recommendations, or interaction according to user characteristics or behaviour. Adaptation may also refer to contextual changes, such as switching layout or input modality according to device, environment, or task.

Multimodal interaction combines modalities such as text, voice, images, video, touch, gesture, and sensor data. Spatial computing places digital objects in a three-dimensional or environment-aware space. Differential privacy is a mathematical approach to limiting what can be inferred about an individual from aggregate data. Federated learning trains models across distributed devices or organisations while keeping training data local, although model updates can still require protection.

A Responsible AI-Assisted Design Workflow

A useful workflow begins with task classification. Before using a model, the team should decide whether the task is exploratory, creative, analytical, operational, or high consequence. Generating alternative button labels is low risk. Summarising confidential medical interviews, deciding eligibility for a service, or generating production authentication code is much higher risk. The level of review, data protection, and testing should increase with potential harm.

Establishing the brief and evidence boundary

The prompt should identify the purpose, audience, platform, constraints, tone, required format, and evaluation criteria. It should also state what the model must not assume. For example:

“Using only the supplied interview excerpts, group observations into provisional themes. Quote the evidence for each theme, identify contradictory statements, and mark any interpretation that is not directly supported. Do not infer demographic attributes.”

This type of prompt is more useful than “Analyse these interviews” because it defines the evidence boundary and makes uncertainty visible. Sensitive information should be removed, masked, or processed through an approved organisational service before it is entered into a model.

Research synthesis

AI can accelerate transcription cleaning, coding suggestions, clustering of observations, comparison of interview responses, and preparation of research summaries. A responsible workflow preserves the original evidence. The researcher should retain an audit trail connecting themes to quotations, participant identifiers, dates, and research questions. The model may propose a theme such as “difficulty understanding delivery status,” but the researcher must check whether the theme appears across participants, whether exceptions exist, and whether the language reflects the participants rather than the model’s assumptions.

A practical synthesis sequence is to prepare a de-identified evidence set, request descriptive coding, compare the generated codes with manual coding, investigate disagreements, and then write a human-reviewed synthesis. Quantitative counts should not be treated as statistically meaningful merely because a model produced them. AI can organise evidence; it cannot compensate for poor sampling, leading questions, or weak research design.

Ideation and design exploration

Generative systems are effective at expanding the option space. A designer can ask for several information architectures, onboarding flows, empty states, or responsive layout strategies for clearly defined user groups. The value lies in variation and comparison, not in accepting the first attractive result.

Ideation should be divergent before it becomes convergent. During divergence, the team requests alternatives with different assumptions—for example, a guided flow, a search-first flow, and a conversational flow. During convergence, each option is assessed against user goals, accessibility, business constraints, technical feasibility, and ethical consequences. A design rationale should record why an option was selected and which AI suggestions were rejected.

Image-generation tools can support mood boards and visual exploration, but generated images may contain cultural stereotypes, inaccessible colour combinations, misleading representations, or unlicensed stylistic imitation. They should not be mistaken for validated user interfaces. Components, spacing, content hierarchy, interaction states, and responsive behaviour still require deliberate design.

Content and microcopy

Language models can draft headings, error messages, onboarding instructions, alt-text candidates, help articles, and content variations. This is especially useful when a product has a defined content strategy and terminology system. The content designer must verify factual accuracy, reading level, tone, translation quality, legal claims, and whether the message gives users enough information to act.

Good microcopy is not simply fluent. An error message should identify what happened, explain what the user can do, and avoid blaming the user. AI-generated text often sounds confident while remaining vague. For example, “Something went wrong. Please try again later” is less useful than an accurate message that identifies a temporary payment-service failure and offers a safe next step. In regulated or safety-sensitive contexts, approved language and human review are essential.

Prototyping and interaction simulation

AI can convert natural-language descriptions into wireframes, component configurations, or clickable prototypes. It can also simulate possible user questions in a conversational interface. These capabilities reduce the cost of early exploration, but a prototype is a hypothesis rather than evidence of usability.

The team should test prototypes with representative users and inspect keyboard navigation, focus order, screen-reader labels, colour contrast, reduced-motion settings, loading states, error recovery, and responsive breakpoints. Conversational prototypes must also be tested for ambiguity, interruption, correction, escalation, and refusal. A system that performs well in a scripted demonstration may fail when users use incomplete, emotional, multilingual, or unexpected language.

Code assistance and technical implementation

Code assistants can explain APIs, generate component scaffolds, suggest tests, refactor repetitive code, and identify possible defects. They are useful when the developer provides the framework version, coding conventions, data model, security requirements, and acceptance criteria. Generated code must be reviewed as if written by an inexperienced contributor.

Particular attention is required for authentication, authorisation, input validation, file uploads, data storage, cryptography, third-party dependencies, and error handling. A model may produce code that works in a demonstration but exposes secrets, trusts user-controlled values, uses obsolete APIs, or omits keyboard support. Code review, static analysis, dependency scanning, unit tests, integration tests, and manual accessibility testing remain necessary.

Evaluating AI Outputs: A Quality and Risk Framework

A practical evaluation framework can assess six dimensions: factuality, relevance, usability, fairness, safety, and traceability. Factuality asks whether claims are supported. Relevance asks whether the output addresses the actual task and audience. Usability concerns clarity, interaction quality, accessibility, and error recovery. Fairness examines whether different groups are represented and treated appropriately. Safety considers foreseeable physical, financial, psychological, privacy, and security harms. Traceability asks whether a reviewer can identify the source, prompt, model, data, and decision process.

Hallucination is more than a factual mistake. It becomes a design risk when an interface presents a generated answer with unwarranted certainty or hides the difference between retrieved evidence and model interpretation. Risk-reduction techniques include constrained prompts, retrieval from approved sources, citations or source links, confidence communication, structured outputs, adversarial testing, and human approval for consequential responses. The interface should make correction and escalation possible rather than forcing users to trust the system.

Bias can enter through training data, labels, product assumptions, sampling, prompts, evaluation criteria, or deployment context. A model may produce different quality of service for dialects, languages, disability-related communication, names, or cultural references. Bias assessment should therefore include representative test cases, subgroup comparisons, qualitative review, and consultation with affected communities. “Neutral” wording does not guarantee neutral outcomes.

Emerging Forms of Web Experience

Conversational interfaces

Conversational interfaces allow users to express goals rather than navigate only through menus and forms. They can support search, tutoring, troubleshooting, product discovery, and service access. Their strengths include flexibility, natural-language input, and the ability to clarify a request. Their weaknesses include ambiguity, poor discoverability of available functions, uncertain system state, verbosity, and difficulty comparing alternatives.

A well-designed conversational interface should disclose that the user is interacting with an automated system where appropriate, show what the system can do, preserve conversation context without making hidden assumptions, provide concise responses, and offer controls for correction, reset, export, and escalation. Important actions should require confirmation and display their consequences. Conversation should complement, not eliminate, conventional navigation when users need overview, comparison, or precise control.

Multimodal experiences

Multimodal systems combine text, voice, vision, touch, gesture, and other inputs. A user might photograph a product, ask a spoken question, and receive a visual comparison. Multimodality can improve accessibility and support users in environments where one input method is inconvenient. It can also create new failure modes: a voice command may be misunderstood, an image model may misidentify an object, or a gesture may be unavailable to a user with limited mobility.

Designers should provide equivalent pathways rather than assuming that every user can use every modality. Feedback should indicate which input was detected and what the system understood. Users need the ability to correct recognition errors, switch modalities, and complete tasks without exposing sensitive information in public settings.

Spatial and three-dimensional web experiences

Spatial experiences use depth, positional relationships, and environmental context. They may support virtual showrooms, training simulations, visualisation, collaboration, and augmented-reality product guidance. Spatial design introduces concerns that do not arise in a flat page: orientation, physical safety, motion discomfort, occlusion, scale, depth cues, reachability, and social presence.

A spatial interface should provide stable landmarks, clear transitions, adjustable motion, readable text, and a non-spatial alternative. It should not assume that users have a particular device, physical environment, or level of mobility. Spatial novelty is not a sufficient reason to use three-dimensional interaction; the medium should improve comprehension, control, or task performance.

Personalised and adaptive experiences

Personalisation can use explicit preferences, current context, past behaviour, or inferred interests. It can reduce effort by presenting relevant content, remembering settings, or adapting complexity. However, personalisation can narrow discovery, reinforce stereotypes, expose sensitive inferences, and make interfaces unpredictable. Users may not know why content changed or how to correct the system.

Good personalisation is transparent, proportionate, and controllable. Users should be able to inspect important preferences, change them, opt out where feasible, and receive a meaningful default experience. Designers should distinguish convenience personalisation from high-impact profiling. The latter may require stronger legal, ethical, and organisational safeguards.

Privacy-preserving experiences

Privacy is not merely a policy statement; it is an interaction property. Privacy-preserving design minimises data collection, limits retention, uses purpose-specific processing, and gives users understandable choices. Technical approaches include local processing, encryption, access controls, aggregation, differential privacy, federated learning, and selective disclosure. None is a universal solution. Local processing may limit functionality, while aggregate data can still reveal patterns if poorly protected.

Privacy notices should be timely and connected to the action being performed. Consent should not be obtained through confusing interfaces or coercive defaults. Data dashboards can help users inspect, download, correct, or delete information, although these controls must correspond to genuine organisational capabilities.

An Illustrative Case: An AI-Assisted University Support Portal

Background

A fictional university, Northbridge University, plans to redesign its student support portal. Students currently search across separate pages for information about enrolment, finance, disability support, housing, and counselling. The institution proposes an AI assistant that can answer questions and guide students to relevant services.

Situation and problem

The proposed assistant could reduce search effort, but it would handle sensitive questions. Students might disclose financial hardship, health conditions, immigration concerns, or experiences of harassment. Incorrect advice could cause missed deadlines or serious distress. The design team must therefore balance convenience with privacy, accuracy, accessibility, and escalation.

Analysis

The team classifies general navigation and opening-hours questions as lower risk. Questions involving eligibility, deadlines, health, legal status, or personal safety are higher risk. It maps authoritative sources, identifies content owners, and defines which questions the assistant may answer. It also identifies groups likely to experience barriers, including students using screen readers, students with limited language proficiency, and students who cannot safely speak aloud.

Approach and solution

The team uses retrieval-augmented generation connected only to approved university documents. Each answer includes a source link and the date of the relevant policy where appropriate. The assistant states when it is uncertain and routes high-risk questions to trained staff. It does not diagnose, determine eligibility independently, or infer sensitive characteristics for personalisation.

The interface provides search and conventional navigation alongside conversation. Students can begin anonymously, choose whether a conversation is stored, delete their history, and switch to text or accessible form-based pathways. The design includes keyboard support, readable focus states, plain language, multilingual review, and a prominent emergency and human-support route.

Before release, the team conducts red-team tests using misleading prompts, outdated policies, ambiguous questions, discriminatory language, and attempts to extract private data. Staff review sampled conversations, and a process is established for correcting source documents and notifying users when advice changes.

Outcome

The pilot does not measure success only by the number of questions answered. It measures task completion, source-click accuracy, escalation appropriateness, error severity, accessibility conformance, subgroup performance, user trust, and the rate of unsupported answers. The assistant is released gradually, beginning with low-risk informational tasks. High-risk functions remain human-led.

Learning points

The case demonstrates that AI capability is only one design consideration. Evidence boundaries, escalation, user control, source maintenance, accessibility, and governance determine whether an AI feature is professionally responsible. A less autonomous system may provide greater value because it is more reliable and easier to understand.

Professional and Organisational Implications

AI-enabled design changes team roles and accountability. Designers increasingly need data literacy, prompt and evaluation skills, accessibility expertise, and an understanding of model limitations. Developers need stronger practices for reviewing generated code and protecting software supply chains. Product managers must define acceptable risk, ownership, success measures, and release gates. Legal, security, privacy, content, and domain experts should participate when the system affects sensitive data or consequential decisions.

Organisations should maintain an AI use policy that addresses approved tools, prohibited data, intellectual property, retention, vendor terms, review responsibilities, incident reporting, and documentation. An AI system inventory can record the purpose, model, data sources, owners, users, risks, evaluations, and changes associated with each deployment. Model and prompt versions should be recorded for significant outputs so that failures can be investigated.

Procurement also matters. A vendor’s claims about accuracy, privacy, or training-data use should be examined contractually and technically. Organisations should ask where data is processed, how long it is retained, whether it is used for further training, how incidents are reported, and whether customers can audit or delete data. Replacing a visible internal risk with an opaque external service is not responsible governance.

Common Mistakes and Limitations

A frequent mistake is treating fluent output as correct output. Fluency is a language property, not evidence of truth. Another is using confidential research or customer data in an unapproved public tool. Teams also over-automate before understanding the task, hide AI involvement from users, omit non-AI alternatives, and evaluate only the happy path.

Other limitations include outdated training data, weak performance in less represented languages, prompt sensitivity, inconsistent outputs, fabricated citations, excessive confidence, context-window constraints, and difficulty explaining internal reasoning. Image and code generation may reproduce protected material or insecure patterns. Cost, latency, energy use, vendor dependency, and service outages can also affect product quality.

The appropriate response is not to reject all AI use. It is to match the tool and degree of autonomy to the task, require evidence and review, test with diverse users, and retain a safe fallback. The more consequential the outcome, the less acceptable it is to rely on unverified generation.

Best Practices for AI-Enabled Web Design

1. Begin with a clearly defined user and organisational problem rather than an available AI capability.

2. Classify tasks by risk and set review requirements before experimentation.

3. Use de-identified, minimal, authorised data and document data flows.

4. Ground factual outputs in approved sources and preserve links to evidence.

5. Ask models to express uncertainty, identify assumptions, and separate evidence from interpretation.

6. Generate alternatives, but select designs through explicit usability, accessibility, feasibility, and ethical criteria.

7. Test unusual inputs, subgroup experiences, interruptions, refusals, and recovery paths.

8. Provide user control, transparency, correction, escalation, and a non-AI alternative where appropriate.

9. Review generated content and code for accuracy, security, accessibility, licensing, and maintainability.

10. Monitor deployed systems, record incidents, update sources, and reassess risks when the model or context changes.

Current Developments and Future Directions

Web experiences are moving toward systems that combine retrieval, generation, tool use, voice, vision, and agent-like planning. Design systems may increasingly include machine-readable component rules, accessibility constraints, content policies, and code-generation interfaces. Personalisation may become more local and user-controlled as privacy concerns grow. Smaller models running on devices may reduce latency and data transfer for selected tasks.

These developments also intensify the need for standards, provenance, evaluation methods, and accountable ownership. The future professional is unlikely to be judged merely on the ability to produce a prompt or generate a screen. More important will be the ability to frame worthwhile problems, protect people, recognise uncertainty, test consequences, and create experiences that remain understandable and controllable.

Chapter Summary

Generative AI can support research synthesis, ideation, content creation, prototyping, and code assistance, but its outputs require human judgement and evidence-based review. Prompt quality, grounding, retrieval, audit trails, and risk classification improve reliability without eliminating hallucination or bias. AI-enabled design must address privacy, intellectual property, accessibility, security, fairness, and organisational accountability.

Conversational interfaces offer flexible goal expression but need clear scope, state visibility, correction, and escalation. Multimodal systems can improve access while introducing recognition and privacy problems. Spatial experiences require attention to safety, orientation, motion, and alternative pathways. Personalisation should be transparent and controllable, while privacy-preserving design minimises data and uses appropriate technical safeguards. Responsible practice combines innovation with testing, governance, documentation, and human responsibility.

Key Terms

Foundation model: A broadly trained model that can be adapted to many tasks.

Generative AI: Artificial intelligence that produces new content such as text, images, audio, video, or code.

Prompt engineering: The deliberate construction of instructions and context for obtaining useful model outputs.

Hallucination: A false, fabricated, or unsupported output presented as reliable information.

Grounding: Connecting an AI output to evidence, approved data, rules, or system state.

Retrieval-augmented generation: A method that supplies retrieved external information to a generative model before response generation.

Human-in-the-loop: A design arrangement in which people review or approve important system outputs or actions.

Multimodal interaction: Interaction using two or more modalities, such as text, voice, image, gesture, or touch.

Spatial computing: Computing experiences that use three-dimensional space, depth, position, or environmental context.

Personalisation: Adapting content, recommendations, or interaction to a user or context.

Differential privacy: A mathematical technique that limits the disclosure of individual information in aggregate analysis.

Federated learning: A training approach in which data remains distributed while model learning occurs through coordinated updates.

Prompt injection: An attempt to manipulate an AI system through crafted input that conflicts with its intended instructions.

Provenance: Information about the origin, processing, and evidence behind content or data.

Model drift: A change in system performance caused by changing data, user behaviour, context, or model conditions.

Explainability: The degree to which a system’s operation or output can be made understandable to relevant people.

Accessibility: The design of products so that people with varied abilities can use them effectively.

Escalation: The transfer of a task or problem from an automated system to a human or specialised service.

Design governance: Policies, roles, processes, and controls that guide responsible design decisions.

Review Questions

Short Answer Questions

1. What is the difference between generative AI and predictive AI in a UI/UX context?

2. Why should AI-generated research themes be linked to original evidence?

3. Define hallucination and explain why fluent language does not prevent it.

4. State two important controls for a conversational web interface.

5. What is the purpose of differential privacy?

Long Answer Questions

1. Explain a responsible workflow for using generative AI from research synthesis through interface implementation.

2. Discuss the principal risks of AI-generated content and code, and describe suitable review practices.

3. Compare conversational, multimodal, and spatial web experiences in terms of opportunities and design challenges.

4. Explain how personalisation can improve usability while also creating privacy, fairness, and predictability concerns.

5. Describe the organisational governance required for responsible AI-enabled product development.

Analytical / Application Questions

1. A shopping assistant gives confident but unsupported advice about product safety. Analyse the likely causes and propose a safer interaction and evaluation strategy.

2. A university wants to use student conversations to personalise support recommendations. Design a privacy-preserving approach that includes consent, data minimisation, user control, and human escalation.

3. A development team uses an AI code assistant to create an accessible responsive form. Prepare a review plan covering security, accessibility, testing, dependencies, and maintainability.

22. Multiple Choice Questions with Answers

Question 1

A design team asks an AI system to group interview observations. Which practice most directly improves the credibility of the synthesis?

A. Accepting the most frequently suggested theme

B. Linking each theme to original evidence and investigating contradictions

C. Removing unusual participant statements

D. Allowing the model to infer missing demographic information

Correct Answer: B. Linking each theme to original evidence and investigating contradictions

Question 2

Which statement best describes retrieval-augmented generation?

A. It trains a model without using any external information

B. It retrieves relevant information and supplies it to the model during generation

C. It automatically proves that every generated answer is correct

D. It replaces the need for content maintenance

Correct Answer: B. It retrieves relevant information and supplies it to the model during generation

Question 3

A language model produces an attractive but fabricated policy citation. This is primarily an example of:

A. Personalisation

B. Spatial interaction

C. Hallucination

D. Federated learning

Correct Answer: C. Hallucination

Question 4

Which task generally requires the strongest human review?

A. Generating alternative button labels

B. Suggesting colour names for a mood board

C. Determining a student’s eligibility for financial support

D. Reformatting placeholder text

Correct Answer: C. Determining a student’s eligibility for financial support

Question 5

What is a significant design weakness of a conversational interface?

A. It can never accept natural-language input

B. Users may not know what functions are available or how to recover from ambiguity

C. It cannot be combined with conventional navigation

D. It always exposes the user’s private data

Correct Answer: B. Users may not know what functions are available or how to recover from ambiguity

Question 6

Which feature best supports responsible personalisation?

A. Hidden inferences that users cannot change

B. A permanently fixed recommendation profile

C. Transparent preferences, meaningful controls, and an opt-out where feasible

D. Removing all non-personalised content

Correct Answer: C. Transparent preferences, meaningful controls, and an opt-out where feasible

Question 7

Why should a spatial web experience provide a non-spatial alternative?

A. Three-dimensional interfaces are always illegal

B. Users may lack suitable devices, environments, or physical abilities

C. Spatial systems cannot display text

D. Alternative pathways prevent all privacy risks

Correct Answer: B. Users may lack suitable devices, environments, or physical abilities

Question 8

Which practice is most consistent with privacy-preserving design?

A. Collecting all available user data for possible future use

B. Retaining conversation histories indefinitely by default

C. Minimising data collection and providing understandable control over retention

D. Using personalisation without informing users

Correct Answer: C. Minimising data collection and providing understandable control over retention

Question 9

A developer uses an AI assistant to generate authentication code. What is the most appropriate response?

A. Deploy immediately because generated code is consistent

B. Review only the visual appearance of the interface

C. Conduct security review, testing, dependency checks, and human code review

D. Remove all error handling to simplify the code

Correct Answer: C. Conduct security review, testing, dependency checks, and human code review

Question 10

In the illustrative university case, why were high-risk questions routed to trained staff?

A. The AI assistant was used only for entertainment

B. Consequential advice required stronger expertise, accountability, and escalation

C. Retrieval-augmented generation cannot use documents

D. Students were prohibited from using text interfaces

Correct Answer: B. Consequential advice required stronger expertise, accountability, and escalation