Дизайн целевой страницы: создание идеальной целевой страницы

Эффективная целевая страница имеет решающее значение для успеха продукта

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

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

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

Это история об идеальной целевой странице The Ultimate Hacking Keyboard.

Технический совет. Практические шаги вперед.

Поиск в Google по запросу «дизайн целевой страницы» приводит к десяткам отличных статей, каждая из которых содержит важные советы, такие как:

• «Контент должен загружаться мгновенно».
• «Фотография должна иметь отношение к аудитории сайта».
• и «Добавьте форму для сбора лидов».

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

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

Стремитесь к высококачественному видеопроизводству и хостингу

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

Видео-трейлер целевой страницы Ultimate Hacking Keyboard (UHK) претерпело двенадцать итераций, и в каждой новой версии постепенно улучшались все мелкие детали. Процесс проектирования был утомительным, но полезным, а видео-трейлер — жемчужина нашей целевой страницы. Это полностью отличает наш продукт от остальной части пакета.

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

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

Команда UHK остановилась на динамической 3D-анимации, чтобы продемонстрировать основные функции клавиатуры на нашей целевой странице. Если требуется 2D-анимация (для приложения или веб-службы) или если требуются кадры с камеры в реальном времени, процесс сопряжен с различными проблемами.

После того, как видео сделано, оно должно быть размещено на веб-сайте. Благо вариантов много:

YouTube — бесспорный лидер рынка и синоним видео в Интернете. Это удобный сервис и разумный выбор, но его встроенный проигрыватель не самый эстетичный вариант.

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

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

В конце концов, команда UHK решила, что Vimeo лучше всего отвечает нашим потребностям. Вот наш трейлер на целевой странице: Ultimate Hacking Keyboard

Также стоит отметить, что мы углубились в интерфейс прикладного программирования (API) Vimeo, чтобы наше видео лучше привлекало внимание посетителей целевой страницы. Используя JavaScript API Vimeo, мы заставили кнопки «Я хочу один» на нашем сайте мигать три раза подряд после окончания нашего трейлера. При правильном использовании небольшие настройки, подобные этой, могут повысить коэффициент конверсии целевой страницы.

Создайте захватывающий опыт с 3D-контентом

Иногда важно предоставить посетителям целевой страницы иммерсивный опыт. Мы хотели, чтобы наши посетители могли изучить Ultimate Hacking Keyboard в 3D, поэтому нам пришлось исследовать сервисы на основе WebGL, созданные специально для этой цели.

Sketchfab — самый популярный сервис на основе WebGL. Его легко освоить, он предоставляет множество визуальных настроек и встраивается в широкий спектр популярных хостинговых услуг.

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

После тщательного рассмотрения мы выбрали Sketchfab. Так Ultimate Hacking Keyboard выглядит в 3D.

Визуализируйте проблемы и решения с помощью 2D-анимации

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

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

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

Слово мудрым — никогда не недооценивайте количество вещей, которые могут пойти не так!

Измеряйте аналитику в режиме реального времени

Гугл Аналитика великолепна. Он широко используется и с ним легко работать. Однако есть лучшие кандидаты для операций в реальном времени.

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

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

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

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

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

Регистрация ошибок и предотвращение ненужных головных болей

Веб-сайты становятся все более и более зависимыми от JavaScript, настолько, что от него часто зависят важные функции сайта. Например, диалоговое окно подписки на целевой странице Ultimate Hacking Keyboard запускается кодом JavaScript.

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

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

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

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

С момента интеграции Errorception мы исправили около дюжины ошибок, некоторые из которых были маловероятными и неожиданными. Например, однажды мы получили сообщение об ошибке, связанное с localStorage , и обнаружили, что, когда Safari находится в режиме приватного просмотра, localStorage.setItem() приводит к ошибке.

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

Разработка процесса сборки с низким уровнем обслуживания

Первоначально индексная страница UHK начиналась как отдельная HTML-страница, размещенная в WordPress, и содержала весь код CSS, HTML и JavaScript. Сначала это было осуществимым решением, но по мере роста страницы это стало бременем обслуживания, и потребовался более модульный подход.

Наше решение? Во-первых, мы разделяем код CSS, HTML и JavaScript на несколько отдельных файлов. Затем мы преобразовали файлы CSS в файлы Less, чтобы сделать обслуживание еще проще. Наконец, мы разработали процесс сборки для сборки всех наших крошечных файлов.

Всегда оптимизируйте производительность

Команда UHK знает по опыту, что производительность веб-сайта имеет решающее значение — например, когда наша целевая страница была подвергнута Slashdot, и мы получили 260 посетителей одновременно. К счастью, наш VPS Linode за 20 долларов в месяц работал как чемпион, но для этого требовалось нечто большее, чем слепая удача, поэтому вот несколько советов по повышению производительности:

• Ленивая загрузка изображений — ваш друг, особенно если ваша страница, как и наша, содержит много изображений. Мы используем плагин WordPress Unveil Lazy Load.

• Вы также можете лениво загружать активы. Если раздел страницы зависит от дополнительного скрипта, его можно отложенно загрузить, когда он попадает в область просмотра. Проверьте видимость окна просмотра с помощью подключаемого модуля jQuery inview и загрузите скрипт с помощью jQuery.getScript() или любого другого загрузчика скриптов.

Дизайн целевой страницы — важная дисциплина дизайна

В этом посте мы затронули довольно много вопросов дизайна целевой страницы, поэтому давайте подытожим наиболее важные моменты:

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

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

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

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