UI Design Optimization #45: Emphasis Borders for Local Highlighting

1 Requirements Goal

The development requirement was to add an approval-waiting prompt to a release form while preserving the handling reason and assignee explanation, using minimal emphasis to create a focal point. This section teaches using small-area emphasis borders to increase local recognition while using text to convey status and next steps.

2 Initial Implementation

The first version used a light yellow background for the pending-approval prompt, displaying the wait reason, assignee notes, and related information without any side emphasis line.

Figure 1: Prompt area uses a light yellow background.

3 Solution Evaluation

3.1 Evaluation Focus

The light background already distinguishes the prompt area. This example further compares whether adding a small colored border makes the block's starting position and type easier to recognize.

Emphasis borders are auxiliary expression; what is being waited for, who handles it, and what the next step is must still rely on clear text.

3.2 Usage Principles

Small amounts of colored borders can add local emphasis without turning the entire area into a strong solid color. They can be used for prompts, current navigation, or headings, but the meaning within the same context must stay consistent.

If every card has a different colored border, it may lose focus or create non-existent categories. Therefore the scope of use must be limited.

4 Comparison Solutions

4.1 Emphasis Scope

Retain the original background color and copy; only add a left border to the pending-approval area. First ensure the text is complete, then compare this local change.

Do not use color to imply urgency levels or permission differences that are not explained on the page.

4.2 Style Implementation

.notice {
  background: #fff8e7;
  border-left: 7px solid #b87913;
}

The 7px width and border color are example parameters; actual values should be adjusted per component size and overall page emphasis level. The default version remains a more restrained option.

4.3 Content Check

The prompt component keeps title, reason, handler, and appropriate actions. Different permission users may have different actions, but all must accurately understand the current waiting state.

Place the prompt back on the page and check its relationship with primary buttons and risk warnings, avoiding local emphasis overriding truly important content.

5 Trade-off Comparison

Figure 2: Keep background and copy, add left emphasis border.

The two versions compare the effect of small-area emphasis without changing the meaning of the status itself.

☐ Without the color border, the wait reason and handler are still understandable.

☐ Border purpose is clear and does not conflict with adjacent blocks.

☐ The page uses this emphasis only on areas that need attention.

6 Application & Practice

Write one prompt each for pending approval, pre-release failure, and verification completion. First ensure the text independently explains the state, then decide whether an emphasis border is needed.

Deliver the three prompts with their usage rationale, and compare whether information remains complete after removing the border.