Сообщение от клиента с просьбой нарисовать «всплывашку» вводит в ступор, и вы начинаете вспоминать...
В чем разница между модальным и немодальным окном? Или ему нужен поп-ап? Блин, или это одно и то же?
Засучиваем рукава и углубляемся в дебри терминов, чтобы больше никогда не путаться.
Поп-ап vs. Модальное окно vs. Немодальное окно
Поп-ап
Представьте: вы читаете статью на сайте, и вдруг на весь экран всплывает окно с предложением подписаться на рассылку. Это «поп-ап» — сосед, который решил начать сверлить, пока вы мирно спите. Это всплывающее окно, которое (при совершении действия или по таймингу) появляется поверх основного контента, но не обязательно блокирует взаимодействие с ним. Слишком агрессивные поп-апы раздражают пользователей. Используйте их только в том случае, если уверены, что предлагаете что-то действительно ценное. Дайте пользователю возможность легко отказаться от предложения и закрыть окно.
Модальное окно
А теперь представьте другую ситуацию: вы нажимаете кнопку «Удалить» на сайте, и появляется окно с вопросом: "Вы уверены, что хотите это сделать?". Это модальное окно, которое вежливо ждет вашего ответа. Модальное окно блокирует основной интерфейс и требует от пользователя действий, прежде чем продолжить работу.
Немодальное окно
И, наконец, представьте, что вы используете графический редактор, например, Photoshop. Вы открываете панель слоев, и она не блокирует основное окно. Вы можете одновременно работать и с изображением, и с панелью слоев. Это немодальное окно. Оно позволяет вам работать в нескольких местах одновременно, не ограничивая вашу свободу действий. То есть пользователь может одновременно взаимодействовать с ним и с основным интерфейсом.
Карусель vs. Слайдер
Карусель
Представьте: вы смотрите фотографии в онлайн-альбоме на телефоне. Вы проводите пальцем по экрану, чтобы перелистывать фотографии. Это карусель. Она отображает последовательность элементов (обычно изображений или карточек) и позволяет пользователю переключаться между ними горизонтальным или вертикальным свайпом.
Слайдер
А теперь представьте: вы регулируете громкость в плеере. Вы тянете ползунок вправо, чтобы увеличить громкость, или влево, чтобы уменьшить. Это слайдер. Слайдер позволяет пользователю выбирать значение из заданного диапазона, перемещая ползунок.
Бейдж vs. Чип
Бейдж
Представьте, что вы видите уведомление в приложении. На значке приложения в углу экрана появляется красная цифра "3". Это бейдж. Это визуальный индикатор, который отображает статус (например «онлайн» и «оффлайн», количество или другую информацию.
Чип
А теперь представьте, что вы ищете товары в интернет-магазине. Вы добавляете несколько фильтров, например, "Цвет: синий", "Бренд: Nike". Каждый фильтр отображается в виде маленькой кнопки с крестиком, чтобы его можно было быстро удалить. Это чип. Он как маленький ярлык, который позволяет быстро управлять выбранными параметрами. Чипы предоставляют более подробную информацию и интерактивность, что делает их подходящими для задач, требующих ввода данных или выбора пользователем. Описательные чипы предоставляют быстрый доступ к важной информации. Например, чип может отображать категорию, например «Спорт» или тег, например «Срочно».
Почему чипы относятся к категории инпутов, если мы там ничего не вводим?
Чип действительно является input-компонентом, то есть элементом ввода информации, к которым мы относим текстовые поля. Дело не в том, что мы вводим что-то внутрь чипа, а в том, что добавление, удаление или изменение чипа – это способ ввода данных в систему, просто в другом формате. Например, если вы добавляете чип с тегом «дизайн» к статье, это влияет на то, как статья будет отображаться в результатах поиска и в каких категориях она будет классифицирована.
Почему чип, это не кнопка, если на него можно нажать, чтобы, например, удалить?
Кнопка «запускает» процесс: отправляет форму, переходит на страницу, сохраняет данные и т.д. То есть, кнопка выполняет действие, результат которого сразу очевиден пользователю. Чип же скорее «описывает» что-то: фильтр, тег, категорию, участника. Даже если при нажатии на чип происходит действие, это действие связано с изменением данных, которые представляет чип. И это изменение может быть не сразу очевидным (например, нужно обновить список фильтров).
Чекбокс vs. Радиобаттон
Чекбокс
Представьте, вы выбираете ингредиенты для пиццы на сайте. Вы можете отметить несколько вариантов, например, пепперони, грибы и сыр. Это чекбокс. Он как кладовка, куда можно положить все, что нужно (и не нужно).
Радиобаттон
А теперь представьте, что вы выбираете пол при регистрации на сайте. Вы можете выбрать только один вариант: мужской или женский. Это радиобаттон. Она как старый радиоприемник, где можно выбрать только одну волну.
Аккордеон vs. Дропдаун
Аккордеон
Представьте, вы читаете блок с часто задаваемыми вопросами (FAQ) на сайте. Каждый вопрос скрыт под заголовком, и вы кликаете на него, чтобы развернуть поле и узнать ответ. Это аккордеон. Он как гармошка, которая складывается и разворачивается, скрывая и показывая контент, чтобы не перегружать экран.
Дропдаун
Теперь представьте, что вы заполняете форму регистрации и выбираете страну из длинного списка. Вы кликаете на поле, и появляется выпадающий список с вариантами. Вы можете прокрутить список и выбрать нужную страну. Это дропдаун.
Этот элемент дизайн-системы имеет несколько разновидностей:
- Select: Выбор одного варианта. Выпадающий список, где можно выбрать только один вариант из предложенных. После выбора список сворачивается, а в поле отображается выбранный пункт. До выбора может стоять текст-заглушка, например, «Выберите страну…» или рандомный/первый вариант из списка. Подходит для выбора языка, валюты, страны, а также в качестве меню на сайте.
- Combobox: Выбор из списка или ввод вручную. Это сочетание выпадающего списка и текстового поля. Пользователь может либо выбрать вариант из списка, либо ввести значение вручную. Комбинированный список может работать в двух режимах: обычном и режиме автозаполнения. В обычном режиме список вариантов виден сразу или при клике, а в режиме автозаполнения – только после начала ввода текста. Идеально для поиска товаров или услуг, а также для выбора среди большого количества пунктов, например при заполнении поля «Выберите город…»
- Multiselect: Выбор нескольких вариантов Это выпадающий список, с множественным выбором вариантов, например «Выберите ваши хобби…» в регистрации на сервисе онлайн знакоств. Также подходит для выбора фильтров.
Снэкбар vs. Тост
Снэкбар
Представьте, вы отправили письмо по электронной почте. Внизу экрана появляется небольшая полоска: «Письмо отправлено». И рядом кнопка «Отменить» с таймером в несколько секунд. Вы успеваете нажать кнопку, и письмо возвращается в черновики. Это снэкбар. Он для ситуаций, когда нужно дать возможность отменить действие или что-то быстро исправить. Снэкбары всегда находятся в нижней части экрана, чтобы быть на уровне взгляда пользователя.
Тост
А теперь представьте, что вы успешно сохранили документ в Гугл Доке. В углу экрана на секунду появляется небольшое сообщение: «Документ сохранен». Это тост. Он просто сообщает вам о результате действия, не требуя никакой реакции.
Вместо заключения
Надеюсь, теперь вам стало немного проще ориентироваться в терминологии!
Главное – не зацикливаться на определениях, а понимать, зачем нужен тот или иной элемент и как он влияет на пользовательский опыт. Помните: хороший дизайн – это не только красиво, но и понятно.
