Виджет для сайта: как выбрать угол, размер и цвет

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

Угол

Правый нижний — привычное место, туда смотрят по умолчанию. Проблема в том, что там же живут кнопка звонка, значок мессенджера, кнопка «наверх» и плашка про cookie.

Практический порядок действий:

• откройте свой сайт и посчитайте, сколько элементов уже в правом нижнем углу;
• если их больше одного, уберите лишние или перенесите виджет в левый нижний;
• на мобильном проверьте отдельно: там угол занимает половина панели действий.

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

Размер

Кнопка должна попадать под палец с первого раза. Ориентир — размер, сравнимый с другими кнопками интерфейса на телефоне, не меньше.

Слишком крупная кнопка перекрывает содержимое и вызывает раздражение. Слишком мелкая не нажимается на ходу. Проверяется это не в браузере, а на телефоне в руке.

Цвет

Два подхода, оба рабочие:

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

Контрастный акцент. Заметнее, но должен сочетаться с палитрой, иначе смотрится как чужеродная реклама.

Что не работает: цвет, совпадающий с кнопкой «купить». Пользователь путает их и нажимает не туда.

Момент появления

Самая частая ошибка — окно, разворачивающееся через три секунды после захода. Человек ещё не понял, куда попал.

Разумные условия:

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

Последнее условие лучшее из всех: там альтернатива — уход.

Поведение после закрытия

Закрыл — значит закрыл. До конца сессии, а не до следующей страницы. Виджет, открывающийся заново на каждом переходе, — самая надёжная причина уйти с сайта.

Кнопка при этом остаётся: человек должен иметь возможность вернуться.

Мобильная версия

Проверять отдельно, на живом телефоне:

• кнопка не перекрывает корзину и кнопку звонка;
• окно открывается на весь экран, а не в четверти;
• клавиатура не закрывает поле ввода;
• страница за окном не прокручивается вместе с ним;
• закрыть окно можно одним понятным жестом.

Что написать на кнопке и в приветствии

Кнопка: короткий глагол про пользу. «Подобрать» лучше, чем «Чат», потому что говорит, что произойдёт.

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

Практический разбор запуска — виджет на сайте за один день.

Вывод и следующий шаг

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

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

Частые вопросы

В каком углу ставить виджет?

В правом нижнем, если он свободен. Иначе в левом нижнем: это лучше, чем третья кнопка в стопке.

Через сколько секунд показывать окно?

Не по таймеру, а по поведению: прокрутка, время на странице или пустая выдача.

Можно ли открывать окно автоматически?

Можно на пустой выдаче и на странице ошибки. На главной при заходе — нет.

Какого цвета делать кнопку?

Фирменного или контрастного, но не такого же, как кнопка покупки.

Что писать на кнопке?

Глагол пользы: «Подобрать», «Помочь выбрать». Слово «Чат» ничего не обещает.

Нужно ли прятать виджет на некоторых страницах?

Да, на странице оформления заказа он мешает. Там человек уже покупает.