Знакомая ситуация: мы спокойно просматриваем веб-сайт, переходя от одной страницы к другой, и вдруг внезапно выпрыгивает всплывающее окно (лайтбокс) прямо по центру нашего экрана. Неприятно, правда?
В то время как по задумке всплывающие окна не должны быть разочарованием. На самом деле, они могут быть очень полезны в уведомлении пользователей о рекламных акциях, в которых они могут быть заинтересованы, или просто размещении важного контента в центре внимания. Ключ к созданию успешных всплывающих окон на вашем сайте лежит в изучении времени показа, дизайна и информации (подробнее об этом позже).
При создании веб-сайта учитывайте преимущества, которые лайтбокс может иметь для вашего бизнеса. Создав правильное всплывающее окно, вы увеличите лиды вашей компании и продажи. Это исследование OptiMonk показывает, как BitNinja удалось увеличить свои лиды на 65%, благодаря добавлению лайтбокса в стратегическую точку на своем сайте. Представьте себе, что это может означать в доходах.
В этой статье мы собрали все что вам нужно знать о лайтбоксах, от того что это вообще такое, до невероятных примеров:
Что такое лайтбокс?
В веб-дизайне lightbox - это наложение окна, которое появляется поверх веб-страницы, блокируя часть содержимого на странице. Когда появляется всплывающее окно, фон часто затемняется и отключается, что означает, что посетители сайта не могут взаимодействовать с другим контентом на веб-сайте. Это привлекает внимание к самому лайтбоксу. Лайтбокс может появиться в любом месте экрана: в центре или в виде полосы вверху, внизу или по бокам страницы.
Лайтбоксы часто используются для получения адресов электронной почты потенциальных клиентов. Это достигается различными способами, например приглашая посетителей подписаться на ваш блог, получать обновления и информационные бюллетени, или получить скидку на ваши продукты.
Они также могут использоваться для выделения любых важных сообщений, таких как предложения, акции или события, которые вы проводите. Или для того чтобы поделиться важным и свежим контентом, например предложить посмотреть новое видео, прослушать музыку или прочитать статью.
Примеры лайтбокса
Лайтбоксы могут иметь множество стилей, от сочетания изображений с текстом. Чтобы отправить вас по правильном пути, вот несколько точечных примеров лайтбокса из подборки веб-сайтов:
Рекламный лайтбокс
У вас есть интернет-магазин? Подумайте о том, чтобы встречать посетителей вашего сайта специальной скидкой, как это сделал женский модный бренд Triptych London. Дизайн их лайтбокса чистый, легкий и воздушный, что делает его еще более привлекательным. Они также добавили изображение, чтобы помочь привлечь внимание посетителей.
Мобильный лайтбокс
При проектировании мобильной версии сайта, в первую очередь, нужно не начать бомбардировать посетителей вашего сайта информацией, которая будет отвлекать их. Чтобы как можно меньше нарушать их просмотр сведите лайтбоксы к минимуму и выберите ненавязчивый дизайн. Плавный просмотр страницы бренда Sunny предлагает всплывающее окно, которое занимает только часть экрана и использует дружественный, приглашающий текст.
Email лайтбокс
На этом примере вас приветствует яркий желтый цвет и яркий рисунок. Честный, язвительный тон предлагающий подписку, вызывает улыбку на лицах посетителей, побуждая нас присоединиться к их рассылке.
Верхний / нижний лайтбокс
Сейчас это обычное дело, для того чтобы уведомить посетителей сайта о вашей политике cookies. Food Algorithm сделали то же самое на своем сайте, используя лайтбокс в виде тонкой полосы в верхней части страницы. Это ненавязчиво и стильно сочетается с остальным их дизайном, как с точки зрения цветовой гаммы сайта, так и с выбором шрифта. Благодаря затемнению остальной части страницы, этот тонкий лайтбокс все еще удается выделить.
Когда и как использовать лайтбокс на вашем сайте
Сталкиваясь с уведомлениями и всплывающими окнами на регулярной основе, многие из нас кажется развили способность автоматически игнорировать их, или просто закрывать сразу сайт. Чтобы использовать лайтбоксы и не мешать посетителям сайта получать необходимую информацию, предлагаем несколько основных принципов использования всплывающих окон на вашем сайте:
Не показывайте всплывающее окно сразу. Подумайте - зачем посетителям подписываться на ваш список рассылки, если они даже не знают, что делает ваш бренд? Установите лайтбокс, чтобы он появился, как только ваши пользователи потратили некоторое время на просмотр, и уже изучили ваш бизнес на каком-то уровне.
Настройте лайтбокс, чтобы он появился на контекстно-релевантной странице. Вы можете настроить определенную страницу для отображения вашего лайтбокса. Например, если вы хотите пригласить посетителей подписаться на ваш блог, подумайте об этом, когда они находятся на странице блога, а не на домашней странице. Если вы хотите предложить им скидку, ваш лайтбокс может появиться, когда они находятся на странице интернет-магазина.
Рассмотрите возможность добавления всплывающего окна выхода. Это оверлеи, которые появляются только тогда, когда посетитель собирается покинуть ваш сайт. Они рассматриваются как мощный способ повышения конверсии. Они могут помочь остановить посетителей от ухода с вашего сайта, предложив им последний фрагмент контента и надеясь, убедить их подписаться на ваш список рассылки, ну или просто остаться на сайте.
Воздержитесь от всплывающих окон, когда пользователи находятся в середине выполнения своей задачи. Это приведет к прерыванию потока посетителей и общей навигации по сайту. Например, если пользователи находятся в процессе планирования встречи в вашей системе онлайн-бронирования, они не хотят, чтобы их прерывали другой информацией на полпути.
Не все сообщения должны быть в виде всплывающего окна. Хотя всплывающие окна отлично подходят для привлечения внимания, они также могут отвлекать его. Сведите к минимуму использование всплывающих окон, рассмотрев возможность отображения определенных элементов или сообщений в альтернативном формате.
Например, если у вас есть некоммерческий веб-сайт и вы хотите, чтобы посетители жертвовали, было бы столь же эффективно включить кнопку "Пожертвовать" в меню, которое остается на месте во время прокрутки.
То же самое касается представления сообщений об ошибках при неправильном заполнении онлайн-формы. В таких случаях часто используются всплывающие предупреждающие знаки, но простое сообщение или красный предупреждающий знак также могут донести нужную информацию и не злить пользователя.
Лайтбокс дизайн и копирайтинг советы
Пусть все будет просто. Это справедливо как для дизайна, так и для создания всплывающего окна. Дизайн лайтбокса должен привлечь внимание, поэтому нет необходимости в сложных деталях. Вместо этого, выбирайте чистый, смелый взгляд. Убедитесь, что текст легко читается на фоне с точки зрения размера и цветового контраста.
Используйте понятный, прямолинейный язык. Убедитесь, что сообщение, которое вы хотите передать, легко понять. Конечно, вы всегда можете добавить небольшой личный текст, который укрепляет индивидуальность бренда.
Используйте визуальную иерархию в тексте. Определите, что является центральным сообщением вашего всплывающего окна, а затем убедитесь, что это самый заметный элемент текста в вашем дизайне. Например, если вы хотите предложить своим клиентам скидку 10%, эта информация должна выделяться тем, что она больше по размеру и имеет некоторое пустое пространство вокруг себя.
Придерживайтесь своему бренду. Вы хотите, чтобы ваш лайтбокс выделялся, но не как больной палец? Убедитесь, что визуальный язык является единым с остальной частью дизайна вашего сайта, с точки зрения цветовой палитры, шрифта и общего вида.
Сделайте кнопку призывающую к действию выделяющейся. Обычно, должна быть только одна кнопка, которую пользователи должны нажать на вашем всплывающем окне - и это обычно кнопка "Зарегистрироваться" (или какая-то другая). Сделайте её особенной с помощью доминирующего цвета, который выделяется на фоне, или подчеркните её границу.
Объясните что вы хотите от посетителя. Пользователи должны мгновенно понять, что именно от них хотят. В зависимости от контекста, обычно используют фразы "зарегистрироваться" или "подписаться", но вы также можете добавить оттенок личности, используя что-то вроде "держите меня в курсе" или " присоединяйтесь к веселью."
Подумайте о том, чтобы добавить привлекательный образ, который соответствует вашему бренду. Изображения отлично подходят для привлечения внимания и привлечения посетителей сайта, а также установки определенного тона. Вы можете найти тот, который дополняет сообщение, которое вы передаете, при этом убедившись, что это не блокирует или не мешает тексту.
Если у вас сложности в создании красивого лайтбокса вы всегда можете обратиться за помощью к профессиональным дизайнерам, которые с легкостью выполнят данную работу.
А какие вы можете дать советы по созданию всплывающего окна? Или вы считаете, что лайтбоксы это зло и от них нужно отказываться? Пишите ваши мысли по этому поводу в комментариях, я также подписывайтесь на канал.