Import & Export

Design a paired import and export experience for a product that moves structured data in and out of the app. Treat import and export as two related flows with shared rules, clear labels, and separate outcomes.

For import, show the user where the data comes from, what file types are accepted, and what happens after upload. Include a place to map columns or confirm fields before the import runs. If the file is invalid or incomplete, surface the problem next to the affected control and keep the uploaded file in place so the user can fix it without starting over.

For export, let the user choose format, scope, and destination before generating the file. Keep the default choices obvious, and make it clear whether the export is for the current view, selected records, or everything. If a setting is not available for the chosen format, disable it or explain why.

Show the full transfer lifecycle: idle, validating, in progress, complete, and failed. Progress should show what is happening now, and completion should confirm where the file went or what was imported. When something fails, give the user the reason and the next action directly in the interface.

Color code your import and export buttons to visually differentiate these actions at a glance, enhancing user navigation.