Часть 2. Разбираем и сравниваем UI-элементы, которые легко перепутать

В чем разница между модальным и немодальным окном? Или здесь нужен поп-ап? Блин, или это одно и то же? Читайте первую часть, чтобы узнать разницу.

Тултип

Представьте: вы заказываете корейскую еду и видите множество странных дополнительных ингредиентов. Думаете: «Кимчи какие-то… А это еще что такое?» Наводите на маленькую иконку рядом — появляется подсказка. Или представьте: вы в приложении доставки видите сердечко рядом с блюдом. Наводите на него, и всплывает подсказка: «Добавить в любимые». Это tooltip. Он коротко описывает или поясняет назначение элемента и исчезает, как только вы убираете курсор или фокус.

Поповер

А теперь представьте: вы в приложении для доставки нажали на значок товара, чтобы узнать детали. Появляется небольшое окно с изображением товара, ценой, кнопкой «Добавить в корзину» и рейтингом. Это popover. Он позволяет показывать больше информации и действий, чем tooltip, и обычно остается на экране, пока пользователь не закроет его или не кликнет вне окна. В отличие от поп-апа, поповер не старается захватить внимание пользователя. Он показывает дополнительную информацию или действия, но не блокирует весь экран, а появляется рядом с элементом, к которому относится.

Табы

Представьте: вы открыли приложение доставки и видите сверху вкладки: Рестораны / Супермаркеты / Акции. Нажимаете на «Супермаркеты» — и весь экран полностью меняется: и структура, и визуальные блоки, и контент. Это tabs. Они переключают между разделами cервиса, где каждый раздел может иметь уникальный дизайн и набор элементов.

Сегмент-контролы

А теперь представьте: вы в разделе «Сыр» видите вверху переключатель: Все / Плавленный / Творожный / Твердый. Нажимаете «Плавленный» — и контент на экране меняется, но структура и визуальная схема остаются одинаковыми, просто отображаются другие позиции. Это segment controls. Они переключают контент внутри одного раздела, не меняя общий дизайн и расположение элементов.

Боковая панель

Представьте: вы открыли личный кабинет сервиса доставки еды и слева видите панель с категориями: «Профиль», «Заказы», «Поддержка» и т.д. Она всегда на виду, и вы сразу видите, куда нажать, чтобы перейти к нужному разделу. При клике на нужный раздел контент справа меняется, но сама панель остаётся на месте. Это sidebar. Она даёт мгновенный доступ к основным разделам и инструментам, без необходимости дополнительного взаимодействия с пользователем. Используется в десктопных версиях из-за обилия экранного пространства.

Выдвижная панель

А теперь представьте: вы находитесь в том же сервисе доставки, но меню скрыто за иконкой «бургера» в углу. При нажатии на нее сбоку, словно ящик комода, выезжает панель, перекрывая часть экрана. Закрываете панель — и весь экран снова свободен для просмотра контента. Это drawer. Он экономит пространство и даёт больше места для основного контента, что особенно важно, если экран ограничен. Пользователь должен совершить дополнительное действие, чтобы добраться до нужного раздела. В мобильных интерфейсах именно такой подход помогает сохранить чистоту и удобство дизайна.

Сплит-кнопка

Представьте: вы выбираете пиццу в приложении доставки. Рядом с кнопкой «Добавить в корзину» есть маленькая стрелка. Нажав на саму кнопку, пицца добавляется в корзину сразу, а на стрелку открывается меню с дополнительными вариантами: «Добавить без сыра», «Добавить острую пепперони», «Добавить двойной размер». Это split-button. В ней стрелка отделена от основной кнопки (отдельной областью или разделителем) и всегда ведёт к дополнительным действиям, а основная кнопка выполняет главное действие одним кликом.

Дропдаун

А теперь представьте: вы видите кнопку «Выбрать соус» и нажимаете на неё. Всплывает список всех доступных соусов: томатный, чесночный, барбекю, острый. Это dropdown. Здесь стрелка не отделена отдельной областью или разделителем. Дропдаун открывает меню — никакого отдельного основного действия нет. Пользователь сначала открывает список, затем выбирает нужный пункт.

Стэппер

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

Шкала прогресса

А теперь представьте: вы уже выбрали блюда и оплатили заказ, и на экране появляется полоска, которая постепенно заполняется, пока курьер доставляет пиццу. Полоса медленно движется слева направо, показывая, сколько осталось до завершения. Это progress bar. Он отображает степень выполнения одного процесса, обычно количественно, без деления на отдельные шаги.

На самом деле stepper — это вид progress bar, но с важным уточнением:

То есть все stepper — это progress bar, но не все progress bar — stepper.

Иногда progress bar может показывать степень выполнения всего процесса, включая несколько сегментов на одной шкале. Например, статус заказа в виде заполняющихся шкал показывает шаги: «Заказ → Готовка → Сборка → Доставка». Будет ли это являться стэппером, в виду того, что процесс разделен на шаги? Скорее всего нет, потому что классический степпер — это всегда про контроль пользователя. Пользователь сам переходит от шага к шагу:

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

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

Такой дизайн-паттерн очень эффективен, потому что решает сразу две задачи:

В UI слово "stepper" — это не только про полоску с шагами. Иногда это маленькие кнопочки «+» и «–», которые решают, сколько пицц вы сегодня съедите. Представьте: вы заказываете пиццу и хотите выбрать количество пицц или дополнительных ингредиентов. Тут появляется numeric stepper:

Numeric stepper помогает точно выбрать количество, делает процесс быстрым и наглядным.

Разбирая и сравнивая UI-элементы, мы учимся видеть, что за привычной формой стоит функциональность. И чем лучше мы понимаем детали, тем интерфейс становится удобнее, а жизнь пользователя — приятнее!