Emphasis depends on what else is on the screen

A lesson from UI and UX for Engineers: Judging the Interfaces You Ship. Play it above, or read it through below.

• Emphasis depends on what else is on the screen.

  The common read: If a reviewer can see the difference between two colours, users will spot the one that matters in a full screen.

  Whether a target pops out depends on the target and on the display around it, and a design review that compares two swatches never looks at the display. Search efficiency rises with the difference between the target and the distractors and falls with the difference among the distractors themselves, which means the same accent colour can be found instantly on one screen and be invisible on the next.

  A second condition has more direct design consequences. When the difference between the target and the distractors is large enough, search is efficient if the target is linearly separable from the distractors in the feature space: a line can be drawn with the target on one side and every distractor on the other. Separability does not make up for a difference that is too small. The overdue red in the first question is separable from the ordinary red, and operators still miss it.

  When the distractors flank the target, search becomes inefficient. An accent whose colour lies on the straight line between two accents you already ship, in a two-dimensional colour space, is the flanked case. Saturation is one of the two axes of that space, so making the accent clearly more saturated than both can move it off the line and make it separable again. This works only if the difference is also large.

  The thresholds are also much larger than most people expect. For orientation, the reported critical difference for efficient search is around fifteen degrees, far larger than the smallest tilt a person can detect, and guidance is categorical rather than metric: search is more efficient when the target is uniquely steep or shallow. Colour behaves the same way, and the researchers say so directly: the metrics of colour difference for foveal discrimination are quite unlike those that govern the deployment of attention.

  A common failure: a ticket titled "make the overdue state more obvious" is assigned to whoever owns the palette, closed by a hex change, and reopened next quarter with the word "still". Before you add an accent, count the accents already on the screen, and check that the new colour differs enough from every other element competing for attention, not only from the background.

• The F-pattern appears on pages with no structure.

  The common read: People scan web pages in an F, so the design job is to put what matters into the top band and down the left edge.

  The F is the path the eye follows on a page that offers no structure to guide it, and the group that found it now says so. Their sentence, quoted whole: "The F-shaped scanning pattern is bad for users and businesses: it means that users may skip important content simply because it appears on the right side of the page." Placing content to fit the F means designing for the failure case.

  The pattern also has preconditions. It appears when the text has little or no formatting for the web, when the user is trying to be efficient, and when the user is not committed enough to read every word. The group names these three as the conditions under which the F appears, and says good design can prevent it. The group also states the mechanism: in the absence of signals to guide the eye, people take the path of minimum effort and fixate near where they started reading.

  The group also describes other patterns and ranks them. Spotted scanning fixates on scattered words. Layer-cake scanning fixates mostly on headings and subheadings, and is described as by far the most effective way to scan. Commitment scanning is actual reading. Worst to best, the order is F, spotted, layer cake, commitment.

  A common failure: an analytics review finds that a long feature page has a scroll depth of thirty percent, files it as a content-length problem, and cuts the page in half, which changes nothing because the remaining half is still four unbroken paragraphs. The fix is typographic: write subheadings that carry information rather than category names, and readers switch to layer-cake scanning.

• One test of a hierarchy model found two predictors. The rest is craft, and craft is still useful.

  The common read: Size, weight, position and isolation are the four measured techniques of visual hierarchy, and a designer's hierarchy model predicts where the eye lands.

  Size is a measured guiding attribute: laboratory visual-search studies support it with large amounts of data. A published hierarchy model of page elements did not hold up. A 2018 test on web pages found it predicted entry points poorly and mainly picked entry points by element size alone. Spatial position and distinctiveness did predict earlier attention. The paper tells designers to stop using the model because its predictions can be misleading. No experiments were found for weight and isolation, so they are craft, and craft is still worth learning.

  The measured vocabulary and the design vocabulary do not line up. The canonical computational attention model builds forty-two feature maps from three channels: intensity contrast, colour opponency and orientation contrast. Size, weight, position and isolation appear in none of them. The nearest thing to isolation in that model is a normalisation step that promotes a map when its most active location is far above the map's own average, which is feature uniqueness within a channel rather than whitespace around a box.

  The mismatch does not make the design vocabulary worthless. It is a teaching tradition with no experimental literature behind its specific enumeration, and even a usability firm as research-focused as Nielsen Norman Group presents it with citations to two design textbooks and no experiments. The design vocabulary's actual evidence status is craft tradition, not experimental finding, and knowing that status changes how you argue: you can defend a hierarchy decision as a craft judgement and you cannot defend it as a finding.

  A common failure: a design review stalls for forty minutes while two competent people cite incompatible principles, seniority decides the outcome, and the decision is then written into a component library as a rule. Argue the two measured things when you have them, label the rest explicitly as your judgement, and spend the saved review time on the one question the literature does answer: what else on this screen is competing for attention.

  Make one thing stand out. Then make everything else plain, and plain the same way. Stand-out thing must differ a lot from plain things. Not a little. Enough that, on a colour chart, one straight line splits stand-out thing from all plain things. Many different stand-out things? Then nothing stands out. Only noise. Rule: emphasis depends on the other things on screen. Not on one colour.

• The isolation effect is a memory result.

  The common read: Isolating an element makes it noticeable, and the isolation effect is the research that says so.

  The isolation effect does not predict that you will find the odd item faster. The Von Restorff effect is a MEMORY result: an item that stands out from its surroundings is better remembered. Recall and search are different measures, and the design literature routinely cites the memory finding to support an attention claim.

  The distinction has a practical consequence. If you isolate the destructive action in a menu, a memory result supports that choice and no attention result has been established for it. Both effects may be real, but the study everyone cites measured memory, so if your argument is about whether users will FIND the control, the isolation effect is the wrong citation.

  Whitespace causes the other half of the confusion. Space around an element has a real effect, and that effect is grouping, which the next lesson takes as its subject. It is not the normalisation term in a saliency model, and it is not a fifth guiding attribute. Isolation as designers use the word bundles a grouping effect and a memory effect and a folk theory of attention into one instruction.

  A common failure: a component-library pull request adds twenty-four pixels of margin above a delete button, cites the isolation effect in its description, and is approved by two reviewers who recognise the term. Keep the margin and change the argument: the space is there so the button does not read as part of the group above it, which is a grouping claim you can defend, and you do not need the memory result to justify it.

• Emphasis is one input among several, with no published ranking.

  The common read: A strong enough hierarchy makes up for layout changes, so moving a familiar control is safe as long as the new position is visually prominent.

  Which wins, a high-contrast element in an unusual place or a low-contrast element where users expect it? This course found no published study that answers it for interfaces, and this lesson ends on that gap. Guided Search 6.0, the current model of visual search, names five sources of guidance: bottom-up feature guidance (what stands out), top-down feature guidance (the target you hold in mind), prior history, reward, and scene syntax and semantics, the learned structure of the kind of page you see. Features supply two of the five.

  The model supports some conclusions and not others. It supports saying that emphasis is one input among several, and that where a thing usually lives is a different input rather than a weaker version of the same one. It does not support a ranking, because none was measured, and a course that told you convention beats contrast would be inventing an unmeasured ranking, which this lesson has refused to do.

  The practical consequence survives without the ranking. A redesign that relocates a familiar control changes an input the model names, and no published result says how much extra feature contrast makes up for it. So the usual compensation, making the moved control more visually prominent, has an unknown effect: it is an untested guess, not a plan.

  A common failure: in the week after a launch the support queue fills with "where did search go" tickets, the team answers with a help-centre article, and the tickets close when the volume drops, because the people who could not find search stopped looking. Move a familiar control only when the reason justifies a cost of unknown size, say that the size is unknown, and measure the effect of the move instead of arguing about it, which is what the next level covers.