Что такое снэкбары и как правильно их использовать в дизайне интерфейсов
Время, когда качественный контент и полезный продукт перекрывали недостатки устаревшего интерфейса, давно прошло. Современные пользователи придирчиво изучают UI. Если на этапе знакомства они столкнутся с проблемами — поведенческие факторы сильно упадут.
В этой статье поговорим о коротких уведомлениях, которые часто используются в дизайне сайтов и мобильных приложений.
Snackbar — toast-сообщение, которое появляется в разных частях интерфейса. Главная задача элемента — сообщить о выполненном действии. В большинстве случаев в блоке есть кнопка для повторного выполнения операции.
Снэкбары маленькие, но заметные. Они появляются на несколько секунд и за это время должны проинформировать о завершении действия. Тема toast-сообщений мало изучена. Даже в зарубежном сегменте интернета мало обучающих статей. Кроме подробного руководства по разработке снэкбаров в стиле Material Design, информации почти нет.
У новичков в веб-дизайне могут возникнуть сложности с этим элементом. Он отличается от привычного набора компонентов, о которых рассказывают на профильных курсах. В рунете почти нет полезных статей о материальном дизайне.
Для toast-сообщений часто проводят аналогию с тостером. Человек кладёт хлеб внутрь, и когда тосты готовы, они выпрыгивают наверх. Уведомления работают аналогично — появляются в определённый момент и сообщают полезную информацию. К примеру, пользователь открыл приложение Dropbox, выбрал фотографии, и после успешной загрузки появилось сообщение об успешном добавлении файлов. Через 3-4 секунды оно пропадает, и человек решает другие задачи.
Дизайнеры должны научиться отличать виды информационных блоков, чтобы правильно использовать их в дизайне интерфейсов. Посмотрите на картинку ниже и найдите визуальные отличия.
В toast-уведомления обычно добавляют несколько кнопок. В этом примере можно отменить предыдущее действие и закрыть сообщение. Снэкбары дают полезную информацию и предлагают решение проблем. Если не удалось загрузить фотографии с первого раза — достаточно нажать кнопку, и система автоматически начнёт закачивать файлы на сервер. Пользователю не надо перезагружать приложение, выбирать картинки из библиотеки и ждать загрузку. Баннер — лаконичная подсказка, которая постоянно находится на виду. В отличие от двух предыдущих решений, её нельзя скрыть.
В интерфейсе веб-сайтов снэкбары используются нечасто, но их можно адаптировать почти под любой сценарий. Разберём простой пример. Представим, что заказчик попросил разработать дизайн новостной ленты. Предполагается, что обновление контента будет осуществляться с помощью прокрутки. Snackbar можно использовать для информирования о проблемах. Показать, не работает интернет или система перегружена запросами.
Дизайнеры, которые не заботятся о дальнейшей судьбе проекта, могут сказать, что реализация toast-сообщений — задача программиста. Элемент максимально простой, на него уходит минимум времени. Доля правды в этом есть, но снэкбары играют важную роль для пользовательского опыта. Они должны быть информативными, красивыми и логичными. Хороший специалист по графике возьмёт эту задачу на себя.
Блок состоит из 3 частей:
Фрагмент текста должен быть связан с выполняемой задачей. Нельзя показывать отвлечённое сообщение, которое не относится к процессу. Иначе человек запутается и с большой долей вероятности закроет сайт или приложение. Контейнер или блок, в котором размещаются элементы, чаще всего выполнен в виде небольшого прямоугольника с серым фоном. Фигура должна быть непрозрачной, чтобы текст читался легко и быстро.
Следующий важный компонент — кнопка. Она появляется, если надо повторить действие. Не размещайте иконку в виде крестика для закрытия блока. Снэкбар — разновидность toast-сообщений, но принцип работы у него другой. Стандартные «тосты» закрываются по кнопке, а snackbar исчезает по таймеру.
Размещать составляющие блока случайным образом нельзя. Структура, которая описана выше, проверена на практике. Она используется на многих крупных проектах. Например, в продуктовой экосистеме Google. Никто не возьмётся оспаривать достижения команды, которая подарила миру Material Design.
Посмотрите, как Google предлагает использовать снэкбары. Серый текст, тёмный фон и фиолетовый цвет для кнопки действия. Уведомление не занимает много места, но отлично решает главную задачу — показывает человеку, что операция не была завершена и надо повторить её снова.
Мы уже говорили, что снэкбары — короткие уведомления. Они появляются после выполнения операции и быстро скрываются в недрах интерфейса. Из механизма работы плавно вытекают главные свойства:
Дизайнер, который хочет освоить ещё один полезный элемент интерфейса, должен запомнить основные принципы и соблюдать их в каждом проекте. Снэкбары работают по определённой логике, которую задали популярные приложения. Если выйти за рамки привычных сценариев, у пользователей могут возникнуть проблемы с использованием веб-сайта или продукта для смартфонов.
Ещё одно свойство, которое сильно влияет на опыт пользователей — положение блока. В большинстве случаев снэкбары отображаются в нижней части интерфейса. В зависимости от индивидуальных особенностей и структуры интерфейса, расположение может меняться. В следующих разделах мы остановимся на размещении более подробно.
В разработке любого проекта последнее слово остаётся за клиентом, но, если дело касается юзабилити и user experience — отстаивайте свою позицию. Расскажите, что изменение стандартной логики может негативно повлиять на поведенческие факторы. Никто не оценит полезность приложения, если в течение первых 5-10 минут, столкнётся с критической проблемой.
Для успешной работы дизайнерам нужен не только запас креативности, но и выдержка. Клиенты приходят и уходят, а проекты остаются в портфолио навсегда. Если каждая работа приносит пользу аудитории, значит дизайнер не просто зарабатывает деньги, а решает проблемы людей.
Заказчики бывают очень упрямыми. Особенно, когда дело касается интерфейса для коммерческих продуктов. Дизайнер должен быть на стороне аудитории. Если понимаете, что решение клиента нанесёт непоправимый ущерб юзабилити — постарайтесь аккуратно показать ошибку и предложить другие варианты.
Понимания основных свойств toast-сообщений мало. Надо разработать несколько вариантов уведомлений для реальных проектов, наладить контакт с программистом и протестировать готовое решение до запуска продукта в открытый доступ.
Собрали 8 советов, которые помогут в разработке идеальных уведомлений.
Содержимое снэкбара должно адаптироваться под все девайсы. На десктопах текст может состоять из одного-двух предложений. На мобильных устройствах лучше оставить одно предложение и настроить перенос на следующую строку. Программисту нужно обязательно сказать, что подсказка должна подстраиваться под разрешение. Можно задать блоку 100% ширину или ограничиться фиксированным значением.
Старайтесь найти идеальные пропорции. Помните, что главная задача снэкбара — уведомить пользователя о выполнении задачи или ошибке. Блок должен быть заметным, информативным и самодостаточным.
На мониторах с большим разрешением у дизайнера есть пространство для экспериментов. На мобильных устройствах полезная площадь сильно сокращается. Toast-сообщения традиционно размещают в нижней части интерфейса. Можно сделать небольшой отступ от края или использовать «липкий» формат.
Если в приложении навигация размещается в виде прикреплённого виджета, обязательно размещайте snackbar выше и следите, чтобы блок не перекрывал меню. Хоть он и пропадает без вмешательства пользователя, лучше не допускать таких ситуаций.
В примере ниже внизу постоянно закреплена область, состоящая из 4 виджетов. Снэкбары появляются чуть выше и не перекрывают важный элемент навигации. Это идеальный механизм работы.
Toast-сообщения возникают в определённый момент. Чтобы человек прочёл информацию и понял суть сообщения, хватит 2-3 секунд. Эксперты по веб-аналитике и графическому дизайну советуют показывать уведомление не менее 4 и не более 10 секунд. Значения, которые не попадают в эти рамки, могут негативно повлиять на пользовательский опыт.
Механизм появления уведомлений ложится на плечи программиста. Дизайнеру нужно лишь проверить, чтобы всё работало хорошо на разных устройствах. Для мобильных приложений не будет лишним закрытие подсказки жестом. Если пользователь столкнётся с тем, что блок не пропадает сам по себе, он попробует убрать его самостоятельно. Простой свайп вправо или влево в решающий момент может спасти впечатления о продукте.
Снэкбары — средство информирования. Они не должны быть единственным решением важных задач. К примеру, если с помощью приложения можно добавить фотографии в облако, snackbar нельзя делать способом загрузки файлов. Эта штатная функция должна выполняться из меню или специального диалога.
Если добавить в блок, который показывается всего пару секунд, важную опцию, пользователи запутаются. Снэкбары не надо вызывать специально. Они появляются в нужное время и дают визуальный сигнал, что всё в порядке или наоборот, надо выполнить действие снова.
Минус toast-сообщений в том, что они маленькие и отображаются в нижней части интерфейса. Пользователи знакомятся с контентом сверху вниз и редко обращают внимание на футер. Владельцы старых телефонов часто используют зум, чтобы рассмотреть детали. Они могут вообще не заметить всплывающие блоки.
Дизайнер должен адаптировать снэкбар под визуальный стиль приложения или сайта, чтобы элемент не казался чужеродным. Надо сделать так, чтобы сообщение сразу бросалось в глаза и его было сложно пропустить.
В этом вопросе на помощь снова приходят обучающие материалы по Material Design. Команда Google разработала отличные варианты дизайна.
Светлый текст на сером фоне, скруглённые углы и фиксированная ширина блока делают его идеальным для этой дизайн-системы.
Проверяйте отображение уведомлений на разных устройствах и особенно на смартфонах. Доля портативных гаджетов в статистике посещаемости всё время увеличивается. Идеальным решением будет светлый текст на тёмном бэкграунде с яркой кнопкой действия.
В некоторых случаях возникает необходимость показать несколько снэкбаров практически одновременно. Надо сделать так, чтобы их появление было упорядоченным. Можно добавить небольшую задержку или воспользоваться другими решениями.
Если два блока накладываются друг на друга или задерживаются в поле зрения надолго, пользователи постараются от них избавиться или закрыть интерфейс. Лучше избегать таких ситуаций, получить второй шанс от юзеров крайне сложно. Негативный опыт отпечатывается глубоко в памяти и может всплыть в самый неподходящий момент.
Snackbar подходит для быстрого информирования. Иногда лучше использовать toast с кнопкой закрытия или полноценный диалог. К примеру, если пользователь отправил новость на модерацию и ждёт завершения проверки, можно показать в верхней части экрана наглядное уведомление в виде попапа.
Концепты выше информативные и самодостаточные. Человек может в один клик отменить удаление файла или посмотреть прикреплённый файл. Кнопка закрытия помогает избавиться от «липкого» блока. Такой вариант уведомлений тоже можно использовать в зависимости от особенностей интерфейса.
Если пользователи должны видеть постоянный фидбек, снэкбары не подойдут. В облачном редакторе Google Docs реализовано автоматическое сохранение данных после изменения контента. Если каждый раз показывать уведомление — оно будет раздражать пользователей. Разработчики и дизайнеры решили задачу иначе. На верхней панели появляется короткая строчка, которая показывает, что правки сохранены. Обойтись без оповещения не получится. Надо показывать, что система работает и контент не потеряется.
Несколько плюсов такого формата:
Лучший навык дизайнера — понимание намерений пользователей. Если специалист знает, что аудитория хочет получить от сайта или приложения, он сможет разработать интерфейс для решения задач.
Мы уже говорили, что предназначение снэкбара заключается в быстром информировании. Уведомления появляются на 5-10 секунд и быстро пропадают. Словно короткий прогноз погоды посреди развлекательной телепередачи.
Темп жизни современных людей очень высокий. Проекты и бренды конкурируют за внимание целевой аудитории. Любая мелочь может испортить впечатления и тогда владелец сайта или приложения получит вместо конверсий только отказы.
Решения в стиле Material Design можно использовать как образец для работы, но это не значит, что надо копировать структуру и делать идентичные блоки. Покажем несколько удачных вариантов для понимания задачи.
Профессиональные дизайнеры и аналитики советуют размещать snackbar выше навигации. Если в приложении навигация расположена внизу, блок лучше выводить чуть выше основного виджета. Тогда не будет наложения и других проблем.
В этом примере дизайнер решил изменить стандартный подход. Он подвинул навигационную панель выше, а оповещение вывел снизу. Специалист выложил концепт на одном из тематических ресурсов и попросил юзеров дать комментарии о его решении.
Уведомление выглядит красиво. Текст легко читается на сером фоне, кнопок нет. Вполне удачный вариант, но надо понимать, как реализован механизм отображения. Если блок плавно подвигает навигацию вверх, проблем не будет.
Второй пример реализации разработан для приложения по продаже велосипедов. Дизайнер сделал несколько шаблонов в зависимости от структуры экрана. В первом случае блок окрашен в зелёный цвет и отлично просматривается на белом фоне. Подсказка с ошибкой выводится на белом полотне. Такой подход обеспечивает максимальную доступность и читабельность.
Toast-сообщения могут выводиться как с кнопкой действия, так и без. Структура зависит от контекста. Если надо повторить операцию снова или посмотреть результат — добавьте баттон. В противном случае лучше не перегружать блок.
Дизайнер предлагает несколько решений для оповещения. В данном случае лучше остановиться на первом и втором вариантах. Кнопку вставлять необязательно. С её помощью можно только закрыть сообщение, а не решить конкретную задачу. Если блок реализован правильно, оповещение пропадёт автоматически.
Любые уведомления создаются для того, чтобы проинформировать пользователей о выполнении действий. Они показывают статус системы и дают подсказки. Правильное использование снэкбаров улучшит юзабилити интерфейса и повысить лояльность аудитории.
Специалисты веб-студии IDBI разработают интерфейс, который идеально решит ваши задачи. Напишите нам или позвоните, чтобы обсудить проект.