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

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

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

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

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

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

 В B2C эксперименты часто оправданы — здесь важны эмоции и вовлеченность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Числовые — цены, даты, размеры, возраст.
  Подходы: range-слайдеры, поля «от–до», предустановленные диапазоны.
  Всегда указывайте единицы измерения.
  
  
• По категориям
  Чекбоксы — для множественного выбора, радиокнопки — для одиночного, выпадающий список — когда вариантов много.
• Булевые (да / нет)
  Тогглы или одиночные чекбоксы для простых условий. 
  
  
• По геопозиции
  Карта с радиусом, выбор региона или города. 
  
  
• Временные
  Календарь диапазона, быстрые периоды, интервалы времени. 
• Визуальные
  Цвета, формы, текстуры. Важно дополнять иконки текстом для доступности.
  
  
•  Поиск по значениям внутри фильтра
  Обязательная функция для больших списков.
  
  
   

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

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

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

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

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

Поля формы: Input и Select

Поля ввода (Input)

Текстовые поля — основа любой формы. Через них пользователь вводит данные, поэтому здесь особенно важно предсказуемое поведение.

Лейблы лучше использовать всегда, а не заменять их плейсхолдерами. Плейсхолдер исчезает при вводе и перестает помогать, из-за чего возрастает число ошибок и страдает доступность.

При работе с полями ввода обычно учитывают:

• явные состояния поля (default, focus, disabled) 
• заранее обозначенную обязательность 
• понятный формат данных 
• навигацию с клавиатуры 
• достаточный контраст 
• логическую группировку связанных полей 
• разумные значения по умолчанию. 

Выпадающие списки (Select)

Select используют для выбора значения из заданного списка, но он подходит не всегда.

При небольшом количестве вариантов быстрее работают радиокнопки, при большом — поиск или автозаполнение.

Для удобной работы с выпадающими списками важны:

• поиск по длинным спискам
• группировка и сортировка вариантов 
• навигация с клавиатуры 
• четкие визуальные состояния 

Datepicker — выбор дат

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

Рекомендации:

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

Валидация форм

Пользователь должен понимать, что введено неверно, еще до отправки формы.

Основные принципы:

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

Тултипы

Тултип — короткая подсказка, которая появляется рядом с элементом и дает дополнительную информацию, не перегружая интерфейс.

Они бывают простыми, контрастными, с заголовком, иконкой, изображением или расширенным контентом. Анимация — короткая и ненавязчивая (около 150 мс).Чаще всего тултип ожидают увидеть по центру над элементом, если это не мешает контенту.

Нотификации

Нотификация сообщает о важном и не должна отвлекать дольше необходимого. Их можно разделить:

• По типу - информация, успех, предупреждение, ошибка, кастомные сообщения. 
• По содержанию - только текст, с кнопкой, с действием, со ссылкой.

Обычно размещаются справа — сверху или снизу — и группируются, если их несколько. 

Модальные окна

Модальное окно требует действия пользователя и перекрывает основной контент.

Используется для:

• подтверждений 
• форм 
• онбординга 
• поиска 
• сценариев с прокруткой 

Может появляется по центру экрана, сбоку, снизу с затемнением или размытием фона. Анимация — короткая, подчеркивающая модальность.

Меню

Классическое меню в шапке остается стандартом для B2B-интерфейсов:

• его легко обнаружить 
• оно привычно 
• удобно для частого переключения разделов 

Табы

Табы подходят для переключения одноуровневого контента на одном экране. Их должно быть немного (до пяти), названия — короткие и однозначные. Если контент лучше раскрывается постепенно или требует сравнения, табы — не лучший выбор.