| UI or UX | UI + UX - User or administrator workflow for selecting, preparing, securing, downloading, transferring, and verifying data export packages | UI + UX - Structured file import workflow with mapping, validation, repair, and result reporting | UI + UX - Governed audit evidence surface for security, compliance, forensic, and administrative review | UI + UX - Semantic row-and-column data comparison surface | UI + UX - Interactive row-and-column data workspace | UI + UX - Controlled reveal and re-hiding of masked sensitive values, secrets, tokens, credentials, identifiers, or private records |
| UI guidance | Render data export as a job-based workflow with export scope, data categories, format, destination, estimated size, preparation status, expiry, security requirements, and download or transfer actions. | Show the import as a staged workflow: template or requirements, file upload, detected headers, column mapping, sample row preview, validation results, duplicate review, confirmation, progress, and final report. | Render audit logs as governed evidence records with audit ID, effective time, actor, actor type, action, protected object, result, source system, IP or session context, retention class, export status, and permission scope. | Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. | Render the grid as a named work surface with visible headers, row identifiers, focus location, selection state, dirty and invalid cell markers, column controls, and status text for row count, sort, filter, and save state. | 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. |
| UX guidance | Use data export when users need a portable copy of personal, account, workspace, product, activity, or organization data for reuse, compliance, migration, backup, or review. | Use bulk import when users need to create or update many structured records from a spreadsheet, and make them prove mapping and validation before the product commits data. | Use audit log when the product must support security review, compliance obligations, forensic investigation, privileged-action review, or administrator accountability with retained evidence. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. | Use a data grid when cell-level interaction makes users faster and more accurate than opening each record separately. | Use sensitive-data reveal when users need to verify, compare, copy, rotate, recover, or transcribe a sensitive value that is normally masked or redacted. |
| Good UI | A privacy dashboard lets a user choose activity, profile, files, messages, and billing categories, shows JSON or CSV availability, requires reauthentication, creates archive EXP-2048, then shows download expiry and checksum. | A contacts importer starts with a downloadable CSV template, then shows Email mapped to Email address, Role mapped to Access role, three sample rows, and a warning that Phone is optional and unmapped. | A security audit log shows a role escalation with audit ID, UTC effective time, actor session, target account, old role, new role, source IP, retention class, legal-hold badge, and Export evidence action. | A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. | An invoice-review grid shows frozen invoice IDs, column headers for Vendor, Amount, Due, Owner, and Status, one highlighted focused cell, two selected rows, a dirty edited amount, and a status line naming the current cell. | 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. |
| Bad UI | A button says Export all data but does not say which services, formats, accounts, dates, or unavailable records are included. | A page has a single Upload spreadsheet button and a spinner, then says Import failed without row numbers, column names, or a corrected-file path. | A settings page lists Admin changed something with no stable audit ID, actor session, object, result, retention policy, or export trail. | A div layout looks like columns but has no caption, table semantics, or header associations. | A static report uses role grid even though users only read values and ordinary table semantics would be clearer. | A dashboard shows API keys in plain text by default and copies them to clipboard without warning or audit. |
| Good UX | A user requests a machine-readable archive, sees which data categories are eligible for portability, waits for preparation, downloads the package before expiry, and gets a manifest listing omitted records. | A user uploads contacts.csv, reviews suggested mappings, fixes Department to Team, filters to rows with errors, chooses Import valid rows and export invalid rows, confirms 1138 new and 20 skipped records, then downloads the error report. | An investigator filters privileged actions, opens one audit record, verifies the chain of custody, exports the exact scoped result set, and sees which fields are redacted by administrative-unit scope. | A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. | A user presses Arrow Right to move from Amount to Due, presses Enter to edit the due date, presses Escape to cancel, and focus returns to the same cell in navigation mode. | 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. |
| Bad UX | A user downloads a huge ZIP with no manifest, cannot tell whether messages or attachments are missing, and assumes export completed because one file downloaded. | A user uploads a file, the product commits immediately, and only afterward shows that 300 rows were skipped with no file explaining which rows failed. | A reviewer assumes no event happened because their restricted scope hides system-account records without saying so. | Filtering the table removes selected rows without explaining why or offering a clear-filter path. | A user edits an amount, sorts by status, and the row disappears with no saved or unsaved indication. | A user opens billing details in a shared office and the full card number appears automatically with no warning. |
| Best fit | Users need to download or transfer a copy of account, workspace, personal, product, activity, or organization data. | Users need to create, update, or merge many structured records from CSV, XLSX, TSV, copied spreadsheet data, or another system export. | The product must support security investigations, compliance review, legal discovery, privileged-action review, or enterprise governance. | Records share comparable attributes that users need to scan in aligned columns. | Users repeatedly inspect or update many records in shared columns. | Users need to inspect, copy, verify, rotate, transcribe, or compare a sensitive value that should normally stay masked or redacted. |
| Avoid when | The user is importing records into the product; use bulk import. | The task needs one document or image attachment rather than parsed record data. | Users only need recent collaboration updates or a lightweight activity feed. | The content is layout, not data. | The data is read-only and ordinary table navigation is enough. | The task is only entering a password into an authentication form; use password input. |
| Required state | Eligible data categories and unavailable categories state. | Pre-import requirements state with template, accepted file types, encoding, row limit, column limit, required fields, and side effects. | Default audit-log search state with visible query, result count, scope, timezone, retention class, and evidence coverage. | Default table state with caption, visible headers, row values, and result count or context. | Default navigation state with labelled grid, column headers, row headers or row identifiers, focused cell, and row count context. | Masked state with the field identity, safe suffix or count, and reveal eligibility. |
| Accessibility burden | Use persistent status text for queued, preparing, ready, partial, failed, expired, and downloaded states rather than relying on a spinner or toast alone. | Use a real file input or button for selecting the import file, even when drag-and-drop is also available. | Use table or structured record semantics so audit ID, actor, action, object, timestamp, result, scope, and retention are perceivable together. | Use native table semantics for tabular data rather than div-only rows. | Use grid semantics only for an interactive composite widget with managed focus. | Use a labelled button or toggle whose accessible name includes the field, such as Show API key or Hide account number. |
| Common misuse | Using one Export all button with no scope, format, account, destination, date range, or size estimate. | Treating a spreadsheet import like a generic file attachment with no mapping or row validation. | Rebranding a recent-activity feed as an audit log without retention, custody, or governed evidence fields. | Using table markup to create page columns or layout spacing. | Using role grid on a static table only to make it sound richer. | Showing sensitive values in plain text by default. |