Школа
Интерфейс

Форма для загрузки файла

Дизайнер разрабатывает форму принятия заявки на сайте для изготовления деталей из ЛДСП по чертежам заказчика. Как дать возможность заказчику не только перетащить файл с чертежом, но и выбрать его на компьютере? Как более наглядно показать, что файл успешно загружен и его можно отправить? Правильно ли то, что кнопка появляется в самой форме, после загрузки файла?

Николай Леонтьев
19 июля 2022
👁 6415   🗩5
Интерфейс

Форма для загрузки файла

Дизайнер разрабатывает форму принятия заявки на сайте для изготовления деталей из ЛДСП по чертежам заказчика. Как дать возможность заказчику не только перетащить файл с чертежом, но и выбрать его на компьютере? Как более наглядно показать, что файл успешно загружен и его можно отправить? Правильно ли то, что кнопка появляется в самой форме, после загрузки файла?

Николай Леонтьев
19 июля 2022
👁 6415   🗩5
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 28
28
Непонятно
 2
2
Войдите в Бюросферу, чтобы голосовать

Давайте для начала уберём всё лишнее, нарисуем аккуратно, дадим заменять файл и напишем однозначное сообщение об ошибке:

Предусмотрим обратную связь при перетаскивании и наведении:

При клике пусть открывается стандартный диалог выбора файла. Кстати, заменяться файл должен даже если не нажать «Удалить». То, что кнопка появляется в самой форме, меня не смущает. Если после внедрения вдруг окажется, что люди не понимают, как загрузить, можно будет дописать каких‑то слов.

Полезно
 28
28
Непонятно
 2
2
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Александр Пинчук

Кажется, в месте, где пишем, что файл слишком большой, стоит указать максимально допустимый размер.

Александра Ивлева

А если «Загрузите» сделать ссылкой, при клике на которую открывается окно выбора файла с компьютера?

Александра, в предложенном Ильёй варианте вся область работает такой ссылкой и реагирует на наведение мыши. См. последнюю картинку совета.

Андрей Марлоу

А не нужно ли показывать прогресс бар?

И разве нельзя не допустить загрузку больших файлов? Ждать, пока загрузится 200мб, чтобы потом выяснить, что облажался, — так себе.

Андрей, яваскрипт может проверить размер и тип выбранного файла ещё до загрузки: пример на Стэковерфлоу. Так что сообщение об ошибке появится сразу — не после загрузки, а вместо неё.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы