UI/UX Design Fundamentals

Chapter 2
Human-Centred Design Principles and Psychology

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

Human-Centred Design Principles and Psychology

Introduction

User interface and user experience design are not primarily exercises in making screens attractive. They are disciplines concerned with helping people achieve meaningful goals through products, services and systems. A technically reliable product can still fail when users cannot understand it, predict its behaviour, recover from errors or trust its decisions. Human-centred design (HCD) addresses this problem by treating people, their contexts and their abilities as the starting point for design decisions.

This chapter introduces the psychological and design foundations needed to create usable, accessible and responsible interfaces. It explains human-centred design, design thinking and the Double Diamond model, then connects these approaches with perception, cognition, mental models, affordances, feedback, cognitive load, Gestalt principles and behavioural design. The emphasis is practical: a designer should be able to interpret user evidence, frame problems, generate and test solutions, and recognise when a design is placing unnecessary demands on users.

Learning objectives

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

  • explain the principles and process of human-centred design;
  • distinguish design thinking from the Double Diamond model;
  • describe how perception, attention, memory and cognition influence interaction;
  • apply mental models, affordances, signifiers and feedback to interface decisions;
  • reduce unnecessary cognitive load while preserving appropriate complexity;
  • use Gestalt principles to organise visual information;
  • evaluate behavioural design techniques ethically;
  • apply these ideas to a small product or service-design problem.

1. Human-centred design

Human-centred design is an approach in which the needs, capabilities, limitations and contexts of intended users guide design throughout the product life cycle. It is more than conducting research at the beginning. Users are involved indirectly through evidence and, where appropriate, directly through interviews, observation, participatory activities and usability evaluation.

A useful HCD cycle contains four recurring activities:

  1. Understand context and people. Identify users, goals, environments, technologies, social conditions and constraints.
  2. Specify needs and requirements. Convert evidence into clear, testable user and system requirements.
  3. Produce design solutions. Generate alternatives, prototypes and service concepts.
  4. Evaluate and learn. Test designs with representative users, interpret failures and revise the solution.

These activities are iterative rather than strictly sequential. Evaluation may reveal that the original problem was misunderstood; new research is then required. ISO 9241-210 describes human-centred design through principles such as understanding users and contexts, involving users throughout development, being driven by evaluation, addressing the whole user experience, using multidisciplinary perspectives and following an iterative process.

HCD differs from designing for an abstract “average user.” People differ in vision, hearing, motor control, language, literacy, technical confidence, culture and situational attention. Inclusive design therefore considers permanent, temporary and situational limitations. A caption benefits a deaf user, a person in a noisy environment and someone who is learning a language. Accessibility is not an optional enhancement; it is part of quality and responsible practice.

Users, stakeholders and contexts

A user is a person who interacts directly with a product, but a design may also affect non-users. Stakeholders can include administrators, customer-service staff, caregivers, regulators, purchasers and people whose data is processed. Context includes the physical environment, social setting, device, connectivity, time pressure, emotional state and consequences of error.

For example, a hospital medication interface is used by clinicians, but patients are major stakeholders. A small interaction delay may be harmless in a music application and dangerous during emergency care. Context determines what “usable” means.

2. Design thinking and the Double Diamond

Design thinking is a human-oriented approach to solving complex or poorly defined problems. Common descriptions include empathising with people, defining a problem, ideating, prototyping and testing. These labels are useful as a learning framework, but they should not be treated as a rigid recipe. Real projects move back and forth among activities.

The Design Council’s Double Diamond represents two kinds of movement. The first diamond expands understanding and then narrows it into a problem definition. The second expands possible responses and narrows them into a tested solution. Its stages are commonly named Discover, Define, Develop and Deliver.

  • Discover: gather evidence through observation, interviews, diary studies, analytics and document review.
  • Define: synthesise evidence, identify patterns and formulate a focused opportunity or problem statement.
  • Develop: generate multiple concepts, sketch alternatives and create prototypes.
  • Deliver: test, refine, implement and monitor the solution.

The expanding stages are divergent: they seek breadth and reduce premature commitment. The narrowing stages are convergent: they seek focus and decisions. A common professional error is to converge too early—for example, accepting the first stakeholder idea as the problem definition. Another is to generate ideas without returning to evidence.

Research synthesis

Raw observations are not yet design requirements. Designers should record evidence, distinguish observation from interpretation and look for recurring behaviours, workarounds, frustrations and goals. Affinity mapping can group related observations. Personas may summarise patterns among users, but they must be evidence-based rather than fictional stereotypes. Journey maps show experiences across time and channels, including emotions, pain points and backstage processes.

A good problem statement is specific enough to guide design but open enough to allow alternatives. “Users need a better dashboard” is weak. “First-time volunteers need to confirm their next shift quickly on a mobile device because they often check schedules while travelling” is more useful.

3. Perception and attention

Perception is the process through which people interpret sensory information. An interface does not simply present information; it structures what users notice and how they interpret it.

Visual perception

Visual hierarchy helps users identify importance and sequence. Size, contrast, position, spacing, colour, typography and alignment can all signal relationships. Strong contrast between text and its background improves legibility, but colour alone should not communicate essential status because users may have colour-vision differences or may view the interface in poor lighting.

Attention is selective and limited. Salient movement, bright colour, unusual shapes and changes can attract attention, but excessive salience produces competition. If every control is visually prominent, none has clear priority. Designers should establish a hierarchy: primary action, secondary actions, supporting information and low-priority options.

Recognition is generally easier than recall. Menus, visible labels, examples and recently used items help users recognise available choices instead of remembering commands. This principle supports visible navigation, autocomplete and meaningful icons accompanied by text when interpretation is uncertain.

Perception in practice

A form that places labels above fields, groups related questions and shows a clear completion state reduces visual search. A warning presented only through a small red icon is weak because it depends on colour, symbol interpretation and attention at the right moment. A stronger warning uses concise text, an appropriate icon, sufficient contrast and a clear next action.

4. Cognition, memory and mental models

Cognition includes perception, attention, learning, memory, reasoning, decision-making and problem-solving. Interfaces should support these processes rather than assume unlimited mental capacity.

Working memory is used to hold and manipulate information temporarily. Its capacity is limited and affected by task complexity, expertise, stress and interruptions. Designers should therefore chunk information, keep related items together, expose relevant information at the point of need and avoid forcing users to remember data across screens.

Long-term knowledge supports expertise, but experts and novices behave differently. Experts may prefer shortcuts and dense information; novices need explanation, guidance and visible structure. A single interface can support both through progressive disclosure: show essential options first while making advanced functions available when needed.

Mental models

A mental model is a person’s internal understanding of how a system works. Users form models from previous experience, language, visual conventions and feedback. A person may expect a shopping basket to retain items, a calendar to preserve an appointment after saving, or a trash icon to remove an object. When a system behaves differently from the expected model, users experience confusion and error.

Designers cannot directly see mental models. They infer them through interviews, think-aloud studies, observed errors and explanations users give for their actions. A useful interface builds on familiar concepts where possible, but analogy must be used carefully. Digital products may resemble physical objects while behaving differently; a skeuomorphic image of a folder does not automatically explain permissions, synchronisation or deletion.

Conceptual models

A conceptual model is the explanation of system operation communicated by the design. Clear labels, grouping, state indicators and consistent behaviour help users build an accurate model. If a “Save” button silently saves drafts but a “Publish” button makes content public, the distinction must be visible and understandable before the consequential action.

5. Affordances, signifiers and feedback

An affordance is a possible action supported by the relationship between an actor and an object or environment. A chair affords sitting for a person of suitable size and strength. In digital design, people often use the term to mean an apparent opportunity for action, but a useful distinction is important:

  • Affordance: what action is possible.
  • Signifier: what communicates where and how the action can be performed.
  • Mapping: the relationship between a control and its effect.
  • Feedback: information provided after or during an action.
  • Constraint: a limitation that prevents or reduces inappropriate action.

A text field affords entering text; its border, label and cursor signify that possibility. A button’s label should describe its consequence, such as “Send message” rather than merely “Continue” when the action is consequential. A disabled control can constrain an action, but it should not hide why the action is unavailable if that information is useful.

Feedback closes the interaction loop. It may be visual, auditory or haptic and can communicate completion, progress, error or system state. Good feedback is timely, informative and proportionate. A loading indicator is appropriate for a short wait, whereas a long operation may require progress information and the ability to cancel. Feedback should not become decoration: motion that attracts attention without communicating state can increase distraction.

Consistency and error tolerance

Consistency supports prediction. Similar actions should look and behave similarly unless there is a compelling reason otherwise. Error-tolerant design prevents mistakes, permits recovery and avoids blaming users. Examples include undo, confirmation for irreversible actions, preserving entered data after validation errors and accepting common input formats when safety permits.

6. Cognitive load and information architecture

Cognitive load refers to the mental effort imposed by a task. A useful instructional distinction identifies:

  • Intrinsic load: complexity inherent in the subject or task;
  • Extraneous load: effort caused by poor presentation or unnecessary steps;
  • Germane processing: effort devoted to understanding and learning, sometimes treated as productive cognitive activity.

The distinctions are most useful as design heuristics rather than precise measurements. Designers cannot remove the complexity of filing taxes or diagnosing a patient, but they can reduce unnecessary navigation, ambiguous terminology and distracting content.

Practical methods include:

  • divide complex tasks into meaningful stages;
  • use plain language and familiar terms;
  • provide examples and defaults that are safe and reversible;
  • show only information needed for the current decision;
  • preserve user input and progress;
  • use headings, grouping and whitespace to reveal structure;
  • avoid unnecessary animation, notifications and duplicate instructions.

Information architecture concerns the organisation, labelling and navigation of information. Card sorting can reveal how users group content; tree testing can assess whether people can find items in a proposed structure. Search, navigation and filtering should complement one another rather than forcing one route on every user.

7. Gestalt principles of visual organisation

Gestalt psychology explains how people tend to organise visual elements into meaningful wholes. These principles are not mechanical laws, but they provide useful design guidance.

  • Proximity: nearby elements are perceived as related. Place a label close to its field.
  • Similarity: elements sharing colour, shape or typography appear related. Use consistent styling for equivalent actions.
  • Common region: elements within a bounded area are grouped. Cards and panels can communicate related content.
  • Connectedness: linked elements appear related. Lines, shared backgrounds or aligned structures can express relationships.
  • Continuity: users tend to follow smooth paths and alignments. Consistent alignment supports scanning.
  • Closure: people may perceive incomplete forms as complete. This can help create simple icons but should not make controls ambiguous.
  • Figure–ground: users distinguish focal content from its background. Adequate contrast and spacing help establish this relationship.

Gestalt principles should support semantic structure, not replace it. A visually grouped set of controls still needs accurate labels, keyboard accessibility and a logical reading order.

8. Behavioural design and ethics

Behavioural design examines how environments, prompts and defaults influence action. Useful concepts include:

  • defaults: preselected options influence decisions, so defaults should be safe and easily changed;
  • salience: prominent elements attract attention;
  • friction: extra effort can discourage or slow an action;
  • commitment and feedback: visible progress can support completion;
  • social proof: information about others’ behaviour may influence choice;
  • implementation prompts: reminders linked to a context can support intended behaviour.

These techniques can improve beneficial outcomes, such as completing a security setup or remembering medication. They can also become manipulative. Dark patterns include hidden costs, confusing cancellation, forced continuity, disguised advertisements, privacy-invasive defaults and misleading urgency. Ethical design respects autonomy, makes material consequences clear, avoids exploiting vulnerability and provides a genuine alternative to declining.

A practical ethical test asks: Is the choice understandable? Is refusal as easy as acceptance? Would the organisation accept the same design if the user were a child, an employee with less power or a person in distress? Privacy-by-design principles require data minimisation, meaningful consent, purpose limitation, secure handling and transparent explanations. Designers should collaborate with legal, security and domain experts rather than treating compliance as a visual afterthought.

9. Applying the principles: an illustrative case

Background

The following is an illustrative case. A community clinic wants a mobile appointment service. Patients currently telephone reception, wait on hold and sometimes miss appointments because reminder messages are unclear.

Problem

Initial stakeholders request “an app with more features.” Discovery research instead finds three important patterns: many patients use low-cost phones, some have limited digital confidence, and appointments are often booked while patients are busy or anxious. Reception staff also spend time correcting incomplete bookings.

Analysis

Observation and interviews suggest that the real problem is not a lack of features but uncertainty. Patients need to know which appointment type to select, whether the booking succeeded, what preparation is required and how to cancel or reschedule. The service must work with intermittent connectivity and support people who need assistance.

The team creates a journey map from searching for a clinic to attending the appointment. Pain points are concentrated at appointment-type selection and confirmation. A misleading success state is particularly risky: some patients believe that returning to the previous screen means the booking was completed.

Approach and solution

During the Develop stage, the team sketches several concepts. Testing paper prototypes reveals that users interpret “consultation” inconsistently. The label is changed to plain-language choices with examples. A short, staged flow asks only for information required at each point. The confirmation screen presents date, time, clinic, preparation instructions and a prominent “Add to calendar” option. It also offers rescheduling and a telephone-help route.

The system uses clear progress feedback, preserves entered details after errors and gives a distinct confirmation message only after the server has recorded the appointment. The design does not rely on colour alone and supports larger text. Reminders state the action required and include cancellation instructions rather than using unexplained urgency.

Outcome

In usability evaluation, participants complete the core booking task more reliably and explain the confirmation state more accurately. Staff report fewer incomplete bookings. The team continues monitoring missed appointments, support calls and accessibility feedback after launch; the design is not considered finished merely because a prototype tested well.

Learning points

The case demonstrates that HCD may redefine a feature request as a communication and service problem. Mental models affected terminology; cognitive-load principles shaped the staged flow; affordances and feedback clarified system state; inclusive design addressed device, ability and context; and ethical behavioural design avoided coercive reminders.

10. Evaluation and professional practice

Usability evaluation should be planned around realistic tasks and representative participants. Moderated usability testing can reveal misunderstandings and workarounds. Unmoderated testing may provide broader reach but less contextual explanation. Accessibility evaluation should include keyboard operation, focus order, text resizing, contrast, screen-reader interpretation and alternative input methods. Automated tools are useful for finding some defects but cannot replace human evaluation.

A designer should combine qualitative and quantitative evidence carefully. Completion rates, time, error counts and support requests can indicate change, but a metric alone does not explain why behaviour occurred. A faster task is not necessarily better if users make unsafe choices. Define success criteria before testing, record assumptions and distinguish evidence from opinion.

Technology and AI

AI can support transcription, clustering of research notes, content drafting, accessibility checks and adaptive interfaces. However, generated summaries may omit minority experiences, reproduce bias or invent patterns. Sensitive research data must be handled according to consent, privacy and organisational policy. Human review is essential, especially when AI influences eligibility, health, finance, employment or access to services. Explainability, contestability and the ability to override automated decisions are important design requirements.

Challenges and limitations

HCD requires time, access to participants and organisational willingness to change. Participants may describe aspirations differently from what they do, and a small study cannot represent every population. Personas and journey maps can oversimplify differences if treated as truth. Stakeholders may prioritise business goals that conflict with user welfare. Accessibility improvements may expose architectural limitations that cannot be solved in a visual layer alone.

Design methods also contain cultural assumptions. Concepts such as “independence,” preferred navigation or acceptable disclosure vary across communities. Researchers should use inclusive recruitment, accessible research materials, appropriate compensation and respectful interpretation. HCD is not a guarantee of a good outcome; it is a disciplined way to reduce uncertainty and make decisions more accountable.

Best-practice checklist

Before releasing an interface, ask:

  • Have we identified real users, affected stakeholders and usage contexts?
  • Is the problem supported by evidence rather than a preferred solution?
  • Can users recognise what to do, predict the result and recover from errors?
  • Are hierarchy, grouping, labels and navigation clear?
  • Have we reduced unnecessary cognitive effort without hiding important information?
  • Does the design support accessibility, varied devices and diverse abilities?
  • Are defaults, prompts and persuasive elements transparent and respectful?
  • Has the design been evaluated with representative users and realistic tasks?
  • Are privacy, security, safety and post-launch monitoring addressed?

Chapter Summary

Human-centred design places people, contexts and consequences at the centre of product development. Its iterative activities—understanding context, specifying requirements, producing solutions and evaluating them—are supported by design research and user involvement. Design thinking provides a flexible problem-solving orientation, while the Double Diamond illustrates divergence and convergence across Discover, Define, Develop and Deliver.

Perception and attention shape what users notice; cognition and memory influence how much information they can manage; and mental models determine whether system behaviour is predictable. Affordances describe possible action, signifiers communicate action, feedback communicates system state and constraints reduce error. Cognitive-load principles guide the reduction of unnecessary complexity, while Gestalt principles help designers organise visual information. Behavioural design can support beneficial action but must not become deceptive or coercive. Ethical, inclusive and evidence-based practice is therefore essential throughout research, design, evaluation and implementation.

Key Terms

Human-centred design: An iterative approach that bases design decisions on people, their needs and their contexts.

Design thinking: A human-oriented approach involving problem framing, ideation, prototyping and testing.

Double Diamond: A model showing divergent and convergent work across Discover, Define, Develop and Deliver.

User context: The physical, social, technical and situational conditions surrounding use.

Divergence: Expanding exploration to consider multiple possibilities.

Convergence: Narrowing alternatives to make a reasoned decision.

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

Conceptual model: The explanation of system operation communicated through the design.

Affordance: A possible action enabled by the relationship between a person and an object or system.

Signifier: A perceptible cue indicating where or how an action can be performed.

Feedback: Information provided in response to an action or system state.

Constraint: A limitation that prevents or reduces inappropriate action.

Cognitive load: Mental effort required by a task or its presentation.

Progressive disclosure: Revealing information or controls as they become relevant.

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

Gestalt principles: Principles describing how people organise visual elements into meaningful patterns.

Behavioural design: Design that influences behaviour through features, environments and prompts.

Dark pattern: A deceptive interface practice that manipulates users against their interests.

Accessibility: The extent to which people with diverse abilities can use a product or service.

Usability evaluation: Systematic assessment of how effectively and efficiently users can achieve goals.

Review Questions

Short Answer Questions

  1. What is the purpose of human-centred design?
  2. Name the four stages of the Double Diamond.
  3. Distinguish an affordance from a signifier.
  4. What is a mental model?
  5. Give two methods for reducing extraneous cognitive load.

Long Answer Questions

  1. Explain how human-centred design differs from designing for an average user.
  2. Compare design thinking and the Double Diamond model.
  3. Explain how perception, attention and memory affect interface design.
  4. Discuss the role of feedback, constraints and error recovery in usable systems.
  5. Explain how Gestalt principles can improve information architecture while still requiring accessibility support.

Analytical / Application Questions

  1. Analyse a public-service form that users frequently abandon. Identify likely perception, cognitive-load and mental-model problems, and propose improvements.
  2. Design a research and evaluation plan for a mobile appointment-booking service using the Double Diamond.
  3. Evaluate a proposed default-on privacy setting using the principles of behavioural design, autonomy, transparency and informed choice.

Multiple Choice Questions with Answers

Question 1

Which activity belongs primarily to the Define stage of the Double Diamond?

A. Synthesising evidence into a focused problem statement

B. Launching the final product without testing

C. Generating as many unrelated concepts as possible

D. Measuring visual contrast only

Correct Answer: A. Synthesising evidence into a focused problem statement

Question 2

What is the main purpose of feedback in an interface?

A. To make every screen visually animated

B. To communicate an action’s result or the system’s state

C. To prevent users from changing their minds

D. To replace all user research

Correct Answer: B. To communicate an action’s result or the system’s state

Question 3

Which example best illustrates recognition rather than recall?

A. Requiring users to remember a command

B. Providing visible menu options users can select

C. Hiding navigation until a shortcut is memorised

D. Removing labels from familiar icons

Correct Answer: B. Providing visible menu options users can select

Question 4

Which Gestalt principle suggests that nearby items are perceived as related?

A. Closure

B. Figure–ground

C. Proximity

D. Continuity

Correct Answer: C. Proximity

Question 5

Which practice most directly reduces extraneous cognitive load?

A. Adding decorative motion to every control

B. Using unfamiliar technical terms

C. Grouping related information and removing unnecessary steps

D. Making all options equally prominent

Correct Answer: C. Grouping related information and removing unnecessary steps

Question 6

A user expects a saved appointment to remain visible, but the system deletes it after leaving the screen. Which concept best explains the problem?

A. Mental-model mismatch

B. Common-region grouping

C. Social proof

D. Colour contrast

Correct Answer: A. Mental-model mismatch

Question 7

What is a signifier in interface design?

A. A possible action regardless of whether it is visible

B. A cue indicating where or how an action can be performed

C. A measure of user satisfaction

D. A rule that requires all buttons to be blue

Correct Answer: B. A cue indicating where or how an action can be performed

Question 8

Which is an example of a dark pattern?

A. Providing an obvious undo option

B. Explaining why a permission is requested

C. Making subscription cancellation deliberately confusing

D. Showing progress during a long task

Correct Answer: C. Making subscription cancellation deliberately confusing

Question 9

Why should essential status information not rely on colour alone?

A. Colour always increases cognitive load

B. Some users cannot distinguish colours reliably and conditions vary

C. Colour cannot be displayed on digital screens

D. Colour is never perceived as meaningful

Correct Answer: B. Some users cannot distinguish colours reliably and conditions vary

Question 10

Which statement best describes the relationship between HCD and evaluation?

A. Evaluation occurs only after launch

B. Evaluation is iterative and can reveal that the problem was misunderstood

C. Evaluation is unnecessary when stakeholders approve a design

D. Evaluation concerns visual appearance only

Correct Answer: B. Evaluation is iterative and can reveal that the problem was misunderstood

UI/UX Design Fundamentals
Chapter 2 of 14