Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: extend AGENTS.md with human-computer interaction and gestalt principles

Browse Source
This commit is contained in:
DanielS
2026-07-18 04:09:00 +02:00
parent e8a2e62bec
commit 8959b6b885
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.agents/AGENTS.md
View File

@@ -5,13 +5,17 @@
- **Maintain Consistency:** Use uniform typography, spacing systems (e.g., 8-pixel grids), and color palettes across all pages to reduce user cognitive load.
- **Design Clear Visual Hierarchy:** Use size, weight, and strategic whitespace to make the primary action (CTA) stand out clearly.
- **Implement Single-Column Forms:** Keep form fields stacked in a single column for an easier, seamless input flow.
- **Optimize for Touch:** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile.
- **Optimize for Touch (Fitts's Law):** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile.
- **Apply Hick's Law:** Limit user choices to prevent decision paralysis. Simplify navigation and form inputs.
- **Chunk Information (Miller's Law):** Break down complex content into smaller, readable chunks (groups of 5-7 items max).
- **Structure via Boundaries (Law of Common Region):** Group related content within clear visible containers (like cards or border divisions).
- **Leverage F-Shaped Scanning:** Position critical branding and primary CTA paths at the top and left of layouts where human eyes naturally scan first.
## UI/UX Don'ts
- **Don't Let Aesthetics Compromise Usability:** Avoid choosing fancy fonts, hidden navigation menus, or complex animations if they make it difficult for users to find information.
- **Don't Use Color Alone to Convey Meaning:** Always pair colors with labels or icons (e.g., in error states) to accommodate color-blind users.
- **Don't Auto-Play Videos with Sound:** This is highly disruptive; give users full control over media.
- **Don't Overcrowd the Interface:** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text.
- **Don't Overcrowd the Interface (Whitespace mastery):** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text to reduce cognitive load.
- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
- **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation.