Visual Design & Computational Aesthetics

Scope: principles that yield (or approximate) an auto-measurable formula from a layout (DOM/SVG geometry) or a render (screenshot pixels). Each item is tagged for measurability and the index signal it feeds. Formulas given where they exist; all aesthetic metrics in the Ngo family are normalized to [0,1] (0 = worst, 1 = best).

1. Gestalt Principles → Measurable Layout Properties

Gestalt "laws" describe how the visual system groups primitives into wholes. Each maps to a computable proxy over element bounding boxes / pixel features.

Operational note: Proximity, Continuity, Similarity, Common-region are the directly automatable Gestalt laws from DOM geometry; ClosureFigure-groundCommon-fate need pixels or motion.

2. Visual Hierarchy, Typographic Scale, Rhythm, Grids

2.1 Visual hierarchy

Perceived ordering of importance via size, weight, color, contrast, position, whitespace. Measurable: rank elements by a salience score S = f(area, font-size, contrast, position-in-reading-order); a good hierarchy shows a monotone, well-separated distribution of S (few largehigh-contrast anchors, many small). Compute Ginistep-ratio of font-size set; check that exactly one element dominates the top tier. [AUTO geometry+style]. Feeds: hierarchy clarity.

2.2 Modular typographic scale

Font sizes generated from a base × ratio^n. Canonical ratios:

Formula: size_n = base × ratio^n. Measurable: extract the set of rendered font-sizes, fit the best ratio; report scale adherence = fraction of sizes that fall on a single geometric progression (within tolerance). High adherence = disciplined type system. [AUTO style]. Signal: typographic coherence.

2.3 Vertical rhythm / baseline grid

All vertical metrics (line-height, margins) are integer multiples of a base unit (commonly 4px baseline for type). Measurable: rhythm_score = fraction of (line-height, margin-top/bottom, padding) values divisible by base. Line-height should be a multiple of the baseline. [AUTO style]. Signal: vertical consistency.

2.4 8-point spacing system

All spacing (marginpaddinggap/dimensions) ∈ multiples of 8 (4 for fine type). Used by Material Design (8pt component grid + 4pt baseline). Measurable: grid_adherence = |spacings divisible by 8| / |all spacings|. [AUTO geometry]. Signal: spacing discipline — one of the strongest cheap automatable signals.

2.5 Grid systems / alignment

Columns + gutters; elements snap to shared edges. Measurable: count distinct alignment points (unique leftrightcenter X and topbottomcenter Y guides); fewer, shared guides = stronger grid. alignment_score = 1 − (unique_guides / total_edges). Detect column count by histogram of left-edges. [AUTO geometry]. Signal: grid alignment (also AIM's "grid quality").

3. Color & Contrast

3.1 WCAG 2.x contrast ratio (definitive formula)

Relative luminance of an sRGB color (channels normalized to [0,1]):

for c in {R,G,B}:
    c_lin = c/12.92                  if c ≤ 0.03928
    c_lin = ((c + 0.055)/1.055)^2.4  otherwise
L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin

Contrast ratio:

CR = (L1 + 0.05) / (L2 + 0.05)      L1 = lighter, L2 = darker

Range 1:1 → 21:1. Thresholds:

[AUTO from style if colors are flat; [needs render] when text sits over gradients/images — must sample pixels]. Signal: accessibility / legibility floor (hard gate).

3.2 APCA (Accessible Perceptual Contrast Algorithm) — WCAG 3 draft

Perceptually uniform, polarity-aware (separate weighting for dark-on-light vs light-on-dark), and accounts for stimulus size / spatial frequency (font size & weight). Reports Lc (lightness contrast) from 0 to ~±106.

Mechanism: linearize sRGB via simple power curve γ = 2.4 with coefficients 0.2126729 R + 0.7151522 G + 0.0721750 B → screen luminance Ys; soft-clamp near black; then a polarity-dependent power difference of background vs text luminance scaled by ~1.14, ×100.

• Normal polarity (dark text/light bg): Lc ≈ 1.14·(Ybg^0.56 − Ytxt^0.57)·100
• Reverse polarity (light textdark bg) uses exponents 0.650.62 (approx) — asymmetric by design.

APCA usage thresholds (font-size dependent):

[AUTO from flat colors + font metrics] / [needs render over imagery]. Signal: perceptual legibility (more accurate than WCAG2 for dark mode and thin type).

3.3 Colorfulness — Hasler & Süsstrunk (2003) M3 metric

Opponent channels from RGB (no full colorspace conversion needed):

rg = R − G
yb = 0.5·(R + G) − B
σ_rgyb = √(σ_rg² + σ_yb²)        (std-dev term)
μ_rgyb = √(μ_rg² + μ_yb²)        (mean term)
C (colorfulness) = σ_rgyb + 0.3·μ_rgyb

Correlates ~95% with human ratings (1–7 scale). [needs render — pixel statistics]. Signal: color vibrancy / restraint (too low = drab; too high = chaotic — both can hurt the index).

3.4 Color variability / palette economy

AIM-style: count distinct hues / dominant colors (e.g., via color quantization + histogram), measure HSV variance. Fewer dominant colors generally → higher perceived aesthetics & lower complexity. [needs render]. Signal: palette discipline.

4. Computational Aesthetics — Ngo, Teo & Byrne (2003), "Modelling the Aesthetics of Screen Layouts"

Information Sciences 152:25–46. Defines 14 measures, each in [0,1]. Setup: the frame is split by central vertical & horizontal axes into 4 quadrants (UL, UR, LL, LR). Each object i has area a_i, center (x_i, y_i), width/height. Most formulas combine per-axis terms. The widely cited forms:

1. Balance (BM) — equal "optical weight" (area × distance from axis) on opposing sides.

w_side = Σ (a_i · d_i)    # d_i = distance of object center to the axis, per side L/R/T/B
BM_vertical   = (w_L − w_R) / max(|w_L|,|w_R|)
BM_horizontal = (w_T − w_B) / max(|w_T|,|w_B|)
BM = 1 − (|BM_vertical| + |BM_horizontal|) / 2

[AUTO geometry]. Signal: leftright & topbottom weight equilibrium.

2. Equilibrium (EM) — center of mass coincides with frame center.

EM_x = (2 · Σ a_i (x_i − x_c)) / (n · b_w · Σ a_i)
EM_y = (2 · Σ a_i (y_i − y_c)) / (n · b_h · Σ a_i)
EM = 1 − (|EM_x| + |EM_y|) / 2

(x_c,y_c) frame center, b_w,b_h frame width/height, n object count. [AUTO geometry].

3. Symmetry (SYM) — vertical + horizontal + radial symmetry of object properties (X, Y, width, height, area, distance, angle) across the 4 quadrants.

SYM = 1 − (|SYM_vertical| + |SYM_horizontal| + |SYM_radial|) / 3

Each SYM_* is the normalized sum of absolute differences of the per-quadrant property vectors. [AUTO geometry].

4. Sequence (SQM) — layout guides the eye in reading order. Quadrant reading weights UL4, UR3, LL2, LR1; compare to weights v derived from each quadrant's visual weight (area). SQM = 1 − Σ|q_j − v_j| / 8. [AUTO geometry]. Signal: scan-path alignment with F/Z reading.

5. Cohesion (CM) — consistency of aspect ratios among frame, the overall layout bounding box, and individual objects. CM = (CM_fl + CM_lo)/... comparing ratio of ratios. [AUTO geometry]. Signal: proportional kinship.

6. Unity (UM) — objects read as one whole (form + space).

UM_form  = 1 − (n_sizes − 1)/n           # fewer distinct sizes → more unity
UM_space = a_layout / a_frame            # how tightly negative space frames objects
UM = (UM_form + UM_space)/2

[AUTO geometry]. Signal: coherence vs fragmentation.

7. Proportion (PM) — object & layout proportions match "pleasing" ratios {1:1, √2≈1.414, golden 1.618, √3≈1.732, 2:1}. PM = (PM_object + PM_layout)/2, each penalizing distance to nearest good ratio. [AUTO geometry]. Signal: harmonic proportions.

8. Simplicity (SMM) — fewer alignment points and objects.

SMM = 3 / (n_vap + n_hap + n)

n_vap = distinct vertical alignment points, n_hap = horizontal alignment points, n = objects. [AUTO geometry]. Signal: structural parsimony.

9. Density (DM) — fraction of frame covered; optimum is moderate (~50%).

density = Σ a_i / a_frame
DM = 1 − |2·density − 1|     # peaks at density = 0.5

[AUTO geometry]. Signal: not too sparse / not too crammed.

10. Regularity (RM) — regular alignment + uniform spacing.

RM_alignment = function(n alignment points)
RM_spacing   = consistency of spacing intervals
RM = (RM_alignment + RM_spacing)/2

[AUTO geometry]. Signal: rhythmic placement.

11. Economy (ECM) — few distinct sizes used. ECM = 1 / n_distinct_sizes. [AUTO geometry]. Signal: restraint in size vocabulary.

12. Homogeneity (HM) — objects evenly distributed across the 4 quadrants; computed combinatorially (uniformity of the per-quadrant counts vs even split). [AUTO geometry]. Signal: even spread.

13. Rhythm (RHM) — regular variation of object position & size across quadrants. Components (Ngo, Teo & Byrne eqs 53–59, transcribed verbatim from the canonical source — each RHM_p is the mean of the six pairwise absolute differences of the four normalised quadrant values of property p):

RHM_p    = (|p'_UL−p'_UR| + |p'_UL−p'_LR| + |p'_UL−p'_LL|
          + |p'_UR−p'_LR| + |p'_UR−p'_LL| + |p'_LR−p'_LL|) / 6    for p ∈ {x, y, area}
RHM      = 1 − (|RHM_x| + |RHM_y| + |RHM_area|) / 3
   where  X_j = Σ_i |x_ij − x_c|,  Y_j = Σ_i |y_ij − y_c|,  A_j = Σ_i a_ij   (per quadrant j)
          p'_j = p_j / max_j(p_j)                                (normalised, same as symmetry)

[AUTO geometry]. Signal: patterned repetition. (Implemented in koder_ui_score NgoRhythm; the roll-up OM now averages all 13.)

14. Order & Complexity (OM) — aggregate; the mean of the other 13.

OM = (1/13) · Σ (the 13 measures above)

[AUTO geometry]. Signal: overall computed aesthetic — the single roll-up.

Caveat: Ngo's measures were derivedvalidated on abstract block layouts; correlation with human ratings is moderate and they ignore colortypography/content. Best used as a multi-dimensional geometric fingerprint, not a lone verdict. Balance, equilibrium, symmetry, density, simplicity, economy, alignment are the most reproducible.

5. Aesthetic-Usability Effect — Tractinsky, Katz & Ikar (2000), "What is Beautiful is Usable"

Interacting with Computers 13(2):127–145. ATM-interface experiment: perceived aesthetics strongly correlated with perceived usability, before and after actual use; manipulated aesthetics affected post-use perceptions of both beauty and usability, while actual usability did not. Mechanism = halo effect. [expert-judgment / behavioral — not a pixel formula]. Index relevance: justifies the whole computable-aesthetics index — better-looking UIs are perceived as more usable, raising satisfaction. Use as the theoretical warrant, not a metric.

6. Visual Complexity & Clutter — Rosenholtz et al.

6.1 Edge density (Mack & Oliva 2004)

edge_density = (# edge pixels) / (total pixels) from an edge detector (e.g., Canny). Cheap proxy for subjective complexity. [needs render]. Signal: clutter (coarse).

6.2 Feature Congestion (Rosenholtz, Li & Nakano 2007)

Clutter as local variability of color, luminance, and orientation across a multiscale (image-pyramid) representation; "more cluttered = harder to add a new salient item." Produces a per-pixel clutter map + scalar. [needs render]. Signal: perceptual clutter / attention cost.

Algorithm (CHI 2005 / JOV 2007), as implemented in koder_ui_score:

1. Convert to CIELab; build a Gaussian pyramid (3 scales, binomial-5 smooth + 2× subsample).
2. Per feature, compute the local (co)variance (linear filtering for the local mean, then the point-wise variance). Color → a 3×3 covariance Σ of (L,a,b); contrast → the variance of a difference-of-Gaussians "contrast energy"; orientation → covariance of oriented-filter responses.
3. Color clutter = the volume of the covariance ellipsoid ∝ √det Σ, cube-rooted to a length → (det Σ)^{1/6}. Contrast clutter = √variance.
4. Combine across scales by the per-pixel max; combine features by averaging (after equating discriminability); pool over space by the mean.

Implemented (2026-07-02): the full §6.2 Feature Congestion triple — color (ColorFeatureCongestion, CIELab covariance-ellipsoid volume det^{1/6}), contrast (ContrastFeatureCongestion, DoG contrast-energy √variance), and orientation (OrientationFeatureCongestion — oriented opponent energy (⟨Gx²⟩−⟨Gy²⟩, 2⟨GxGy⟩) à la Bergen & Landy 1991, i.e. the structure-tensor double-angle vector; clutter = area of its local 2×2 covariance ellipse det^{1/4}), each max-across-scale + mean-pooled. FeatureCongestion averages the three → the harness Visual clutter signal (supersedes the edge-density proxy; EdgeDensity stays a diagnostic). Component scales are v1 seeds; calibration meta#387. Deferred (needs a Simoncelli steerable pyramid for per-subband coefficient binning — UISCORE-002): only §6.3 Subband Entropy.

6.3 Subband Entropy (same paper)

Decompose image into wavelet subbands (a Simoncelli steerable pyramid; mirrors early visual cortex); compute entropy per subband (luminance + chrominance); weighted sum 0.84·luminance + 0.08·each chrominance → clutter scalar. Captures redundancy/encoding cost. [needs render]. Signal: information overload.

UQS decision (2026-07-02): NOT used as the UQS clutter signal. The UQS uses Feature Congestion (§6.2, the color+contrast+orientation triple) as its single clutter signal. Per Rosenholtz et al.'s own finding — "color variability, accounted for by Feature Congestion but *not*… the Subband Entropy measure, does matter for visual clutter"* — SE is luminance-only and misses colour variability, which the FC triple captures. SE's marginal value for the UQS is ~zero, and a faithful Simoncelli steerable pyramid is high-cost; de-scoped (UISCORE-002). Recipe kept above if ever wanted as a diagnostic.

All three are bundled (with MATLAB code) in the Journal of Vision 2007 release; lower values ⇒ cleaner UI.

7. ML / Automated UI-Aesthetics Prediction

• Aalto Interface Metrics (AIM) — Oulasvirta et al. 2018 (UIST). Open service + codebase pooling ~17 validated metrics across: visual complexity, visual clutter (feature congestion, subband entropy), colourfulness (Hasler–Süsstrunk), color variabilitydensity, symmetry, *rid qualityalignment, grouping, contrast with background, white-space, figure-ground, edge density, prototypicality, readability. Input a URL/screenshot → numeric scores. This is the closest existing turnkey blueprint for a computable UI-quality index.*[mix: AUTO + needs render].
• Miniukovich & De Angeli (2014–2015) — eight automatic GUI-aesthetics metrics (visual complexity, color variability, symmetry, contour density, figure-ground contrast, grid use, etc.) validated against immediate (150 ms) and deliberate (4 s) impressions on webpages and iPhone apps. Foundational to AIM.
• Learned predictors — CNN/deep models trained on rated-screenshot corpora (e.g., Rating-based aesthetics on Rico-derived datasets; ColorNet for colorfulness) regress a human aesthetic score directly from pixels. [needs render; model-based]. Signal: holistic aesthetic estimate — useful as a black-box cross-check on the formula stack.

8. Directly Automatable Visual Metrics — Shortlist

Computable headless from DOMSVG geometry + a single screenshot. Ordered by cheapnessreliability.

From geometry/DOM alone [AUTO]:

1. 8-point / grid spacing adherence — % of spacings divisible by 8 (4 for type).
2. Alignment-point economy — # unique X/Y guides vs # element edges (grid quality).
3. Typographic scale adherence — do font-sizes fit one geometric ratio (1.21.251.3331.5φ)?
4. Vertical rhythm — line-heights/margins as multiples of baseline.
5. Ngo Balance, Equilibrium, Symmetry — area×position over quadrants.
6. Ngo Density — coverage ratio, optimum ~0.5.
7. Ngo Simplicity / Economy / Unity — distinct-size & alignment-point counts.
8. Proximity/grouping — intra- vs inter-group gap bimodality.
9. Hierarchy separation — step-ratio/Gini of salience (size×contrast).
10. WCAG 2.x contrast (flat colors) — (L1+.05)/(L2+.05) vs 4.537.

Needs a render (pixels) [needs render]:

11. WCAG / APCA contrast over imagery — sample text-on-background pixels; APCA Lc with font size.
12. Colorfulness — Hasler–Süsstrunk σ_rgyb + 0.3·μ_rgyb.
13. Color variability / palette count — quantized dominant-color histogram.
14. Edge density — Canny edge fraction.
15. Feature congestion / subband entropy — Rosenholtz clutter scalars.
16. Figure-ground contrast / saliency peaks.

Recommended roll-up: weighted composite of (a) a Ngo geometric vector (balance, equilibrium, symmetry, density, simplicity, economy, alignment), (b) a discipline block (8pt + type-scale + rhythm adherence), (c) a contrast/accessibility gate (WCAGAPCA — hard floor, not averaged away), and (d) a *luttercolorfulness block*(Rosenholtz + Hasler–Süsstrunk) — mirroring AIM's proven metric pool.

Sources

• Ngo, Teo & Byrne (2003), Modelling Interface Aesthetics / Modelling the Aesthetics of Screen Layouts, Information Sciences 152:25–46 — ScienceDirect · Semantic Scholar · Academia PDF
• SDA probing of Ngo measures (formulas applied) — arXiv 1101.1606
• WCAG 2.x contrast formula & thresholds — WebAIM Contrast Checker · Accessibility Assistant: 4.5:1, 3:1 & formula
• APCA / WCAG 3 — APCA Easy Intro · Myndex/SAPC-APCA (GitHub) · Why APCA
• Hasler & Süsstrunk (2003), Measuring Colourfulness in Natural Images — EPFL PDF · PyImageSearch implementation
• Rosenholtz, Li & Nakano (2007), Measuring Visual Clutter (Feature Congestion + Subband Entropy) — Journal of Vision · MIT persci
• Tractinsky, Katz & Ikar (2000), What is Beautiful is Usable — BGU PDF · Oxford Academic
• Aalto Interface Metrics (AIM), Oulasvirta et al. 2018 — ACM UIST · PDF
• Miniukovich & De Angeli, Visual complexity / aesthetics of GUIs — ResearchGate
• Modular scale / 8-point grid / vertical rhythm — freeCodeCamp: 8-Point Grid Typography · Creative Market: Typographic Scale