{
"id": "F05",
"title": "Live summary",
"topic": "forms",
"use": "The column beside the form that recalculates while the user types. It gives three kinds of information: derived values, the consequences of the entry — which approval applies, which entries it makes required — and the state it is calculated against, such as the budget of the cost center. Use it when the user cannot keep track of what their entry sets off.",
"decisions": [
"The summary recalculates on every keystroke, not when a field is left: whoever learns only on leaving the field that they crossed a threshold has already written the sentence.",
"It holds no control — no input, button or choice: it is information, and a field in it would be a second place to fill in the same form.",
"It says what is still missing and marks nothing as an error: a required field gains its asterisk when it becomes required, and its error appears only on submit; a form that is red on opening teaches that red means nothing.",
"It sits beside the form on the right, and below it once the form would get less than half the width: it runs along while the eyes work on the left, and above the form it would change before there is anything to calculate.",
"It holds its place with a gap to the top edge while the form scrolls, and it is short enough to stay fully in view: a summary that stays at the top while the user types at the bottom is none.",
"Three sections, each answering one question — what does it cost, what follows from it, where do I stand: without the split it is a list of numbers, and the user searches for the one that concerns them.",
"The approval level is a badge, because it is the value that changes most visibly while typing and a badge shows the jump; the budget is a bar with figures, because the bar shows the ratio and the figures the remainder."
],
"try": [
{
"do": "Type a new amount into Hotel per night",
"then": "the hotel line, the total and the budget bar follow every keystroke, not only when the field is left"
},
{
"do": "Bring the total above €1,000, for example with 650 under Travel in €",
"then": "Approval changes from Line manager to Line manager and head of division, in a warning badge, and the sentence below says that the request now goes to the head of division as well"
},
{
"do": "Bring the total above €2,500, for example with 2200 under Travel in €",
"then": "Justification gains its asterisk and the summary names it as still missing, while no field turns red"
},
{
"do": "Switch the cost center to 4712 · Marketing",
"then": "the budget bar counts against that cost center instead; its budget is almost used up, so the bar fills and the line below says how far the request goes over it"
},
{
"do": "Clear Destination",
"then": "the summary names the destination as still missing; only Submit travel request checks the form, and then Destination reports the missing entry and takes the focus"
},
{
"do": "Press Save as draft",
"then": "a toast confirms the draft"
},
{
"do": "Scroll down the form",
"then": "the summary stays in view beside it"
},
{
"do": "Open the pattern in a new tab and make the window narrower",
"then": "once the form would get less than half the width, the summary moves below it"
}
],
"revision": 1,
"changes": [],
"reviewed": true,
"source": "\n\n
\n \n
Request a business trip
\n
Jörg Weiland · Sales · Cost center 4700
\n \n\n \n Submit travel request\n Save as draft\n \n\n