UI/UX Design Fundamentals

Chapter 1
UI/UX Foundations and Professional Terminology

Certificate in UI/UX
UI/UX Design Fundamentals   •   Certificate

UI/UX Foundations and Professional Terminology

Introduction

Digital products are judged not only by what they do, but also by how clearly, efficiently, confidently and enjoyably people can use them. A banking application may provide secure money transfers, yet still fail if users cannot locate the transfer function. An online learning platform may contain excellent content, yet produce poor outcomes if students cannot understand its navigation. These examples demonstrate why user interface and user experience are central to contemporary product development.

UI/UX is often treated as a single expression, but it describes several related professional disciplines. User interface design focuses primarily on the visible and interactive parts of a product. User experience concerns the broader quality of a person’s interaction with a product, service or organisation. Interaction design examines behaviour and communication between people and interactive systems. Product design integrates user, business and technical considerations to shape a complete product. Service design considers the coordinated systems, people and processes that deliver an experience. Customer experience extends the view to the customer’s relationship with an organisation across all touchpoints.

Understanding these distinctions prevents role confusion and helps teams select appropriate methods. This chapter introduces the principal concepts, terminology, historical development and business significance of UI/UX practice.

Learning Objectives

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

  1. Distinguish UI, UX, interaction design, product design, service design and customer experience.
  2. Explain usability, utility, desirability and value.
  3. Describe major stages in the development of human-centred digital design.
  4. Relate UI/UX quality to business performance and organisational decision-making.
  5. Apply professional terminology to a practical product-design situation.
  6. Recognise ethical, inclusive and organisational challenges in UI/UX work.

1. The Scope of Design

Design is a purposeful activity through which people shape products, services, systems or environments to achieve desired outcomes. In UI/UX, design is not limited to making screens attractive. It involves understanding people, defining problems, structuring information, designing interactions, testing assumptions and improving outcomes through evidence.

A useful way to understand the scope of experience is to distinguish three levels:

  • Object level: a button, form, screen, device or interface.
  • Product level: the complete software or hardware product and its capabilities.
  • Service and relationship level: the organisation, processes, channels and experiences surrounding the product.

A user may interact with a mobile application, but the experience can also be affected by account registration, customer support, delivery operations, pricing, privacy policies and the reliability of the underlying service.

1.1 User, customer, stakeholder and person

A user is a person who directly interacts with a product or system. A customer is a person or organisation that purchases, subscribes to or commissions a product or service. These may be the same person, but they are not always identical. For example, a company may purchase project-management software while employees use it.

A stakeholder is any person or group affected by, contributing to or having authority over a project. Stakeholders may include users, customers, managers, developers, regulators, support staff and business owners. The term person is often preferred in inclusive design because it avoids reducing people to a narrow commercial role.

2. Distinguishing the Major Disciplines

2.1 User interface design

User interface (UI) design concerns the surfaces through which people perceive information and control a product. It includes visual layout, typography, colour, icons, controls, spacing, responsive behaviour, motion and states such as loading, error and confirmation.

UI design asks questions such as:

  • Is the hierarchy of information clear?
  • Can users distinguish interactive from non-interactive elements?
  • Are controls readable and accessible?
  • Does the interface behave consistently across screen sizes?

A visually polished interface can still provide a poor experience if it supports the wrong task, uses confusing terminology or imposes unnecessary effort. UI is therefore important, but it is not equivalent to the whole of UX.

2.2 User experience design

User experience (UX) design concerns the perceptions, responses and outcomes that arise before, during and after interaction with a product or service. UX includes usefulness, ease of learning, efficiency, trust, emotional response, accessibility and recovery from errors.

UX is broader than usability. A product may be easy to use but not valuable, or valuable but difficult to use. UX professionals investigate needs and contexts, define problems, create concepts, prototype solutions and evaluate them with users and other evidence.

UX is not completely controllable by a designer. Experience is influenced by a person’s goals, expectations, prior knowledge, environment, device, social context and the organisation’s reliability. Designers can shape conditions for a good experience, but cannot prescribe every individual response.

2.3 Interaction design

Interaction design (IxD) focuses on how people and interactive systems behave in relation to one another. It addresses actions, responses, feedback, system status, navigation, sequences, constraints and error handling.

For example, when a person submits a payment, interaction design determines whether the system validates the information, indicates progress, prevents duplicate submission, explains failure and confirms completion. Visual design communicates these states, but interaction design defines the behavioural relationship.

2.4 Product design

Product design is the integrated design of a product’s user value, business value, technical feasibility and operational delivery. Product designers may work across research, interaction, interface, strategy, prototyping and measurement. They collaborate closely with product managers, engineers, marketing teams and support functions.

The product-design perspective asks not only “Can people use this?” but also “Should we build it?”, “Who is it for?”, “How will it be sustained?” and “What evidence indicates success?” In smaller organisations, one designer may perform UI, UX and product-design responsibilities; in larger organisations, the responsibilities may be distributed across specialists.

2.5 Service design

Service design shapes the complete service system through which value is delivered. It considers frontstage interactions visible to customers and backstage activities, technologies, policies and staff processes that support them.

Common service-design artefacts include:

  • Customer journey maps, which represent a person’s experience over time.
  • Service blueprints, which connect customer actions with frontstage and backstage organisational activities.
  • Stakeholder maps, which show relationships and influence within a service ecosystem.

For example, improving an airline check-in service may require changes to the application, airport signage, staff procedures, baggage systems and disruption communications. Redesigning only the application would not resolve the entire service problem.

2.6 Customer experience

Customer experience (CX) is the customer’s overall perception of and relationship with an organisation across interactions and channels. It may include advertising, sales, product use, billing, delivery, support, complaint handling and renewal.

UX commonly focuses on a particular product or experience, whereas CX takes an organisation-wide and often commercial perspective. The disciplines overlap. A confusing checkout interface is a UX problem, while inconsistent pricing information across the website, call centre and store is a broader CX problem.

DisciplinePrimary focusTypical questions
UI designVisual and interactive interfaceCan people perceive and control the interface?
UX designQuality of use and overall interactionCan people achieve meaningful goals effectively and confidently?
Interaction designBehaviour and system responseWhat happens when a person acts?
Product designComplete product value and feasibilityWhat should be built and how will it succeed?
Service designEnd-to-end service systemHow do people, processes and channels work together?
Customer experienceRelationship with the organisationHow is the organisation experienced across touchpoints?

These categories are complementary rather than rigid. Professional teams should clarify responsibilities while maintaining collaboration.

3. Core Qualities of a Successful Experience

3.1 Utility

Utility is the extent to which a product provides functions that address a genuine need. A product has high utility when it enables an important or desired outcome. A feature may be well designed but have little utility if it solves no meaningful problem.

Utility concerns whether the product does the right things. For example, a budgeting application has utility if it helps people track spending, plan payments or understand financial patterns.

3.2 Usability

Usability is the extent to which specified users can use a product to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. This formulation is associated with the international standard ISO 9241-11.

  • Effectiveness: accuracy and completeness in achieving goals.
  • Efficiency: resources, such as time or effort, used in relation to the results achieved.
  • Satisfaction: users’ comfort and positive attitudes during use.

Usability is context-dependent. A medical interface, a children’s educational game and an industrial control panel have different users, goals and constraints. A usable system also supports learning, memorability and recovery from errors, although these are often treated as practical aspects of usability rather than separate formal dimensions.

3.3 Desirability

Desirability concerns whether people want to use a product and whether it produces an appropriate emotional, social or symbolic response. Trust, credibility, identity, aesthetics and perceived appropriateness can affect desirability.

Desirability should not be confused with visual attractiveness alone. A plain interface may be highly desirable because it feels reliable and respectful, while a visually fashionable interface may be undesirable if it appears unsafe or manipulative.

3.4 Value

Value is the perceived or realised benefit of a product relative to the costs and sacrifices involved. Costs may include money, time, effort, attention, risk, learning and loss of privacy. Value is assessed differently by users, customers, organisations and other stakeholders.

A useful conceptual expression is:

Perceived value = perceived benefits − perceived costs

This is a conceptual model, not a universal financial equation. Benefits and costs may be qualitative and cannot always be measured on a common numerical scale. The model is useful because it reminds designers that increasing features does not necessarily increase value; additional complexity may increase cost and reduce usability.

3.5 The relationship among the qualities

Utility, usability and desirability are related but independent. A product may be:

  • Useful but difficult to use.
  • Easy to use but unnecessary.
  • Useful and usable but unattractive or untrustworthy.
  • Desirable but incapable of delivering its promised outcome.

Sustainable value generally requires an acceptable balance. Designers should avoid treating one quality as a substitute for another. A beautiful interface cannot compensate for missing functionality, and powerful functionality cannot justify unsafe or inaccessible interaction.

4. Important Professional Terminology

Affordance and signifier

An affordance is a possible action enabled by an object or system. A signifier is a perceivable indication of where and how that action can be performed. A raised button, label or familiar icon can signify that an element is interactive. In digital products, the action is provided by the software, while the interface must communicate its availability.

Feedback and system status

Feedback is information returned by a system in response to an action. Progress indicators, confirmation messages and validation notices help people understand what has happened. Visibility of system status is essential during delays, transactions and processing.

Mental model

A mental model is a person’s internal understanding of how something works. Interfaces are easier to use when their behaviour matches familiar expectations or clearly teaches a new model.

Information architecture

Information architecture (IA) is the organisation, labelling, structure and navigation of information. IA helps users find, understand and relate content.

User flow and task flow

A user flow represents a route through a product to achieve a goal, often including alternative paths. A task flow usually describes a more focused sequence for a particular task, such as resetting a password.

Persona and scenario

A persona is a research-informed representation of a user group. It should be based on evidence rather than stereotypes. A scenario describes a situation, motivation and context in which a person uses a product.

Prototype

A prototype is an experimental representation of a design. It may be paper-based, static, clickable or highly realistic. Prototypes are used to learn and communicate, not merely to present finished work.

Design system

A design system is a managed collection of reusable components, patterns, guidelines, content rules and principles. It supports consistency, accessibility and efficient collaboration between designers and developers.

Accessibility and inclusive design

Accessibility is the extent to which products can be used by people with diverse abilities. Inclusive design seeks to accommodate a wide range of people, contexts and needs. Considerations include keyboard access, readable contrast, captions, alternative text, clear language, adaptable layouts and support for assistive technologies.

5. Evolution of UI/UX Practice

The roots of UI/UX lie in human factors, ergonomics, industrial design, information design and human-computer interaction. Early computing often required specialist knowledge, such as command-line syntax. As computers entered offices and homes, graphical interfaces, pointing devices, windows, menus and icons made interaction more accessible.

In the 1980s and 1990s, human-computer interaction became an established interdisciplinary field drawing on computer science, psychology, design and cognitive research. Usability engineering introduced structured evaluation, user observation and iterative improvement. The expansion of the web created new concerns involving navigation, information architecture, responsive layouts and online trust.

During the 2000s, the term UX became widely adopted to describe a broader approach than interface usability alone. Mobile computing introduced touch gestures, small screens, sensors, location awareness and context-dependent use. Later, cloud services, connected devices, conversational systems and immersive technologies expanded the range of interaction.

Contemporary practice increasingly emphasises:

  • Continuous discovery rather than one-time research.
  • Cross-functional product teams.
  • Inclusive and accessible design.
  • Design systems and scalable component libraries.
  • Evidence-informed prioritisation.
  • Responsible use of data and artificial intelligence.
  • Experiences distributed across products, services and physical environments.

The profession has therefore moved from designing isolated screens toward shaping complex socio-technical systems. Nevertheless, foundational principles—clarity, human control, feedback, accessibility and respect—remain relevant across technologies.

6. Business Relevance of UI/UX

UI/UX contributes to business performance in several ways. Clear experiences can reduce support demand, improve task completion, increase adoption and strengthen trust. Good design can also reveal whether a proposed feature addresses a real need before substantial engineering resources are committed.

Business relevance should not be reduced to conversion rates. Important outcomes may include safety, learning, employee productivity, retention, compliance, reduced error costs and equitable access. A public-service interface may be successful when more people obtain essential benefits accurately, even when it generates no direct revenue.

A practical product decision can be examined through four questions:

  1. Desirability: Do people need or want this?
  2. Usability: Can they use it successfully?
  3. Feasibility: Can the organisation build and operate it reliably?
  4. Viability: Can it be sustained within legal and financial constraints?

These dimensions are often represented as overlapping concerns rather than a strict formula. A solution is weak when any one dimension is neglected.

Evidence and measurement

UI/UX teams use qualitative and quantitative evidence. Interviews and observation help explain motivations and difficulties. Usability tests reveal interaction problems. Analytics may show abandonment, completion or repeated errors. Surveys can measure perceived satisfaction, confidence or recommendation.

Metrics must be interpreted carefully. A high completion rate may hide confusion if users repeatedly attempt the task. A low time-on-task is not automatically positive if users omit important steps. Measures should be connected to user goals and product outcomes, not pursued as isolated targets.

7. An Applied Case: Improving a Community Clinic Booking Service

The following is an illustrative case designed for learning purposes.

Background

A community clinic offers appointment booking through a website. Staff report a high number of telephone calls from people who attempted to book online. Patients complain that available appointments are difficult to find and that confirmation messages are unclear.

Problem

The initial assumption is that the website needs a visual redesign. Preliminary investigation, however, identifies a broader service problem. Patients must choose among unfamiliar appointment types, the availability calendar uses medical terminology, and confirmation emails do not state whether the appointment is fully booked. Staff also use a separate system and manually correct incomplete information.

Analysis

The team maps the patient journey from recognising a healthcare need to receiving an appointment reminder. Interviews include older adults, people with limited English proficiency, caregivers and clinic staff. A usability evaluation identifies three main issues:

  1. People cannot distinguish a first consultation from a follow-up consultation.
  2. The calendar does not clearly show which times are available.
  3. The final confirmation lacks location, preparation instructions and cancellation information.

A service blueprint shows that the website, scheduling database, confirmation email and staff workflow are connected. Therefore, changing colours or button shapes alone would not solve the problem.

Approach and solution

The team redesigns the information architecture using patient-oriented labels, adds plain-language explanations and separates appointment selection from personal-information entry. The calendar uses clear availability states and keyboard-accessible controls. A confirmation page and email provide appointment time, location, preparation requirements, contact details and cancellation options.

Staff receive an updated workflow for managing cancellations and correcting patient details. Prototypes are tested with representative participants before development. The team also checks text readability, keyboard navigation, screen-reader labels and translation quality.

Outcome

In this illustrative case, online booking becomes easier to understand, while staff receive fewer avoidable clarification calls. The main improvement does not come from visual styling alone. It comes from aligning interface behaviour, content, data processes and staff operations around the patient’s goal.

Learning points

  • A UI symptom may originate in a wider service problem.
  • Research should include users and internal staff.
  • Clear language is an interaction-design decision, not merely an editorial concern.
  • Accessibility and service reliability are part of experience quality.
  • Successful design must consider utility, usability, desirability and organisational feasibility together.

8. Challenges, Ethics and Governance

UI/UX professionals make decisions that influence attention, behaviour, access and personal data. Ethical practice therefore requires more than satisfying a project brief.

Dark patterns are interface practices that manipulate, mislead or pressure people into actions they may not freely choose, such as making cancellation difficult or presenting a paid option as the default. Persuasive design can be legitimate when it supports a person’s own goals, but it becomes problematic when it exploits confusion, vulnerability or asymmetrical information.

Privacy should be considered during research and design. Teams should collect only necessary information, explain its use, protect it appropriately and avoid treating consent as a hidden obstacle. Designers should understand applicable privacy, accessibility, consumer-protection and sector-specific requirements, while recognising that legal compliance is a minimum rather than a complete ethical standard.

Inclusive practice requires involving people affected by design decisions, especially groups historically excluded from technology. Avoiding stereotypes, compensating research participants fairly, protecting anonymity and reporting limitations honestly are professional responsibilities.

Artificial intelligence can support activities such as content organisation, prototyping, translation, accessibility checking and pattern discovery. However, AI-generated outputs may contain bias, fabricated information, inaccessible language or privacy risks. Human review, representative testing, transparency and accountability remain necessary. AI should augment professional judgement rather than replace research or responsibility.

9. Best-Practice Principles for Beginners

  1. Start with a real user or service problem rather than a preferred visual style.
  2. Define the people, goals and context of use.
  3. Use plain, consistent and familiar language.
  4. Make system status, available actions and consequences clear.
  5. Design for errors, recovery and unusual conditions, not only the ideal path.
  6. Test early with representative people.
  7. Treat accessibility as a design requirement from the beginning.
  8. Collaborate with engineering, content, operations and business stakeholders.
  9. Record assumptions and distinguish evidence from opinion.
  10. Consider the complete journey, including support and after-use experiences.
  11. Use patterns and design systems without allowing consistency to preserve a harmful design.
  12. Protect privacy and avoid manipulative interaction techniques.

Chapter Summary

UI/UX is a broad field concerned with the relationship between people, products, services and organisations. UI design focuses on the visual and interactive interface; UX design addresses the broader quality and consequences of use; interaction design concentrates on behaviour and feedback; product design integrates user, business and technical concerns; service design shapes the complete service system; and customer experience considers the relationship with an organisation across touchpoints.

Utility concerns whether a product provides meaningful functions. Usability concerns effective, efficient and satisfying use in context. Desirability concerns motivation, trust and emotional or symbolic appeal. Value concerns perceived benefits in relation to costs and sacrifices. These qualities are complementary and should be considered together.

The field developed from human factors, ergonomics, information design and human-computer interaction. It now addresses mobile, connected, conversational and AI-supported experiences. UI/UX is business-relevant because it can influence adoption, productivity, safety, retention, support costs, compliance and equitable access. Professional practice requires research, iterative prototyping, evidence-informed decisions, accessibility, ethical conduct and collaboration across the whole service ecosystem.

Key Terms

Accessibility: The extent to which a product can be used by people with diverse abilities.

Affordance: A possible action enabled by an object or system.

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

Design system: A managed collection of reusable components, patterns, principles and guidelines.

Desirability: The extent to which people want, trust or feel positively toward a product.

Feedback: Information a system provides in response to a person’s action.

Information architecture: The organisation, labelling and navigation of information.

Interaction design: The design of behaviour and communication between people and interactive systems.

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

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

Product design: Integrated design of a product’s user value, business value and technical feasibility.

Prototype: An experimental representation used to explore or test a design.

Service design: Design of the people, processes, channels and systems that deliver a service.

Signifier: A perceivable indication of where and how an action can be performed.

Stakeholder: A person or group affected by, contributing to or having authority over a project.

Usability: Effectiveness, efficiency and satisfaction in a specified context of use.

User experience (UX): The perceptions, responses and outcomes associated with interaction with a product or service.

User interface (UI): The visible and interactive surface through which people use a product.

Utility: The extent to which a product provides functions that address a genuine need.

Value: Perceived or realised benefit relative to the costs and sacrifices involved.

Review Questions

Short Answer Questions

  1. What is the principal difference between UI design and UX design?
  2. Define utility and give one example.
  3. What does usability mean in a specified context of use?
  4. What is a service blueprint used to represent?
  5. Why are signifiers important in interface design?

Long Answer Questions

  1. Compare UI, UX, interaction design, product design, service design and customer experience.
  2. Explain how utility, usability, desirability and value can influence one another.
  3. Describe the historical development of UI/UX from human factors to contemporary digital products.
  4. Discuss the business importance of UI/UX beyond visual attractiveness.
  5. Explain the ethical responsibilities of a UI/UX professional when designing data-driven products.

Analytical / Application Questions

  1. A university portal contains all required functions, but students cannot find course-registration deadlines. Analyse the problem using utility, usability, information architecture and service-design concepts.
  2. A retailer makes its subscription easy to start but difficult to cancel. Evaluate this design using the concepts of desirability, value, dark patterns and ethical practice.
  3. Design a brief research and testing plan for improving an appointment-booking service. Identify participants, methods, evidence and success indicators.

Multiple Choice Questions with Answers

Question 1

Which discipline primarily focuses on the visual and interactive surface of a digital product?

A. Service design

B. User interface design

C. Customer experience

D. Product strategy

Correct Answer: B. User interface design

Question 2

Which term describes whether a product provides functions that address a genuine need?

A. Utility

B. Feedback

C. Affordance

D. Accessibility

Correct Answer: A. Utility

Question 3

Usability is most accurately concerned with which combination?

A. Profit, branding and market share

B. Colour, typography and animation only

C. Effectiveness, efficiency and satisfaction in context

D. Advertising reach, price and distribution

Correct Answer: C. Effectiveness, efficiency and satisfaction in context

Question 4

What is the main focus of interaction design?

A. Organisational accounting systems

B. Behaviour and communication between people and interactive systems

C. Manufacturing physical materials

D. Customer contracts only

Correct Answer: B. Behaviour and communication between people and interactive systems

Question 5

Which discipline examines frontstage interactions together with backstage processes?

A. Service design

B. Icon design

C. Typography

D. Visual merchandising

Correct Answer: A. Service design

Question 6

A message showing that a file is uploading is an example of what?

A. Utility

B. Feedback

C. Persona

D. Stakeholder mapping

Correct Answer: B. Feedback

Question 7

Which statement best describes a persona?

A. A fictional stereotype created without research

B. A research-informed representation of a user group

C. A technical specification for a database

D. A legal contract with a customer

Correct Answer: B. A research-informed representation of a user group

Question 8

Why should accessibility be considered from the beginning of a project?

A. It only affects decorative colours

B. It helps ensure diverse people can use the product and avoids costly exclusion

C. It removes the need for usability testing

D. It guarantees commercial success

Correct Answer: B. It helps ensure diverse people can use the product and avoids costly exclusion

Question 9

A product is easy to use but does not solve an important problem. Which quality is most clearly missing?

A. Utility

B. Feedback

C. Typography

D. System status

Correct Answer: A. Utility

Question 10

Which practice is most likely to be a dark pattern?

A. Providing a clear cancellation control

B. Explaining how personal data will be used

C. Making cancellation deliberately difficult while presenting signup prominently

D. Showing progress during a long transaction

Correct Answer: C. Making cancellation deliberately difficult while presenting signup prominently

UI/UX Design Fundamentals
Chapter 1 of 14