66 lines
1.6 KiB
Markdown
66 lines
1.6 KiB
Markdown
# UI Information Architecture
|
|
|
|
## Page Structure
|
|
|
|
The page should contain:
|
|
|
|
1. header
|
|
2. snapshot metadata strip
|
|
3. compact section navigation
|
|
4. ordered content sections
|
|
|
|
## Header
|
|
|
|
Show only essential context:
|
|
|
|
- product name
|
|
- target host if present
|
|
- collected time if present
|
|
- source type and protocol if present
|
|
|
|
## Section Order
|
|
|
|
Preferred order:
|
|
|
|
1. `board`
|
|
2. `firmware`
|
|
3. `cpus`
|
|
4. `memory`
|
|
5. `storage`
|
|
6. `pcie_devices`
|
|
7. `power_supplies`
|
|
8. `sensors`
|
|
9. unknown sections
|
|
|
|
## Section Presentation
|
|
|
|
- singleton object sections render as key-value table
|
|
- array sections render as compact data tables
|
|
- sensors render as separate subtables for `fans`, `power`, `temperatures`, and `other`
|
|
|
|
## Visual Rules
|
|
|
|
- status badges:
|
|
- green for `OK`
|
|
- yellow/amber for `Warning`
|
|
- red for `Critical`
|
|
- gray for `Unknown`
|
|
- light gray for `Empty`
|
|
- do not color arbitrary non-status fields
|
|
- keep tables dense and scan-friendly
|
|
|
|
## Complexity Limits
|
|
|
|
- no multi-tab application shell
|
|
- no dashboard analytics
|
|
- no wizard-like workflow
|
|
- no collector controls
|
|
|
|
## Accessibility
|
|
|
|
- tables must remain readable on desktop and mobile
|
|
- section navigation must work without JavaScript
|
|
- color must not be the only status indicator; pair it with a shape or glyph
|
|
- table `status` columns may use icon-only cells and an empty header when that improves scanability, but the raw status value must remain available via accessible labeling
|
|
- table sections with `severity` may add a separate leftmost icon-only column for fast scanning while keeping the textual `severity` field visible
|