Дизайн лендингов

Как использовать интерактивность для расширения вовлечения

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

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

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

Почему мы любим интерактивность

Людям нравится заниматься тем, что они делают.

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

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

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

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

По сути, это стратегия в игре, когда компания, как Upworthy, просит вас ответить на очевидный вопрос, прежде чем попросить адрес вашей электронной почты:

 

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

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

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

История интерактивности в области маркетинга

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

В концепции маркетинга, интерактивный маркетинг своего рода начал как антитеза массового маркетинга. Хотя это не обязательно, персонализации в масштабе, которые мы видим сегодня (или будем в будущем), интерактивная реклама была еще одной сферой в one-to-one маркетинге.

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

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

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

Вы, несомненно, видели пример рекламы в традиционной среде: 

Вот еще несколько примеров более традиционных каналов сбыта.

Интерактивные печатные объявления

Не все печатные объявления исключительно сосредоточены на бренде. Помимо QR-кодов, существует бесконечное количество способов подстегнуть интерактивность печатной рекламы. Например, Motorola и Wired нашли способ настраивать дизайн телефона в журнале:

https://youtu.be/iMrZmSPpIRw

Или например Nivea, которая помогала родителям контролировать своих детей на пляже через трекинг-браслет и приложение:

Интерактивные баннеры

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

Интерактивные директ-мейлы

Интерактивная прямая почтовая рассылка, редкий маркетинговый инструмент. Хотя, конечно, самым простым способом придать интерактивности письму будет добавление QR-кода или просьба ответить по email.

Но вы также можете действовать творчески и генерировать больше осведомленности о бренде: 

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

5 способов реализации интерактивности на вашем сайте

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

Интерактивный контент-маркетинг и лидогенерация

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

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

Интерактивная инфографика

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

  • Собирать лиды с помощью интеграции Google Forms.
  • Получить новые идеи путем внедрения опросов.
  • Просто дать пользователям лучшую визуализацию и взаимодействие.

Интерактивные электронные книги

Вы можете также добавить интерактивные электронные книги, которые традиционно считаются довольно статичными (и некоторые сказали бы не так эффективны).

Анирудх Джайн писал в блоге некоторое время назад о нескольких различных способах, которыми вы могли бы добавить интерактивности внутри самой электронной книги:

  • Добавить чат
  • Добавить контактные формы
  • Добавить целевые страницы
  • Добавить видео

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

Викторины и опросы для лидогенерации

Buzzfeed начали эту тенденцию (но Clickhole усовершенствовали ее), и теперь многие контент-маркетологи внедряют викторины либо в качестве дополнения к своей статье или автономно.

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

Marketizator использует викторины как отдельную часть контента: 

Кстати, что насчет образа идеального клиента? Если вы сделали количественную кластеризацию, эти интерактивные викторины или опросы могут помочь сегментировать персоны через самоопределение.

Примером может служить Craft Coffee, который персонифицирует веб-опыт, основанный на ваших ответах на опрос: 

Интерактивность помогает настроить пользовательский опыт на веб-сайтах. Вот как это делает Trunk Club: 

Согласно White Papers от Oracle и SnapApp, эти типы интерактивных элементов помогают на стадии осведомленности, когда клиенты сначала знакомятся с брендом.

Интерактивные инструменты, калькуляторы, электронные таблицы и т.д.

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

Примеров масса, но «Классификатор веб-сайтов» и HubSpot является лучшим примером этого. 

Интерактивная обратная связь и поддержка

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

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

  • Живой чат
  • Инструменты обратной связи с пользователями

Живой чат

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

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

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

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

Инструмент обратной связи

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

Для потенциальных клиентов, которые еще не конвертированы, вы можете использовать:

  • Интерактивный чат
  • Интерактивные опросы на страницах категорий

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

До сих пор, интерактивные элементы были довольно просты. Следующие два являются немного более новаторскими (и, следовательно, рискованными).

Интерактивные фото продукта

Как уже упоминалось выше, исследование опубликованное Институтом ConversionXL показало, что потребители, как правило, более обращают свое внимание на интерактивные фотографии, чем статические. Кроме того, оно показало, что положительные эмоции были вызваны больше гедонистической информациец (веселой), чем инструментальной (польза).

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

На практике, попробуйте протестировать интерактивные фотографии продукта. 

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

Пролистывание страниц

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

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

Если интересно, вы можете использовать такой инструмент, как Flipping Book для создания листания страниц.

Где интерактивность может не сработать

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

Стадии, показанные на рисунке: Внимание, Мнение, Рассмотрение, Предпочтение, Покупка.

Например, с популярной моделью пользовательского потребления AIDA (Attention, Interest, Desire, Action, или Внимание, Интерес, Желание, Действие), основы, которой  внимание и интерес может быть остроконечными, но желание и (особенно) действие, не обязательно были приняты во внимание.

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

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

Заключение

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

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

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

Так, если вы планируете реализацию творческой интерактивности, думайте в первую очередь о том, что вы надеетесь достичь с ее помощью. Затем с помощью сплит-тестирования решите, работает ли это на самом деле в направлении этой цели.

Источник

10 несокрушимых ошибок UX-дизайна

С 1996 года длилось составление списка из 10 ошибок в UX-дизайне. В этом году было завершено масштабное юзабилити исследование с 215 участниками в Соединенных Штатах и Соединенном Королевстве, чтобы увидеть современные ошибки. После анализа результатов 43 сайтов, которые варьировались от небольших местных предприятий развлекательных сайтов для некоммерческих организаций до глобальных организаций, были определены 10 наиболее распространенных и наиболее вредоносных ошибок веб-дизайна, которые наносят ущерб нашим пользователям.

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

Сколько из этих ошибок делает ваш сайт?

Неожиданное расположение контента

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

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

ATT.com: Информация об обмене старых телефонов была размещена в категории «Существующие клиенты» (Existing Customers), тогда как посетители искали этот пункт в категории «Смартфоны»

Конкурирующие ссылки и категории

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

Пользователи на сайте BAM Construction’s разыскивают подробную информацию о строительных проектах, но совершенно непонятно, какую вкладку следует открыть: «Кто мы» (Who We Are), «Что мы делаем» (What We Do) или «Как мы это делаем» (How We Do It). Многие выберут категорию «Что мы делаем», но там — обзоры готовых работ, а не детали проекта. Проектную информацию вы найдете в разделе «Как мы это делаем»

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

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

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

Разрозненная информация

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

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

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

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

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

Повторяющиеся ссылки

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

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

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

NYC.gov: пользователи чувствуют себя разочарованными, когда клик по ссылке «Find a Firehouse» (Найти пожарную часть) приводит их на страницу, где снова нужно кликнуть по тому же словосочетанию, хоть и написанному по-другому

Скрытые платежи и цены

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

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

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

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

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

Плохие результаты поиска

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

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

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

Непродуманные фильтры

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

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

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

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

Перегрузка пользователей информацией

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

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

Безусловно, описание наушников Shure SRH440 Studio Headphones на сайте The Headphone.com, в полной мере раскрывает достоинства и особенности товара, но вот формат, в котором эта информация подается, крайне неудачен: трудно просканировать и выделить важное

Скрытые ссылки

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

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

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

Источник

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

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

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

ESPN Sports Programming

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

Montage

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

Zillow

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

Revols

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

Fiftythree Pencil

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

Morgan Stanley

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

Boosted

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

Grapple

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

Opus Grows

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

Zero Financial

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

Cap HPI

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

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

Quiver

Хотя сайт Quiver меньше, чем другие, ему до сих пор удается блистать среди остальных.

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

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

Wordstack

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

Campos Coffee

Некоторые клиенты любят высококачественные продукты ручной работы. Таким людям нравится покупать продукты с историей. Компания Campos Coffee точно знает, как удовлетворить таких покупателей.

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

Kin

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

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

SeaStreak

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

S Bottle

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

Ocean Health Index

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

Источник

Ошибки дизайна лендинга, которые вы наверняка делаете

Лендинг – это автономная страница, которая создана для лидогенерации. Лендинг создается для сохранения определенной цели на виду. Это страница веб-сайта, которая представляется пользователю в ответ на ссылку, которую он нажимает в поисковой системе оптимизированных результатов или интернет-объявлений. Посадочная страница является важной с коммерческой точки зрения, поскольку она просит посетителей сделать много вещей, и если пользователи подходят не идеально, то это может плохо повлиять на коэффициент конверсии всей страницы. Есть так много ошибок дизайна лендингов, которые вам нужно избегать. К ним относятся:

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

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

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

Отсутствие кнопки призыва к действию или скучный дизайн кнопки CTA: лендинги, у которых нет кнопок призыва к действию — бесполезны, если направить посетителей на посадочную страницу через поисковую систему или объявление легко, то конвертировать их в клиентов без кнопки призыва к действию вам будет очень сложно. Если у вас есть неправильная кнопка CTA, то и это будет бесполезно. Вы должны заботиться о размере кнопки CTA, цвете кнопки и количестве пространства вокруг нее. Она не должна быть скрыта, она должна быть прямо и четко видна клиентам, чтобы они могли принять мгновенное действие. Кроме того, позиция кнопки CTA также имеет значение. Убедитесь, что вы поместили ее в соответствующее место. Даже несколько кнопок CTA могут отвлекать ваших потенциальных клиентов и предотвратить их конверсию.

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

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

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

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

Источник

10 лучших лендингов и сайтов с параллакс-скроллингом 2016 года

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

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

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

Porsche Volution

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

Feed Musiс

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

Flash vs. HTML

Весь внешний вид веб-сайта просто великолепен, и он делится на две равные части, где левая сторона представляет Flash, а правая сторона предназначена для HTML. Вы можете поиграть в «WASTE INVADERS», выбрать любимую версию и скачать приложения для Android или Apple. 

Life of Pi

Победитель 4-х премий Американской киноакадемии, фильм «Жизнь Пи» (Life of Pi) имеет потрясающий сайт, чтобы продемонстрировать эпическое путешествие Пи. Путь выживания Пи Пателя и его авантюрная сказка о кораблекрушении была описана с помощью броской графики. Прокрутите вниз, чтобы путешествовать с интересными образами и виртуальными эффектами в стиле параллакса. 

Кроме того, если вы любите эту историю и хотите посмотреть фильм, вы можете заказать DVD фильм с веб-сайта.

Bose

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

NASA Prospect

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

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

The Boat

Название новеллы Nam Le от SBS в аудиовизуальном графическом романе «The Boat» имеет интригующий веб-сайт. SBS сделал сайт полностью интерактивным с помощью известного австралийского звукового кинодизайнера Сэма Петти. Вся история разделена на 6 глав и каждый параллакс слайд демонстрирует главу с помощью перемещения слоев параллакса, чтобы создать ощущение глубины. Выберите параметры звука, автоматическую прокрутку и наслаждайтесь историей о побеге после войны во Вьетнаме.  

Lix Pen

Самое удивительное, теперь вы можете писать и рисовать в воздухе с помощью Lix Pen. Этот великолепный производитель 3D пера убедил, что мелочи могут создать большие идеи через красиво оформленный параллакс сайт. Смотрите, какие формы можно создавать с помощью этого невероятного пера. 

Кроме того, вы можете выбрать и заказать 3D перо на самом сайте.

Invstr

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

Тем не менее, мы можем сказать, что приложение является началом социальной революции, которую финансовому сектору только предстоит пережить.

The Walking Dead

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

Весь рассказ красиво осмысляется в горизонтальной прокрутке и качественной анимации.

Другая сторона медали

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

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

Источник

11 тенденций лендингов в 2017 году

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

Призывы к действию

Кнопка CTA ориентированная на пользователя

Забудьте о мягких, нечетких кнопках СТА таких как, «Нажмите здесь», «Подписаться», «Зарегистрируйтесь».

Кнопка СТА должна говорить на языке пользовательского опыта и, как правило, ориентирована на конкретных действиях и целой фразе (даже короткой).

Вот пример из Instapage:

Призыв к действию «Создать страницу сейчас!»

Вот что делает Reverb:

Две кнопки СТА

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

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

Вот пример из LanderApp: 

Контурные кнопки CTA

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

Вот что делает Quill: 

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

Многошаговые формы

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

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

Ценностное предложение

Косвенные изображения продукта

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

Вот как лендинг WeWork’s Santa Monica использует эту тенденцию: 

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

Пошаговое предложение

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

Гид по продукту

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

HubSpot использует интерактивный самонаводящийся формат гида по продукту: 

Hedvig использует видео формат гида по продукту: 

Бесплатные инструменты

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

Mayo Clinic предлагает бесплатный калькулятор идеальной массы тела на их сайте: 

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

Анимационное повествование

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

Вот пример InfoQuest с анимированным повествованием на странице: 

Разговорная речь в тексте

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

Вот как KlientBoost повысили коэффициент конверсии, используя эту тенденцию:

До

Ниже целевая страница, которая позволила увеличить коэффициент конверсии на 31%.

После

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

Социальное доказательство

Подробные, не ранжированные отзывы

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

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

Использование Twitter отзывов еще один способ, чтобы представить подлинные отзывы клиентов о посадочных страницах. Тенденция выглядит следующим образом: 

Оптимизация страницы благодарности

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

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

Вот что делает Orbit Медиа Studios:

«Спасибо! Получайте наши лучшие советы каждые две недели!»

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

Источник

 

Какие анимированные элементы будут актуальны в новом году

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

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

  1. Всплывающие окна (pop-up)
  2. Интерактивность
  3. GIF-файлы для демонстрации продукта
  4. 3D параллакс-скроллинг
  5. Нестандартная загрузка

Рассмотрим их более подробно.

Всплывающие окна (pop-up)

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

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

Всплывающее окно появляется после нескольких секунд нахождения на лендинге

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

Интерактивность

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

Проверьте влияние пассивного дизайна (серый цвет) против интерактивного (оранжевый цвет) согласно данным Demand Metric. 

LeadDoubler предлагает интерактивный калькулятор, чтобы привлечь своих посетителей: 

Создание интерактивной викторины втягивает ваших посетителей. Согласно исследованиям Скотт Бринкер из MarketingLand, ресурс BuzzFeed получает миллионы репостов в Facebook через интерактивные викторины, такие как «Какая работа вам действительно подходит?», они побили все рекорды социального обмена. На самом деле 10 лучших материалов Buzzfeed были именно викторинами.

GIF-файлы для демонстрации продукта

Эта тенденция особенности анимации, которая просто и легко демонстрирует ваше предложение продукта.

Вот пример из Languages, который сочетает в себе мобильное приложение и демо-версию продукта в GIF: 

3D параллакс-скроллинг

Эффект параллакса оживит изображения и станет стильным дополнением вашей посадочной страницы. Вот довольно очевидный пример на странице Lix Pen: 

Нестандартная загрузка

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

Вот пример из Food of the Food. 

Источник