HIF / Documentation / Design theory

Design Foundations

Status: normative method

Version: 0.1

This document defines how HIF turns perception, composition and aesthetic judgement into defensible design decisions. It concerns the expressive form of an interface without treating taste, fashion or a design-system precedent as universal law.

1. Design is a constrained decision system

Interface design coordinates four coupled layers:

semantic
what exists, what it means and who has authority

structural
how content, actions, states and journeys are organised

perceptual
what can be detected, distinguished, grouped and followed

expressive
the visual, verbal, auditory and tactile character of the product

The order is not a waterfall. Work may move between the layers, but an expressive choice MUST NOT silently change meaning, authority or operability. Beauty cannot compensate for an incorrect domain model, inaccessible control, deceptive hierarchy or missing state.

A design decision is complete only when it identifies:

the intended people, task and context;
the communication or interaction problem;
the property being manipulated;
the expected perceptual or behavioural mechanism;
applicable constraints and platform conventions;
at least one credible alternative;
acceptance evidence and residual uncertainty.

2. What design quality means

HIF evaluates design quality as a vector rather than a single score:

Dimension	Question
semantic fidelity	Does the representation preserve the real object, action, state and consequence?
perceptibility	Can relevant differences be detected under expected conditions?
comprehensibility	Can people form an adequate interpretation without hidden knowledge?
operability	Can intended actions be completed through supported inputs and assistive technology?
coherence	Do equivalent meanings receive equivalent treatment across the system?
fitness	Does the form suit the task, environment, frequency, expertise and risk?
expression	Does the experience communicate the intended character without obscuring function?
accessibility	Does meaningful variation in ability, equipment and preference remain supported?
trustworthiness	Are emphasis, urgency, evidence, provenance and choice represented honestly?
sustainability	Can the design be implemented, governed, localised, maintained and evolved?

These dimensions can conflict. A dense expert instrument may be more fit than a spacious presentation; a distinctive campaign may tolerate less visual regularity than a control panel. The Product Profile states the priorities and non-negotiable constraints.

3. Perception is organised, selective and contextual

3.1. Organisation is an inference

People do not encounter isolated pixels. Visual systems organise elements into candidate objects and relations using evidence such as:

proximity;
similarity;
connectedness;
common region;
continuity;
enclosure;
synchronised change;
figure–ground contrast;
learned convention.

These are grouping tendencies, not immutable Gestalt laws. Their strength depends on task, scale, contrast, competing cues, culture, reading direction and prior learning. Two controls placed near each other may look related even when their programmatic relationship is absent; a border may overpower spacing; motion may regroup an otherwise stable layout.

Design requirements:

elements that act as one unit SHOULD share perceptual and semantic grouping;
unrelated elements MUST NOT be made to appear causally or operationally related;
visual grouping, document structure and accessibility relationships SHOULD agree;
a group needed for a task MUST remain intelligible at zoom, reflow, forced colours and supported localisation;
grouping MUST be tested with realistic content rather than placeholder rectangles alone.

3.2. Figure and ground

People must be able to distinguish content, controls, containers, overlays and the current locus of action. Figure–ground separation can be carried by position, occlusion, border, surface, contrast, shadow, blur or motion, but no single treatment is universally required.

An overlay MUST preserve:

a clear active layer;
an understandable relationship to its origin;
focus and reading-order integrity;
a way to dismiss or complete it;
boundaries that survive transparency reduction and forced colours.

Decorative depth MUST NOT imply an interaction hierarchy that does not exist.

3.3. Attention and salience

Salience is relational: an element is prominent relative to its surroundings. Size, contrast, colour, orientation, isolation, position, motion and onset can guide attention. Feature Integration Theory and later visual-search research show useful differences between detecting a distinct feature and finding a conjunction, but they do not provide a universal recipe for interfaces.

HIF requires:

visual prominence to correspond to task priority, consequence or current state;
competing calls for attention to be evaluated together;
a transient cue to leave a persistent, recoverable state when the information remains relevant;
critical information not to depend on a single pre-attentive feature;
motion, saturation and high contrast not to be spent on decoration when they are needed for status or warning.

Measure whether the intended signal is found, interpreted and acted on in the actual scene. Pixel contrast alone does not prove notice.

3.4. First impressions and considered judgement

Studies show that people can form rapid judgements of visual appeal. Other work distinguishes dimensions such as classical order and expressive originality, and relates processing fluency to positive affect. These findings justify treating immediate appearance as a product outcome; they do not establish:

that a judgement made in milliseconds predicts long-term utility or trust;
that minimal, symmetric or familiar designs are always superior;
that an attractive interface is usable;
that a preference sample represents the intended population;
that fluency is desirable when friction, scrutiny or warning is necessary.

Evaluate immediate impression, task performance, comprehension, trust and continued use separately.

4. Hierarchy is a task-directed reading model

Visual hierarchy proposes an order for discovering and interpreting information. It is constructed through:

content order and document structure;
position and spatial path;
scale and proportion;
typographic role;
contrast and colour;
enclosure and whitespace;
imagery and motion;
persistence and progressive disclosure.

Every important view SHOULD have an explicit hierarchy statement:

first: identity and current context
then: the information needed for the current decision
then: available actions and their consequences
then: supporting detail, history and alternatives

This is a hypothesis, not a required sequence. A monitoring display may place state before identity; an editor may make the work object dominant; an emergency flow may place safe action first.

Acceptance criteria:

heading and landmark structure communicates a coherent order without CSS;
the visually dominant element is important to the intended task;
primary and destructive actions are not confused;
status, error and scope are available at the point of decision;
hierarchy survives supported viewport, zoom, language, theme and content extremes;
a representative person can identify context, next relevant action and consequential state without coaching.

5. Composition

5.1. Alignment

Alignment creates visible relations and reduces arbitrary positions. A product SHOULD use a small, explicit set of alignment logics. Optical correction MAY depart from mathematical alignment when the perceptual result is documented and verified.

Misalignment is acceptable when it communicates a meaningful exception, overlap, sequence or emphasis. Accidental one-off offsets are defects because they weaken the system's grammar.

5.2. Proportion and scale

Scale communicates role and relation. A scale MAY be modular, fluid, content-derived or platform-provided. HIF does not mandate the golden ratio, Fibonacci sequences, a four-pixel grid, an eight-pixel grid or any other preferred number.

A scale is acceptable when it:

covers the required roles without excessive near-duplicates;
supports relevant writing systems and content lengths;
remains usable at zoom and user text settings;
produces distinguishable hierarchy;
can be expressed through governed tokens;
has defined rounding and exception rules.

5.3. Rhythm

Rhythm is repetition and variation across space, type, imagery and time. Consistent rhythm helps predict structure; deliberate variation marks a change in meaning. Mechanical repetition can also conceal hierarchy or create false equivalence.

Review rhythm across complete journeys, not a single ideal screen:

repeated spacing should indicate repeated relationships;
repeated component forms should preserve equivalent behaviour;
section boundaries should be detectable without excessive decoration;
a break in rhythm should have a semantic purpose.

5.4. Balance and tension

Balance is the distribution of visual weight, not compulsory symmetry. Weight is affected by area, contrast, saturation, detail, isolation, position and motion. Symmetric, asymmetric and intentionally unstable compositions are all permissible when appropriate to purpose.

Do not infer safety, fairness or importance from geometric balance alone. Verify whether the composition supports the intended interpretation.

5.5. Whitespace

Whitespace is active structure. It can separate, group, frame, establish pace and protect legibility. More whitespace is not inherently more usable: excessive separation can hide relationships, increase scrolling, damage comparison and reduce expert throughput.

Whitespace decisions MUST consider:

relationship strength;
reading and comparison task;
display size and distance;
input method;
density profile;
localisation expansion;
data volume and urgency.

6. Unity, variety and consistency

Consistency has several distinct forms:

semantic consistency: the same meaning and consequence;
behavioural consistency: the same command model and state transition;
structural consistency: comparable information in comparable places;
perceptual consistency: a recognisable visual or multimodal treatment;
platform consistency: conformity with learned environment conventions.

Perceptual sameness MUST NOT be used for semantically different actions. Conversely, rigid visual sameness MUST NOT prevent a consequential difference from being perceivable.

Variety is justified when it:

distinguishes a real category or state;
supports orientation or progressive learning;
creates appropriate brand expression;
prevents monotony in editorial or exploratory material;
is itself the content of the experience.

Every exception to a shared pattern states what meaning the variation carries.

7. Complexity, simplicity and density

Interface complexity arises from the domain, task, policy, content, state space and representation. Visual reduction can remove accidental complexity, but it can also hide necessary choices, transfer work to memory or distribute one task over more steps.

HIF distinguishes:

essential complexity: relationships and decisions inherent to the task;
incidental complexity: avoidable work created by representation or implementation;
visible complexity: what appears at a given moment;
interaction complexity: states, paths and recovery across time.

Design SHOULD remove incidental complexity while making essential complexity inspectable and manageable. Simplicity is an outcome for a specified task, not an aesthetic of emptiness.

Density profiles MUST preserve semantics and operability. A compact profile can reduce spacing and expose more comparable data; it MUST NOT remove accessible names, focus visibility, error recovery or necessary state.

8. Affordance, signifier, mapping and feedback

HIF uses these terms precisely:

an affordance is an action possibility in a person–environment relation;
a signifier is perceivable information about where or how to act;
a mapping relates control to effect;
a constraint limits possible action;
feedback represents acceptance, progress, outcome and resulting state.

Design review MUST ask all five questions:

Is the intended action actually possible?
Can the relevant person discover it?
Can they predict its scope and consequence?
Is an invalid or dangerous action constrained proportionately?
Can they determine what happened and recover?

Visual resemblance to a physical object is neither necessary nor sufficient. Labels, spatial arrangement, convention and instruction may be stronger signifiers than decoration.

9. Culture, language and convention

Composition is interpreted through learned practices: writing direction, number and date formats, colour associations, icon conventions, reading patterns, formality, imagery and expectations of platform behaviour.

A design MUST NOT claim cultural universality from one market. For every supported locale:

use authentic content and complete translations in review;
verify bidirectional and mixed-direction text;
inspect expansion, truncation, line breaks and vertical metrics;
test symbols, gestures, imagery and colour meaning with appropriate people;
preserve semantic order when visual order changes;
provide locale-specific exceptions through governed tokens or content rules, not ad-hoc patches.

10. Design decision algorithm

Use this sequence for any material expressive decision:

Name the decision. State the object, state, journey or system property.
State the outcome. Define what people must perceive, understand or do.
Fix constraints. Record accessibility, safety, platform, brand, performance, content and implementation limits.
Classify the claim. Separate standard requirement, empirical evidence, convention, heuristic, product policy and hypothesis.
Choose variables. Identify the smallest useful set of layout, type, colour, image, motion, sound or haptic properties.
Generate alternatives. Include a structurally different alternative, not just cosmetic variants.
Predict mechanisms and failures. Explain why each option may work and where it may fail.
Prototype at the necessary fidelity. Do not use a static image to answer an interaction, reflow, motion or assistive-technology question.
Evaluate against thresholds. Test semantics, perception, operation, expression and implementation.
Record and govern. Capture the decision, evidence, token or component impact, exception, owner and review condition.

11. Design hypothesis record

DESIGN-ID
decision and owner
people, task and context
problem and desired outcome
applicable HIF requirements
claim classification
mechanism and supporting sources
constraints and non-negotiables
alternatives considered
prototype fidelity
success, guardrail and failure measures
result and uncertainty
chosen option and rationale
tokens/components/content affected
accessibility and localisation impact
performance and provenance impact
exception or residual risk
review trigger and date

The record MUST distinguish observed fact, analyst inference, aesthetic judgement and product decision.

12. Minimum acceptance matrix

Area	Required evidence
meaning	object, command and state semantics agree with the interaction model
hierarchy	relevant people can find context, state and next action
grouping	visual, structural and programmatic relationships agree
legibility	supported text, zoom, contrast and content extremes pass
adaptation	supported viewport, language, direction, theme and preferences pass
operation	keyboard, pointer, touch and applicable assistive technology pass
expression	intended character is recognised without impairing comprehension or trust
implementation	tokens, assets, licences, performance and component states are specified
evidence	decision record identifies source, method, result, limitation and owner

An approval based only on a default-state screenshot is insufficient.

13. Anti-laws

HIF explicitly rejects these as universal rules:

every interface must use minimalism;
every layout must use a particular spacing base or ratio;
every page needs exactly one visually dominant action;
people always scan in an F, Z or any fixed pattern;
symmetry is inherently more usable;
whitespace is always beneficial;
three clicks is a maximum;
attractive means usable;
familiar means understandable;
a design-system precedent proves suitability;
majority preference proves quality;
a heuristic score proves conformance.

Each can become a bounded hypothesis in an appropriate context. None may replace analysis and evidence.