This set of notes comes from NNGroup’s "Design Patterns"Overlays / Scrolling / Mobile & Responsive subset, covering 13 patterns across three sections. They actually revolve around one core thread:When interfaces "cover the content" (overlays, bottom sheets, instructional overlays, Cookie popups, permission popups) or "move" (infinite scroll, scroll fading, scrolljacking, breakpoint reflow), users are most likely to get lost, make mistakes, and lose their work.
Three sentences to grasp the big picture first:
- Overlay = A temporary layer that floats above the current content(menus, product details, shopping carts, prompts). Its biggest flaw is inconsistent closing methods— users cannot guess whether they should tap the X, tap the empty area, or press the back button; one wrong guess closes the whole page or even the entire browser, and all work is lost.
- Scrolling is the user’s most automatic, least thought-through action. Once you change its speed/direction (scrolljacking) or make content fade in and out (scroll fading), users immediately get lost — unless that "movement" has real functional value.
- Mobile-First is a good trend, but copying it wholesale to desktop causes "content dispersion": large images, large text, and large whitespace spread information everywhere, forcing desktop users to scroll frantically.
The full text has five sections: Overlays & Masks → Scroll Behavior (infinite scroll · position saving · fading · jacking) → Mobile & Responsive (breakpoints · mobile-first drawbacks · task switching) → Mobile Onboarding (onboarding · permission requests) → Cookie Permissions. Each section provides core principles / Why / counterexamples.
1. Overlays & Masks: Too many floating layers cause chaos (Overlays, Bottom Sheets & Coach Marks)
This section covers three patterns —accidental dismissal of general overlays, bottom sheets (a special case of overlays), and instructional overlays (overlays used for teaching)— which share the same root problem: users cannot distinguish floating layers from real pages, and closing the wrong one loses their work.
1.1 Accidental Dismissal of Overlays on Mobile
Core principle: Overlays are everywhere on mobile (navigation menus, bottom sheets, product details, shopping carts, in-app browsers), but closing methods are all over the place(tap X, tap outside the layer, swipe down, press the system/browser back button), and users cannot predict which one will produce the desired result — one wrong guess, at best returns them to the wrong page, at worst closes the entire browser and loses all navigation history.
Three typical problems:
| Problem | How it happens | Real counterexamples |
|---|---|---|
| ① Choosing the wrong closing method | Closing gestures differ across apps, so users guess based on habit | LinkedIn Android: When users press the system "back" in the career menu to go up one level, they are instead jumped directly to the home page; Walmart: When users tap the large X in the top left to close the review layer, they instead close the entire in-app browser and return to Instagram |
| ② Work loss | Incorrect closing clears the current navigation/selections | Overstock sequential menu (select main category first, then subcategory): an accidental tap outside the menu closes it and loses the selected subcategory |
| ③ Stacked layers amplify confusion | Multiple floating layers stack up, and users cannot tell which layer they are closing | Google Maps: After viewing restaurant details, swiping down to return to the list instead closes all layers at once, bouncing straight back to the initial map view |
5 foolproof design rules(in priority order):
| # | Practice | Why |
|---|---|---|
| 1 | Prioritize alternative patterns; avoid overlays whenever possible | Only information requiring immediate context (such as a restaurant list next to a map) is suitable for a floating layer; content like product details/reviews can perfectly well be carried by an independent page(Revolve) or an Accordion(Nordstrom), eliminating accidental dismissal at the root |
| 2 | Partial coverage is better than full-screen coverage(Partial > Full-Page) | Partial coverage (leaving surrounding background visible, e.g., Gmail, Neiman Marcus) lets users recognize at a glance that "this is a floating layer, not a new page," so they will not try to close it with the browser/phone back button.But use full screen when content is long enough to require scrolling, to avoid accidentally touching the background while scrolling |
| 3 | Do not stack multiple overlays | Stacking is the biggest amplifier of accidental dismissal |
| 4 | Place a prominent close button (X)— especially for bottom sheets | You can support the swipe-down gesture at the same time, but a prominent X is the fallback; do not rely on users guessing the gesture |
| 5 | Let the system/browser built-in back button also close the floating layer | This way, even if users habitually press back, they only return to the previous view as expected, rather than closing the whole page or the entire browser (the Dillard's website supports using the browser back button to close full-screen overlays) |
In one sentence: Overlays are normal on mobile, but they are inherently prone to accidental dismissal and work loss, especially when stacked. Use accordions/independent pages instead of floating layers if you can; if you must use them, make them easy to recognize (partial coverage) + easy to close (prominent X + back button + no stacking).
1.2 Bottom Sheets: The "bottom-anchored" special case of overlays
Definition: An overlay fixed to the bottom of the mobile screen that pops up when the user taps it; it belongs to Progressive Disclosure— it is normally hidden, and temporarily displays contextual information or related actions.
Two advantages: ① It preserves the current context without requiring a page jump, reducing memory load; ② It covers less than a full-screen dialog, so users can still reference background information while operating.
Counterintuitive point: Many people think "placing it at the bottom makes it easier to tap."Wrong— users hold their phones in wildly different ways,the middle of the screen is actually the easiest area to tap, and the bottom does not equal convenient.
Three types:
| Type | Behavior | Example | When to use |
|---|---|---|---|
| Modal | Users must handle/close it before doing anything else; the background is covered by a semi-transparent mask to indicate it is unavailable | UniFi: Pops up when a device is not connected to the internet; the background still shows the network name for reference | When users must resolve something first, but may need to reference background information |
| Non-Modal | Not mandatory; the popup sits at the bottom, and the background remains interactive | Google Maps: The bottom shows destination details + navigation actions, while the map can still be panned and zoomed | When you want to show details at the same time without interrupting main interface operations |
| Expandable | Tapping/swiping up can expand it to full screen (non-modal when collapsed, becomes modal when expanded) | Apple Podcasts: A small card shows the currently playing episode; dragging the top "Grabber" can expand it to full screen, swiping down collapses it | When information has two layers: "overview → details" |
Three major usability problems + countermeasures:
| Problem | Countermeasure | Counterexample |
|---|---|---|
| Lack of a clear closing method | ① Support closing with the back button in full screen; ② Place a prominent X button at the top(swipe gestures are error-prone and unfriendly to screen readers/users with motor impairments) | Pocket full-page bottom sheet can only be closed by swiping down; the grabber position easily triggers the system panel by mistake, and it requires a long swipe |
| Stacking multiple bottom sheets | Do not use bottom sheets as a replacement for normal page navigation— it is temporary UI, suitable for brief interruptions/branches, not for the main path | Walmart made product details a bottom sheet, then stacked another layer when tapping comments; the back button closes one layer, the X closes the whole stack, confusing users into pressing the wrong control |
| Obscuring important background content / Accidental closure of long content | Only use for short interactions; long content causes users to accidentally trigger a downward swipe while scrolling and close it unexpectedly | Soundbrenner: Two stacked layers from course list → course details; accidental downward swipe while browsing bounces straight back to the home page |
Core principle: A bottom sheet = a floating layer that is "short, temporary, and context-preserving."It works best for showing a small number of options/supplementary information; once content is long or requires multi-layer navigation, just use an independent page.
1.3 Instructional Overlays & Coach Marks
Refers to those new-user teaching layers in apps with "semi-transparent mask + arrows/handwritten text + prompts."Core contradiction: Users open apps to get things done quickly, not to read manuals — they will ignore prompts in a flash. So instructional overlays must feel helpful, not like an obstacle to skip.
5 key points:
| # | Key point | Do / Don't | Counterexample |
|---|---|---|---|
| 1 | Short and focused | Explain only a single interaction at a time; do not label every feature on one screen | Morningstar iPad: Labeled every feature on the full screen at once (many should have been self-explanatory), adding unnecessary cognitive load → YouTube Android: Focused only on the interaction of a single element |
| 2 | Avoid sequential chains of prompts | Do not force users to memorize multi-step operations with a chain of prompt screens | Makr iPad: Every new screen brought a string of pure-text prompts; users skipped them directly, with zero retention |
| 3 | Prioritize visual expression | Illustrations + minimal text to reduce reading load and memory burden | Makr redesign suggestion: Use a short prompt modal to present the main action with illustrations + a small amount of text |
| 4 | Clearly distinguishable from real controls | Prompts must be distinguishable at a glance from interactive elements (e.g., using handwritten/illustration style) | The Wimbledon iPad overlay was too polished, and users mistook prompt icons for tappable; the Ness iPhone prompt style clashed with hidden features |
| 5 | Concise, scannable content | Only explain main tasks or uncommon interactions; use visuals + refined text to improve scannability | —— |
Why: Instructional overlays are essentially cleaning up the mess for "interfaces that aren't self-explanatory."The best strategy is always to make the interface require no teaching; if you really must teach, keep it short, visual, and skippable. (The more systematic "skip onboarding if possible" is covered in Section 4 below, "Mobile Onboarding.")
2. Scroll Behavior: Don’t mess with the user’s most automatic action (Scroll Behavior)
Four patterns:alternatives to infinite scroll, whether to save scroll position, scroll fading, scrolljacking. Shared principle —scrolling is the user’s most fixed, least thought-through behavior; any change to it must have real functional value, otherwise it is pure disruption.
2.1 3 Alternatives to Infinite Scrolling
Infinite scrolling (automatically loading the next batch when the user scrolls to the bottom) has several longstanding problems: the never-ending content stream makes it hard for users to get a clear view of the whole page, it easily creates the illusion that "there is no more content," and users can never reach the page footer (the footer is always out of reach). Here are three alternatives:
| Approach | Benefits | Drawbacks | Best for |
|---|---|---|---|
| ① Infinite scrolling + "Load more" button | Pauses the content stream (so users can see the full page clearly), avoids the completeness illusion (clearly indicates more content below), and gives low-bandwidth/throttled users control | Requires one extra click, adding interaction cost, which may reduce content consumption and prompt users to navigate away | When you want to retain a smooth scrolling feel while providing clear boundaries |
| ② Integrated Pagination (infinite scrolling with integrated pagination) | Page numbers act as navigation markers(helping users remember "which page they are on," jump quickly, and skip unwanted content) | Users still cannot reach the page footer; the pattern is relatively new, so users may be confused before they become familiar with it | Long content where users need to return to previously viewed items |
| ③ Classic Pagination | Splits content into multiple pages, solving the vast majority of usability problems with infinite scrolling | Breaks continuity (the experience feels less smooth), and extra clicks slightly increase interaction cost | Task-focused content that requires precise positioning |
How to choose: There is no one-size-fits-all solution; weigh the pros and cons of each approach based on "site context + user goals."
2.2 Scroll Position: You Should Almost Always Save It
The problem is called "Pogo Sticking": When users go from a list page to a detail page and then return, the page jumps back to the top instead of staying at the original position, forcing users to scroll again — needlessly increasing interaction cost (in research, Spotify’s podcast browsing behaved this way).
Core principle: You should almost always save scroll position, especially when "returning within the same session + content has not changed," where it provides the most value (e-commerce price-comparison scenario: Muji returns users directly to their previous browsing position when switching between detail and list views; Ravelry returns users precisely to page 8 when they enter a detail page from a paginated list on page 8 and then go back).
But there are exceptions — you should "reset" the position in these cases:
| Exception | Why reset | Example |
|---|---|---|
| Content updates frequently | Keeping the old position would cause users to miss new information | When returning to the chat interface in The Score sports app, it automatically scrolls the latest messages into view and uses an animation to indicate that content has updated |
| User has been away for too long (over ~30–60 minutes) | The longer the time away, the more likely users have forgotten their position and purpose before leaving | When a mobile browser has many tabs open and the user returns hours/days later, the page automatically refreshes and resets to help users rebuild context |
When intent is unclear, choose the least intrusive default: generally = save position by default + provide a quick shortcut to "jump to latest"(such as a fixed input box / "Jump to latest message" button).
Counterexample: ChatGPT jumps to the bottom every time users switch conversations, interrupting the rhythm of users who are reading content above — a better approach would be to preserve position and offer a "Jump to latest" option.Core principle: Scroll position is a detail that "no one notices when done right, but is extremely annoying when done wrong"; judge based on content type, update frequency, and user behavior.
2.3 Scroll Fading: Elements Fade In and Out as the User Scrolls
Definition: When the user scrolls to a certain point, it triggers elements to fade in or out (often used to separate information blocks and help users process content gradually).The difference from scrolljacking is critical— fading does not change your scrolling action (it only triggers an animation), whereas scrolljacking changes scroll speed or direction. The two can be combined but must be used with extreme caution (see 2.4).
Use cases: Guiding browsing through long pages, saving bandwidth with lazy loading, presenting supporting information in a timely manner (Crypto.com pops up a mobile notification when scrolling to the "Security" section), and enhancing credibility (UT Austin’s real-time counter creates a sense of "live updates").
Research findings + best practices:
| Finding / Practice | Key point |
|---|---|
| Trigger animation only once | After an element fades in,keep it visible so users can return to reread or compare; counterexample: Crypto.com’s online calculator output repeatedly appears and disappears with fading, so users cannot view the result |
| Avoid the illusion that "content is complete" | Too much white space above or interruptions by ads will make users mistakenly think they have reached the end;reduce white space + show a corner of the next section to encourage continued scrolling (Crypto.com case: return-rate information was hidden below what looked like a blank area, and users almost thought there was nothing there) |
| Text should be concise and clear | Short, strong text + animation is easiest to understand (Apple Card was well received); counterexample: MagicLinks had a long sequence of fading in and out text, forcing users to reread |
| Slow loading hurts brand perception | If fading images load slowly, users will become suspicious of the content (Cigna case); be sure to load quickly |
| Do not add fading to scrolljacked pages | Combining the two = excessive visual motion + loss of control = explosive cognitive load |
| Fade speed 100–400ms | If it is too slow, users scrolling quickly will skip content |
| Fade in only one type of element at a time | Do not fade in text and images at the same time (Apple.com fades text and images alternately, which guides more effectively) |
| Apply the Gestalt principle of proximity/closure | Reduce spacing between content blocks and reveal part of the next block to guide natural downward scrolling |
| Avoid on mobile as much as possible | Research shows that fading has more severe usability problems on mobile |
Core principle: When used correctly, fading can improve readability, brand feel, and perceived loading speed,but when used incorrectly it seriously harms the experience — so use it "sparingly and quickly", only to guide and separate content.
2.4 Scrolljacking: A High-Risk Pattern
Definition: Changing the normal speed or direction of page scrolling (even forcing horizontal scrolling), or overriding scrolling behavior to trigger animations/extra content,violating users’ default expectation of "vertical, constant speed, following input", and weakening their sense of control (Apple website: scrolling does not move the page down, but instead triggers text/animations to appear).
Why some people use it(three legitimate motivations): ① Break down information (Apple Watch Ultra gradually shows 8 feature details to avoid overload); ② Guide narrative/progressive disclosure (BBC scrolls to show before-and-after comparison images of an explosion); ③ Convey brand personality (Therabody uses it to reinforce an "innovative" image).
7 research findings:
- Scrolljacking causes disorientation— especially when it covers most of the content, users think the page is broken and refresh or exit (Crypto.com full-page jacking left all users disoriented).
- Tolerance is higher when it has functional value(such as BBC’s gradual disclosure of relevant information), but some people are still confused.
- Faster scroll rates are better— too slow is tiring, too fast causes users to miss information; testing is needed to find the optimal rate.
- Task-focused users are the most impatient(scrolljacking on Reachdesk and UT Austin severely interfered with goal-oriented tasks).
- Changing direction + dynamic text at the same time = the worst experience(all users felt uncomfortable in ReachDesk testing).
- It is worse on mobile— small screens and slow loading amplify the problems, and on some sites the navigation menu is not even visible on mobile.
- Sticky Navigation is an escape hatch— when scrolljacking makes users lost, persistent navigation is a key tool for regaining control.
7 best practices: ① Only use it to progressively disclose valuable information(do not add complexity for complexity’s sake); ② Test and optimize scroll rate; ③ Keep a normal scrolling area on the page to improve familiarity and sense of control; ④ avoid changing scroll direction;⑤ Limit the amount of text(do not make users switch back and forth between reading and scrolling); ⑥ avoid using it on mobile;⑦ Only place it below the fold, do not hijack scrolling at the top and block the main task; ⑤ only collapse content below the hijacked section.
How to decide whether to use it: It is suitable for media storytelling / brand showcase / product stories and other visual-experience-focused contexts;it is not suitable for efficiency-focused products such as finance, education, SaaS, and tools(task-focused users are extremely sensitive to interruptions). Even when designed well, it must undergo thorough user testing and functional verification.
Appendix: What method to use for verification— The quality of scrolljacking is judged by Usability Testing (a qualitative method): Recruit real users to perform real tasks (understand certain information / find specific content / compare differences between two sections), and observe their immediate behaviors such as scrolling, pausing, going back, getting lost, and refreshing. It can capture "micro-behaviors during scrolling" (points of disorientation, reading breakpoints, operation pauses) that expert reviews, interviews, and A/B testing cannot see; its limitation is small sample size with no statistical significance, but it can reveal deep experience problems. (For details on usability testing methodology, see NNGroup Usability Testing and the Ten Usability Heuristics (complete list of 10 heuristics · application to complex apps · user pleasure hierarchy · testing methods: 5-user rule / recruitment / remote testing / task scenarios / step-by-step tasks / attitude vs. behavior / 4-step analysis / small-sample error / competitive evaluation))
III. Mobile & Responsive: Rearrangement Pitfalls from Phone to Desktop
Three patterns:Responsive breakpoints, drawbacks of mobile-first on desktop, task switching.
3.1 Breakpoints in Responsive Design
Several basic concepts:Grid= the structural skeleton for page layout, composed of columns, gutters, and margins;Layout= the arrangement of content and UI elements on the screen;Breakpoint= the point at which the layout must switch when screen width reaches a certain critical value (for example, when resizing a browser window, the layout changes from 4 columns to 2 columns). In practice, a "breakpoint" often refers to a width range(minimum to maximum), rather than a single size (for example, a desktop breakpoint might be 1200–1400px).
Number of breakpoints: More breakpoints can adapt to subtle size changes, but with limited resources, teams usually set only 2–3 main breakpoints.
Four common breakpoints(T-shirt size naming convention):
| Breakpoint category | Screen range | Number of grid columns | Device examples |
|---|---|---|---|
| Extra-small | Less than 500px | 4 columns | Mobile phones |
| Small | 500px – 1200px | 8 columns | Tablets |
| Medium | 1200px – 1400px | 12 columns | Laptops |
| Large | 1400px and above | 12 columns | Large monitors |
Common layout changes: Navigation changes (left-side navigation collapses into a hamburger menu from medium to small screens), column collapse (right column folds into the main content area), visible content changes (the number of cards/products per row increases or decreases with column count).
Real-world examples: Warby Parker: three columns on medium screens → single column on small screens; IBM: left navigation visible by default on large screens → collapses to top hamburger on medium screens; Airbnb: list + map displayed together on large screens → list shown by default on small screens, map folded behind a button.
Design tips:① Define breakpoints(based on users’ common device ranges, establish naming conventions, update with device trends such as adapting to large-screen phones); ② design with breakpoints in mind(optimize key content at each size, adjust layout fluidity, handle exceptions — for example, move important action buttons from the right column on large screens to a prominent position on small screens); ③ align with the development team on breakpoint definitions and design changes to ensure accurate implementation.
3.2 The Negative Impact of Mobile-First on Desktop: Content Dispersion
Core principle: Mobile-First (designing for phones first, then expanding to tablet/desktop) is a good trend, but when expanded to desktop it often leads to "Content Dispersion"— large images, excessive white space, and enlarged font size spread content too thinly and make pages too long, forcing users to scroll frantically.
Three overlapping causes: ① Mobile-first (improper expansion techniques); ② Minimalism (large amounts of negative space + simplified content, at the cost of longer pages and lower information density); ③ Large-image design (high-resolution images stretch out text content; for example, the Waze homepage image occupies nearly 2/3 of the viewport width, with extremely low information density).
Research:13 qualitative usability tests, comparing four prototypes — homepage/product page × dispersed layout/compact layout (dispersed prototypes were rebuilt and de-branded based on real pages such as Robinhood; the compact version used the same text content with higher density).
6 negative effects: ① Increased page length and interaction cost (finding information requires a lot of scrolling); ② Increased cognitive load (content is split across different viewports, forcing users to remember and scroll back and forth to compare; the compact version used a 2×2 grid so users could compare multiple items on the same screen); ③ Difficulty building a conceptual model; ④ Increased frustration; ⑤ Illusion of completeness (no prompt at the bottom of the screen that "there is more below," so users think they have reached the end); ⑥ Reduced credibility (users think information is hard to find or deliberately hidden).
But dispersion also has positive uses: ① Helps users focus on specific content (reducing on-screen content so they understand one thing at a time); ② Suitable for high-value images (when the image itself carries information, large images help users see details clearly).
5 design recommendations:① Optimize desktop presentation(important content should be easy to browse and scan on desktop); ② Evaluate image value(Prioritize large images that support contextual understanding; avoid decorative large images); ③ Keep related content cohesive(Keep content within the same viewport as much as possible to reduce backtracking scroll); ④ Avoid mobile-exclusive interactions(Use accordions and similar patterns sparingly, or replace them with presentations better suited for desktop); ⑤ Appropriately use dispersion(Display complex content in dispersed chunks to help users understand it piece by piece).
Conclusion: A minimalist dispersed layout can focus attention on key points, but on desktop it often only increases scrolling volume and cognitive load —Apply the mobile-first approach cautiously; do not make desktop users pay the cost.
3.3 Designing for Task Switching
Core principle: Web "multitasking" is a misconception— what people actually do is Serial Task Switching rather than true parallel processing. The brain cannot efficiently handle multiple tasks that draw on similar cognitive resources at the same time (even simple tasks like "reading + searching" are hard to do in parallel); every switch requires re-acquiring context, leading to divided attention and reduced efficiency.
Three major costs of serial switching: ① Increased error rate (easy to miss details; for example, writing emails while in a meeting leads to mishearing or typos); ② Reduced efficiency (hinders entry into the "flow" state); ③ Increased stress (the brain repeatedly refocuses → mental fatigue).
Interface patterns that support task switching:① Split Screen— Resizable sidebars let users handle multiple tasks simultaneously (Google Workspace, Zoom; side-by-side multi-window arrangements on macOS/Windows maintain visual continuity); ② Picture-in-Picture— Video plays in a corner while the user does other things (checking the weather while watching YouTube); ③ Keep parallel tasks accessible— Users can still browse while waiting for a customer service reply (SF Travel); ④ Block distractions— "Focus Mode / Do Not Disturb" (macOS Focus Mode); ⑤ Automatic note-taking— AI tools (Otter.ai, Granola) capture meeting action items and Q&A to ensure no information is missed.
5 design recommendations:① Allow users to customize their workspace(Detachable panels, side-by-side views, collapsible modules; Zoom lets users drag and arrange chat/poll/note panels); ② Keep user orientation clear(Breadcrumbs, clear section titles, unambiguous button copy; Framer uses breadcrumbs to show the navigation path); ③ Support task parallelism(Users can still operate the interface during background uploads; Google Drive lets users browse and manage files while uploading); ④ Prevent and recover from errors(Add confirmation dialogs for high-risk actions, provide undo options, give clear error messages, and auto-save unfinished content; Gmail "Undo Send").
IV. Mobile Onboarding: Do Not Disturb Unless Necessary (Onboarding & Permission Requests)
4.1 Mobile-App Onboarding
Definition: The process of helping users become familiar with a new interface (feature promotion, personalization settings, operation guidance); it serves not only first-time users, but also guides existing users when new features or interfaces are released.
Core principle: Skip Onboarding Whenever Possible. Why: ① It increases interaction cost (even if users choose to skip, it adds extra steps and lengthens task completion time); ② It creates memory burden (onboarding relies on users memorizing interface operations, but human memory is limited, so effectiveness is poor); ③ It may be completely useless (research shows tutorial-style onboarding does not significantly improve task completion efficiency).Countermeasure: Invest resources in improving interface usability instead of building complex onboarding flows.
When onboarding is truly needed: ① The app requires user information at launch (banking apps require registration/identity verification); ② Features are highly personalized (diet tracking requires weight information); ③ Unique features/flows (the first launch of mobile check deposit is worth introducing).
Three types of onboarding components:
| Component | Recommendation | Counterexample |
|---|---|---|
| Feature Promotion | Do not promote features on first launch; this type of information is better placed on the app store page or delivered via contextual prompts | Chase uses short, skippable card-style onboarding; Productive places feature promotions on the app store page rather than at first launch |
| Customization | Content personalization(selecting language/proficiency level) is suitable for first launch;visual personalization(color themes)is not suitable for first launch— most users choose the default, and extra choices only add cognitive burden | Reflectly forces users to select a color theme on first launch (unnecessary); Any.do moves theme selection to settings; Fitplan uses a short, skippable survey with a progress indicator to customize the experience (good example) |
| Instructions | Help users understand the interface,but should not be used to compensate for interface design flaws | See the three forms in the table below |
Three forms of instructional guidance(ranked by recommendation level):
| Form | Advantages | Disadvantages | Recommendation level |
|---|---|---|---|
| Decks of Cards | Conveys basic information briefly | Places high demand on memory, makes the interface feel complex | Not recommended(What the Forecast?!! uses it to explain standard icon positions, which wastes time) |
| Instructional Overlays | Presents information tied to operations, more intuitive | Easy to overuse, increases distraction | Use with caution (NOAA Weather uses too many prompts that cause interference; see §1.3 for details) |
| Interactive Walkthroughs | Lets users learn by doing, effectively reduces cognitive burden | Redundant when used for simple flows | First choice(Temple Run 2 gives timely prompts in simple levels to let users practice actual operations; MindNode lets users create a simple mind map to familiarize themselves with controls, and the walkthrough can be skipped) |
Core principle: People remember doing better than watching —use contextually relevant prompts and interactive walkthroughs instead of dumping a stack of cards at the start. All onboarding must be skippable.
4.2 Mobile-App Permission Requests
Definition: Authorization dialogs that pop up before an app accesses device resources (camera/location/microphone) — the format is determined by the operating system, but design affects whether users accept. Significance: Protects privacy (gives users control over sensitive data) + builds trust. Common problems: Unreasonable explanations, poor timing, no support for reversing decisions.
Three major design considerations:
① Copy:Clearly explaining the reason increases acceptance rates by an average of 12%. Writing guidance — avoid technical jargon (use plain language),emphasize user benefits(do not just list features that depend on the permission), avoid empty phrases (such as "improve your experience").
- OK: "Snapchat needs access to your camera to take photos."
- Better: "Allow Snapchat access to your camera so you can take photos and share them with friends."
- Positive example Instagram (when requesting photo library access, it clearly states "share photos" and "save edited photos"); counterexample United Airlines (vague copy such as "scan travel documents" with no clear benefit).
- Additional advice for Android: Android does not have iOS's "Purpose String", so a pre-permission introduction screen should be added to explain the reason in advance (Any.do explains "access contacts = call-back reminders" at launch, but requesting it on first launch may be poor timing).
② Timing:Contextually relevant requests feel most natural (only pop up the recording permission when the user taps the microphone button — positive example from Waze for Android). Counterexamples: Google Maps for iOS suddenly pops up media library permission when the user is about to tap "Start navigation" (wrong timing, the user is in a hurry); Viber pops up 5 permissions in a row on first launch, causing fatigue and resentment.Optimization: Do not request all permissions right after installation; only request permissions needed for core features; request related permissions when the user tries to use a specific feature; provide value first before requesting non-critical permissions.
③ Decision Reversal: Users may first deny a permission and later want to enable it. Design should — when a feature is unavailable due to missing permissions,clearly explain the impact + and provide a direct link to device settings(Venmo: when camera permission is denied, it shows an error prompt + an "Open Settings" direct link; the only improvement would be making the link look more like a link instead of being mistaken for plain text).
Avoid Dark Patterns: Counterexample WeChat disguises permission requests as informational dialogs, recommends "OK", and hides the reject option — this is unethical and destroys trust.Recommendation: Provide sufficient information for users to choose freely + respect their decisions + design easy-to-use reversal flows.
Three-sentence summary: Clear content (plain language + explain benefits), appropriate timing (request in context, do not interrupt), support reversal (adjustable at any time).
V. Cookie Permissions 101
Background:Cookie = Small data files that websites store in your browser, recording preferences/history/interactions (used for personalization, analytics, saving login state/shopping carts, targeted advertising, third-party integrations, cross-site tracking to build interest profiles). With the introduction of regulations such as GDPR, CCPA, websites must obtain user consent before using/storing data;GDPR requires active opt-in from users (default is rejection), and users should be able to select by category (analytics/marketing/third-party).
Research:A UX study with 10 participants globally, covering mobile and desktop, identified 5 types of users:
| User type | Behavior |
|---|---|
| Rejecters | Adjust settings every time, share as little data as possible |
| Skeptics | Only share data with familiar/trusted websites |
| Tech-savvy users | Accept all cookies, but clear them afterward |
| Impatient users | Quickly accept all to dismiss the popup |
| Sharing enthusiasts | Willing to share data in exchange for personalized experiences |
Understanding these types helps you identify which designs will alienate users —only offering "Accept all" makes cautious users feel coerced.
7 design guidelines(Users generally find cookie popups annoying; good design can reduce this frustration):
| # | Guideline | Counterexample / Positive example |
|---|---|---|
| 1 | Provide clear cookie choices (Accept all / Reject all / Necessary only / Manage settings) | Lack of choices makes users feel out of control and lose trust; Raidboxes has insufficient granularity and does not allow personalized selection |
| 2 | Make options directly visible, avoid multi-layer clicks | Harper's Bazaar requires users to click "Learn more" to see full options, which hinders quick decision-making |
| 3 | Avoid deceptive design (dark patterns) | Vague labels ("Do not sell my personal information"), high-contrast "Accept all" buttons, ambiguous X/close buttons; Skillshare uses vague toggle switches that leave users uncertain |
| 4 | Use easy-to-scan descriptions, avoid similar/ambiguous option names | Cricut has two options both starting with "Accept" with no obvious difference, giving the impression of "no real choice"; Fenwick & West makes clear distinctions to support quick decision-making (positive example) |
| 5 | Describe options concisely (e.g., with bullet points) | Wellcome.ac.uk uses short bullet points to describe different cookie types (positive example) |
| 6 | Minimize popup size as much as possible | Overly large popups cover content; small popups let users view content first before deciding; the UK government website uses a large banner but places it at the top of the page, creating the illusion that it "covers less" (a trick, but effective); DHL uses a modal banner that blocks navigation until a decision is made |
| 7 | Avoid overlapping multiple popups | The Ordinary pops up a cookie notice + coupon offer + chat prompt at the same time, making users feel "attacked"; some users mistake the right-side newsletter subscription for the cookie box |
Core principle: Cookie permissions are not just a compliance requirement, they are also an opportunity to build trust— respecting privacy + improving experience = increased loyalty.
Sourced from NNGroup Topics / Design Patterns - Design Patterns (Overlays · Scrolling · Mobile subset, 13 patterns). Among these, Scrolljacking originally appeared in two files in the source batch (the conceptual version "Introduction to Scroll Hijacking" + the methodology version "Scroll Usability Testing"), which have been merged into section §2.4. For the remaining subsets of design patterns (feedback/dialogs, navigation/search), see NNGroup Interaction Patterns · Feedback · Dialogs · Notifications · Loading · Prompts · Empty States · Data Presentation (15 patterns · When to use / How to choose / Counterexamples) / NNGroup Interaction Patterns · Navigation & Search (25 patterns · Global navigation / Local navigation / Breadcrumbs / Hamburger menus / Context menus / 17 menu guidelines / Tabs / Accordions / Footers / Sticky headers / Tables of contents / In-page links / Spatial memory / Site search / SERP / Filters / Pagination / Tree testing); for mobile and tablet special topics see NNGroup Mobile and Tablet Design (19 articles · Touch physics / Thumb zone Fitts' law / 15-second micro-sessions / Bottom sheets / Accidental overlay dismissal / Tab carousels / Mobile form checkout / Time zone selection / Data tables / Three states of system status / Error message scoring / 5 push notification mistakes / Ineffective onboarding tutorials / Scattered responsive content / 13 guidelines for QR codes / 6 smartwatch form factors / Banner blindness); for the 10 usability heuristics and usability testing methods, see NNGroup Usability Testing and the 10 Usability Heuristics (complete table of 10 heuristics · Application to complex applications · User delight hierarchy · Testing methods: 5-user rule / Recruitment / Remote testing / Task scenarios / Step-by-step tasks / Attitude vs. behavior / 4-step analysis / Small-sample bias / Competitive evaluation). Images/videos (spotify_resets.mp4, ritual.mov, Apple/BBC/Crypto scroll demos, etc.) and original documents are retained in sources.
Sources and related materials
- NNGroup Interaction Patterns · Feedback · Dialogs · Notifications · Loading · Prompts · Empty states · Data presentation (15 patterns · When to use / How to choose / Counterexamples)
- NNGroup Interaction Patterns · Navigation and Search (25 patterns · Global navigation / Local navigation / Breadcrumbs / Hamburger menus / Context menus / 17 menu guidelines / Tabs / Accordions / Footers / Sticky headers / Table of contents / In-page links / Spatial memory / Site search / SERP / Filters / Pagination / Tree testing)
- NNGroup Mobile and Tablet Design (19 articles · Touch physics / Thumb zone Fitts' law / 15-second micro-sessions / Bottom sheets / Accidental overlay dismissal / Tab carousels / Mobile form checkout / Time zone selection / Data tables / Three states of system status / Error message scoring / 5 push notification mistakes / Ineffective onboarding tutorials / Scattered responsive content / 13 guidelines for QR codes / 6 smartwatch form factors / Banner blindness)
- NNGroup Usability Testing and the 10 Usability Heuristics (complete table of 10 heuristics · Application to complex applications · User delight hierarchy · Testing methods: 5-user rule / Recruitment / Remote testing / Task scenarios / Step-by-step tasks / Attitude vs. behavior / 4-step analysis / Small-sample bias / Competitive evaluation)