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

Сообщение от клиента с просьбой нарисовать «всплывашку» вводит в ступор, и вы начинаете вспоминать...

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

Поп-ап

Представьте: вы читаете статью на сайте, и вдруг на весь экран всплывает окно с предложением подписаться на рассылку. Это «поп-ап» — сосед, который решил начать сверлить, пока вы мирно спите. Это всплывающее окно, которое (при совершении действия или по таймингу) появляется поверх основного контента, но не обязательно блокирует взаимодействие с ним. Слишком агрессивные поп-апы раздражают пользователей. Используйте их только в том случае, если уверены, что предлагаете что-то действительно ценное. Дайте пользователю возможность легко отказаться от предложения и закрыть окно.

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

А теперь представьте другую ситуацию: вы нажимаете кнопку «Удалить» на сайте, и появляется окно с вопросом: "Вы уверены, что хотите это сделать?". Это модальное окно, которое вежливо ждет вашего ответа. Модальное окно блокирует основной интерфейс и требует от пользователя действий, прежде чем продолжить работу.

Немодальное окно

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

Карусель

Представьте: вы смотрите фотографии в онлайн-альбоме на телефоне. Вы проводите пальцем по экрану, чтобы перелистывать фотографии. Это карусель. Она отображает последовательность элементов (обычно изображений или карточек) и позволяет пользователю переключаться между ними горизонтальным или вертикальным свайпом.

Слайдер

А теперь представьте: вы регулируете громкость в плеере. Вы тянете ползунок вправо, чтобы увеличить громкость, или влево, чтобы уменьшить. Это слайдер. Слайдер позволяет пользователю выбирать значение из заданного диапазона, перемещая ползунок.

Бейдж

Представьте, что вы видите уведомление в приложении. На значке приложения в углу экрана появляется красная цифра "3". Это бейдж. Это визуальный индикатор, который отображает статус (например «онлайн» и «оффлайн», количество или другую информацию.

Чип

А теперь представьте, что вы ищете товары в интернет-магазине. Вы добавляете несколько фильтров, например, "Цвет: синий", "Бренд: Nike". Каждый фильтр отображается в виде маленькой кнопки с крестиком, чтобы его можно было быстро удалить. Это чип. Он как маленький ярлык, который позволяет быстро управлять выбранными параметрами. Чипы предоставляют более подробную информацию и интерактивность, что делает их подходящими для задач, требующих ввода данных или выбора пользователем. Описательные чипы предоставляют быстрый доступ к важной информации. Например, чип может отображать категорию, например «Спорт» или тег, например «Срочно».

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

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

Чекбокс

Представьте, вы выбираете ингредиенты для пиццы на сайте. Вы можете отметить несколько вариантов, например, пепперони, грибы и сыр. Это чекбокс. Он как кладовка, куда можно положить все, что нужно (и не нужно).

Радиобаттон

А теперь представьте, что вы выбираете пол при регистрации на сайте. Вы можете выбрать только один вариант: мужской или женский. Это радиобаттон. Она как старый радиоприемник, где можно выбрать только одну волну.

Аккордеон

Представьте, вы читаете блок с часто задаваемыми вопросами (FAQ) на сайте. Каждый вопрос скрыт под заголовком, и вы кликаете на него, чтобы развернуть поле и узнать ответ. Это аккордеон. Он как гармошка, которая складывается и разворачивается, скрывая и показывая контент, чтобы не перегружать экран.

Дропдаун

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

Этот элемент дизайн-системы имеет несколько разновидностей:

Снэкбар

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

Тост

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

Вместо заключения

Надеюсь, теперь вам стало немного проще ориентироваться в терминологии!

Главное — не зацикливаться на определениях, а понимать, зачем нужен тот или иной элемент и как он влияет на пользовательский опыт. Помните: хороший дизайн – это не только красиво, но и понятно.