| UI or UX | UI + UX - Camera or image-based QR detection, decode, validation, and action preview flow | UI + UX - Permission-gated live camera preview for creating and reviewing new photo or video media | UI + UX - Contextual operating-system or browser permission request for device resources, powerful browser features, private user data, or local capabilities | UI + UX - File selection and attachment control | UI + UX - Additional-factor challenge and recovery flow | UI + UX - Security-risk warning and safe interruption before unsafe navigation, download, submission, preview, or sensitive action |
| UI guidance | Render QR scan as a detection and decode flow with clear purpose, supported-format check, permission state, camera preview or delegated scanner handoff, aim guide, torch and camera controls, scan feedback, decoded summary, action confirmation, fallback entry, and privacy copy. | Render camera capture as a deliberate media-acquisition surface with purpose text, camera permission state, selected camera, live preview, privacy indicator, framing guide, capture button, shutter feedback, review preview, retake, crop or rotate, submit, cancel, and upload fallback. | Render a permission request as a contextual feature gate that names the resource, user action, immediate benefit, system prompt timing, available choices, and fallback before invoking the OS or browser permission prompt. | Render a visible label, persistent hint, native file chooser or equivalent button, accepted file formats, maximum file size, selected filename, uploaded status, remove control, and field-specific error message. | Render two-factor authentication as a focused additional-factor challenge with factor name, destination or protected action, delivery hint, code or approval input, resend timing, alternate factor, recovery-code route, trusted-device choice, and safe failure handling. | Render a security warning as a high-clarity interruption that names the detected risk, identifies the destination or object, explains the concrete threat, presents the safest action as the primary path, and separates any override behind deliberate risk detail. |
| UX guidance | Use QR scan when users can complete a task faster by pointing a camera or selecting an image that contains a QR code, and the decoded payload can be validated before the product acts on it. | Use camera capture when users need to create new visual evidence, scan a document, attach a receipt, capture damage, verify an object, or record a short video from a device camera. | Use permission request when a feature needs operating-system or browser authorization for resources such as location, camera, microphone, photos, contacts, notifications, Bluetooth, clipboard, motion sensors, or other powerful features. | Use file upload only when the service needs the original file and make expectations clear before the user opens the file picker. | Use two-factor authentication when the product needs stronger proof after a password, passkey, SSO return, risk signal, new device, or sensitive action. | Use security warning when a product, browser, operating system, or service has evidence that proceeding could expose credentials, install harmful software, leak sensitive data, bypass trust, or weaken account protection. |
| Good UI | A device-pairing flow says Scan the QR code on your thermostat, shows a square guide, offers torch and Enter code, then previews Pair thermostat TH-204 before connecting. | A receipt scanner asks users to Scan receipt, explains camera use, shows a live preview with document edges, captures a frozen preview, then offers Retake, Crop, Upload file, and Attach to claim. | A field service app asks for location only when the user taps Start route, explains that current location will verify arrival, then opens the system permission prompt and offers manual address entry if declined. | An evidence upload field says Upload bank statement, hints PDF, PNG, or JPG up to 10 MB, shows statement.pdf selected, displays upload progress, and offers Remove. | A code screen says Enter the 6-digit code from your authenticator app to continue to payroll settings, uses autocomplete one-time-code, shows Try another method, and explains recovery codes. | A browser interstitial says Deceptive site ahead, shows the suspicious domain, explains that attackers may steal passwords, and makes Back to safety the primary action while placing Visit unsafe site behind Details. |
| Bad UI | A camera permission denial leaves a blank panel even though paste code or scan from photo would work. | The page opens the camera on load, hides the active-stream indicator, and starts recording before users choose a task. | An app asks for location, contacts, photos, and notifications on first launch before the user knows why any resource is needed. | A failed upload clears other form answers or returns users to the start of the journey. | Attackers bypass the prompt through a direct endpoint, cached page, or remembered browser weakness. | A red page says Security issue with Continue as the only visible action. |
| Good UX | A user scans a warehouse label, sees the decoded asset ID and item name, confirms it is the intended pallet, and continues to inspection. | A user starts Scan receipt, grants camera access, sees Align the whole receipt, captures a photo, reviews blur feedback, retakes, then attaches the corrected image. | A user denies precise location, chooses approximate location instead, and the app still shows nearby pickup points with lower accuracy. | A user selects bank-statement.pdf, sees it queued, watches progress reach uploaded, removes it to choose another file, then submits after reviewing the rest of the form. | A user lost the phone, uses a single-use recovery code, receives a notification, and is prompted to add a replacement factor after reauthentication. | A user clicks a payroll link that visually resembles the company domain, sees the suspicious-domain warning, returns to the trusted site, and reports the link to security. |
| Bad UX | A scanner silently accepts an expired event ticket and the user learns it failed only at the final gate. | A user closes a capture sheet but the camera light stays on and the preview remains active in the background. | A user denies microphone access and the app loops the same system prompt every time they tap anything in the support screen. | A user selects a 28 MB scan, clicks Continue, and the page reloads with File failed but the selected filename and other answers are gone. | Attackers bypass the prompt through a direct endpoint, cached page, or remembered browser weakness. | A user sees a vague warning, assumes it is routine maintenance, proceeds, and enters credentials into a phishing page. |
| Best fit | Users need to decode a QR or barcode to pair a device, open a known destination, redeem a ticket, start payment, enroll an authenticator, join Wi-Fi, identify inventory, or import a short payload. | Users need to create new photo or video media inside the task. | A feature needs operating-system, browser, or device authorization to access location, camera, microphone, photos, contacts, notifications, Bluetooth, clipboard, motion sensors, storage access, or another powerful feature. | The service needs a document, image, scan, spreadsheet, media file, or other original file. | A sign-in, new device, risk signal, or sensitive action requires proof beyond the primary credential. | A threat signal indicates phishing, malware, deceptive site, unsafe download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, or account-security danger. |
| Avoid when | A typed code, link, NFC tap, saved account, or standard file upload is simpler and less privacy-sensitive. | Existing file upload, text entry, barcode input, or manual confirmation is sufficient. | The decision is consent to optional data use rather than access to a device or browser resource. | A typed answer, reference number, checkbox, or declaration would satisfy the task. | The user is only choosing an authentication method on the initial sign-in page. | The message is only a general severe consequence before a product action; use warning text. |
| Required state | Unsupported detector, missing scanner module, insecure context, or unsupported format state. | Unsupported browser or insecure-context state with upload or manual alternative. | Contextual request state tied to the user action that needs the resource. | Empty labelled state with requirements hint and choose-file action. | Initial additional-factor challenge with factor name, destination or protected action, and primary account context. | Safe path state with primary Back to safety, Cancel, Remove, Use trusted route, or Contact admin action. |
| Accessibility burden | Label scan, torch, switch camera, choose photo, paste code, stop camera, retry, confirm, and cancel controls visibly and programmatically. | Label capture, retake, switch camera, stop, upload fallback, crop, rotate, cancel, and submit controls programmatically and visibly. | Use a labelled region or dialog title that names the resource and feature, such as Allow location for route check-in. | Keep requirements in persistent hint text and associate them with the file input or upload button. | Support paste into one field for codes and avoid multi-field inputs that trap focus or break screen-reader reading order. | Use a heading and text that name the risk before the destination or details, so screen reader users hear the warning context first. |
| Common misuse | Using a camera capture flow that saves images when only the decoded QR value is needed. | Opening the camera automatically on page load or hover. | Asking for multiple resources at launch before the user has attempted the relevant feature. | Asking for a file when a typed reference number or simple answer would be enough. | Blocking paste or autocomplete for one-time codes. | Making Continue the primary or only visible action. |