nw-ux-web-patterns

# Web UI Patterns Actionable web interface patterns for requirements gathering and design review. Use when the target platform is web (browser-based applications). ## Navigation Patterns | Pattern | When to Use | When to Avoid | |---------|-------------|---------------| | **Top navigation bar** | 5-7 primary sections, marketing/content sites | Deep hierarchies with 20+ sections | | **Side navigation** | Complex apps with many sections, admin dashboards | Simple sites with few pages | | **Breadcrumbs** | Deep hierarchies, e-commerce categories | Flat site structures | | **Command palette** (Cmd+K) | Power user tools, developer-facing apps | Consumer apps targeting non-technical users | | **Tab bar** (mobile) | 3-5 primary destinations | More than 5 destinations | | **Hamburger menu** | Secondary navigation, mobile space constraints | Primary navigation users need frequently | | **Mega menu** | Large sites with categorized content | Simple sites, mobile interfaces | **Navigation must answer three questions**: Where am I? Where can I go? How do I get back? Key principles: consistent placement across all pages | highlight current location | limit primary nav to 5-7 items (Hick's Law) | provide search as alternative for content-heavy apps ## Form Design ### Layout - Labels above input fields (highest completion rates in eye-tracking studies) - One column layouts outperform multi-column for most forms - Group related fields with visual proximity and clear section headings - ...