14 Смертельных дизайнерских ошибок на лендингах и сайтах

Posted on by riasevastopol

Многие разработчики честно пробуют воплотить в дизайне лендингов и сайтов вебмагазинов лучшие возможности HTML5, CSS3 и JavaScript, но оформление большинства современных ресурсов все равно не радует.

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

Подобное уже случалось, в то время, когда в моду вошли разработке Flash, сразу же собравшие громадную популярность — но к сожалению, их применение как правило не привело ни к чему хорошему.

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

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

  • 18 примеров того, как не требуется делать лендинги

1. Загрузочные экраны

Кому нужна целевая страница, которая загружается целую вечность? Раньше пользователям приходилось мириться с продолжительной загрузкой сайтов, и это казалось обычным — но сейчас жизненно принципиально важно поддерживать скорость загрузки в пределах 2 секунд.14 Смертельных дизайнерских ошибок на лендингах и сайтах

В другом случае визитёры закроют вкладку браузера с ваши ресурсом окончательно.

  • 6 хладнокровных убийц конверсии лендинг пейдж

2. Непонятная либо скрытая навигация

Большая часть HTML5-ресурсов сейчас основываются на скроллинге, другими словами визитёр может пролистать страницу вниз, заметив так главное меню и второстепенные элементы — что избавляет от необходимости переходить по множеству вкладок.

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

  • 5 обычных неточностей навигации сайта

3. Анимация вызывающего большие сомнения качества

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

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

4. Изображения вместо текста

Вопрос: что начинается на «G» и заканчивается на «oogle»?

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

  • Изображения как реализовывающий контент

5. Неприятность контрастов

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

  • Влияние цвета на конверсию целевых страниц

6. Тщетные всплывающие окна

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

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

  • 5 советов по оптимизации всплывающего окна

7. Таинственные иконки

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

Посмотрите на иконки выше. С первой ясно — она приведет к домашней странице. Додуматься возможно и о том, что обозначает камера — фото либо галерею. Но что возможно сообщить о второй иконке для landing page слева?

Что же она значит?

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

8. Неточность 404

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

9. Требования к визитёру

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

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

Так как не все пользователи интернета трудятся в Chrome.

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

Бывает и так: на основной странице навигационная панель расположена сверху, а по окончании перехода на другую страницу она исчезает. Это неудобство, конечно же, очень сильно разочарует ваших потенциальных клиентов.

  • Как оптимизировать навигацию вебмагазинов

10. Хозяин собственного браузера

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

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

11. Небольшие шрифты

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

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

  • Как типографика воздействует на конверсию лендинг пейдж?

12. Автоплей

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

13. Путаница из раздражающих элементов

Представьте: вы открываете лендинг, в этот самый момент же на вас обрушивается множество раздражителей (кое-какие маркетологи назовут их триггерами).

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

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

  • 6 примеров оптимизации конверсии

14. Продолжительная загрузка контента

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

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

Напоследок — пара советов

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

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

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

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

Дизайн лендинг пейдж — не место для эгоизма!

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

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

Высоких вам конверсий!

По данным infiniteconversions.com, image source nos.twnsnd.co

Случайные статьи:

Ошибки при создании интернет магазина. Разбор лендинга #14


Подборка похожих статей:

riasevastopol

More Posts