Task-Based Link Hierarchy: UI Design Optimization #25

1 Requirements Goal

The requirement asks to display associated entry points — merge requests, pipelines, images, and logs — within a requirement detail view, highlighting the delivery path needed for the current task.

2 Initial Implementation

The first version rendered all clickable items (requirements, assignees, services, pipelines, settings) in the same bright blue. Related objects and action entries were listed together without visual distinction.

Figure 1: Multiple link types using similar emphasis.

3 Problem Analysis

3.1 Main Problem

When every entry has equal prominence, color can no longer signal the most important path. Object names, IDs, and auxiliary actions create visual competition.

The task context must be identified first. For example, when verifying a delivery, changes and pipeline entries are typically more relevant than low-frequency settings.

3.2 Design Principles

Inline links must be distinguishable from body text. In entry-heavy association lists, layout, font weight, and context can provide cues without applying equally strong color everywhere.

Restrained expression must still convey operability. Key entries cannot appear only on hover; keyboard and touch discovery must be supported.

4 Optimization Implementation

4.1 Entry Division

List each link type in the association area and select the key paths for the current task. Retain strong emphasis for primary entries; reduce visual weight for supporting entries.

Use precise labels that describe the destination — e.g., "View Logs", "View Change History" — to reduce ambiguous repeated "More" labels.

4.2 Style Implementation

The following CSS demonstrates the style division. Default state must also convey clickability through text, position, or other cues — not solely through interaction.

.primary-link { color: #2d61bd; }
.supporting-link { color: #687783; }
.supporting-link:hover,
.supporting-link:focus-visible { text-decoration: underline; }

4.3 Interaction Checks

Use real links for navigation; separate copy actions from opening objects. Verify keyboard focus, touch targets, and required click areas.

Check supporting colors against background and font size. The goal of weakening is to establish hierarchy, not to make normal links indistinguishable from disabled content.

5 Effect Acceptance

Figure 2: Emphasize the current association path; auxiliary entries use a more restrained style.

The number of links remains unchanged; the main change is visual division of labor.

☐ Key entries for the current task are clearly distinguishable.

☐ Supporting links still have reliable operation cues.

☐ Under keyboard and touch, necessary entries are discoverable without relying on mouse hover.

Interaction conditions must be validated on the actual page.

6 Application & Practice

Organize the five link categories in the requirement detail, pick the most important path for this delivery, then traverse each with the keyboard.

Deliver an entry division checklist that specifies default, hover, and focus expressions, and explains how supporting entries remain discoverable.