Human-Centred Design and Interaction Theory

Introduction

Human-centred design (HCD) is an approach to designing interactive products and services around the people who use them, their goals, abilities, environments and constraints. Rather than beginning with technology or organisational assumptions, HCD begins by understanding human activity and continues through cycles of design, evaluation and refinement.

In UI/UX practice, HCD provides both a mindset and a process. It helps designers answer questions such as: What is the user trying to accomplish? What does the user already understand? Which information deserves attention? How much mental effort does the interface require? Can the user easily select, interpret and recover from an action?

Interaction theory supplies principles for answering these questions. Mental models, conceptual models, cognitive load, attention, perception, memory, Fitts’s Law, Hick’s Law and Gestalt principles explain why some interfaces feel clear and efficient while others feel confusing or demanding.

Learning Objectives

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

• describe the purpose and stages of human-centred design;
• distinguish mental models from conceptual models;
• explain how cognitive load, attention, perception and memory influence interaction;
• apply Fitts’s Law and Hick’s Law appropriately to interface decisions;
• use Gestalt principles to organise visual information;
• identify accessibility, ethical and contextual concerns in interaction design; and
• analyse an interface problem and propose a human-centred solution.

1. Human-Centred Design as a Design Process

HCD treats users as active participants in design rather than as passive recipients of a finished product. The process is iterative: designers investigate a context, define a problem, generate possible solutions, create representations of those solutions and evaluate them with users. Findings are then used to revise the design.

A typical cycle contains four connected activities:

1. Understand context of use. Identify users, tasks, environments, devices, social conditions and accessibility needs.
2. Specify user requirements. Translate evidence into explicit needs, goals, constraints and success criteria.
3. Produce design solutions. Create sketches, user flows, wireframes, prototypes and interface specifications.
4. Evaluate and improve. Test designs through observation, interviews, usability testing, accessibility checks and analytics.

These activities do not necessarily occur once or in a fixed sequence. A usability test may reveal that the original understanding of the problem was incomplete, requiring further research. HCD therefore differs from a purely linear “requirements then implementation” model.

Evidence rather than assumption

Designers use several research methods. Interviews reveal goals, language and attitudes; contextual observation reveals workarounds and environmental constraints; surveys can identify broad patterns; diary studies capture behaviour over time; and usability testing exposes difficulties in real tasks. No method is universally sufficient. A spoken preference, for example, may not predict actual behaviour.

Personas, journey maps and scenarios are useful synthesis tools, but they must be based on evidence. A persona is not a fictional stereotype; it is a concise representation of a meaningful user group and its needs. Good documentation distinguishes observed facts, interpretations and design hypotheses.

Participation and inclusion

Users should be involved at appropriate stages, especially when a product affects vulnerable communities or high-consequence decisions. Inclusive design considers differences in vision, hearing, mobility, cognition, language, literacy, culture, age, income, connectivity and technology access. Accessibility is not an optional enhancement added at the end; it is part of quality and risk management from the beginning.

2. Mental Models and Conceptual Models

A mental model is a person’s internal understanding of how a system works. It may be incomplete, inaccurate or influenced by previous experience. For example, a user may expect a shopping-cart icon to contain selected products because physical baskets and familiar online conventions support that expectation.

A conceptual model is the explanation of a system that the design communicates. It includes the objects, actions, relationships and rules presented through the interface. A well-designed conceptual model allows users to form a useful mental model.

The relationship can be expressed as:

Designer’s system model → Interface representation → User’s mental model → User action

This chain is not automatic. Labels, layout, feedback and interaction behaviour mediate the relationship. If an interface presents a “Save” icon but does not indicate whether saving is automatic, users may construct different interpretations.

Affordances, signifiers and feedback

An affordance is a possible action supported by an object or environment. A button affords pressing; a text field affords text entry. A signifier communicates where and how an action can occur. Underlining, colour, shape, cursor changes and labels can signify that text is a link or an element is interactive.

Feedback communicates the result of an action. A progress indicator, confirmation message, changed button state or error explanation helps users understand what happened. Constraints limit invalid actions, such as disabling a submission control until required fields are complete. Constraints should be informative rather than mysterious: a disabled control without an explanation can create uncertainty.

Design implication

Interfaces should match familiar concepts where appropriate, but convention should not be followed blindly. A digital “trash” metaphor may be useful, yet permanent deletion, cloud storage and version history may not behave like a physical bin. Designers should test whether the metaphor supports the user’s task and should explain important differences.

3. Cognition in Interaction Design

Cognitive load

Cognitive load is the mental effort required to understand and perform a task. A useful instructional distinction identifies three forms:

• Intrinsic load: effort arising from the inherent complexity of the task;
• Extraneous load: effort caused by confusing presentation or unnecessary steps; and
• Germane effort: mental work that contributes to forming useful knowledge or schemas.

In interface design, the main practical goal is to reduce avoidable extraneous load. Designers cannot always remove task complexity, but they can present information progressively, use meaningful defaults, preserve context and prevent unnecessary decisions.

Common sources of extraneous load include inconsistent terminology, dense screens, hidden system status, unnecessary data entry, ambiguous icons and instructions that require users to remember information from another screen.

Recognition rather than recall is therefore important. A visible list of available commands is usually easier than requiring users to remember command syntax. Autofill, recent items, examples and inline help can support recognition, provided they do not obscure control or introduce incorrect assumptions.

Attention

Attention is selective. Users cannot process every visual element equally, particularly when they are distracted, mobile, stressed or using a small screen. Visual hierarchy directs attention through position, size, contrast, colour, whitespace, typography and motion.

Attention is not identical to visibility. A highly visible warning may still be ignored if it appears too frequently, uses vague language or competes with more immediate goals. Important information should appear at the point of decision and should explain consequences in plain language.

Motion can attract attention, but animation should be purposeful. Excessive motion increases distraction and may create accessibility problems for people with vestibular sensitivities or cognitive impairments. Users should be able to pause or avoid non-essential animation.

Perception

Perception is the process through which sensory information is organised and interpreted. In visual interfaces, users perceive contrast, boundaries, alignment, grouping, size and motion before reading every word. Perceptual organisation is therefore a foundation of visual hierarchy.

Designers should not rely on colour alone to communicate status. A required field, error or selected item should also have a label, icon, pattern, text or structural cue. Adequate contrast, readable text and clear focus indicators support users with low vision and users in poor lighting or on low-quality displays.

Memory

Human memory is limited and vulnerable to interference. Working memory is especially constrained during complex or unfamiliar tasks. Interface strategies that support memory include:

• keeping instructions near the relevant control;
• preserving entered data after an error;
• showing progress and remaining steps;
• using consistent locations and labels;
• providing searchable history and recent choices; and
• allowing users to undo actions.

Recognition is generally less demanding than recall, but recognition interfaces can still become overwhelming when they display too many choices. The aim is not to display everything; it is to make relevant options understandable at the right time.

4. Fitts’s Law and Target Selection

Fitts’s Law predicts the time required to acquire a target using a pointing device. A commonly used form is:

Here, MT is movement time, D is the distance from the starting position to the target, W is the effective target width measured along the direction of movement, and a and b are empirically estimated constants for a particular device, user population and task. The logarithmic term is the index of difficulty. Distances and widths must use the same unit, although the ratio D/W is dimensionless.

The law predicts that targets become harder to acquire when they are smaller or farther away. It supports several practical decisions:

• make frequent controls sufficiently large;
• place important controls near the user’s current pointer or thumb position;
• group related actions to reduce movement;
• use screen edges and corners strategically on desktop interfaces, because the boundary can effectively limit pointer overshoot; and
• provide adequate spacing between neighbouring targets, especially on touchscreens.

Fitts’s Law is a predictive model, not a complete design rule. It does not by itself account for target meaning, visual search, motor impairments, device differences, occlusion or the consequences of an error. A large destructive button may be easy to hit but unsafe if it is placed where accidental taps are likely.

Worked application

Suppose two controls have equal width, but one is twice as far from the pointer as the other. The farther control has a larger value of D/W, so its predicted movement time is higher, all else being equal. Increasing the target width or reducing the distance lowers the index of difficulty. Exact time cannot be calculated without experimentally estimated values of a and b; the law should not be used to invent universal time values.

5. Hick’s Law and Choice Complexity

Hick’s Law, also called the Hick–Hyman law, models the relationship between the number of choices and the time needed to make a decision:

RT is response time, n is the number of stimuli or choices, and a and b are empirically estimated constants. The relationship assumes that choices are reasonably comparable and that the user is making a decision rather than searching for a known target. If options have unequal probabilities, an information-theoretic formulation may use uncertainty rather than simply log₂(n + 1).

The practical lesson is not that every menu should contain only a few items. Removing choices can make an interface less useful or force users through unnecessary steps. Instead, designers should reduce irrelevant choices, group options, use progressive disclosure, provide sensible defaults and distinguish frequent actions from rare ones.

Hick’s Law also has limits. A user may instantly select a familiar option from a long list, while a short list of ambiguous choices may take longer. Visual search, language, expertise, decision importance and consequences all influence response time.

6. Gestalt Principles for Interface Organisation

Gestalt psychology explains how people tend to organise visual elements into meaningful wholes. These principles are not rigid laws, but they are valuable design heuristics.

• Proximity: Elements close together are perceived as related. Place labels near their fields and group controls belonging to the same task.
• Similarity: Elements with similar appearance are perceived as having similar function. Consistent button styles help users predict behaviour.
• Common region: Elements within a bounded area are grouped. Cards, panels and fieldsets can create meaningful sections.
• Connectedness: Elements joined by lines or visual links are perceived as related. Progress indicators use this principle.
• Continuity: People tend to follow smooth lines and aligned structures. Consistent alignment supports scanning.
• Closure: People may perceive incomplete forms as complete. This can support simple icons, but excessive abstraction harms clarity.
• Figure–ground: Users distinguish a focal object from its background. Contrast, spacing and layering establish hierarchy.
• Common fate: Elements moving in the same direction appear related. This is useful in animation, but motion must remain accessible and purposeful.

Gestalt principles should reinforce semantic relationships rather than disguise them. A visually grouped set of unrelated controls may cause errors. Proximity, for example, can communicate association, but a visible heading or label may still be needed.

7. Applying the Principles Together

Interaction principles operate together. Consider a mobile payment form. A designer might:

1. research how users understand payment, security and confirmation;
2. use familiar labels and a clear conceptual model;
3. divide the task into manageable stages to reduce extraneous load;
4. place the primary action within comfortable thumb reach;
5. make the primary target large enough for reliable acquisition;
6. reduce simultaneous choices by using progressive disclosure;
7. group billing fields through proximity and common region;
8. preserve entered information when validation fails;
9. provide immediate, understandable feedback; and
10. test the design with users using different devices and abilities.

This example shows why no principle should be applied in isolation. Increasing button size may improve motor performance but may also create visual dominance. Reducing menu options may simplify a screen but hide important functionality. Good design balances efficiency, discoverability, safety and user control.

8. Illustrative Case: Redesigning a Community Clinic Booking Service

Background

A fictional community clinic receives complaints that patients cannot complete online appointment booking. Many users access the service on phones, some have limited digital literacy, and appointments may concern urgent or sensitive needs.

Problem

The existing interface presents a long list of departments, uses unfamiliar clinical terms, places the booking button at the bottom of a lengthy page and clears all entered information when an error occurs. Users frequently select the wrong service or abandon the process.

Analysis

Interviews reveal that patients think in terms of symptoms or visit purposes, whereas the system is organised by internal department names. This is a mental-model mismatch. Observation shows that users scroll repeatedly to locate the next step, indicating weak visual hierarchy and poor feedback. The long list increases decision complexity, while small controls create motor difficulty on phones. The cleared form increases memory and cognitive load.

Approach and solution

The redesign begins with plain-language categories such as “general appointment,” “child health” and “test results,” with an explanation and an alternative contact route for urgent concerns. A short guided flow asks one relevant question at a time. Frequently selected options are prioritised, while less common options remain available through a clearly labelled “other reasons” path.

The primary action is placed consistently near the lower portion of the mobile screen, with sufficient size and spacing. Required fields are identified by text, not colour alone. Inline validation explains how to correct an error and preserves valid entries. A progress indicator communicates the number of stages without implying that the user is trapped. Before final submission, the service displays a summary for confirmation.

Outcome

In a pilot usability evaluation, participants complete representative booking tasks with fewer navigation errors and less need for assistance. The redesign does not merely make the interface more attractive; it changes the conceptual model, reduces avoidable load, supports recognition, improves target acquisition and makes system status visible.

Learning points

• Research can reveal that organisational categories do not match user concepts.
• Error recovery is part of the main task, not an afterthought.
• A shorter flow is valuable only when it preserves necessary information and user control.
• Accessibility and safety are especially important in health-related services.
• Success should be measured through task completion, error rates, time, confidence and user understanding—not appearance alone.

9. Evaluation, Ethics and Contemporary Practice

Usability evaluation may be formative, improving a design during development, or summative, assessing a relatively mature product. Useful measures include completion rate, error frequency, time on task, assistance required, satisfaction and confidence. Quantitative measures should be interpreted with observation and qualitative evidence; a fast completion may indicate success or may indicate that a user skipped important information.

Ethical HCD requires informed participation, respectful recruitment, protection of personal data and care when observing sensitive activities. Designers should avoid dark patterns such as disguised advertisements, forced continuity, confusing consent, obstruction of cancellation or default choices that exploit inattention. Informed consent should be understandable, voluntary and separate from unnecessary data collection.

AI can support transcription, clustering of research notes, accessibility checking and generation of alternative interface concepts. However, AI-generated interpretations may reproduce bias, omit context or expose confidential research data. Human researchers remain responsible for validating findings, protecting participants and explaining consequential design decisions. Automated personalisation should not remove user control or make important decisions opaque.

Responsive design adds another dimension: layout, targets, typography and hierarchy must adapt across screen sizes, input methods and orientations. A design that satisfies Fitts’s Law with a mouse may be difficult for touch; a dense desktop table may require a different mobile information structure. Testing should therefore include realistic devices, network conditions, assistive technologies and environmental contexts.

Best-Practice Checklist

Before releasing an interface, ask:

• Are user goals and contexts supported by evidence?
• Does the interface communicate a coherent conceptual model?
• Are labels, actions and system status understandable?
• Does the design reduce unnecessary memory and decision demands?
• Are controls large, distinct and appropriately placed?
• Are options grouped and prioritised without hiding essential functions?
• Do visual patterns communicate relationships consistently?
• Can users prevent, recognise and recover from errors?
• Does the experience work across devices and accessibility needs?
• Are data collection, consent, defaults and persuasive techniques ethical?
• Has the design been evaluated with representative users?

Chapter Summary

Human-centred design is an iterative process that begins with understanding people and their contexts and continues through requirements, design and evaluation. Mental models describe users’ internal beliefs about how systems work, while conceptual models describe the structure and behaviour communicated by an interface. Effective design aligns the two through clear signifiers, feedback, constraints and familiar but accurate concepts.

Cognitive load, attention, perception and memory influence how users understand and operate interfaces. Designers reduce avoidable effort through progressive disclosure, recognition, consistency, visible status, meaningful defaults and recoverable errors. Fitts’s Law connects target acquisition time with distance and width; Hick’s Law connects decision time with the number and uncertainty of choices. Both are useful empirical models, but neither replaces testing or contextual judgement.

Gestalt principles help designers organise visual information through proximity, similarity, common region, connectedness, continuity, closure, figure–ground and common fate. These principles must reinforce actual meaning. Inclusive, ethical and responsive design extends HCD beyond efficiency to accessibility, safety, privacy, user autonomy and different devices and environments.

Key Terms

Human-centred design: An iterative approach that designs around users, contexts, needs and evaluation.

Context of use: The users, goals, environments, tools and conditions in which an interaction occurs.

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

Conceptual model: The system explanation communicated by the design.

Affordance: A possible action supported by an object or interface.

Signifier: A perceptible cue indicating what action is possible and how to perform it.

Feedback: Information about the result or status of an action.

Constraint: A limitation that prevents or discourages invalid action.

Cognitive load: Mental effort required to understand or perform a task.

Recognition: Identifying information that is presented rather than retrieving it from memory.

Attention: Selective allocation of mental processing to information or activity.

Perception: Organisation and interpretation of sensory information.

Working memory: Limited mental capacity used to hold and manipulate information temporarily.

Fitts’s Law: An empirical model relating movement time to target distance and width.

Hick’s Law: An empirical model relating decision time to the number or uncertainty of choices.

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

Progressive disclosure: Presenting necessary information or options gradually rather than all at once.

Usability evaluation: Systematic assessment of how effectively, efficiently and satisfactorily users can complete tasks.

Dark pattern: A design practice that manipulates or obstructs users for an organisation’s benefit.

Review Questions

5 Short Answer Questions

1. What is the difference between a mental model and a conceptual model?
2. Name the four broad activities in a human-centred design cycle.
3. What is extraneous cognitive load?
4. State the main practical implication of Fitts’s Law.
5. How does proximity support interface organisation?

5 Long Answer Questions

1. Explain how signifiers, feedback and constraints help users form accurate mental models.
2. Discuss how attention, perception and memory should influence the design of a mobile form.
3. Explain Fitts’s Law and Hick’s Law, including their variables, uses and limitations.
4. Describe at least five Gestalt principles and apply each to a digital interface.
5. Explain why accessibility and ethics are integral to human-centred design rather than final-stage additions.

3 Analytical / Application Questions

1. Analyse a familiar booking or checkout interface. Identify two mental-model mismatches, two sources of extraneous load and two changes based on Gestalt principles.
2. A mobile application has twelve equally prominent actions on its home screen. Propose a revised information architecture using Hick’s Law, progressive disclosure and user research. Explain possible trade-offs.
3. Design an evaluation plan for the clinic-booking case. Specify participants, tasks, measures, accessibility considerations and how findings would guide iteration.

Multiple Choice Questions with Answers

Question 1

Which statement best distinguishes a mental model from a conceptual model?

A. A mental model is the user’s internal understanding; a conceptual model is what the design communicates.

B. A mental model is a visual style guide; a conceptual model is a colour palette.

C. A mental model is a usability metric; a conceptual model is a survey result.

D. A mental model describes hardware; a conceptual model describes software cost.

Correct Answer: A. A mental model is the user’s internal understanding; a conceptual model is what the design communicates.

Question 2

Which design decision most directly reduces extraneous cognitive load?

A. Adding decorative animation to every screen

B. Using consistent labels and preserving entered information after an error

C. Hiding system status until the task is complete

D. Requiring users to remember information from a previous page

Correct Answer: B. Using consistent labels and preserving entered information after an error

Question 3

In Fitts’s Law, what happens generally when target width increases while distance remains constant?

A. The target becomes harder to acquire

B. The predicted movement time generally decreases

C. The number of menu choices increases

D. The user’s conceptual model becomes invalid

Correct Answer: B. The predicted movement time generally decreases

Question 4

Which variable in Fitts’s Law represents distance to the target?

A. MT

B. a

C. D

D. W

Correct Answer: C. D

Question 5

What is the primary implication of Hick’s Law for interface design?

A. Increase the number of equally prominent choices

B. Reduce or organise unnecessary choices

C. Make every target smaller

D. Remove all secondary functions

Correct Answer: B. Reduce or organise unnecessary choices

Question 6

A set of controls placed inside a bordered panel is primarily using which Gestalt principle?

A. Common region

B. Closure

C. Common fate

D. Figure–ground

Correct Answer: A. Common region

Question 7

Which is the best example of recognition rather than recall?

A. Typing an exact command from memory

B. Remembering a password without assistance

C. Selecting a destination from a visible list

D. Reconstructing a previous form from memory

Correct Answer: C. Selecting a destination from a visible list

Question 8

Why should an error message preserve valid form entries?

A. It increases unnecessary memory demands

B. It supports recovery and reduces repeated work

C. It prevents users from correcting the error

D. It removes the need for feedback

Correct Answer: B. It supports recovery and reduces repeated work

Question 9

Which practice is most consistent with inclusive design?

A. Communicating errors through colour alone

B. Testing only with expert desktop users

C. Providing text and structural cues in addition to colour

D. Assuming one input method suits all users

Correct Answer: C. Providing text and structural cues in addition to colour

Question 10

Why are Fitts’s Law and Hick’s Law not complete design rules?

A. They have no relationship to interaction

B. They are empirical models that omit contextual factors such as meaning and visual search

C. They apply only to printed books

D. They prove that all users behave identically

Correct Answer: B. They are empirical models that omit contextual factors such as meaning and visual search