| UI or UX | UI + UX - Permission-gated live camera preview for creating and reviewing new photo or video media | UI + UX - File selection and attachment control | UI + UX - Contextual operating-system or browser permission request for device resources, powerful browser features, private user data, or local capabilities | UI + UX - Controlled reveal and re-hiding of masked sensitive values, secrets, tokens, credentials, identifiers, or private records | UI + UX - Temporary full-viewport modal task mode | UI + UX - Drop-zone file upload enhancement with file input fallback |
| UI guidance | 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 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 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 sensitive-data reveal as a masked value with an explicit reveal action, visible hide action, clear field identity, safe default state, reveal duration or hold behavior, and status feedback that explains what is visible now. | Render a full-screen takeover as a full-viewport modal surface with a visible title, labelled exit control, primary outcome action, and blocked parent content. | Render a large labelled drop zone with clear copy that says users can drag files there or activate a normal file picker, plus visible format, size, and count requirements. |
| UX guidance | 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 file upload only when the service needs the original file and make expectations clear before the user opens the file picker. | 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 sensitive-data reveal when users need to verify, compare, copy, rotate, recover, or transcribe a sensitive value that is normally masked or redacted. | Use the takeover only when full-viewport focus materially improves the temporary task and users must return to the invoking context afterward. | Use drag-and-drop upload as an enhancement for users who can drag files from a file manager, while preserving an equivalent click, keyboard, and mobile path. |
| Good UI | 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. | 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 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 API key row shows sk_live_****9H2Q by default, requires Reauthenticate before Full reveal, logs the reveal event, and automatically hides after 30 seconds. | A document scan opens a full-screen capture mode with title Attach receipt, Close, Save scan, internal Review back behavior, and the parent expense row restored after close. | A drop zone says Drag bank statements here or choose files, shows PDF/PNG/JPG up to 10 MB, highlights when files hover over it, lists two dropped filenames, and keeps a Choose files button visible. |
| Bad UI | The page opens the camera on load, hides the active-stream indicator, and starts recording before users choose a task. | A button labelled Browse sits under Documents with no hint about accepted formats, size limit, or whether the selected file was uploaded. | An app asks for location, contacts, photos, and notifications on first launch before the user knows why any resource is needed. | A dashboard shows API keys in plain text by default and copies them to clipboard without warning or audit. | A full-screen layer titled Details hides the page, offers only an X, and behaves differently from browser back. | A dashed rectangle says Drop here but has no label, no click fallback, no accepted formats, and no state change while files hover over it. |
| Good UX | 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 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 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 developer needs to rotate a webhook secret, reveals it after step-up verification, copies it with a visible clipboard warning, then sees it auto-hide with an audit ID. | A user opens camera capture from an expense row, moves to Review, uses Back to return to Capture, presses Close, sees an unsaved-scan review, keeps editing, saves, and returns to the same row. | A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues. |
| Bad UX | A user closes a capture sheet but the camera light stays on and the preview remains active in the background. | 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 denies microphone access and the app loops the same system prompt every time they tap anything in the support screen. | A user opens billing details in a shared office and the full card number appears automatically with no warning. | A user presses the visible X inside a nested takeover and loses the entire product-selection flow rather than only the current detail view. | A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers. |
| Best fit | Users need to create new photo or video media inside the task. | The service needs a document, image, scan, spreadsheet, media file, or other original file. | 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. | Users need to inspect, copy, verify, rotate, transcribe, or compare a sensitive value that should normally stay masked or redacted. | A temporary task needs the whole viewport for capture, immersive preview, focused setup, scanning, or dense editing. | Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target. |
| Avoid when | Existing file upload, text entry, barcode input, or manual confirmation is sufficient. | A typed answer, reference number, checkbox, or declaration would satisfy the task. | The decision is consent to optional data use rather than access to a device or browser resource. | The task is only entering a password into an authentication form; use password input. | The task is short enough for a compact modal dialog. | The main audience is mobile-only or cannot reasonably drag files from the operating system. |
| Required state | Unsupported browser or insecure-context state with upload or manual alternative. | Empty labelled state with requirements hint and choose-file action. | Contextual request state tied to the user action that needs the resource. | Masked state with the field identity, safe suffix or count, and reveal eligibility. | Closed parent state with the selected object, filters, scroll, and opener visible. | Idle drop zone with visible label, requirements, and choose-file fallback. |
| Accessibility burden | Provide file upload, manual entry, or assisted alternatives for users who cannot use a camera. | Use a visible label that names the file purpose, not only Browse or Choose file. | Use a labelled region or dialog title that names the resource and feature, such as Allow location for route check-in. | Use a labelled button or toggle whose accessible name includes the field, such as Show API key or Hide account number. | Expose the takeover as a modal surface with an accessible name from the visible title. | Keep a visible label and instructions that name both drag-and-drop and choose-file paths. |
| Common misuse | Opening the camera automatically on page load or hover. | Asking for a file when a typed reference number or simple answer would be enough. | Asking for multiple resources at launch before the user has attempted the relevant feature. | Showing sensitive values in plain text by default. | Using a full-screen takeover as a dramatic wrapper for a short confirmation, single text field, or routine message. | Replacing the normal file chooser with a drop zone that only pointer users can operate. |