# File Transfer Interface Design: Transferly’s Three States

Source: https://www.jvds.cn/en/share/ui-design/transferly-upload-progress-u055
Language: en
Published: 2026-10-14
Author: JVDS Design Studio

Transferly’s file transfer interface uses few elements to distinguish adding, checking, and waiting. A clear drop area becomes a list after files are added, then progress takes priority during download. Simplicity comes from content changing with each stage, not merely removing buttons.

## The initial page makes adding the visual destination

Three lines of brand text sit on the left and a rounded panel on the right. A file symbol and Drop files or folders occupy its center, with Files, Message, and Password above and upload/download direction buttons at the right. New visitors immediately have a place to begin.

A dim pale-gray mountain scene appears only below, keeping text and panel off complex mountain forms. It supplies atmosphere without turning the tool into a full-screen poster that must be admired first.

JVDS likes this grouping of tasks. Files, message, and password belong to one transfer and establish a clearer relationship in one panel than across a page. Implementation could add click-to-select guidance and a textual direction name for people who do not use dragging.

![Transferly light initial page with file drop area, configuration tabs, and direction buttons](https://www.jvds.cn/upload/2026/1008/d187-tp/u055-i1.webp)

Right of the initial page | The file entry is centered, with message and password in the same panel.

## Added files reveal checking information row by row

The dark panel shows 4 Files and total size, followed by files and an Assets folder. Each row has a type icon, name, size, and delete symbol; red Upload appears at the upper right. Starting and checking content remain distinct rather than merging into an ambiguous arrow.

The list is central here. Names answer what is being sent, sizes explain volume, and deletion gives mistaken additions a clear remedy. The mountain darkens, leaving white and gray text ahead so scenery does not obscure transfer objects.

With a folder included, 4 Files needs a more precise meaning. State the number of top-level items and summarize folder contents. [Long and identical filenames](https://www.jvds.cn/en/share/ui-design/file-upload-ux-design) also need an opportunity to view paths; format icons alone cannot verify identity.

Red concentrates on Upload and logo details, while delete symbols lack the same large color area. Starting is prioritized without losing list editing. How deletion updates total size is a related state worth checking in a prototype.

![Transferly upload queue with filenames, folder, sizes, and delete icons](https://www.jvds.cn/upload/2026/1008/d187-tp/u055-i2.webp)

Queue header and rows | Total size informs starting; item details support content checking.

## Waiting reduces details and offers two reading scales

The mobile download page says download above a thin progress bar, with transferred size near Cancel. A huge 64% sits below, offering an immediate status view and a closer check of transferred and total volume.

One wait has two scales: percentage supports glancing, volume supports quantity checking. Both should come from the same progress and explain the current stage. If link generation or file processing follows transfer, the stage name should change as well.

The page avoids numerous spinners and repeated promotional lines, letting whitespace make status feel stable. A separate menu retains New transfer, Security, and other directions; mobile separates tools from supporting information instead of crowding all desktop navigation above.

![Transferly dark mobile download with size, progress bar, Cancel, and 64%](https://www.jvds.cn/upload/2026/1008/d187-tp/u055-i3.webp)

Upper and lower download page | Large percentage and volume readings describe the same transfer.

## A lightweight interface still needs complete results

The images show preparation and progress, not the destination after completion. Upload results could explain link generation, copying, and sharing; download results could identify completed contents and next steps. One 100% should not represent [every possible status](https://www.jvds.cn/en/share/ui-design/b2b-business-state-model).

Cancel needs consequences consistent with implementation: whether queues remain, some files succeeded, and which items can be retried should be stated in relevant states. They need not crowd the initial page; show needed information when the action occurs.

This is the benefit of staged design: lighter initial demands, more object information during checking, prominent readings while waiting, and explicit results at the end. Each step can stay simple while the whole process remains understandable.

## Give upload and processing tools clear states

If your product involves files, material submission, or background processing, list actual preparation, progress, failure, and completion states first. JVDS Design Studio provides UI/UX design, website design, and development services to organize workflows and result feedback.

[Contact JVDS to discuss your project](https://www.jvds.cn/contact)