UX rules

The reviewer measures our work against “Stripe, Square, QuickBooks, Meta and other top SaaS”. Intuit owns QuickBooks, so this guide borrows its shape from Intuit Content Design and fills it with rules copied from products people already use.

The five principles

• Fewest steps: every click, tap, open or reply the system could have saved is a break.
• Fewest scroll: one answer fits on one screen, side by side before top to bottom.
• Fewest inputs: the person types only what nothing else knows, and validates the rest.
• Maximum intuition: a one-second glance tells an outsider what the thing is and what to do next.
• One way: how we do one thing is how we do all.

Measuring sets how clicks, inputs and rows are counted for all five.

Scoring

A delivery starts at 100%. Each revision round costs 15%. Each break of one of the five principles costs 3%, and each other miss costs 1%. One extra revision round costs as much as five broken principles, so the work is checked with each actor before the reviewer sees it.

Levers

Principle	Screen	Email	Form	Document
Fewest steps	Records open into the table’s detail. The detail shows the next action. After an action, the screen shows its result where the person already is.	One button that goes straight to the page where the action happens.	A form lands on the record it created.	The answer is on the first page the reader opens.
Fewest scroll	Up to six fields in a detail row before a new group. At most six fields on a card or row besides the title. Extra lines move to the right of the title before a new row is added.	The ask sits in the first line.	A field that belongs beside its neighbour sits beside it.	The answer goes first.
Fewest inputs	Formulas, lookups, rollups, automations and prefills fill what they can. Computed fields are read only. A click in a number box selects it.	The person replies with one click on the button.	Fields known from the place the form was opened arrive prefilled.	The reader never copies a value from one place to another.
Maximum intuition	Page, tab and group names answer what this is in one or two words. Buttons use the words the person is thinking in.	The subject and the button name the action.	The question is in the person’s words, with the required marker in the header.	Headings state the rule and the first sentence answers the question.
One way	Every page is a kind from the page kit. One detail page per table. One search component, in one place, at one size.	Every email of a kind has the same parts in the same order.	Field names and required markers match the table and its intake.	Every rule page uses the same skeleton and the same pairs.

How this guide is built

The guide has three layers. Foundations hold the five principles. Style and usage covers how words, numbers, colours and markers look anywhere. The surface layers apply both to one kind of artefact: product and UI for screens and forms, talking to customers for email.

Every rule is copied from a product or a published guide, with a link to the screen or page it came from. A rule that comes only from the reviewer says so in its Research section.

Each rule page follows one skeleton: When to use, When not to use, How it works, Research. Inside How it works, each rule is a heading written as an instruction, a short explanation and a line starting with “Pass:”. The Pass line holds a measurable condition, with a number from the measuring page wherever a reference product has been measured. Where no measure exists, the line states a check two people would answer the same way. Where we have material, a Do and Don’t pair follows. The two sides of a pair differ in one thing only, so the reader sees what the rule changes. Text examples use a Replace this and With this pair.

Page titles follow names: one or two words. The slug keeps the page’s first English name, so links already shared keep opening.

Apart from the page skeleton, we copied each of these from a different guide. The section names follow Intuit Content Design, whose pages sit under foundations, product and UI, and talking to customers. The Do and Don’t pair comes from Atlassian’s button page, which sets the two images side by side, tinted green and red, with a caption under each. The page skeleton is ours. The nearest references are Atlassian, whose component pages split guidance into usage and best practices, and Stripe Apps patterns. Stripe’s empty state page runs Before you begin, Best practices, then one section per task. Its action buttons page runs Before you begin, then a list of suggested uses. Neither has a When not to use section. The Replace this and With this pair comes from the Microsoft Writing Style Guide.