Design

How research and usability principles shape planning, capacity decisions, alert review and reporting.

Start with the decision

Program owners, delivery teams and service providers need to see what needs attention, choose an action and understand its result. The interface puts that work ahead of configuration.

Familiar labels and clear next actions reduce the effort of working out how a page behaves. Steve Krug: Don’t Make Me Think.

Decision	Product application
Work first	My Work gathers assigned work and decisions. Portfolio gives the wider delivery view. Each view has a distinct purpose.
Visible context	Customer, site, program and time range stay close to the result. A useful number needs enough context to explain its scope.
Measure the task	Review whether people can find affected work, resolve a shortage and share a report. A clean screenshot alone cannot establish usability.

Keep context through the workflow

Navigation follows the work: review delivery, inspect a cause, change the plan and return to the same scope. Separate public guidance helps people learn without adding steps to daily work.

Recognition and a clear way back reduce the need to remember earlier screens. Nielsen’s usability heuristics.

Decision	Product application
Direct destinations	Portfolio, Capacity, Analytics and Alerts have their own routes. Links to affected work carry the relevant scope.
Reference pages	FAQs show answers and search without a section sidebar. Longer Docs, Specs and Design pages use section links for lookup.
Return paths	Inspectors add detail beside the current task. Closing an inspector should return focus to its trigger and preserve the list position.

Make dense information readable

A restrained type scale and repeated spacing help readers scan a large amount of work. Headings establish the page structure; body text carries facts and controls.

A clear visual hierarchy supports scanning and makes the next useful action easier to find. Steve Krug: Don’t Make Me Think.

Decision	Product application
Typography	Newsreader marks page and section headings. Inter supports compact labels, tables and forms. Necessary detail must remain readable.
Layout	Related controls sit together. Comparable values align in columns. Full-width titles use the available space and wrap at narrow widths.
Restraint	Spacing and borders group related content. Extra badges, repeated labels and empty panels add reading cost without helping a decision.

Show what each status means

Planned dates, forecasts and recorded completion answer different questions. Capacity needs also differ from delivery risk. The interface keeps these facts separate.

Status must be perceivable without color alone. Web Content Accessibility Guidelines: Use of Color.

Decision	Product application
Dates and state	A forecast describes an expected date. Recorded completion describes saved progress. Neither establishes a security outcome.
Zero and unknown	Zero means a measured absence. Missing evidence stays unavailable, and a failed read stays an error. It must not become a zero.
Color and text	Color helps locate urgent items, but labels retain the meaning. This supports readers who cannot distinguish the colors.

Compare in tables and act in place

Tables support comparison across many records. Stable columns let readers compare dates, scope, urgency and state without rebuilding each record from a line of metadata.

Secondary options can be deferred. Facts needed for the current decision should remain visible. Nielsen: Progressive Disclosure.

Decision	Product application
Similar alerts	Similar to starred uses separate columns for publication date, organization, site, alert, publisher and match. Sorting and pagination use the same records.
Row actions	Compact icon actions keep the row readable. Each control retains an accessible name, a focus state and the same action across views.
Secondary detail	An inspector holds the full advisory and evidence. Essential scope and affected programs stay visible in the result that needs a decision.

Choose a view that answers the question

A chart should help compare, locate or track something specific. Its title, measure, units and time range explain what the marks represent.

Visible state and feedback connect a control to the result of using it. Nielsen’s usability heuristics.

Decision	Product application
Capacity	Needed and spare days share the same week and scope. The default opens the first forecast week with a shortage; an explicit week choice is preserved.
Alerts	Publication date describes the source event. Date collected describes when the application observed it. The date selector keeps those questions distinct.
Linked review	Review alerts selects the urgent records and moves focus to their worklist. A chart selection must lead to work that can be inspected and acted on.

Carry meaning into reports

A report combines selected views with authored text for a named audience. Scope, dates and units need to survive the move from the working screen to a saved edition.

User control and visible feedback matter at handoffs as well as during editing. Nielsen’s usability heuristics.

Decision	Product application
Composition	The canvas supports text, visuals, tables and page breaks. Layout stays under the author’s control because audiences need different levels of detail.
Format	Portable Document Format (PDF) has paper dimensions. Slides have an aspect ratio, and Web has a reading layout. Each format needs its own preview.
Sharing	The sender reviews the edition, recipients and link controls. A delivery receipt reports the delivery state; it does not imply that a recipient read it.

Support correction and recovery

An action is useful only when its result is clear. Loading, empty, saving, failed and conflicting states need distinct behavior so people can decide what to do next.

Error prevention and recovery reduce the cost of mistakes. Nielsen’s usability heuristics.

Decision	Product application
Drafts	Cancel leaves saved work unchanged. Undo and Redo apply to the current draft. Discard makes the loss of unsaved changes explicit.
Failed actions	Preserve useful input and name the recovery action. A failed save must not look complete, and retry must not silently duplicate work.
Conflicts	A newer saved version requires a visible recovery choice. Silent replacement would hide another person’s changes.

Keep the whole task accessible

Accessibility applies to the complete task, including editing, inspection and recovery. The current interface is English; other languages and right-to-left layouts require their own validation.

The accessibility requirements cover keyboard use, reflow, focus and understandable controls. Web Content Accessibility Guidelines 2.2.

Decision	Product application
Keyboard	Controls need visible focus and meaningful names. Move and Resize have keyboard controls, and dialogs return focus when they close.
Responsive layout	Text reflows at narrow widths. Dense tables and diagrams can use a named scroll region while essential actions remain reachable.
Validation	Check contrast, focus order, zoom, labels and task completion. Citing a standard does not establish that every screen conforms.

Teach inside the actual task

Help works best near the decision that prompted it. It should explain the expected result and recovery without creating another interface to learn.

Brief, task-focused help supports recovery when the interface alone is insufficient. Nielsen’s usability heuristics.

Decision	Product application
Contextual help	Help names the controls and result on the current screen. Docs provides the longer task instructions.
Demonstrations	Tours use actual product controls and routes. Isolated demo actions need realistic states while keeping demo changes separate from saved work.
Maintenance	Shared components keep labels and behavior consistent. Review a changed workflow in the application as well as in its tour and help.

Keep evidence separate from the decision

An advisory match helps a reviewer decide what to inspect. It does not establish local exposure or whether a security issue has been resolved.

Clear labels and inspectable evidence help people assess a result before acting on it. Nielsen’s usability heuristics.

Decision	Product application
Evidence	Publisher, source dates, affected products and available scores remain inspectable. Unavailable values stay explicit.
Review	A recommendation explains the match before work is added. The reviewer keeps control of that decision.
Lifecycle	Assigned means linked review work exists. Addressed means that work is complete. Those states describe recorded work, with the source evidence still available.