Morten A. Giraffe

Chapter I / Make it understandable

Familiarity: Do Not Hide Common Actions Behind Originality

Spend originality where it helps the brand, not where it makes common tasks harder to discover.

All 18 rules4 min read
01Scenario

Start with the moment where the interface asks too much.

The product page is elegant. Navigation appears only when the visitor drags a sculptural object across the hero. The interaction is beautiful in the launch video and nearly invisible in ordinary use. A ready-to-buy visitor never discovers the route. The site was original in the one place where recognition would have done more work.

People arrive with learned expectations from other interfaces. Borrow that knowledge for common tasks, then spend originality on the brand, story, composition, and value.

02Interface Lab

Show the failure and the correction.

The lab uses controlled markup instead of raster text so the lesson stays legible, accessible, and easy to revise.

  1. Step 1The visitor brings expectationsThe visitor must learn before acting.
  2. Step 2Originality claims priorityMemory is bought with friction.
  3. Step 3The benefit is unclearThe learning cost has no user payoff.
  4. Step 4Contracts returnOriginality no longer blocks the task.

Corrected path

Keep common contracts

Logo goes home, links look interactive, navigation is discoverable, and purchase or inquiry paths behave predictably.

03Principle

Make the useful path easier.

Every interface inherits a past

Visitors have used other sites before yours. That experience sets expectations for links, buttons, menus, back behavior, search, checkout, and home navigation.

Convention has a cost test

Before changing a convention, name the expectation being changed, the measurable user benefit, how first-time visitors discover it, and whether repeated use repays the learning cost.

Predictable does not mean generic

Two sites can share checkout, navigation, and button contracts while feeling completely different through art direction, copy, imagery, pacing, and proof.

04Rebuild

Turn critique into a usable rule.

Remove

  • Hidden navigation

    A common wayfinding task depends on a gesture the visitor was not taught.

  • Decorative link language

    Links are styled as art objects but not clearly interactive.

  • Novel checkout

    The point of commitment becomes a puzzle, increasing doubt when confidence should rise.

Build

  • Keep common contracts

    Logo goes home, links look interactive, navigation is discoverable, and purchase or inquiry paths behave predictably.

  • Move expression elsewhere

    Use original composition, voice, animation, and proof without changing the basic action model.

  • Test without the pitch

    Hand the page to someone who did not see the design presentation and watch the first control they try.

05Field Test

Use it on a real page.

Give a first-time participant one common task with no explanation.

  1. Step 1

    Ask them to buy, inquire, navigate home, or find a key page.

  2. Step 2

    Record where they look first.

  3. Step 3

    Record the first control they try.

  4. Step 4

    Ask what made the correct path discoverable or hidden.

Evidence
Use observation notes, not design intent.
Pass
The intended path aligns with learned expectation or teaches itself quickly.
Fail
The participant needs an explanation before beginning the common task.
06Use By Role

The rule should help the person making the next decision.

Business owner

Protect originality that helps positioning, not novelty that hides revenue paths.

Designer

Separate interaction contracts from visual personality before judging whether the site feels distinctive.

Developer

Use native links and controls where possible so browser, keyboard, and assistive behaviors remain familiar.

Reviewer

Run first-use tasks without instructions or hints.

New tools sometimes need new interactions. Novelty is justified when an old pattern cannot serve the task and the new model becomes learnable, reversible, and efficient.

07Checklist And FAQ

Check the page, then answer the doubt.

  • Logo home behavior is preserved.
  • Navigation is discoverable.
  • Links and buttons look interactive.
  • Back and close behavior are predictable.
  • Novel patterns have a named user benefit.
  • First-time tasks work without a walkthrough.
Does familiar design make every website look the same?
No. Interaction contracts can stay familiar while brand expression, imagery, pacing, and copy stay original.
When is a new interaction pattern justified?
When the old pattern cannot serve the task and the new behavior is discoverable, reversible, and worth learning.
Which conventions should usually remain familiar?
Home links, navigation, links, search, sign-in, checkout, forms, and basic browser expectations deserve a strong reason before they change.