Exporting or downloading transfers a certain data set (for eg. in the form of a CSV file) from a remote to a local system. In this section, we are providing some examples and best practices for creating experiences for exporting and downloading files.
Please note that although we are using tables in these examples, the guidelines also apply for different elements displaying resources (for eg. a simple list of available PDF files).
Initiating the export
There are multiple options to initiate a data export, and those solutions should always be tailored to use cases. The below examples demonstrate some common use cases and possible solutions when exporting data from a table.
In this example the user selected certain records to be included in the export, and on this layout the export action is highest in the hierarchy of actions. Consider the overall action hierarchy when choosing the accent for the export action.
Display the export in a modal
In general, the modal component is suitable to host export-related options, such as renaming the file. The below example shows a use case when
Displaying the import form in a side panel
In case the import requires a longer form or the user has a benefit from seeing more in the background, placing the import form in a side panel could be a good solution.
Naming the file
- Determine an intuitive default name for the file that the user is about to export.
- If your use case permits, give them the option to rename the file before hitting download.
Naming-related validation
To make sure the user downloads a valid file, you can:
- Validate that file extension after the user had renamed it.
- Or in case there is only one extension permitted, you can “lock” the extension into a suffix and let the user edit only the name and not the extension.
Indicate export status
Communicate the export status to the user, it is recommended to use the Progress and Loading components and guidelines.
If possible, provide information on:
- How much time the export will take approximately.
- Where the process currently stands.
- The name of the file that is being exported.
In case this data is not available to the UI, use a simpler indicator.
Success and failed exports
Similarly to the loading indication, it is recommended to provide relevant information to the user upon success or failure. If possible, show the filename (for both success and failure) and the reason for the error.
