| 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 | The scanner opens the camera and immediately follows the first decoded URL without showing the destination. | 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 button labelled Browse sits under Documents with no hint about accepted formats, size limit, or whether the selected file was uploaded. | A page says Security check with one empty field, no factor label, no resend timing, and no recovery route. | 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 taps Scan receipt, sees why camera access is needed for scanning, grants access, scans the receipt, and can later revoke camera access from settings without losing account access. | 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 signs in from a new laptop, enters a code from an authenticator app, chooses not to trust the shared browser, and lands back on the requested workspace. | 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. | A user never receives an SMS code and can only keep pressing resend with no wait time, no alternate factor, and no support path. | 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 | Provide manual code, paste key, scan from photo, or assisted alternatives for users who cannot point a camera at a code. | Provide file upload, manual entry, or assisted alternatives for users who cannot use a camera. | Use a labelled region or dialog title that names the resource and feature, such as Allow location for route check-in. | Use a visible label that names the file purpose, not only Browse or Choose file. | Use a clear heading and label that names the factor and does not rely on placeholder-only code fields. | 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 | Opening the first decoded URL without showing the destination or risk. | 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. | Showing a code field with no factor label, destination, expiry, resend timing, or alternate method. | Using vague warning copy that does not say phishing, malware, certificate, insecure connection, dangerous download, or suspicious redirect. |