Интерфейс можно сделать «современнее» по-разному: поменять визуал, добавить анимацию, пересобрать навигацию. Но в процессе можно увлечься и забыть, что пользователю нужнее результат, а не обновление дизайна. Давайте поговорим о ситуациях, когда лучше ничего не менять.

Фразу «давайте сделаем современнее» можно услышать и от бизнеса, и внутри продуктовой команды. Обычно за ней стоит не конкретная задача, а ощущение, что интерфейс устарел и требует изменений.

Пользователь при этом не думает категориями «современно» или «устарело». Он открывает продукт с вполне прикладным ожиданием: выполнить действие и не задумываться о том, как именно устроен пользовательский интерфейс.

Интерфейсы, конечно, меняются, но пользовательские привычки и ожидания формируются годами и обновляются гораздо медленнее. Это хорошо подтверждается практикой UX-паттернов: устойчивые решения сохраняются именно потому, что снижают когнитивную нагрузку и помогают пользователю действовать на автомате. Эту же мысль хорошо раскрывает разбор Якоба Нильсена про AI-агентов и пользовательские ожидания.

Когда их ломают без необходимости, это почти всегда отражается на скорости работы, количестве ошибок и общем отношении к продукту.

Контекст здесь тоже играет решающую роль:

В B2C эксперименты часто оправданы — здесь важны эмоции и вовлеченность.
В B2B все иначе: интерфейс — это рабочий инструмент, к которому возвращаются каждый день. Любые неожиданности в нем скорее помешают.

Когда лучше не изобретать новое

Базовые элементы интерфейса существуют десятилетиями и почти не меняются потому, что стабильно работают. Поэтому большинство продуктовых команд опираются на стандартные UI-компоненты — кнопки, формы, фильтры и навигацию — как на базовый набор, который пользователь ожидает увидеть в любой системе.

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

С формами произошло то же самое. Поля ввода, ошибки валидации, обязательные поля стали стандартом из-за привычек пользователей. Когда вместо знакомого инпута появляется кастомное решение, внимание уходит с задачи на попытку понять интерфейс.Фильтры, загрузка файлов и модальные окна работают по тому же принципу: пользователь сталкивается с ними ежедневно и уже знает, какого поведения ожидает от системы.

Далее разберем такие устойчивые паттерны и зафиксируем, каким должно быть их «ожидаемое» поведение.

Загрузка файлов

Загрузка файлов — знакомый пользователю сценарий. Если вы не создаете принципиально новый опыт, лучше опираться на стандартную модель взаимодействия и убедиться, что она реализована полностью.

Что считается нормой:

Drag-and-drop с понятной подсказкой
Зона перетаскивания с текстом «Перетащите файлы сюда», указанием форматов и ограничений по размеру.
Поддержка множественной загрузки
Возможность добавить сразу несколько файлов давно воспринимается как базовое поведение интерфейса.
Проверка типа и размера файла сразу
Ограничения видны заранее, до того, как файл начнет загружаться. Пользователь сразу видит, подходит ли файл по формату и размеру.

Индикатор прогресса
Пользователь видит, что происходит с файлом и сколько времени это еще займет
Предварительный просмотр
Для документов и изображений используется разное представление: формат и название для файлов, миниатюра — для изображений. Это позволяет сразу понять, что именно загружено.
Возможность удалить или заменить файл
Если файл загружен по ошибке, его легко удалить или заменить
Корректная работа с длинными названиями
Названия сокращаются в списке, а полное имя файла доступно по наведению. Интерфейс остается аккуратным, и файл легко опознать.

Фильтры: классические подходы

В интерфейсах с большим объемом информации фильтры помогают сократить список до управляемого состояния.

Фильтры уместны, если:

записей больше 100
ручной поиск занимает больше 10 секунд
объекты отличаются более чем по 5 параметрам

Фильтры не нужны, если:

записей меньше 20
все можно уточнить через поиск
когда выбор формируется через рекомендации, а не через фильтры (как в Spotify или Netflix)

Типы фильтров

Числовые — цены, даты, размеры, возраст.
Подходы: range-слайдеры, поля «от–до», предустановленные диапазоны.
Всегда указывайте единицы измерения.

По категориям Чекбоксы — для множественного выбора, радиокнопки — для одиночного, выпадающий список — когда вариантов много.
Булевые (да / нет)
Тогглы или одиночные чекбоксы для простых условий.

По геопозиции Карта с радиусом, выбор региона или города.

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

Поиск по значениям внутри фильтра Обязательная функция для больших списков.

Размещение фильтров зависит от контекста.

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

В мобильных интерфейсах и для редко используемых параметров фильтры обычно выносят в модальные окна или шторки. В таблицах и дашбордах встречаются инлайн-фильтры — они рассчитаны на опытных пользователей и встроены в контент. Для быстрого выбора и отображения активных параметров используют чипсы.

Независимо от формата, в фильтрах повторяются одни и те же базовые решения: сворачиваемые секции, возможность очистить отдельные фильтры или сбросить все сразу, отображение количества результатов и поиск на панели фильтров.

Если эти принципы соблюдены — система соответствует ожиданиям, и дополнительных улучшений не требуется.

Заключение

В этой части мы разобрали загрузку файлов и фильтры. В следующей части мы поговорим еще о нескольких случаях. В базовых сценариях пользователь рассчитывает на привычную модель взаимодействия. Изменения здесь оправданы только при наличии объективной причины.

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

Дизайн интерфейса: когда лучше ничего не менять. Часть 1