какие фишки можно сделать на сайте

15 «фишек» для сайтов или как усовершенствовать сайт

На каком этапе продумываются «фишки» для сайтов? Какими могут быть эти «фишки»?
Для чего они нужны? Как уместно применить «фишку» и в чем их главная задача?
На все эти вопросы мы постарались ответить в статье и показать на конкретных примерах.

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

Так, на сайте Теплокрепости мы показали выгоду от использования той или иной технологии при постройке дома.

Слайдеры используются под разные задачи. Они нужны для привлечения внимания к тем или иным разделам, акциям, товарам.
Мы привыкли к стандартным слайдерам, где меняются изображения и контент поочередно, справа-налево. Такие слайдеры имеют место быть, но если у Вас есть важный контент, с которым можно «поиграть» в дизайне, то можно его оформить интересным слайдером.

Такие факты точно не останутся незамеченными!

Еще пример, простые, приятные анимации на слайдере сайта компании “Мой Офис”

Зачастую, пользователю нужно просто увидеть, чтобы понять хочет он купить или нет. Поэтому, очень важно визуализировать результат. То есть, если Вы продаете диваны и у конкретной модели 5 вариантов расцветки, почему б не показать их все? Многие интернет-магазины делают выбор цвета в виде выпадающего списка, или даже с помощью “цветных квадратиков”, но это все не работает, если человек не увидит весь диван именно в том, цвете, который он хочет.

“Это не фишка”, — скажете Вы. Но у нас есть аргументы в пользу того, что в реальности это фишка. И вроде бы все кивают головой, что да, нужны качественные фото, видео, но мы часто сталкиваемся с тем, что у заказчика подобного контента просто нет. При этом пожелания к дизайну могут быть самые изысканные, и непременно одно из требований будет задействовать большие, красивые фотографии, которые исполнители находят на фотостоках, но при наполнении реальным контентом сайт перестает быть, таким, каким его задумали.
Поэтому, если Вы продаете товар, который необходимо “показать лицом”, то будьте готовы к тому, что надо будет генерировать необходимый контент и именно это станет фишкой вашего сайта.

Хороший пример “Показать товар лицом” сайт Ювелирного бренда The Saplings

Отличные фотокарточки, не требующие увеличения на сайте Студии интерьера Форес т, можно не только посмотреть все вариации товара, но и посмотреть фото товара в интерьере.

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

Так на сайте ФОК Гагаринский посетителям предлагается ответить на вопросы викторины, чтобы получить скидку.
Вопросы викторины и ответы можно задавать через административную панель сайта.

Простой, но действенный инструмент для продаж. Если расчет цены складывается из нескольких параметров, то можно предложить “поиграть” с этими параметрами и самим рассчитать стоимость конечного продукта/услуги.

Например, на сайте интернет-провайдера К-телеком есть возможность менять параметры в тарифе и рассчитывать стоимость:

На сайте интернет-магазина дверей Sidoorov в разделе межкомнатных дверей также можно посчитать стоимость двери в зависимости от размера полотна и наличия погонажных изделий.

Автоматизировать необходимо процессы, которые происходят постоянно.
Например, у вас есть складская система, которая привязана к кассам, именно в ней можно отследить актуальное количество товаров и цену, а значит можно настроить синхронизацию по тем пунктам, которые обновляются. В интернет-магазине Канистра происходит ежесуточная синхронизация с 1С по товарам, ценам, остаткам, таким образом на сайте поддерживается актуальная информация по всем товарам.

У компании Diko-group настроена синхронизация по контрагентам, их заказам, их накопленным бонусам.

На некоторых сайтах будет актуально сделать подарочные сертификаты, которые можно будет дарить, просто пересылкой на e-mail. Хотя, для материальности подарка, такой сертификат можно и распечатать.

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

На сайте Рамблер/кассы есть магазин, где можно приобрести сертификаты разного номинала на покупку билетов в кинотеатрах-партнерах рамблер/кассы. Такое решение несомненно увеличивает продажи и становится фишкой, ведь сертификат можно подарить на любой праздник.

А является ли фишкой адаптивность для сайта? Безусловно, да! Современный сайт просто обязан быть адаптирован под мобильные устройства. Статистика показывает, что 50% пользователей заходят в интернет с мобильного и ПК и 16% населения выходят в интернет только с мобильного. Отсюда вопрос, хотите ли вы потерять те самые 16% пользователей, а может и все 54%.

Установку SSL сертификата можно назвать фишкой, а можно назвать необходимостью.

SSL (Secure Sockets Layer) представляет собой криптографический протокол, который обеспечивает защищенную передачу информации.

SSL сертификат необходим в случае работы с электронными деньгами, при необходимости передачи конфиденциальной информации (номера кредитных карт, паспортные данные, пин-коды, пароли и др)

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

Мы уже рассказывали, что считаем своим долгом делать красивые OG-метатеги и это входит в наш чек-лист готовности сайта

Open Graph — популярный стандарт разметки веб страниц, который помогает соцсетям правильно отображать превью сайта по ссылке. Вы можете видеть такие превью уже почти везде: в сообщениях и постах в соцсетях, в мессенджерах, даже в смс-ках (iMessage на iOS)!

Еще один обязательный пункт подготовки сайта к публикации — создание Фавиконов.
Никогда не знаешь, где ваш проект сохранят в закладки, поэтому мы создаем фавиконы под все основные операционные системы.

В действительности, все вышеперечисленное не имеет значения, если вы не установите на свой сайт Гномопад!

Источник

Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.

3D-анимация на JS

Первый трюк — замечательный трёхмерный эффект на JS.

Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.

Как это делается

Сначала создаётся HTML div:

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

Откройте для себя Vanta.js для анимации фона

Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:

Как это делается

Это довольно просто. Добавьте в HTML такой код:

Это установит фон Vanta.js Globe для идентификатора htmlid.

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal

Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:

Как это делается

Изменение размера и цвета букв

Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:

Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:

Свойство animation

Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства

Вот полный список значений, которые может принимать каждое из этих вложенных свойств:

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

Несколько анимаций

Вы можете разделить значения запятыми, чтобы также объявить несколько анимаций в селекторе. В приведённом ниже примере мы хотим изменить цвет круга в @keyframe, одновременно перемещая его из стороны в сторону с помощью другого свойства.

Производительность

Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:

Какие свойства можно анимировать?

Поддержка браузерами

Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.

Настольные

Префиксы

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

Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

Источник

11 Фишек Сайта, Которые Работают Лучше Даже Без А/В-тестов

Вы сотни раз слышали, что все нужно тестировать, но сейчас у вас нет ни времени, ни идей?

У меня есть для вас хорошая новость!

В этой статье вы узнаете как минимум несколько действенных фишек, которые повысят конверсию вашего сайта.

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

Готовы убедиться в этом? Тогда поехали!

11 фишек, которые конвертируют больше:

1. Статическое изображение или одно предложение

Рано или поздно этот момент настанет – вы спросите: «может попробовать сделать слайдер?»

Ответ: нет, не может!

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

Чувствую, как пулей в меня летят ваши мысли: «Постой, но посмотри на большинство успешных интернет-магазинов – у всех есть слайдеры! Почему тогда мы должны от них отказаться?»

Давайте во всем разберемся по порядку.

Есть 3 основных причины, почему вам не стоит использовать слайдер

В конце концов, пользователи хотят контроля, а автослайдер предлагает им противоположное.

Какое есть решение?

Используйте простое статичное изображение. Например, как тут:

Но если вы все-таки по какой-то причине решили установить слайдер, воспользуйтесь несколькими советами, как сделать его эффективней.

Как улучшить слайдер?

Чтобы подтвердить сказанное, посмотрите на главную страницу Reebok (статичная картинка):

Она привлекательней с точки зрения оптимизации, чем главная страница с автослайдером компании Nike :

Если вы все-таки собираетесь делать слайдер, сделайте это правильно. Но лучше отказаться от него вообще.

2. Гамбургер + «Меню»

Кто не сразу догадался, мы говорим об иконках меню.

Просто Гамбургер – это модно сейчас. Но проблема в том, что многие думают, что он на самом деле работает. Тесты американских оптимизаторов показали, что в подавляющем большинстве это не так.

Почему оптимизаторы против просто гамбургера?

Примечание: Это правило не универсальное. Вполне вероятно, что в вашем случае он будет хорошим вариантом.

Как сделать значок интуитивно понятным?

Добавьте к нему подпись «меню» и выделите насыщенным цветом.

Гамбургер + «меню» + цвет – работают лучше.

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

3. Правильное предложение ценности

Вы удивитесь, у скольких предпринимателей отсутствует торговое предложение. Не то, чтобы оно у них недостаточно хорошее, его нет абсолютно.

Тут даже без тестов понятно, если вы ничего не говорите и не предлагаете (не надо надеяться, что клиенты догадаются, чего вы от них хотите), конверсии не будет.

Что значит предложение ценности?

Это основная причина, почему потенциальные клиенты должны что-то у вас покупать. Если еще проще, это причина №1, из-за которой ваш сайт либо продолжат смотреть, либо сразу уйдут.

Что делает предложение по-настоящему ценным?

1. Заголовок. Он привлекает внимание. Что конкретно вы предлагаете? Только коротко, вкусно и актуально.

2. Подзаголовок или 2-3 предложения абзаца. Он раскрывает суть вашего предложения, кому оно предназначено и почему выгодно.

3. Список из 3-х буллетов. Тут вы можете перечислить ключевые преимущества и особенности.

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

И помните, оно должно быть релевантным (то есть, соответствовать тому, на кого направлено), иметь количественное значение и отличаться от конкурентов.

4. «Липкий» контент

Западный эксперт Брайан Мэсси утверждает, что с использованием «липкого» контента конверсия на вашем сайте возрастет. Они проводили тесты с «липкой» строкой, которая содержала призыв к действию. Результат — рост конверсии на 400%.

Не исключено, что через какое-то время эффективность таких штук уменьшится. Но эксперты успокаивают: произойдет это нескоро. Сейчас «липкий» контент притягивает посетителей в воронку как сумасшедший.

Кстати, вот хороший пример «липкого» контента на сайте GM:

5. Видео

Видео действительно помогает дальнейшему движению клиентов в воронке и конвертирует больше (даже если они его не смотрели).

Все знают, что автозапуск видео в соцсетях раздражает. Но, как не удивительно, в основной массе оно конвертирует лучше.

Если помните, в Facebook было убрали автозапуск, но не так давно снова вернули (только без звука). Почему? Они провели аналитику и увидели, что количество лайков и комментариев к видео выросло на 10%.

То, что я рассказываю, вам интересно? Ставьте «лайк»!

6. Минималистическая форма

Но как понять, что какое-то поле в вашей форме лишнее?

Проведите тест: «Эта информация 100% нужна, чтобы завершить транзакцию?». Если вы не можете честно ответить «да» на этот вопрос, удаляйте это поле без сомнений.

7. Заметные контакты

Кажется, это мелочь, но как только вы разместите ваш номер телефона и email в шапке вашего сайта, конверсия вырастет. Небольшая коррекция, которая сразу же усиливает результат.

Если ваши контакты на виду, это вызывает доверие и успокаивает. Люди хотят осознавать, что могут связаться с вами.

Самый известный пример, конечно же, Zappos. Их фанатичное отношение к поддержке клиентов ярко выражено и на их сайте:

8. Живой чат

Онлайн-чат стал неотъемлемой частью хорошего сервиса. И на это есть весомая причина — он конвертирует клиентов.

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

В пример приведу все тот же Zappos. Вот их живой чат. Консультант откликнулся даже раньше, чем я успел что-либо написать.

9. Реальные отзывы

Если вы используете реальные отзывы, это увеличивает количество переходов. Опыт уже состоявшихся клиентов способствует новым покупкам, они вызывают доверие к вашему сайту. Подробнее о том, почему и как отзывы могут усилить конверсию на целых 65%, я рассказывал в этой статье , поэтому повторяться не буду.

Для себя запомните: простые текстовые отзывы — это хорошо, с фотографиями — лучше.

Ну а если вы решили добавить видео — продажи возрастут еще больше.

В своей практике мы используем все варианты: и скриншоты текстовых, и видео:

10. Заказ без регистрации

Регистрация — это дополнительный барьер для клиента. По статистике, 1 из 4-х лояльных пользователей уходят с сайта потому, что для покупки им нужно авторизироваться. Но этот вопрос можно решить.

Предложите покупателям оформить быстрый заказ без регистрации.

На днях я совершал покупку в одном из интернет-магазинов. Все, что от меня требовалось, — это ввести Ф.И.О. и мобильный телефон. Быстро и удобно.

11. Бесплатная доставка

Представьте: вы настроились на конкретную стоимость покупки. Да, где-то глубоко вы понимаете, что еще сюда, скорее всего, нужно добавить плату за доставку, но окрыленные эмоциями, вы вряд ли сейчас об этом думаете. И вот вы нажимаете кнопку купить, смотрите итоговую сумму вместе с доставкой и… эйфория потихоньку сходит на нет.

Идеально, если за доставку платить не придется. Вот как, например, в этом интернет-магазине:

Но это не всегда выгодно для бизнеса. Потому поэкспериментируйте:

Заключение

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

И с этим, пожалуй, нужно смириться.

Тем не менее, эти 11 фишек, скорее, способствуют росту конверсии, чем наоборот. В любом случае, они станут для вас хорошей отправной точкой для старта.

Было полезно? Хотите узнать еще больше о том, как оптимизировать ваш сайт и выжимать из него максимум? Кликайте «мне нравиться»!

Вы уже знаете, что в Instagram можно размещать рекламные объявления? — Читайте сейчас: Как Запустить Рекламу в Instagram: Детальное Пошаговое Руководство

Источник