![](https://habrastorage.org/getpro/habr/upload_files/79a/a9d/96b/79aa9d96bb36f4da20f5fd92b3523d34.png)
Всем привет! Меня зовут Влад, я работаю дизайнером в компании SC.Soft. Проектирую сложные интерфейсы для телеком-индустрии. В этой статье я поделюсь опытом в проектировании загрузчика файлов. Расскажу о трудностях с которыми мы столкнулись, как можно было избежать проблем в проектировании и поделюсь лучшими практиками, которые мы выявили опытным и эмпирическим путём.
Разные загрузчики на всех продуктах
Приступая к новому компоненту, хочется сделать его универсальным — предусмотреть всевозможные варианты, чтобы переиспользовать его и не изобретать каждый раз велосипед.
Первым делом мы посмотрели загрузчики во всех наших продуктах, выявили что у них общего, определили достоинства и недостатки.
![Загрузчики у разных продуктов Загрузчики у разных продуктов](https://habrastorage.org/getpro/habr/upload_files/521/529/4bb/5215294bbc3461012a87417561e37714.png)
В некоторых продуктах мы просто не знаем, на сколько файл загрузился. Это связано с тем, что процедура проверки файлов в системе запускается раз в минуту, и если мы загрузили файл в начале этой проверки — то придётся ждать минуту, пока файл не проверится и не добавится в систему. В идеальном мире и при правильно спроектированной логике мы можем запустить процедуру добавления в систему сразу после загрузки файла. Так получилось реализовать на одном из наших новых продуктов. Но а если нет такой возможности вторгаться в логику уже работающих систем?
Нужно спроектировать понятный интерфейс для разных продуктов, на каждом этапе загрузки и добавления файла; пользователю должно быть понятно, на каком этапе находится файл.
Используйте drag & drop
Эта функциональность очень широко распространилась благодаря продуктам вроде яндекс диск, google drive, dropbox и прочим виртуальным хранилищам файлов. Поэтому большинство пользователей ожидают, что смогут перетаскивать файлы на страницу не только в популярных продуктах, но и в очень нишевых интерфейсах, которые используются для работы.
Я исследовал популярные загрузчики файлов и применил лучшие практики под интерфейсы компании.
1. Обычное состояние (Default)
Даём короткую инструкцию, что можно не только перетаскивать файл в целевую область, но и кликнуть на неё для загрузки файла. Также стоит указать ограничения по формату и размеру загружаемых файлов, если таковые есть.
![](https://habrastorage.org/getpro/habr/upload_files/dc3/e38/ad6/dc3e38ad6f9b1787f8cb97be0f1bf806.png)
Очень удобно перетягивать по одному файлу и забрасывать в загрузчик. Но как только нужно захватить несколько файлов — проще нажать на загрузку файла и уже в контекстном меню системы выбрать нужное количество файлов для загрузки.
Не ограничивайте пользователя, если можно предложить альтернативное решение одной и той же задачи — дайте возможность это сделать. Так или иначе пользовательский опыт у всех разный, и чем шире вы сделаете возможности — тем большему числу людей будет удобно использовать ваш продукт.
![Пример загрузки одного и нескольких файлов в Dropbox Пример загрузки одного и нескольких файлов в Dropbox](https://habrastorage.org/getpro/habr/upload_files/1c9/d3e/86e/1c9d3e86e11c427005034451af533d21.gif)
2. Состояние наведения (Hovered)
Всегда давайте обратную связь на действия пользователя в интерфейсе, таким образом вы покажите, что элемент интерактивен и с ним можно взаимодействовать.
![При наведении на целевую область – она заливается серым цветом При наведении на целевую область – она заливается серым цветом](https://habrastorage.org/getpro/habr/upload_files/d68/98c/308/d6898c3086255e99f7d3a1ac6b5d02b3.png)
3. В движении
Когда мы перетащили файл в область для загрузки, то должны объяснить пользователю что происходит — меняем текст инструкции на «Добавить 1 файл», также помимо текстовой обратной связи — меняем и визуальную, — заливаем область взаимодействия цветом, как при ховере.
![](https://habrastorage.org/getpro/habr/upload_files/f39/91a/1b9/f3991a1b93682bbd17d1726cab6fc351.png)
Не забывайте про курсор, ведь это такой же визуальный идентификатор, как и затемнение кнопки при наведении на неё.
![Прогресс загрузки файла Прогресс загрузки файла](https://habrastorage.org/getpro/habr/upload_files/ae2/778/659/ae27786599545434dc76131a43d4b98a.png)
4. Элементы «брошены»
Началась загрузка файла. Прогресс загрузки каждого файла мы визуализируем по отдельности, чтобы на этапе загрузки файлов отсекать те, которые не соответствуют требованиям.
![Прогресс загрузки файла Прогресс загрузки файла](https://habrastorage.org/getpro/habr/upload_files/f5f/264/57b/f5f26457b92f3c9133b4e818eafd4160.png)
![Отклоненный файл Отклоненный файл](https://habrastorage.org/getpro/habr/upload_files/7ea/ffb/9aa/7eaffb9aae265b3962bd23574f15d72a.png)
Показывайте прогресс загрузки
Если не отображать процесс загрузки, пользователю непонятно, когда загрузка и добавление в систему файла завершатся.
Чтобы было понятно, на какой стадии загрузки находится файл, я составил усреднённый флоу состояний файла. В зависимости от метода загрузки, состояния могут отличаться от системы к системе.
![](https://habrastorage.org/getpro/habr/upload_files/d0c/19c/12f/d0c19c12f6099f7495521335c9a8d1f6.png)
Наиболее быстрый и современный загрузчик может отображать прогресс загружаемых файлов.
![](https://habrastorage.org/getpro/habr/upload_files/8d6/d08/c5b/8d6d08c5b3c8bb793265d550ef362cdc.png)
В случае недопуска файла к загрузке пишем причину.
![В примере файл оказался слишком «тяжелым». Также может случиться, что пользователь пытается загрузить неподходящий формат файла. В примере файл оказался слишком «тяжелым». Также может случиться, что пользователь пытается загрузить неподходящий формат файла.](https://habrastorage.org/getpro/habr/upload_files/640/9c4/afa/6409c4afafb55d964e7beb68101d3d47.png)
Иногда просто загрузки файла в систему недостаточно. Нужно отдельно подтвердить его добавление. Связано это с тем, что в загружаемом файле могут находиться строки, указанные в неправильном формате. Зачем грузить в систему битые данные?
Давайте обратную связь о составе файла: если есть некорректные данные, не загружайте их без дополнительного подтверждения.
![Пример загруженного файла с ошибочными данными Пример загруженного файла с ошибочными данными](https://habrastorage.org/getpro/habr/upload_files/0a3/c8b/96c/0a3c8b96c2220b1866cae60c104cace7.png)
![Пример успешного загруженного файла Пример успешного загруженного файла](https://habrastorage.org/getpro/habr/upload_files/911/d8b/f4b/911d8bf4b229be090c36ae183ce2565c.png)
Для высоконагруженных систем обработчик загрузки файлов реализуют таким образом, что он запускается раз в минуту: прогоняет все загруженные файлы и запускает процесс добавления записей из файла в систему. В новом продукте мы, конечно же, сделали запуск применения сразу после нажатия на кнопку «добавить».
![Процесс добавления значений из файла в систему Процесс добавления значений из файла в систему](https://habrastorage.org/getpro/habr/upload_files/e05/c07/ec3/e05c07ec3d5c6f71ffa3ae3fe2ab68a6.png)
После добавления записей уведомляем об успешной операции
![](https://habrastorage.org/getpro/habr/upload_files/a7d/4a9/335/a7d4a9335df152234c021791ab7780da.png)
Свёрнутые загрузки
Мы даём возможность пользователю выйти из полноэкранного режима загрузки файла, чтобы продолжить работу с другими страницами, при этом не прерывая процесс загрузки файлов. Свёрнутое окно загрузки показываем внизу экрана справа.
![](https://habrastorage.org/getpro/habr/upload_files/f87/ce4/ba4/f87ce4ba401b9835b2b71d61bbf4783b.png)
Окно можно разернуть в полноэкранный режим и посмотреть детальную информацию о состоянии файла.
![](https://habrastorage.org/getpro/habr/upload_files/b9e/2fc/631/b9e2fc631125dfcf398a98d638a1ed2d.png)
Модальное окно загрузки файла можно свернуть на любом этапе:
загрузка
проверка
добавление
оповещение (успех, ошибка)
![](https://habrastorage.org/getpro/habr/upload_files/079/ad5/271/079ad52711fb8c5efcebbe9e1bf9f9b8.png)
Не дайте пользователю заблудиться
Загрузка файлов работает таким образом, что одновременно можно загрузить несколько файлов для разных страниц, и что в свёрнутом, что в развёрнутом состоянии непонятно, на какой странице и в какой список загружается файл.
Кажется, что самое лучшее решение — сделать отдельное место для просмотра всех загруженных файлов. Но на самом деле это не совсем так.
Есть системы, в которые мы грузим целые справочники, которые используются в ключевой логике работы приложения. Например, справочник стран, абонентов, базовых станций.
![Пример страницы со списком стран Пример страницы со списком стран](https://habrastorage.org/getpro/habr/upload_files/9d5/f28/801/9d5f28801dc1f7bdb3b63cd5c1142816.png)
Если таких страниц много, то конечно сделать общую страницу менеджера загрузок — отличное решение.
Но также есть продукты, у которых всего несколько страниц, на которые можно загрузить файлы, например, списки IMSI и MSISDN.
Про IMSI и MSISDN
Оба этих номера являются важными элементами при работе с мобильной связью и используются для управления сетью и обеспечения безопасности передачи данных.
IMSI (International Mobile Subscriber Identity) — это уникальный идентификатор мобильного абонента.
MSISDN (Mobile Subscriber International Detach Number) — международный номер телефона.
![Пример страницы списков исключений Пример страницы списков исключений](https://habrastorage.org/getpro/habr/upload_files/56e/f03/9f5/56ef039f56ae9f2eef9492709514d323.png)
Добавлять отдельное рабочее место во все системы — избыточно как для новых продуктов, которые мы обрекаем на лишние страницы, так и для уже запущенных в продакшн — нужно перепродумывать логику, делать большой рефакторинг.
Нам нужно найти более универсальное решение, которое бы не противоречило логике уже готовых продуктов, но улучшило опыт пользователей.
Возвращаемся к изначальному вопросу: куда загружается файл?
Решение этой проблемы нам подсказали несколько клиентов в опросах и один из базовых принципов проектирования. Нужно отвечать на вопрос пользователя «где я?». Показываем место: куда файл загружается. В какую таблицу, на какую страницу.
Дорабатываем хедер развёрнутого модального окна — добавляем подпись к окну загрузки.
![](https://habrastorage.org/getpro/habr/upload_files/a5e/161/183/a5e161183895e5d0c0362c7ab65b9390.png)
Теперь пользователь знает на каждом этапе загрузки и добавления файла в систему: «что происходит сейчас и что можно сделать по итогу операции».
Также дополнительно добавляем индикацию в таблице для отображения.
![](https://habrastorage.org/getpro/habr/upload_files/a62/903/23e/a6290323e7352134c622b55d35d21241.png)
Теперь однозначно можно идентифицировать, куда файл загружается и не запутаться в какую страницу идти за проверкой.
Не перекрывайте основной функционал
Столкнулись с проблемой: свёрнутые загрузчики скрывают пагинацию таблиц.
![](https://habrastorage.org/getpro/habr/upload_files/36c/800/ad2/36c800ad22e97de0c22265cd5418dfaf.png)
Таблицы — наиболее частый компонент в наших интерфейсах и переделывать его — нецелесообразно, быстрее и проще перепродумать загрузчик.
Мы можем загружать несколько файлов в систему и продолжать пользоваться другими функциями. Но если мы загружаем большое количество файлов, то свёрнутые загрузки перекрывают уже не только пагинацию таблиц, но и другие части интерфейса. На примере той же таблицы — теперь нам не доступны действия со списками в таблице.
![](https://habrastorage.org/getpro/habr/upload_files/3ae/02e/632/3ae02e632ab0aaf9c24bfa402f8773f4.png)
Ко всему прочему, большое количество загрузок может не поместиться в экран.
Эти проблемы натолкнули на то, чтобы пересмотреть отображение свёрнутых загрузок.
В итоге мы сделали свёрнутый загрузчик компактнее, объединили загрузки в один блок и добавили ещё один уровень скрытия.
![](https://habrastorage.org/getpro/habr/upload_files/d73/60d/ce1/d7360dce118283e83a6a5bc3f4898f17.png)
![](https://habrastorage.org/getpro/habr/upload_files/c27/d37/ef2/c27d37ef295cc148f6607d9d0fc1e437.png)
Результат
Мы получили новый универсальный компонент, который можем использовать в наших продуктах.
![Итоговый вариант сворачиваемого клиента загрузок Итоговый вариант сворачиваемого клиента загрузок](https://habrastorage.org/getpro/habr/upload_files/fe1/8be/f90/fe18bef903e71634e467d527d488939c.gif)
Это решение помогло разгрузить информационную неопределенность пользователей наших систем.
Практически все предложенные решения не конфликтуют с архитектурой. Это значит, что мы проделали работу, которая не «утяжелила» систему — загрузка страниц и всех операций остаётся такой же быстрой.
В зависимости от реализации механизма загрузки можно сократить некоторые шаги (например, ожидание проверки и добавления файлов в систему).
Получили положительную обратную связь от команды эксплуатации на стороне заказчика нескольких наших продуктов.
Надеюсь, что статья была полезной для вас. Может у вас есть свои интересные кейсы, связанные с проектированием загрузчиков — буду рад вашим историям.)
Для связи пишите в telеgram: @Vpopo