The UX/UI
Handbook

The term was coined in the early 1990s by cognitive scientist and designer Don Norman at Apple. His aim was deliberate: he found concepts like "human interface" and "usability" too narrow and wanted an umbrella that could describe the whole of a person's relationship with a system.1

The ISO 9241-210 standard defines user experience clearly: a person's perceptions and responses resulting from the use or anticipated use of a product, system or service.2 The crucial point: experience is not something a designer can produce directly. As IxDF puts it, you cannot design an experience; you can only design for one.3

In practice the UX designer's question is simple but deep: how do we make interaction with a product as intuitive, fluid and enjoyable as possible? That is why there is no single definition of a "good experience"; a good experience is one that meets a particular user's need in a particular context.3

Morville published the honeycomb at Semantic Studios in June 2004. For years he had explained information architecture with a three-circle diagram — business goals and context, user needs and behaviour, content. When he widened his focus from IA to UX he needed a new picture, above all to help clients understand why they had to move beyond usability. His verdict on ease of use is the sharpest line in the piece: usability is necessary, but not sufficient.4

The seven facets, in his own order: useful (does the product fill a real need?), usable (is it easy to use?), desirable (image, identity, brand and emotional design), findable (can users locate what they need? — Chapter 7), accessible (can people with disabilities use it? — Chapter 11), credible (do users trust and believe us?) and valuable (does it deliver value to the sponsor — the mission for a non-profit, the bottom line for a business).4

Its real power is as a prioritisation tool, not a checklist. Morville's own framing: is it more important for your product to be desirable or accessible? Usable or credible? The answer depends on your particular balance of context, content and users — and those trade-offs are better made explicitly than unconsciously.4 The honeycomb also supports modular work: you can improve one facet at a time instead of rebuilding everything. And each facet can serve as a lens that changes how you see the whole project.

Confusing UX with UI is the field's most common mistake. The clarifying sentence: UX decides what the user can do; UI decides what they encounter while doing it. UX is abstract and process-based; UI is concrete, visual and tangible. If UX is a building's floor plan, UI is its interior architecture, materials and lighting.

UI is visual communication design applied to digital interfaces. The task is to marry aesthetics with function: a button must both look good and clearly signal that it is clickable. A good interface never draws attention to itself.5

Interaction design is a specialized sub-discipline beneath the UX umbrella.6 The distinction: UX decides what a user can do, while IxD designs how it feels to do it. Every action must produce a perceptible response; that feedback can be visual, motion-based, auditory or haptic.6

The principles come largely from Norman's The Design of Everyday Things: visibility, feedback, constraints, mapping, consistency and affordance.6 The interaction designer also thinks in five dimensions at once: words, visual representations, physical objects/space, time and behavior.7

HCI is older and more academic than UX. Its roots reach back to the 1980s intersection of cognitive psychology, ergonomics and computer science. Unlike the practitioner-oriented UX, HCI is usually focused on research and evaluation: it measures how people perceive, learn and use systems, and turns the findings into principles.

Many of the rules we use every day come from this "toolkit": Nielsen and Molich's 10 usability heuristics and Shneiderman's Eight Golden Rules are products of HCI's body of knowledge.8 The relationship is clear: HCI is the science, while UX and IxD are the applied fields that turn that science into products.

HCD is a "people first" mindset: it begins from the needs of real people rather than the designer's assumptions, and is built on empathy, observation and repetition. ISO 9241-210 defines what it formally calls "human-centred design for interactive systems," placing the approach within an international framework.9

What sets HCD apart is its scope: it is not content with benefiting a single user group but also weighs a design's broader human, social and environmental effects. This is why Norman prefers to say "people" rather than "users."10

In IxDF's definition, UCD is an iterative approach in which designers place users and their needs at the center in every phase of the process.12 The goal is to weave research and feedback through the whole process so the design is genuinely grounded in user needs. The concept traces back to Norman and Draper's 1986 work User Centered System Design.13

In the digital world the "product designer" is often the more strategic cousin of the UX designer. The difference lies in the breadth of responsibility: where UX focuses on the quality of the experience, the product designer is also responsible for tying that quality to business outcomes and the product's life cycle. Alongside "Is this screen usable?" comes "Does this feature work, and does it support growth?"

Good product design classically sits at the intersection of three sets: desirability for the user, viability for the business and technical feasibility. No successful product emerges unless all three are met.

Service design has roots in marketing and management, reaching back to Lynn Shostack's 1982 work, as the focus shifts from "product" to "service."14 Stickdorn and colleagues summarize its principles: be user-centered, run a co-creative process, break the service into sequences, make it tangible through evidence, and keep a holistic view.14

The most powerful tool is the service blueprint: it separates the "frontstage" the user sees from the "backstage" processes that make it possible, using a "line of visibility." Drinking a latte in a café is frontstage; supply, training and point-of-sale software make it possible backstage.

UX usually deals with a single product; CX deals with the whole brand. The in-app experience may be flawless; but if you kept someone waiting 40 minutes in a call center, the customer experience has failed. CX sees these touchpoints as one end-to-end journey.

The core tool is the customer journey map: across stages from awareness to consideration, from purchase to loyalty, it makes visible what the customer does, feels and where they get stuck. The aim is to turn disconnected touchpoints into a coherent whole.

Web design is one of the field's most visible faces, because it is where everyone has daily contact. But it is more than "making a pretty page": it establishes information hierarchy, designs navigation, makes content readable, and keeps all of this standing across different screen sizes.

The defining reality of modern web design is multi-device use: the same page has to work on desktop, tablet and phone. That is why today it largely demands responsive thinking — you design not a fixed canvas but a flexing system. (Detailed in Chapter 10.)

In Prof. Constantine Stephanidis's definition, Design for All is the deliberate, systematic effort to develop accessible and usable ICT products from the very start of design, in a way that removes the need for later patching.15 The key idea: accessibility should not be a feature bolted on afterward but a system property present from the outset.

The term encompasses, or is used synonymously with, accessible design, inclusive design, barrier-free design and universal design.15 Its backbone is the Seven Principles of Universal Design, defined in 1997 at NC State University under the leadership of Ronald Mace.16

IxDF divides the process into five stages: Empathize (understand the user), Define (clarify the problem), Ideate (multiply solutions), Prototype (make the idea tangible) and Test (validate with users).17 The crucial point: these are not sequential steps but "modes." Teams can run them in parallel, repeat them, and return to an earlier stage at any moment.18

The method is especially powerful for "wicked" (ill-defined) problems: in the ideation stage divergent thinking is encouraged — quantity first, filtering later. According to Forrester research, design thinking projects have a median return on investment of around 229% per project.19 The iPod's entry into a mature market and Airbnb's turnaround are frequently cited examples.

The classic model of Preece, Rogers and Sharp reduces the process to four core activities: establishing requirements, generating alternative designs, creating prototypes and evaluating.20 Where Design Thinking is a broader mindset, the interaction design process is its more concrete form, adapted to an interaction and product focus.

Iteration rejects the "perfect on the first try" myth. You start with a low-fidelity (lo-fi) draft, test it with users, and move to a higher version with what you learn. IxDF's emphasis is clear: the test stage feeds all the others; without user feedback the iterative process collapses.21 Each cycle turns uncertainty into knowledge and shrinks risk.

A good problem statement is built from the user's need, not the company's wish. "We must grow market share by 5%" is a business goal, not a problem statement; "Young girls need nutritious food to grow up healthy" is a human-centered one.22 The d.school formula combines three elements: User + Need + Insight. From these, "How Might We" questions are derived, bridging to ideation.22

At the heart of product thinking lies a distinction: output is what you produce — features, screens, code; outcome is the real change that output creates in user behavior or in the business. The goal is not to ship many features but to solve the right problem. This mindset avoids the "feature factory" trap: every idea passes through the filter of "which user problem, which business goal does it solve?"

Even the best design cannot ship if it is poorly managed. The designer manages milestones, dependencies, feedback loops and stakeholder expectations. Agile approaches move design forward in small increments synced with development. The British Design Council's Double Diamond framework splits the process into two diverge-converge rhythms: first discover and define the right problem, then develop and deliver the right solution.

The basic rule is simple: quantity comes first, criticism is deferred. Osborn's four principles: defer judgment, encourage wild ideas, build on the ideas of others, and stay on topic. The most common mistake is mixing the idea-generating (divergent) and idea-selecting (convergent) stages — the two must be kept apart.17 Its variants include brainwriting, the "worst possible idea," and SCAMPER.

Unlike linear notes, a mind map mimics the brain's associative way of working: central idea → main branches → sub-branches. In UX it is used to explore the problem space, draft an information architecture, and synthesize ideation and research findings. Color, icons and spatial layout strengthen memory and relationships.

Creative thinking balances two rhythms: divergent thinking opens up as many possibilities as it can; convergent thinking selects the best of them. Trying to do both at once kills creativity — you must open first, then narrow. Contrary to belief, constraints feed creativity; unlimited freedom often paralyzes.

The nine-dot puzzle cannot be solved without breaking the assumption that the lines must stay inside an imaginary square. The lesson: what limits us is often not the problem itself but our assumptions about it. In UX this means asking, "does the user really want this feature, or is the underlying need something else?" This is precisely the post-"Define" ideation spirit of Design Thinking — reframing the problem.18

User research is the compass of the design process: it tells us for whom, in what context, and which problem we are solving. The aim is to replace the "imaginary user" in the designer's head with evidence about real people. Research separates two basic questions: what is happening? (behavior) and why is it happening? (motivation).

"User research" and "UX research" are often used synonymously; the nuance is that UX research ties findings directly to experience-design decisions and takes on different roles across the process. In the discovery phase it learns what to do, in the design phase how to do it, and in the post-launch phase how well we did it.

NN/g's classic framework separates methods along two main axes: attitudinal ↔ behavioral (what they say vs. what they do) and qualitative ↔ quantitative (why vs. how much).23 The right method is chosen by the question you want to answer; there is no single "best method." According to NN/g, the great majority of professionals use both qualitative and quantitative methods together.24

Qualitative research reveals the motivations, frustrations and unmet needs behind behavior — things numbers alone cannot show.25 Interviews, focus groups, field studies and qualitative usability testing fall into this class. Jakob Nielsen's often-quoted view: qualitative studies remain largely useful even under a few methodological weaknesses, whereas quantitative studies can mislead unless they are flawless in every detail.26

Quantitative research is ideal for sizing a problem's scale and priority, benchmarking the experience, and comparing design alternatives experimentally.27 These metrics are also used to calculate the return on investment (ROI) of UX work — the way to prove design's value to management. Qualitative research feeds the design process; quantitative research measures and validates it.28

Where user research asks "how do they use the product?", customer research asks "why do they buy, why do they prefer, why do they churn?" The two overlap but are not identical: a person can be a customer of a product without being a user (or vice versa). Market segmentation, price sensitivity and competitive perception are typical topics of this research; its findings feed product strategy and positioning.

The interview is the most common tool of qualitative research because it is flexible: when something a user says opens a new door, you can follow it. The key skill is asking open-ended questions — instead of "Did you like it?" (yes/no), "When did you last experience this? Tell me about it." Avoiding leading questions and defending your own solution is a precondition for honest answers. Interviews give you what users say; this must be balanced with behavioral observation (what they do).

Most research tests a hypothesis; grounded theory does the opposite: it first gathers data, then builds an explanation upward from that data. The process is staged: raw data is coded, codes are grouped into categories, and a theory emerges from the relationships among categories. In UX it is valuable when exploring a new, complex area you don't want to bring bias to; it ensures findings are "grounded" in the data rather than in the researcher's expectations.29

A persona reduces the abstract "user" to a concrete face: a character with a name, goals, frustrations and context. A good persona is not made up; it is derived from real research findings. Its function is to keep decisions user-centered by shifting design debates from "if it were me, I'd want this" to "does Ayşe need this?" It is often used to keep empathy alive in Design Thinking's "Define" stage.30

A scenario turns "who + in what context + with what goal + through what steps + with what outcome" into a narrative. Where a persona says who the user is, a scenario shows when and why that user uses the product. This narrative moves design decisions off abstract feature lists and ties them to the real context of use; it lays direct groundwork for storyboards and user flows (Chapters 7 and 9).

The golden rule of usability testing: you test the design, not the user. If a user gets stuck somewhere, the flaw is in the interface, not in them. The most common technique is think-aloud: the user says out loud what goes through their mind while doing the task. Tests can be formative (during the process, to find problems) or summative (at the end, to measure performance).

How many users? Jakob Nielsen's classic finding: in a qualitative usability test, 5 users uncover about 85% of the problems; after five, the same problems recur and diminishing returns set in.31 But this rule holds only for qualitative tests and a relatively homogeneous audience; quantitative tests chasing statistics need 20+ users.32

User testing covers any validation that answers "does the user really understand, want and manage to use this?" — usability testing is its most common form, but preference testing and concept testing also fall under this umbrella. This is why the term is sometimes criticized: some researchers prefer "usability testing," arguing "we don't test the user, we test the design." The mindset is the same: evidence outranks the designer's opinion.

Users are randomly routed to version A or B and a metric such as conversion, clicks or completion is compared. Its strength is that it rests on real behavior: it produces evidence, not opinion. Its limit is its quantitative nature — it answers "which is better?" but not "why is it better?" A reliable result requires a sufficient sample and statistical significance; an A/B test stopped early misleads.

Guerrilla testing fills the gap between "the perfect test" and "no test at all": it offers speed and accessibility to resource-constrained teams. Showing a prototype to a few people in a coffee shop can catch major problems cheaply within hours. Its weakness is that participants don't fully represent the target audience and the setting is uncontrolled. So it is ideal for early-stage, rough validation; for critical decisions it should be backed by more controlled tests.

Classic UX wants "efficiency" and "ease"; games, by contrast, often want deliberate friction — without difficulty there is no thrill of achievement. GUR targets the player's flow state: a task should be neither too easy (boring) nor too hard (overwhelming), keeping skill and difficulty in balance. Researchers use telemetry (in-game behavior data), biometrics and observation to measure the difficulty curve and motivation.

Gamification can boost motivation; but applied wrongly it stays superficial, even manipulative. This research's job is to distinguish which elements support the user's intrinsic motivation (meaning, mastery, autonomy) and which are merely an extrinsic reward trap. Does a badge give the user a real sense of progress, or just a distraction? The answer is found only through behavior data and user feedback. (Gamification itself is covered in Chapter 12.)

Cognitive psychology treats the human as an "information-processing system": the senses gather data, attention filters it, memory stores it, and the mind produces decisions.33 This model is gold for design, because every interface loads some point of this chain. Good design respects the chain's limits (limited attention, limited memory); bad design strains them.

Every user carries in their head a mental model of how a product works — an expectation distilled from past experience. Design's job is to bring the product's actual behavior (the system model) close to that expectation. If the gap between the two is large, the user is surprised, makes mistakes, and leaves. This is really what we mean by "intuitive design": design that fits the mental model the user already has.

George Miller's classic finding says working memory can hold about 7±2 items at once; later research lowers that number further.34 John Sweller's theory splits load into three: intrinsic load (the task's natural difficulty), extraneous load (the needless difficulty bad design adds) and germane load (the useful effort that goes toward learning).35 The designer's real job is to reduce extraneous load: clearing away needless options, cluttered layouts and vague labels.

The three levels in Norman's Emotional Design explain how we form an emotional bond with a product.36 The visceral level is about appearance — first impression, the gut "pleasant/repellent" reaction. The behavioral level is about the feel of use — how well the product does its job. The reflective level is about meaning — what the product says about us and to others, its sentimental and identity value.36 Norman's famous line sums up the spirit of this chapter: attractive things work better — because positive emotion makes the user more forgiving of small flaws.

Biases are at work in two places. On the user side: tendencies like anchoring (judging by the first price seen), loss aversion and social proof shape decisions — these can be woven into design ethically (without sliding into dark patterns; see Chapter 11). On the researcher side: confirmation bias (seeing what confirms your expectation), leading questions and a cherry-picked sample corrupt the research. A good designer watches their own bias as closely as the user's.37

A product can be usable yet still nobody may want it. Desirability is where design crosses from "necessary" to "attractive," and it is one of the three legs of product success (desirability–feasibility–viability; see Chapter 1). It is measurable too: desirability tests such as Microsoft's reaction cards make the emotional response visible by asking users to label a design with adjectives (trustworthy, complex, elegant…).38

Google splits these moments into four intent types: I-want-to-know, I-want-to-go, I-want-to-do and I-want-to-buy.39 In these moments the user has little patience and high expectations: they want the right information, at the right moment, fast. The lesson for design is clear: grasp the context and intent and get the user to their goal by the shortest path. Part of the importance of mobile-first design (Chapter 10) comes from here.

Design principles are abstract rules that tell us "how to decide": consistency, visual hierarchy, feedback, error prevention, accessibility. Good principles are universal — they work on a website, in an app, and on a device. Teams often also write principles specific to their own product ("speed above all"); these provide a shared basis for decisions in debates.

A principle is abstract ("touch targets should be easy to reach"), a guideline is concrete ("a touch target should be at least 44×44 pt"). Guidelines keep large teams consistent and stop every designer from reinventing the same wheel. Apple's Human Interface Guidelines and Google's Material Design offer rules at both the philosophy and the pixel level. The difference: you understand principles, you apply guidelines.

Paul Fitts's 1954 finding is one of design's most practical laws.40 Its consequences are everywhere: important buttons should be large; frequently used actions should be placed nearby (e.g., where the cursor already is); screen edges and corners are "infinite" in size because the cursor slams into them and stops (which is why menu bars sit on the edges). On mobile, thumb reach zones are an extension of the same law.

The law, based on Hick and Hyman's 1950s work, is remembered even by its formula: RT = a + b·log₂(N+1).41 The practical lesson: shorten menus, group options, hide secondary actions (progressive disclosure). Google's home page is the classic example — almost a single search box, zero decision paralysis. But beware: reducing options too far also limits function; the goal is to find the right balance.

This principle, derived from Paul Heckel's 1984 book The Elements of Friendly Software Design and named by Nigel Derrett in 2004, reminds us that simplicity alone is not enough.42 Photoshop is complex, but creatives are willing to learn it because the value it offers is unmatched. The bassoon is hard to play, but musicians love it because its expressive power is high.42 The lesson: strive for simplicity, but what really matters is that value repays the effort. A low-value product, however simple, gets deleted.

Proximity gives the user the message "these belong together" without using any line or box. Moving a form label closer to its field, grouping related buttons, separating sections with space — all are applications of this law. Whitespace, therefore, is not "empty"; it carries meaning. Well-used proximity makes an interface readable without any explanation.43

Developed by German psychologists in the 1920s, the Gestalt principles are the grammar of visual order.43 The main ones: proximity (near things are grouped), similarity (similar elements are perceived together), closure (the mind completes an incomplete shape), continuity (the eye follows uninterrupted lines) and figure-ground (the distinction between element and background). Knowing these principles lets you organize an interface the way the user already perceives it.

Rooted in 1960s U.S. Navy engineering, KISS says "keep it as simple as possible." In UX this means removing the unnecessary from every screen, every flow, every sentence. Simplicity is not laziness; on the contrary, making something both powerful and simple is far harder than making it complex. KISS comes from the same family as Hick and the simplicity principle: it lightens the user's cognitive load.

Simplicity is not deleting elements; it is removing the unnecessary and letting the necessary breathe. Antoine de Saint-Exupéry's line is often quoted: perfection is reached not when there is nothing left to add, but when there is nothing left to take away. In practice, simplicity is built with clear hierarchy, a single primary action, familiar patterns and generous space. But don't forget Heckel: simplicity does not replace value, it serves it.

For Rams, good design is innovative, makes a product useful, is aesthetic, makes a product understandable, is unobtrusive, is honest, is long-lasting, is thorough down to the last detail, is environmentally friendly, and is as little design as possible.44 This last principle is the summary of the chapter: good design does not try to show itself off, but gets the user to their goal invisibly. Good design goes unnoticed; only bad design is noticed.

The emblem of bad design is the "Norman door": a door where it's unclear whether to push or pull, one that needs an instruction printed on it. If an interface needs explaining, the design has not done its job.45 Typical signs of bad design: vague labels, hidden primary actions, inconsistent patterns, missing feedback, and error messages that blame the user. Studying bad design is one of the fastest ways to learn good design — because every failure points to a principle.

The color wheel arranges colors in three layers: primary colors (red, yellow, blue), the secondary colors born from mixing them (orange, green, purple), and tertiary colors from mixing neighbors. A color is defined by three properties: hue (the color itself), saturation (its vividness) and value (its lightness/darkness).46 In UX color is not mere decoration; it builds hierarchy, signals state (error = red) and carries brand identity.

Harmony is no accident; it arises from the geometry of the wheel. Complementary (opposite) colors give high contrast and energy — ideal for emphasis. Analogous (neighboring) colors create a calm, consistent feel. Triadic (three evenly spaced colors) offers a vivid yet balanced palette. A common practical rule in UX is 60-30-10: dominant color 60%, secondary 30%, accent 10%.47

RGB works with light: as red, green and blue light add up they approach white — which is why screens use RGB. CMYK works with ink: colors mix by absorbing light, and as they all add up they approach black — this is the mode of print. The digital designer mostly works with RGB's notations: HEX (#8B5CF6) and HSL (hue-saturation-lightness), where HSL makes it easy to adjust colors intuitively.

The golden rule of design: don't lean information on color alone. "Green for success, red for error" may be indistinguishable to a color-blind user; adding an icon, label or pattern to the color solves this. Contrast is critical too: WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.48 Color-blindness simulators (deuteranopia, protanopia, tritanopia) are the fastest way to test whether a design is readable for everyone.49

Good typography is invisible: it carries the reader to the content without tiring them. Core concepts include hierarchy (order of importance through size and weight), line length (ideal ~45-75 characters), leading (line spacing) and scale (consistent size steps). Letter anatomy — baseline, x-height, ascenders and descenders — explains why fonts "feel" different. Readability always comes before showmanship.50

Web fonts (Google Fonts, Adobe Fonts, or self-hosted @font-face) make consistent typography possible on every device. But there is a cost: each font file is downloaded, which affects performance. Good practice is to load only the weights you need, to avoid hiding text while it loads via font-display: swap, and to use the modern woff2 format.51 The main font families: serif (with serifs, classic), sans-serif (without serifs, modern) and monospace (equal width, technical).

Icons reduce cognitive load: a trash-can symbol conveys "delete" at a glance. But iconography is tricky — an ambiguous icon confuses more than it helps. A good icon set is consistent (same stroke weight, corner radius, grid), recognizable (established metaphors) and, when needed, backed by a label. An icon on its own is risky unless it is universal; it should be tested.

The grid comes from the Swiss typography tradition (Müller-Brockmann) and turns chaos into order.52 The common standard on the web is the 12-column grid; the number 12 is flexible because it divides by 2, 3, 4 and 6. A grid has three components: columns (where content sits), gutters (the space between columns) and margins (the edge space). A well-used grid gives a page an invisible order and professionalism.

Denoted by the Greek letter φ (phi), the golden ratio appears when the ratio of a whole's larger part to its smaller part equals the ratio of the whole to the larger part. Designers use it as a starting point in layout ratios, typographic scale and spacing systems. A caveat: the golden ratio is not a magic formula; good design does not have to obey it, but it is a handy reference when seeking a balanced division.

This rule, coming from photography, says that placing the point of interest at the intersection points rather than at the center creates a more natural balance. In UX it works as a quick compositional guide for hero visuals, card compositions and the distribution of space. It can be thought of as a simplified, practical relative of the golden ratio: light on math, strong on intuition.

Information architecture is like a building's floor plan: done right, it goes unnoticed; done wrong, everyone gets lost. It has four main components: organization (how content is grouped), labeling (how items are named), navigation (how one moves around) and search systems. Methods like card sorting ensure categories are built around the user's mind rather than the designer's.53

Good navigation answers three questions: where the user is, where they can go, and how they get back. Common patterns: global navigation (a fixed main menu on every page), breadcrumb (a location trail: Home › Products › Detail), local navigation (within a section) and, on mobile, a tab bar or hamburger menu. The rule: the user should never feel lost; the current location must always be clear.54

If content exists but can't be found, for the user it doesn't exist. Findability is achieved two ways: browsing (advancing step by step through menus) and search (a direct query). Good design supports both, because users use different strategies. Key factors: clear labels, logical categories, a strong search, and good information scent — that is, each link giving a strong cue about what lies behind it.54

Each approach has its place. Page numbers give a sense of control and location; the user can say "I was on page 3" — ideal for search results and e-commerce. Infinite scroll suits exploration-driven, fluid experiences (social media) but makes the footer hard to reach and destroys the sense of location. "Load more" offers a balance between the two: it preserves the flow but leaves control with the user.55

A user flow visualizes the question "how does the user get from point A to B?": entry point, screens, decisions (yes/no branches) and goal. Drawing flows in advance catches needless steps, dead ends and missed states (error, empty screen) before design begins. It turns the scenarios from Chapter 3 (who, why) into concrete screen sequences (how).

Patterns offer a shared language: when a user sees a card they know content is grouped, when they see a modal they know their attention is called to a task, when they see an accordion they know content can be folded away. This familiarity reduces the learning load (Jakob's Law: users spend most of their time on other sites and expect yours to work like them).56 But a pattern should be chosen to fit the context, not blindly.

A good data visualization chooses the chart to fit the data type: a bar for comparison, a line for change over time, a pie for parts of a whole (carefully!), a scatter plot for relationship. Edward Tufte's principle is the guide: maximize the "data-ink ratio" — devote every pixel to data, drop the decoration (chartjunk).57 The goal is a chart that is honest and clear, not impressive.

Where data visualization mostly answers "how much?" (quantitative), information visualization focuses on "how is it connected, how is it structured?" Network graphs (who is linked to whom), treemaps (hierarchical proportions), flow diagrams and timelines fall into this field. It is usually interactive and designed for exploration: the user zooms in, filters, looks for patterns. The aim is not to offer a single answer but to let the user ask their own questions.58

It rose in the early 2010s as a reaction to skeuomorphism (Microsoft's Metro language and iOS 7 were turning points).59 Its philosophy: strip content of decoration, foreground clarity. Its advantages are clear — it loads fast, adapts easily to different screens, and looks modern and clean. Its risk: taken too far, clickable elements can look unclickable (loss of affordance).60 This is why "flat 2.0" softened the problem with subtle shadows and layers.

It was the dominant language of early digital interfaces (iOS 6 and before).61 Its logic was pedagogical: a button that resembles a real object hints to the user how to use it — providing strong affordance. In a period when new users were learning the digital world, this bridge was valuable. Its downsides were heavy visuals, inconsistency and "excessive" aesthetics. As users grew accustomed to digital interfaces, the need for this bridge shrank and flat design took the lead.

Popularized around 2020, this style tries to add a sense of depth while keeping minimalism. Elements look not cut-and-pasted but shaped from the same material — through a subtle play of light and shadow. Elegant as it is aesthetically, it carries a serious accessibility problem: due to low contrast, elements can be indistinguishable to users with impaired vision. So it remained a selective touch rather than a widespread primary language.

Introduced in 2014, Material offered a balanced third way between flat and skeuomorphism: it stayed flat and clean but added a realistic depth and hierarchy through elevation and shadow. A card sits "above," a button pressed goes "down." Material is not just a style but a comprehensive design system (Chapter 11): it includes rules for color, typography, motion, components and accessibility. This is why it became the backbone of consistency, especially in the Android ecosystem.62

Dark mode is not a fashion but an accessibility and comfort option; it gives the user control. But good dark mode is not simply inverting light mode. There are subtle rules: using dark gray (like #070610) instead of pure black (#000) reduces eye flicker; a slightly off-white is preferred over pure white text; since shadows don't work, depth is built with surfaces that lighten as elevation rises; and saturated colors are toned down a little because they glare on a dark ground. (This handbook's own theme follows exactly these principles.)63

A wireframe is like a building's floor plan: with gray boxes, placeholder text and simple lines it clarifies layout, hierarchy and content priority. It is deliberately ugly — because color and visual appeal would, at this stage, overshadow the real discussion (structure). Looking at a wireframe, stakeholders debate "should this information be here?" rather than "should the button be blue?"; that is exactly what is wanted.64

A prototype is a way of saying "let's try this before we build it." Fidelity describes how closely the prototype resembles the final product: a low-fidelity prototype is rough and fast (to test the idea), a high-fidelity one is realistic (to test interaction and visuals). The right fidelity depends on the question asked — making hi-fi early is both a waste of time and a risk of committing too soon.64

A static screen answers "how does it look?"; an interactive prototype also answers "how does it feel?" With tools like Figma and ProtoPie, screens are linked and transitions and micro-interactions are added. This makes usability testing possible without writing code: the user tries real tasks in a real flow. It also gives developers a living reference — the clearest way to say "it should work like this."

The power of lo-fi is in its limits: because it is rough it is cheap, because it is cheap it is disposable, and because it is disposable it invites bold experiments. It also has a psychological advantage — a rough draft invites feedback ("this is still a draft, tell me"), while a polished screen triggers defensiveness ("this is finished, it'd be rude to criticize"). Early on, lo-fi is the friend of honest feedback.

Paper prototyping is the purest form of low fidelity: it needs no software, no learning curve, and starts within minutes.65 A screen is drawn, the user "taps," and the designer places the next sheet in front of them. It sounds primitive but is extraordinarily effective: it surfaces basic flow errors, confusing labels and missing steps without a single pixel being drawn. It encourages teamwork and rapid idea testing.66

Rapid prototyping turns iteration (Chapter 2) into a principle of speed: make an idea testable within hours, learn from the user, and immediately move to the next version. The philosophy is summed up in IDEO's famous line: if you want to reach success faster, increase your failure rate.67 Each fast cycle reduces uncertainty and weeds out expensive mistakes early. The key balance: realistic enough to draw meaningful feedback, but rough enough to be thrown away quickly.

Borrowed from cinema, the storyboard lets you see the design not as a product but as a story: how the user enters the scene, in what context, what they feel, what obstacle they meet, and what they gain in the end. It ties teams to the user's real world (on the metro, in a hurry, distracted); it reduces abstract feature debates to concrete human moments. It is the visualized form of the scenario from Chapter 3.68

Storytelling has two faces in UX. The first is inside the product: onboarding, empty-state screens and microcopy can build a narrative that takes the user on a journey. The second is around the product: when presenting a design, telling "our user Ayşe was running into this problem, and now…" instead of a dry feature list binds stakeholders emotionally. The human brain forgets data but remembers stories; a good designer uses this fact.68

Tools are grouped by the phases of the process: research and synthesis (surveys, analytics, affinity mapping), design and prototyping (interface tools like Figma and Sketch), testing (usability and A/B platforms) and delivery/collaboration (design systems, developer handoff). A critical reminder: a tool does not replace method. The best tool works in the hands of a designer who asks the right question; a bad process yields a bad result even with the most advanced tool.

Named by Ethan Marcotte in 2010, responsive design is built on three techniques: flexible grids (columns that scale by percentage), flexible images (media that fits its container) and media queries (changing rules by width with CSS).69 The result: content flows into the available space instead of targeting a specific "device." A multi-column layout collapses into a single column as the screen narrows. Today it is the de facto standard of the web.

Where responsive fits every width with one flexible layout, adaptive prepares several separate fixed layouts (e.g., for 320px, 768px, 1024px) and shows the one best suited to the device. It allows dedicated optimization for each screen but requires more maintenance and can leave gaps at in-between sizes. The difference is summed up as: responsive flows, adaptive jumps. Today most teams prefer responsive; adaptive is chosen when strong optimization for specific devices is needed.70

Championed by Luke Wroblewski,71 this approach turns a constraint into a virtue: starting with the narrowest screen forces the team to prioritize what really matters — because not everything fits on a small screen. Then, as space widens (progressive enhancement), layers are added. The opposite (shrinking from desktop) usually produces a cramped, second-class experience on mobile. In a world where mobile traffic long ago passed desktop, this priority is a necessity, not a choice.

Mobile is not a smaller desktop; it is a different medium. Touch targets must be large enough for a finger (Apple recommends ~44pt),72 important actions should sit in the thumb reach zone, input should be minimized (typing is a chore on mobile), and the design should assume attention may be scattered and connectivity variable. Fitts's Law (Chapter 5) is directly at work here: small, hard-to-reach targets are far more costly on mobile.

A context-aware design answers the question "where is the user right now, what are they doing, what do they need?" A map app suggests nearby places based on your location; a music app offers different playlists in the morning and evening; a car interface simplifies while driving. The power is in relevance: the right information, at the right moment. But using context requires privacy and consent — the user must know how their data is used and be able to control it.73

Gestures make the interface fluid and direct: swipe to delete, pinch to zoom, pull down to refresh. They are powerful but have a weakness — they are invisible. A button shows itself; a gesture waits to be discovered. Hence the rule: rely on common, learned gestures (tap, swipe); back up original gestures with hints and alternative visible controls. Discoverability is the greatest test of gesture design.73

A design system is more than a style guide: it is design tokens (raw values like color, spacing, typography), the components built from them (button, card, form), and the patterns that are the rules for how components come together. It is built from small to large in the logic of atomic design.74 Its benefit is twofold: designers and developers share a common language, and every new screen is built from approved parts rather than from scratch — boosting both speed and consistency. Material Design (Chapter 8) and Apple HIG are major examples.

Brand guidelines are the constitution of consistency. They set out how the logo may (and may never) be used, which colors are the brand colors, which typefaces and which tone of voice to use. Their importance for UX: the interface is where the brand is most intensely experienced. When the design system (technical consistency) and the brand guidelines (identity consistency) work together, the product is both solid and recognizable.

Classic branding asks "how do we look?"; UX branding asks "how does interacting with us feel?" The character of a loading animation, the courtesy of an error message, the small celebration of a confirmation screen — all carry the brand. The brand is a consistent personality and feel far more than color and logo. Strong UX branding creates trust and belonging in the user; it is the invisible layer that sets the product apart from competitors.75

The W3C's WCAG standard gathers accessibility into four principles (POUR): Perceivable (content must be receivable through the senses — alt text, captions), Operable (keyboard navigation, enough time), Understandable (readable language, predictable behavior) and Robust (compatibility with assistive technologies).76 Concrete requirements include sufficient color contrast (Chapter 6), keyboard access, screen-reader compatibility and information that does not depend on color. Accessibility is not only an ethical and, in many places, legal obligation; it means better design for everyone — high contrast and clear language benefit users without disabilities too.

The internet may seem invisible, but it has a physical cost: every downloaded byte spends energy on servers and devices. Sustainable design reduces this impact: lowering page weight (optimized images, few fonts), cutting unnecessary data transfer, efficient code, and offering energy-friendly options like dark mode. The good news is that these goals mostly overlap with UX: a lightweight page is both greener and faster. Here ethics and performance face the same direction.77

The term was coined in 2010 by Harry Brignull.78 Its examples are familiar: pre-checked consent boxes, hidden cancel buttons, the "roach motel" (subscriptions easy to enter, hard to leave), surprise fees appearing in the cart, and guilt-loading language ("No, I don't want to save money"). Dark patterns can inflate metrics in the short term but destroy trust — and in the EU and various countries they are now subject to legal penalties. This concept is the ethical opposite of every principle in this handbook: design against the user, not for their benefit.

Design is not done in a vacuum; it proceeds inside an organization, alongside people with different interests. A good designer recognizes stakeholders early, understands their expectations and constraints, and involves them in the process. Stakeholder management is not "extra work" but a precondition for design to come to life: even the best solution cannot be implemented without stakeholder support. The critical balance: defending the user's voice against stakeholders' wishes — but doing so by understanding the business context, through collaboration.79

UX is often seen as "beauty" and pushed to the back of the budget; the language of ROI changes that. Good design produces measurable gains: higher conversion, fewer support requests, lower abandonment, faster task completion and increased loyalty. The classic example is how the cost of an error multiplies by stage — fixing a problem found in design is cheap, fixing it in production is very expensive. The quantitative metrics of UX research (Chapter 3) are the designer's means of proving this value to management. Translating design into business language earns it the place it deserves.79

AI has two faces for the designer. On one hand it is a tool: it speeds up research synthesis, variant generation and personalization. On the other it is a design material: we now design the interface of systems that behave probabilistically, sometimes erroneously and unpredictably. This calls for new principles: clearly communicate what the system can do, honestly show uncertainty, behave gracefully on error, and always leave control with the user. A deterministic button always gives the same result; an AI feature may not — design must manage this uncertainty.80

Traditional software runs on rules ("if X then do Y"); ML, by contrast, learns from examples: it is trained on thousands of data points, catches the pattern, and predicts new cases. Its importance in UX is that ML features vary by person and time — the same screen can behave differently for each user (like recommendation feeds). This brings new responsibilities to design: explaining why the learning system recommends something (transparency), giving a way to correct wrong learning (feedback), and preventing bias in the data (Chapter 4) from leaking into the outputs.80

With generative AI, the prompt became a new kind of interface: natural language. A good prompt usually carries four elements — role/instruction (what to do), context (under what conditions), input (with what data) and format (what the output should look like).81 In UX there are two layers: the prompts the user writes, and the system prompts behind the interface that the designer writes on the user's behalf. The challenge is managing the ambiguity of natural language: offering the user good examples, clarifying expectations, and reducing the "what should I type?" paralysis of a blank text box are the design problems of this new field.

Traditional HCI (Chapter 1) assumes predictable systems; HAX, by contrast, designs with uncertainty. Microsoft's "Guidelines for Human-AI Interaction" work steers this field: make clear up front what the system can do, explain why it does something, behave gracefully on error, give the user control and a way to correct, learn over time but don't shake trust with surprises.82 The core principle: AI should not look like magic; it should honestly communicate what it can and cannot do so the user trusts it in the right amount — neither too much nor too little.

AR takes the interface off the screen and places it in the physical world: putting a piece of furniture in your room before buying it, seeing a translation over a sign, reading a machine's repair steps on top of the parts. It brings entirely new challenges to design: three-dimensional space, variable light, the user's movement and physical safety. Screen-based principles (grid, fixed layout) don't work here; the designer must think about how the digital will "align" with the real world and how it will be context-aware (Chapter 10).83

Gamification carries the addictive motivation mechanics of games into fields like education, health and productivity: Duolingo's streaks, a fitness app's badges, a form's progress bar. Done right it is powerful — it makes progress visible, rewards effort, builds habits. But it also has a danger: superficial "scoring" can overshadow intrinsic motivation (the gamification research in Chapter 3 tests exactly this) or slide into dark patterns (Chapter 11) that exploit addiction. Good gamification builds meaning from the user's real progress, not from external rewards.84