NNGroup Interaction Patterns · Overlays · Scrolling · Mobile & Responsive (13 patterns · Accidental overlay dismissal / Bottom sheets / Instructional overlays / Infinite scroll alternatives / Save scroll position / Scroll fading / Scrolljacking / Cookie permissions / Mobile permission requests / Mobile onboarding / Responsive breakpoints / Mobile-first drawbacks / Task switching)
Essentials of 13 patterns from the Nielsen Norman Group "Design Patterns" subset on overlays, scrolling, and mobile & responsive design. Five major themes: ① Overlays & Bottom Sheets — Accidental dismissal of mobile overlays (5 foolproof rules: use alternative patterns / partial coverage is better than full screen / do not stack / prominent X / built-in back button can close), three types of Bottom Sheets (modal / non-modal / expandable) and three major usability issues (no clear close control / stacking / obscuring background content), five key points for Instructional Overlays & Coach Marks (short and focused / no sequential chains / visual-first / distinguishable from real controls / scannable). ② Scroll Behavior — 3 alternatives to infinite scroll (Load More button / Integrated Pagination / classic pagination), Save Scroll Position (should almost always be saved · 30–60 minute exception · reset for frequently updated content · least intrusive default), Scroll Fading (100–400ms · trigger only once · one element at a time · use cautiously on mobile), Scrolljacking (7 findings + 7 best practices + usability testing method, only collapse content below / leave a normal scrolling area / do not change direction / disable on mobile / sticky navigation as an escape hatch). ③ Mobile & Responsive — Responsive Breakpoints (4 tiers: <500px 4 columns / 500–1200px 8 columns / 1200–1400px 12 columns / 1400+ 12 columns, 2–3 main breakpoints), Mobile-First Content Dispersion drawback (13 test sessions · negative impact on desktop), Task Switching (serial not parallel · split screen / picture-in-picture / focus mode / fault tolerance). ④ Mobile Onboarding — Mobile App Onboarding (skip onboarding if possible · three components: feature promotion / personalization / operational guidance · interactive walkthroughs > card tutorials), Mobile Permission Requests (clear benefit copy +12% acceptance rate · contextual timing · support revocation · reject dark patterns). ⑤ Cookie Permissions (GDPR default reject · 5 user types · 7 guidelines · reject dark patterns). Audience = product managers, in-line terminology explanations, when to use / how to choose / counterexamples.