Сделайте это с лендингом, чтобы задушить окончательно

129
0/10

Сделайте это с лендингом, чтобы задушить его окончательно

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

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

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

Содержание

  1. Избыток CSS и JS-скриптов.

  2. Невразумительный контент.

  3. Скверная типографика.

  4. Слайдеры, баннеры и «карусели».

  5. Изображения из бесплатных стоков.

  6. Popup-окна.

  7. «Тяжёлые» картинки.

  8. Сложная форма заказа.

1. Избыток CSS и JS-скриптов

Добавляя функцию, надстройку, скрипт вы делаете программный код тяжелее. Его объем растет всякий раз, когда сайт получает очередное нововведение. В результате скорость его загрузки становится настолько низкой, что не укладывается ни в какие нормативы. Стандартное время отображения страницы — 2 секунды. Если мобильный сайт загружается дольше, то Google исключает его из выдачи.

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

Когда возникнет необходимость добавить к странице что-то действительно нужное, используйте метод указания CSS в вашем web-редакторе Adobe Muse.

 

используйте метод указания CSS в вашем web-редакторе Adobe Muse
Указывайте атрибуты CSS в редакторе веб-страниц Adobe Muse, чтобы не перегружать страницу.

 

2. Невразумительный контент

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

Текстовый контент сыграет с сайтом злую шутку, если:

  • Смысл непонятен посетителю.

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

  • Отсутствуют CPA — призывы к действию.

 

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

 

3. Скверная типографика

Типографика — это то важное, о чем забывают позаботиться начинающие сайтостроители. Для читателя важен комфорт, с которым он будет постигать опубликованный вами текст. Он не должен испытывать напряжение для того, чтобы отделить буквы друг от друга. Разделите строки с помощью большого, но не слишком, междустрочного интервала. Выберите читабельный шрифт подобающего размера.

Задействуйте сплит-тестирование для того, чтобы выбрать оптимальные параметры типографики для целевого пользователя.

 

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

 

4. Слайдеры, баннеры и «карусели»

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

Задача лендинга — обратить на продукт внимание, возбудить интерес, вызвать желание и спровоцировать на целевое действие. Ненужная анимация сбивает с толку и вызывает негодование.

 

Пример использования каруселей и слайдеров на лендинге
Компания по продаже промышленных лакокрасочных покрытий установила на лендинге “карусель” из четырех баннеров, анимированная смена которых вызывает головокружение и тошноту. Создается впечатление, что произошло отравление парами только что нанесенной масляной краски.

 

5. Изображения из бесплатных стоков

Не применяйте изображения, скачанные из общедоступных фотостоков. Они могут часто встречаться в интернете. Лица моделей на фото становятся узнаваемыми, как у популярных актеров из массовых сериалов для домохозяек.

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

Пример использования одинаковых стоковых фото на разных сайтах

Пример 2 использования одинаковых стоковых фото на разных сайтах

Пример 3 использования одинаковых стоковых фото на разных сайтах

Пример 4 использования одинаковых стоковых фото на разных сайтах

 

Скриншот поисковой выдачи со стоковым бесплатным фото
Так выглядит поисковая выдача Google, которая нашла бесконечное количество фото с импозантным рыжеволосым красавцем.

 

6. Popup-окна

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

Не используйте popup-окна. Google исключает из поисковой выдачи те мобильные сайты, площадь попап-окон которых превышает 20%.

Единственный оправданный вариант использования всплывающих окон — попытка посетителя оставить страницу.

 

Пример всплывающего окна
Popup-окно на сайте по продаже мобильной техники всплывает прямо посередине экрана и занимает половину его площади. Немногие посетители, желавшие приобрести смартфон, продолжат шопинг.

 

7. «Тяжёлые» картинки

Устоявшимся негласным стандартом в сайтостроении считается размещение изображений на сайте, вес которых не превышает 100 Кб при любом физическом размере. Любой файл, превосходящий эту величину тормозит загрузку страницы. Оптимизируйте картинки, уменьшите их величину без видимой потери качества с помощью онлайн сервисов, доступных без регистрации или бесплатных десктопных приложений.

Онлайн сервисы для уменьшения фото:

  • «ILoveImg».

  • «CompressJpeg».

Программы для оптимизации изображений для сайта:

  • «IrfanView».

  • «XnView».

  • «FastStone Image Viewer».

  • «Adobe Photoshop».

 

Пример сжатия фото без потери качества
Бесплатная программа “FastStone Image Viewer” сжимает фотографии больше чем в 100 раз без заметной человеческому глазу потери качества и артефактов. В программе имеется пакетный режим, в котором по заранее установленным правилам обрабатывается бесконечное количество снимков.

 

8. Сложная форма заказа

Упростите форму обратной связи, оформления заказа, подписки на новости. Не перегружайте ее лишними полями. Избавьтесь от звездочек, указывающих на обязательность поля. Облегчите общение с вами до возможного максимума. Добавьте в форму не больше двух полей: «Имя» и «Обращение». Другие сведения вы получите от клиента в ходе оформления заказа.

 

Пример плохой формы обратной связи
Разработчики формы обратной связи сайта “Банк горящих путевок” додумались добавить в форму шесть (!) полей и сделать их обязательными. А еще они поставили капчу, чтобы напрочь отбить охоту клиентов покупать путевки на этом сайте. Непонятно для чего сотрудникам турбюро понадобились “Тема обращения”, “Телефон” и “Адрес электронной почты” в форме обычной обратной связи.

 

Ваша оценка:
Нравится?
Обсуждение
    Для участия в обсуждении на сайт