Ergonomics

인체공학

Sizing, shaping, and placing a product based on real data about human body dimensions, strength, and range of motion.

Also known as: Anthropometrics인체측정학Human factors
···
html
<div class="erg-wrap">
  <svg viewBox="0 0 220 120" class="erg-svg">
    <ellipse class="erg-handle" cx="70" cy="60" rx="14" ry="34"/>
    <path class="erg-hand erg-hand-small" d="M40,60 q6,-30 30,-32 q10,-2 12,8 q2,10 -4,14 q10,0 14,10 q3,9 -4,14 q8,2 9,12 q1,10 -9,12 q4,8 -4,13 q-14,7 -30,-4 q-16,-11 -14,-47 Z"/>
    <path class="erg-hand erg-hand-big" d="M36,58 q6,-38 34,-40 q12,-2 14,10 q2,12 -5,17 q12,0 17,12 q4,11 -5,17 q10,2 11,15 q1,12 -11,15 q5,10 -5,16 q-16,9 -35,-5 q-19,-14 -15,-57 Z"/>
    <text class="erg-cap" x="70" y="112" text-anchor="middle">5th – 95th percentile</text>
    <line class="erg-dim" x1="130" y1="30" x2="130" y2="90"/>
    <line class="erg-tick" x1="124" y1="30" x2="136" y2="30"/>
    <line class="erg-tick" x1="124" y1="90" x2="136" y2="90"/>
    <text class="erg-num" x="142" y="63">⌀32</text>
  </svg>
</div>
css
.erg-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,16px)}
.erg-svg{width:min(94%,440px);height:auto;display:block}
.erg-handle{fill:var(--surface);stroke:var(--fg);stroke-width:1.4}
.erg-hand{fill:var(--accent);stroke:var(--fg);stroke-width:1;stroke-linejoin:round}
.erg-hand-small{fill-opacity:.55;animation:erg-cycle 3.2s ease-in-out infinite}
.erg-hand-big{fill-opacity:0;stroke-opacity:.6;animation:erg-cycle-rev 3.2s ease-in-out infinite}
.erg-cap{font-size:8px;fill:var(--muted)}
.erg-dim,.erg-tick{stroke:var(--muted);stroke-width:.8}
.erg-num{font-size:9px;fill:var(--muted)}
@keyframes erg-cycle{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes erg-cycle-rev{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}

Ergonomics doesn't start from a hunch about what feels comfortable — it starts from measured anthropometric data. Even picking a single handle diameter means checking the range between the 5th percentile (smaller hands) and 95th percentile (larger hands) of adult hand circumference, and landing somewhere both a small hand can close around and a large hand won't find cramped. Most consumer products are designed to satisfy that 5th-to-95th-percentile band, not everyone — covering 100% of hand sizes gets exponentially more expensive.

Anything touched repeatedly — a handle, a button — has to account for grip force and repetitive strain, not just size. A handle that's held with the wrist bent is fine for a moment but raises carpal tunnel risk with repeated use, so the grip gets placed where the wrist can stay in its natural, neutral angle. Furniture height and a desk's reach envelope (how far an arm can comfortably extend) are sized the same way.

A UI's minimum touch-target size — roughly 44px, the smallest a thumb can reliably tap — is the same idea moved onto a screen: a physical finger's width and precision set the floor for how small an on-screen button can be. It's ergonomics' digital cousin.

When to use

When designing a grip, handle, button, or workspace that a hand or arm touches directly, or checking whether repeated use causes strain.