A Guide to Jakob’s Law in Web Development

What Is Jakob’s Law?

Jakob’s Law of Internet User Experience (thought up by Jakob Nielsen) can be summarized like this:

Users spend most of their time on other sites. This means they prefer your site to work the same way as all the other sites they already know.

Put simply, users show up with prebuilt mental models: how menus behave, what a “gear” icon means, where search lives, how tables sort, how forms validate, etc. When you match those expectations, users move fast. When you fight them, users hesitate, make mistakes, and blame your product (not themselves).

This is tightly connected to “Consistency and Standards”: consistency reduces cognitive load because people don’t have to decode your custom rules.

Things like form toggles, radio inputs, and even buttons originated from the design of their tactile counterparts.

In this blog, we will discuss:

• Applying Jakob's Law in Web UI/UX
• Examples of Jakob's Law in Web Development
• Examples Using Wijmo Components

Ready to get started? Download Wijmo Today!

Applying Jakob’s Law in Web UI/UX

Follow Established Conventions (Unless You’re Fixing a Real Problem)

If a pattern is widely learned (navigation, search, forms, tables, etc.), treat it like a standard because it effectively is. You can improve the styling, performance, and clarity, but don’t rewrite the rules purely to feel clever.

Match User Mental Models Across Pages

Consistency isn’t only “industry standard”, it’s also your app. A filter panel that opens on the right in one screen and on the left in another is not “variety,” it is confusing.

Use Familiar Language and Iconography

If you are labeling “Settings” as the “Control Center” and hiding it behind a weird icon, you’re creating a scavenger hunt. Call things what people already call them.

Be Careful When You “Innovate”

Jakob’s Law doesn’t ban new patterns. It demands that you earn them:

• The benefit must be obvious.
• The learning cost must be small.
• There must be a safe fallback (tooltips, onboarding, progressive disclosure).

Examples of Jakob’s Law in Web Development

Below is an example of what Jakob’s Law looks like in real web apps, where convention wins and “unique” loses:

Navigation That Behaves Like Navigation

• Expected: top nav for primary sections, left sidebar for app modules, clear active state, predictable back behavior.
• Avoid: custom scroll-jacking menus, hidden navigation with no cues, and nonstandard placement for core routes.

Forms That Don’t Surprise People

• Expected: required fields marked clearly, inline validation, common input patterns (email, password, date), accessible focus states.
• Avoid: validation only after submission with a wall of errors, unclear labels, “clever” placeholders that disappear, and force memory.

Search Where People Look for It

• Expected: top-right or top-center search in many apps, magnifier icon, type-to-search, and recent searches.
• Avoid: search hidden behind unrelated icons or buried in a menu when it’s a primary action.

Tables That Act Like Tables

• Expected: sortable headers, filter affordances, pagination/virtualization when large, consistent number formats.
• Avoid: headers that aren’t clickable but look clickable, sorting that resets unexpectedly, filters that apply “somewhere else.”

“Don’t Make Me Decode This”

If you introduce a new interaction (custom gestures, novel controls), users will compare it to what they know and judge you harshly when it’s slower. Jakob’s Law basically states: stop making users learn your personal UI philosophy.

Examples Using Wijmo Components

Below are practical ways to lean into familiarity using Wijmo controls, so your UI behaves the way users already expect.

Familiar Data-Table Behavior with Wijmo FlexGrid

Data grids are one of the most convention-heavy UI elements on the web. Users expect:

• Click header to sort
• Visual sort indicators
• Filtering is easy to discover
• Fast scrolling on large datasets

With Wijmo FlexGrid, you can deliver those expectations with high performance and common interaction patterns.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjCore from '@mescius/wijmo';

// Example: Familiar table behavior with sorting and controlled columns
const view = new wjCore.CollectionView(data, {
  sortDescriptions: [] // users can sort via UI
});

const grid = new wjGrid.FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  itemsSource: view,
  allowSorting: true,
  columns: [
    { binding: 'orderId', header: 'Order ID', width: 120 },
    { binding: 'customer', header: 'Customer', width: '*' },
    { binding: 'status', header: 'Status', width: 140 },
    { binding: 'total', header: 'Total', format: 'c2', width: 120 }
  ]
});

Familiar Spreadsheet Editing with Wijmo FlexSheet

When users encounter a spreadsheet-like interface, they bring strong expectations because they’ve already learned Excel (or Google Sheets). They expect:

• Click-to-edit cells (no modal dialogs to change a value)
• Keyboard navigation (arrow keys, Enter/Tab, Shift+arrows to select ranges)
• Copy/paste that behaves like a real spreadsheet
• Common formatting actions (number formats, alignment, bold/italic)
• Basic formulas and recalculation behavior

Wijmo FlexSheet matches that mental model by delivering an Excel-like grid experience directly in the browser, so users can work the way they already know, rather than learning a custom “data entry” UI.

import * as wjSheet from '@mescius/wijmo.grid.sheet';

// Example: Spreadsheet-style editing users instantly recognize
const sheet = new wjSheet.FlexSheet('#flexSheet', {
  itemsSource: data,           // your array of row objects
  allowSorting: true,
  headersVisibility: 'All'     // familiar row/column headers
});

// Optional: add a new sheet (Excel-style)
sheet.addUnboundSheet('Sheet1', 20, 8);

Standard App Navigation with Wijmo Menu

Users expect navigation to be:

• Visible
• Predictable
• Grouped logically
• Consistent across the app

Wijmo Menu helps you implement familiar menu patterns (file/edit-style menus, action menus, context menus) without turning navigation into an experiment.

import * as wjInput from '@mescius/wijmo.input';

// Example: Familiar action menu users instantly understand
new wjInput.Menu('#actionsMenu', {
  header: 'Actions',
  itemsSource: [
    { header: 'New' },
    { header: 'Edit' },
    { header: 'Duplicate' },
    { header: 'Delete' }
  ],
  itemClicked: (s) => {
    const action = s.selectedItem?.header;
    console.log('Action:', action);
  }
});

Familiar Search and Selection with Wijmo AutoComplete

Search/selection is another area where users bring strong expectations:

• Type-to-search
• Suggestions appear instantly
• Keyboard navigation works (up/down/enter)
• Clear empty states

Wijmo AutoComplete supports those conventions cleanly.

import * as wjInput from '@mescius/wijmo.input';

// Example: Type-ahead search users already know
new wjInput.AutoComplete('#customerSearch', {
  itemsSource: customers,     // array of strings or objects
  displayMemberPath: 'name',
  selectedValuePath: 'id',
  minLength: 2,
  placeholder: 'Search customers...',
  selectedIndexChanged: (s) => {
    console.log('Selected customer id:', s.selectedValue);
  }
});

Conclusion

Jakob’s Law is brutal, but fair: users will judge your UI against everything else they use. If you stick to conventions, users feel “smart” and move fast. If you deviate without a measurable payoff, your UI becomes work, and users will bounce.

Use familiar patterns for navigation, forms, search, and data. Save novelty for places where it clearly improves outcomes. And if you’re building with Wijmo, you can implement these conventions quickly with components that already align with what users expect.

Ready to try it out? Download Wijmo Today!