Design Principle
Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.
Principle
Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.
Design action
Show object name, status, and primary action at the top; group the body into summary, key attributes, history, and related objects.
Examples
Positive example: Customer, order, project, knowledge, and asset details have state, history, and related data. Counterexample: The detail page is only a stack of fields.
Apply when
Customer, order, project, knowledge, and asset details have state, history, and related data. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Show object name, status, and primary action at the top; group the body into summary, key attributes, history, and related objects.