1. Foundations of UI, UX and Human–Computer Interaction

Introduction and Context

Digital products are not experienced as collections of screens alone. A banking application, for example, includes visual layouts, navigation, authentication, error handling, customer support, institutional policies, and the user’s confidence that money will be transferred correctly. Designing such a product therefore requires more than attractive graphics or technically correct code. It requires an understanding of how people perceive, interpret, decide, act, recover from errors, and evaluate the total service surrounding an interaction.

This chapter establishes the conceptual foundation for UI/UX design and responsive web development. It distinguishes user interface (UI), user experience (UX), interaction design, service design, and customer experience (CX), while showing how these fields overlap. It also introduces central ideas from human–computer interaction (HCI): mental models, affordances, signifiers, feedback, constraints, cognitive load, Gestalt principles, and usability heuristics. These concepts are not merely theoretical. They guide decisions about information architecture, responsive layouts, forms, navigation, accessibility, prototyping, usability evaluation, and front-end implementation.

A professional designer must learn to move between several levels of analysis. At the interface level, the question may be whether a button is visible and understandable. At the interaction level, it may be whether the user knows what will happen after selecting it. At the service level, the issue may be whether the digital interaction is supported by reliable fulfilment, communication, and human assistance. Good design connects these levels rather than optimising one while neglecting the others.

Learning Objectives

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

1. Distinguish UI, UX, interaction design, service design, and CX.

2. Explain the role of HCI in the design and evaluation of digital products.

3. Apply mental-model theory, affordances, signifiers, feedback, constraints, and cognitive-load principles to interface decisions.

4. Use relevant Gestalt principles to organise visual information.

5. Interpret and apply established usability heuristics, particularly Nielsen’s ten heuristics.

6. Analyse a digital interaction from user, organisational, technical, and service perspectives.

7. Recognise accessibility, ethical, privacy, and inclusion issues in design decisions.

8. Evaluate common design failures and propose evidence-informed improvements.

From Interface to Experience

User interface

The user interface is the visible and interactive means through which a person communicates with a digital system. It includes typography, colour, spacing, icons, controls, layouts, content, navigation, motion, and states such as loading, success, empty, and error states. UI is therefore broader than visual styling, although visual design is an important component of it.

A well-designed interface communicates what is available, what is currently happening, and what the user can do next. It also adapts appropriately to different screen sizes, input methods, abilities, and environmental conditions. A beautiful interface that is confusing, inaccessible, or slow is not a successful UI.

User experience

User experience refers to the perceptions, emotions, behaviours, and judgements that arise before, during, and after interaction with a product or service. UX includes usability, usefulness, accessibility, trust, perceived value, emotional response, and the effort required to accomplish goals. It begins before a user opens an application—for example, when reading an advertisement or hearing a recommendation—and continues after the interaction through confirmation messages, support, billing, or future use.

UX is not identical to user satisfaction. Satisfaction is one possible outcome of an experience. A system may be satisfying but not useful, or efficient but unpleasant. UX design is consequently concerned with the whole quality of the relationship between people and products.

Interaction design

Interaction design focuses on the behaviour of interactive systems: how users and systems communicate over time. It addresses actions, system responses, task sequences, navigation, control, error recovery, and the relationship between intention and outcome. UI design asks how an interface looks and communicates; interaction design asks how it behaves and how the user’s actions unfold.

For instance, a calendar interface may have a clear visual design, but interaction design determines whether selecting a date opens an appropriate editor, whether conflicting appointments are identified, whether changes can be undone, and whether the system confirms that the appointment was saved.

Service design

Service design considers the complete service ecosystem through which value is created and delivered. It includes front-stage touchpoints visible to customers, such as a website or call centre, and back-stage processes, such as inventory systems, staff procedures, authentication services, logistics, and organisational policies. Common service-design tools include customer journey maps, service blueprints, stakeholder maps, and ecosystem maps.

A web-based hotel booking form may be easy to use, yet the service fails if the reservation is not synchronised with the hotel’s system. Service design therefore connects interface decisions with operational capability.

Customer experience

Customer experience is the customer’s overall relationship with an organisation across multiple interactions and channels. It includes advertising, sales, product use, support, billing, physical locations, social communication, and reputation. UX generally concentrates on experiences associated with a particular product or service, whereas CX takes a broader organisational and relationship perspective. The concepts overlap: a poor checkout UX can damage overall CX, while excellent customer support may compensate for a minor interface difficulty.

These distinctions are analytical rather than absolute. In professional teams, product designers, UX researchers, service designers, engineers, marketers, content specialists, and operations managers must collaborate. The important question is not which discipline owns a problem, but which perspective is needed to understand it properly.

Human–Computer Interaction as a Field

HCI is the interdisciplinary study, design, and evaluation of interactive computing systems for human use. It draws on computer science, psychology, design, sociology, anthropology, ergonomics, linguistics, and organisational studies. HCI investigates both the technical system and the human context in which it operates.

A useful HCI analysis asks:

• Who are the users, and what abilities, knowledge, motivations, and constraints do they have?
• What goals and tasks are they trying to accomplish?
• What information must they perceive and interpret?
• What actions can the system support, and how does it respond?
• What physical, social, organisational, cultural, and technical context surrounds use?
• What evidence demonstrates that the design works?

HCI is therefore not limited to usability testing after development. It encourages designers to understand needs early, represent alternative solutions, test assumptions, and evaluate outcomes iteratively. In responsive web development, HCI also requires attention to device diversity, touch and keyboard input, variable bandwidth, browser differences, zoom, orientation, and assistive technologies.

How People Understand and Use Interfaces

Mental models

A mental model is a person’s internal explanation of how something works. Users form mental models from previous experience, language, visual cues, cultural conventions, and feedback. A person who has used a physical filing cabinet may understand a digital folder metaphor quickly, while a person unfamiliar with that convention may not.

Designers cannot directly place a complete mental model into a user’s mind. They can, however, provide coherent structures and cues that support an appropriate model. A shopping basket icon, for example, suggests that selected products are temporarily collected before purchase. If the same icon immediately places an order, the system violates the user’s likely model.

Problems arise when the designer’s conceptual model, the system’s implementation model, and the user’s mental model differ. Consistent language, familiar conventions, clear grouping, visible system status, and opportunities for exploration help reduce this gap. User research is essential because designers often possess expert knowledge that ordinary users do not.

Affordances and signifiers

An affordance is a possibility for action provided by an object or environment. A button affords pressing; a text field affords entering text; a draggable object may afford moving. In digital systems, affordances are partly conventional and depend on the user’s knowledge and the interface’s presentation.

A signifier is a perceivable indicator of where and how an action can occur. Underlined text may signify a link, a raised or coloured control may signify a button, and a resize handle may signify an adjustable boundary. A technically clickable element that gives no indication of clickability has an affordance without an effective signifier.

Designers should avoid relying on appearance alone. Labels such as “Save changes” communicate more reliably than an unfamiliar icon. On touch devices, adequate target size, spacing, and feedback are particularly important because physical hovering is unavailable.

Feedback and system status

Feedback communicates the result or progress of an action. It may be visual, auditory, haptic, or textual. When a user submits a form, feedback might include a disabled button, progress indicator, success message, or error explanation. Without feedback, users may repeat actions, abandon a task, or assume that the system has failed.

Effective feedback is timely, understandable, proportional, and located near the relevant action. A global notification may be appropriate for a completed background process, while inline feedback is usually better for a field-level error. Feedback should not merely say that something went wrong; it should help the user understand the problem and recover.

Constraints

Constraints limit possible actions in order to prevent errors or reduce complexity. A date picker can prevent impossible dates; a file-upload component can restrict unsupported formats; a checkout flow can require an address before payment. Constraints may be physical, logical, semantic, or cultural.

Constraints must be used carefully. Preventing every unusual action may frustrate expert users or exclude legitimate cases. A good design combines appropriate restrictions with explanations and alternatives. For example, rejecting a password should identify the requirement before submission and should not erase the user’s entire entry.

Cognitive load

Cognitive load is the mental effort required to perceive, remember, interpret, and decide. It is commonly discussed as intrinsic load, arising from the complexity of the task; extraneous load, caused by poor presentation; and germane effort, associated with constructing useful understanding. Design cannot remove the inherent complexity of a task, but it can reduce unnecessary effort.

Interfaces reduce cognitive load by chunking information, using progressive disclosure, providing recognition instead of recall, maintaining consistency, using meaningful defaults, simplifying language, and preserving context. A multi-step tax form may still be complex, but grouping related questions, explaining terminology, and displaying progress can make the task manageable.

However, simplification should not conceal important consequences. A minimal interface that hides fees, permissions, or irreversible actions may reduce visible complexity while increasing risk and distrust.

Organising Perception: Gestalt Principles

Gestalt psychology explains how people tend to organise visual elements into meaningful wholes. These principles are useful for page composition, information architecture, dashboards, and responsive layouts.

Proximity suggests that elements close together are perceived as related. A label should be visually closer to the field it describes than to the next field. Similarity means that elements sharing colour, shape, or typography are perceived as belonging to the same category; inconsistent styling can therefore mislead users. Common region groups items enclosed within a boundary, such as a card or panel. Connectedness creates a relationship through lines, shared backgrounds, or other linking devices.

Continuity encourages the eye to follow aligned or smoothly arranged elements, which supports scanning and step-based processes. Closure leads people to perceive incomplete forms as complete; this can help with simple icons but may create ambiguity when used excessively. Figure–ground concerns the separation of primary content from its background and is closely related to contrast and focus. Common fate groups elements that move in the same direction, making coordinated animation meaningful.

Gestalt principles are tendencies, not universal laws. Cultural conventions, accessibility needs, screen size, and task context influence perception. They should support, not replace, explicit labels and semantic structure.

A Practical Usability Framework

Usability describes the extent to which specified users can achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. Usability is contextual: a design may be efficient for experienced staff but difficult for first-time customers.

Nielsen’s ten usability heuristics provide a widely used inspection framework:

1. Visibility of system status: Keep users informed about what is happening.

2. Match between system and the real world: Use familiar language and meaningful concepts.

3. User control and freedom: Provide undo, cancel, back, and escape options where appropriate.

4. Consistency and standards: Follow platform and product conventions.

5. Error prevention: Design to prevent problems before they occur.

6. Recognition rather than recall: Make options and information visible.

7. Flexibility and efficiency of use: Support both novices and experienced users.

8. Aesthetic and minimalist design: Avoid irrelevant information that competes with essential content.

9. Help users recognise, diagnose, and recover from errors: Explain problems and remedies clearly.

10. Help and documentation: Provide accessible, task-focused assistance when needed.

These heuristics are inspection principles, not a substitute for research with real users. A heuristic review can identify likely problems quickly, while usability testing reveals whether people actually encounter and interpret those problems in context.

Other valuable quality dimensions include accessibility, learnability, memorability, safety, utility, and resilience. A product may meet a narrow definition of efficiency while failing users with motor, visual, cognitive, or language differences. Accessibility should be treated as a dimension of quality and inclusion rather than as a late compliance exercise.

Applying the Concepts in Responsive Web Design

Responsive design is an approach in which layout and interaction adapt to available space, device capabilities, and user preferences. It is not simply the shrinking of a desktop page. Designers must establish content priorities, flexible structures, appropriate breakpoints, readable typography, usable controls, and robust states across viewports.

A mobile interface may require a different information hierarchy rather than a smaller version of the desktop interface. Navigation may change from a persistent horizontal menu to a compact but discoverable control. Tables may become cards or allow horizontal scrolling. Important actions should remain visible, and keyboard access must not disappear when the visual layout changes.

Responsive design also involves environmental variability. Network delays require meaningful loading feedback; reduced-motion preferences require respectful animation behaviour; zoom and text enlargement require flexible layouts; and touch interfaces require sufficient target size and spacing. CSS media queries, flexible grids, fluid images, semantic HTML, and progressive enhancement provide technical mechanisms, but good results depend on prior understanding of user goals and constraints.

An Illustrative Case: Improving a Municipal Permit Portal

Background

The following is a fictional illustrative case based on common public-service design conditions. A municipal authority launches a responsive web portal for residents to apply for residential parking permits. The portal is intended to reduce office visits and administrative workload.

Situation and problem

Residents report that applications fail at the payment stage. Some submit the form more than once because the confirmation page takes several seconds to appear. Others do not understand which documents are required. Mobile users find the upload control difficult to operate, and people using screen readers encounter field labels that are not announced correctly.

The organisation initially proposes changing the colour of the payment button. A broader HCI analysis shows that the problem is not primarily visual.

Analysis

The existing portal violates visibility of system status because payment processing has no progress indication. It conflicts with the user’s mental model because the button says “Continue” even though it initiates payment. The document requirements are presented late, creating avoidable cognitive load. The upload component provides weak signifiers and does not clearly communicate accepted file types. Repeated submissions are not prevented, and the service back office receives duplicate applications.

The problem also crosses service boundaries. A successful online submission depends on payment processing, document storage, permit generation, email delivery, and staff review. Improving only the front-end colour would leave these dependencies unchanged.

Approach and solution

The redesign team conducts interviews with residents and permit staff, reviews support calls, maps the application journey, and performs a heuristic and accessibility inspection. The redesigned flow:

• explains eligibility and required documents before the form begins;
• uses plain-language field labels and examples;
• groups related questions according to the resident’s task;
• displays progress through clearly named stages;
• validates information at the point of entry without removing entered data;
• labels the final action “Pay and submit application”;
• provides upload instructions, file-type limits, progress feedback, and a remove/replace option;
• disables duplicate submission while payment is processing;
• displays a reference number immediately after successful submission;
• sends an accessible confirmation email;
• uses semantic HTML, keyboard navigation, visible focus, and properly associated labels;
• tests layouts at narrow and wide widths rather than at only one mobile and one desktop size.

Outcome

In an evaluation with representative residents, participants completed the revised flow with fewer clarification requests and fewer repeated submissions. Staff reported fewer duplicate records, although the organisation continued monitoring real-world performance after release. The case demonstrates that usability improvement requires alignment among interface cues, interaction behaviour, technical states, and service operations.

Learning points

First, the apparent symptom is not always the root problem. Second, feedback and error recovery are essential in transactions involving delay or uncertainty. Third, responsive design must include accessibility and content priorities. Finally, UX work creates organisational value when it connects user outcomes with operational measures such as support demand, processing time, and duplicate cases.

Challenges, Risks, and Professional Responsibilities

Designers frequently mistake personal preference for evidence. A visually elegant solution may fail users with low digital confidence or limited bandwidth. Another common mistake is designing for an ideal, uninterrupted journey while ignoring empty states, timeouts, rejected payments, lost connections, expired sessions, and partial completion.

Dark patterns are a serious ethical risk. Interfaces may use confusing wording, hidden costs, difficult cancellation, false urgency, or preselected consent to manipulate behaviour. Persuasive design should respect autonomy and make significant consequences clear. Consent must be informed, specific, and freely given rather than obtained through visual pressure.

Privacy should be considered during research and product design. Teams should collect only necessary data, explain its purpose, protect it appropriately, and avoid exposing sensitive information in notifications or analytics. Research participants require informed consent, confidentiality where promised, and special care when working with vulnerable groups.

Accessibility involves more than colour contrast. Keyboard access, semantic structure, text alternatives, captions, focus management, readable language, zoom support, motion preferences, and compatibility with assistive technologies all matter. Legal requirements differ by jurisdiction, but professional responsibility extends beyond minimum compliance.

Analytics can reveal drop-off points, task completion, errors, and performance trends, but numbers do not explain user intent on their own. A high abandonment rate may indicate confusing content, slow performance, lack of trust, or a mismatch between audience and task. Quantitative evidence should be combined with observation, interviews, support data, and usability testing.

Artificial intelligence can assist with content variation, interface generation, pattern detection, and conversational support. It can also introduce inaccurate answers, bias, excessive data collection, opaque decisions, and overconfident automation. AI-generated interfaces require human review, accessibility testing, security assessment, and clear communication about system limitations. Automation should not remove meaningful human recourse in high-impact services.

Current Directions in HCI and UX Practice

Contemporary practice is increasingly concerned with inclusive design, design systems, responsible AI, multimodal interaction, voice and conversational interfaces, ambient computing, and sustainable digital products. Design systems establish reusable components, tokens, content patterns, and accessibility rules, improving consistency while still requiring context-sensitive judgement.

There is also a movement from screen-centred design toward ecosystem and service thinking. A user may move among a mobile device, desktop browser, email, physical location, customer-support agent, and automated service. Maintaining coherent identity, status, language, and recovery across these touchpoints is a strategic UX challenge.

Sustainable design considers page weight, energy consumption, device longevity, efficient media, and the environmental effects of infrastructure and hardware. Ethical HCI increasingly asks not only whether a system is usable, but also who benefits, who bears risk, whose values are represented, and whether users can exercise meaningful control.

Best Practices for Professional Work

A sound foundation for UI/UX and HCI practice includes the following habits:

• Begin with user and service context rather than visual decoration.
• Define user goals, organisational goals, constraints, and success measures.
• Use familiar conventions, but test assumptions with representative users.
• Make important actions, system status, consequences, and recovery paths visible.
• Design for accessibility, responsiveness, localisation, and variable technology conditions from the outset.
• Use content, layout, interaction, and code as a coordinated system.
• Inspect designs with heuristics, then validate them through research and testing.
• Treat errors, empty states, loading states, and cancellation as core experiences.
• Record design decisions and the evidence supporting them.
• Monitor the live service and revise it when evidence reveals new problems.

Chapter Summary

UI concerns the interface through which people interact with a system; UX concerns the broader quality of that interaction; interaction design focuses on behaviour over time; service design addresses the complete front-stage and back-stage service system; and CX concerns the customer’s relationship with an organisation across channels. HCI provides the interdisciplinary foundation for understanding and designing these relationships.

Mental models explain how users expect systems to work. Affordances describe possible actions, while signifiers communicate those possibilities. Feedback makes system status and consequences visible, constraints prevent or reduce errors, and cognitive-load principles help designers manage mental effort. Gestalt principles support the organisation of visual information, and usability heuristics provide a practical inspection framework.

In responsive web development, these principles must be applied across devices, input methods, abilities, network conditions, and service states. Effective practice combines research, design, engineering, accessibility, analytics, and ethical judgement. The municipal permit case shows that successful UX improvements address not only screen appearance but also interaction behaviour, technical reliability, and organisational operations.

Key Terms

Affordance: A possibility for action offered by an object, interface, or environment.

Cognitive load: The mental effort required to understand and use a system.

Constraint: A limitation that prevents inappropriate actions or narrows possible choices.

Customer experience (CX): A customer’s overall perception of an organisation across all interactions and channels.

Feedback: Information returned by a system about an action, state, progress, or result.

Gestalt principles: Psychological principles describing how people organise visual elements into meaningful groups.

Heuristic evaluation: Expert inspection of an interface against recognised usability principles.

Human–computer interaction (HCI): The interdisciplinary study and design of interactive computing for human use.

Interaction design: The design of interactive behaviour, actions, system responses, and task sequences.

Mental model: A user’s internal understanding of how a system works.

Progressive disclosure: Revealing information or options as they become relevant to the user.

Responsive design: Designing layouts and interactions that adapt to screen conditions and user contexts.

Service design: Design of the complete service ecosystem, including customer touchpoints and operational processes.

Signifier: A perceivable cue indicating where and how an action can be performed.

Usability: The effectiveness, efficiency, and satisfaction with which specified users achieve goals in a context.

User experience (UX): The perceptions, emotions, behaviours, and judgements associated with using a product or service.

User interface (UI): The visual and interactive means through which users communicate with a digital system.

Visibility of system status: The principle that systems should keep users informed about what is happening.

Review Questions

Short Answer Questions

1. Distinguish user interface from user experience.

2. What is the difference between an affordance and a signifier?

3. Explain why feedback is important during a slow transaction.

4. Define cognitive load and name two ways to reduce unnecessary load.

5. What is the purpose of a heuristic evaluation?

Long Answer Questions

1. Compare UX, interaction design, service design, and customer experience using a digital-service example.

2. Explain mental models, constraints, feedback, and error recovery as related HCI concepts.

3. Discuss how Gestalt principles can improve the organisation of a responsive web page.

4. Present Nielsen’s usability heuristics and explain how they can guide design inspection.

5. Explain why accessibility and responsive design must be considered together rather than treated as final-stage testing concerns.

Analytical / Application Questions

1. A university portal allows students to click “Submit” repeatedly while an assessment upload is processing, creating duplicate submissions. Analyse the problem using mental models, feedback, visibility of system status, and error prevention. Propose a solution.

2. A mobile insurance form hides its required documents until after the user has completed most fields. Use cognitive-load theory, progressive disclosure, constraints, and service-design thinking to evaluate and redesign the flow.

3. An online retailer has attractive pages but high checkout abandonment, unclear delivery charges, inaccessible colour coding, and no recovery after payment timeout. Identify the relevant HCI and UX failures and recommend an evidence-based evaluation plan.

22. Multiple Choice Questions with Answers

Question 1

Which statement best distinguishes service design from interaction design?

A. Service design focuses only on visual styling, while interaction design focuses only on code.

B. Service design examines the wider service ecosystem, including front-stage and back-stage processes, while interaction design focuses on behaviour during interaction.

C. Service design applies only to physical services, while interaction design applies only to websites.

D. Service design measures colour contrast, while interaction design measures customer loyalty.

Correct Answer: B. Service design examines the wider service ecosystem, including front-stage and back-stage processes, while interaction design focuses on behaviour during interaction.

Question 2

A payment button changes to “Processing” and becomes temporarily unavailable after selection. Which principles are most directly demonstrated?

A. Closure and common fate

B. Visibility of system status and error prevention

C. Customer experience and service blueprinting

D. Recognition failure and cultural constraint

Correct Answer: B. Visibility of system status and error prevention

Question 3

A designer places a label close to its input field and separates it clearly from the next field. Which Gestalt principle is primarily being applied?

A. Proximity

B. Common fate

C. Closure

D. Continuity

Correct Answer: A. Proximity

Question 4

Which situation most clearly represents a mismatch between a user’s mental model and system behaviour?

A. A progress indicator shows that a file is uploading.

B. A text field displays an example of the required format.

C. A basket icon immediately completes an order instead of collecting selected items.

D. A form prevents letters from being entered into a numeric age field.

Correct Answer: C. A basket icon immediately completes an order instead of collecting selected items.

Question 5

Which design decision best reduces extraneous cognitive load without hiding important information?

A. Displaying every advanced option on the first screen

B. Using meaningful grouping, plain language, and progressive disclosure

C. Removing all explanations and relying on icons

D. Making users remember information from a previous page

Correct Answer: B. Using meaningful grouping, plain language, and progressive disclosure

Question 6

A clickable icon has no label, hover state, or familiar convention, and users do not discover its function. What is the main design failure?

A. The system has an affordance but lacks an effective signifier.

B. The system has excessive common fate.

C. The system violates only the service-design principle.

D. The system has too much intrinsic cognitive load from the hardware.

Correct Answer: A. The system has an affordance but lacks an effective signifier.

Question 7

Which response best follows the heuristic of helping users recognise, diagnose, and recover from errors?

A. Displaying “Invalid input” and clearing the entire form

B. Displaying an unexplained red border around the page

C. Explaining what is wrong, identifying the affected field, and stating how to correct it

D. Silently preventing submission without changing the interface

Correct Answer: C. Explaining what is wrong, identifying the affected field, and stating how to correct it

Question 8

Why is changing only the colour of a payment button unlikely to solve duplicate submissions caused by delayed processing?

A. Colour can never be used in a user interface.

B. The root problem concerns system status, feedback, and transaction behaviour rather than only visual appearance.

C. Responsive design prohibits coloured buttons.

D. Duplicate submissions are exclusively a customer-experience issue.

Correct Answer: B. The root problem concerns system status, feedback, and transaction behaviour rather than only visual appearance.

Question 9

Which practice is most consistent with ethical UX design?

A. Preselecting consent and hiding the cancellation route

B. Using false urgency to increase conversion

C. Making significant consequences and privacy choices clear and allowing meaningful control

D. Collecting additional personal data in case it becomes useful later

Correct Answer: C. Making significant consequences and privacy choices clear and allowing meaningful control

Question 10

A responsive redesign works on a narrow screen but cannot be operated by keyboard and loses focus visibility. What conclusion is most appropriate?

A. The redesign is successful because responsiveness concerns screen width only.

B. Keyboard access is unrelated to UX.

C. Responsive design must be evaluated together with accessibility and interaction requirements.

D. The problem can be solved by reducing the font size.

Correct Answer: C. Responsive design must be evaluated together with accessibility and interaction requirements.