Ответ
Как оптимизировать веб-дизайн сайта для стартапа? Опции темы
Старый 13.10.2014, 11:01
  #1
Nataly
 
Регистрация: 30.07.2014
Сообщений: 474

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

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

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

Чтобы проиллюстрировать это, я поделюсь реальным опытом, который я получил после посещения веб-сайта конкретного стартапа. Я знаю, что компания Apple только что представила часы Apple Watch стоимостью $350. Когда коллектив дизайнеров (под руководством Jony Ive) говорили об этих часах в своем недавнем докладе, они были очень взволнованы.

Jony, имеющий успешный опыт проектирования продуктов Apple на протяжении последних нескольких лет, был преисполнен энтузиазма по поводу проекта. С учетом сказанного цена в $350 является не малой, поэтому, когда я услышал, что один из пионеров в индустрии смарт-часов Pebble, занизил цену своего продукта до $99, я сразу же зашел на их сайт. Я хотел узнать больше об этих часах, как они выглядят и каковы их возможности.

Симпатия к этой компании у меня пропала, как только я увидел, на чем они сконцентрировали внимание на своей домашней странице:





«Дыши, Jony. Это просто часы». Что? Как, черт возьми, это связано со смарт часами Pebble? Я понял, что команда Pebble, возможно, беспокоится по поводу того, что их преимущество быть первыми на рынке теперь не актуально, так как в эту гонку включился Apple, но энтузиазм их дизайнера оставляет желать лучшего.

Это просто непрофессионально и является довольно значительным отталкивающим моментом. В остальной части сайта немного говорится о Pebble, но без реальных фотографий самих часов или описания их функций. Я встретил, однако, несколько приемов, принятых в Apple, как, например: «Мы не планировали создавать завышенный по цене продукт».





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

Постоянно развивающаяся стратегия

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

• Увеличение времени, проведенного пользователем на странице
• Увеличение количества просмотров страниц за посещение
• Создание подписки для получения дополнительной информации
• Загрузка электронной книги или документа
• Совершение покупки
• Распространение url-адреса в социальных сетях
• Подписка на ваши новости в социальных сетях

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

Оптимизация изображений

Очень большие изображения

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

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

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

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





Однако когда они применили крупные изображения в заголовке, их продажи у французских покупателей выросли на 39,8%:





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

Каждому изображению требуется свое назначение

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

Возьмем, к примеру, страницу с подпиской Webex:





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

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

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

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

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

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





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





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

Подобное исследование было проведено Think Eye Tracking, в котором они получили на 84% больше взглядов на продукт, когда модель смотрела на флакон Shampoo, а не прямо в камеру:








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

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

Формы регистрации

Длина

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

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

В одном исследовании, форму, которая первоначально имела 11 полей, уменьшили до 4 полей. Результатом стало увеличение подписок на 160%, в то время как качество формы осталась примерно на прежнем уровне, так как многие люди, как правило, указывают лживые данные в длинных формах.

Регистрация в два шага

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





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

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

Шаг 1 (встраиваемый на странице)





Шаг 2 (данное окно появляется после нажатия кнопки «Get Started!»)





Применение данной стратегии увеличило количество подписок на 25%. Кажется, что это противоречит логике: более длинный процесс подписки улучшает конверсию?

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

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

• Есть ли у вас эта проблема? (Да)
• Хотели бы вы избавиться от нее? (Да)
• Если у меня было бы решение этой проблемы, будет ли оно ценным для вас? (Да)
• Хотели бы вы сделать покупку? (Да)

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

Просто потому что они сказали «Да» загрузке, нажав на кнопку, они с большей вероятностью заполнят форму.

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

Оптимизация страниц с ценами

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

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

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

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

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

4. Боритесь с барьерами, препятствующими покупке. Если у вас есть гарантия возврата денег, то это как раз то место, где вы должны об этом рассказать. Вы также можете разместить отзывы или узнаваемые логотипы компаний, чтобы установить доверие посетителей. Далее приведен пример из Grasshopper:





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





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

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

Количество

Каждая страница на вашем сайте должна иметь свой призыв к действию. Вопрос в их количестве и заметности для пользователя. Для страниц с ценами, вы, вероятно, создадите призыв к действию для каждого ценового предложения, тогда как целевая страница рекламной кампании может иметь один призыв к действию: «Узнать больше».

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

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

Визуальное выделение

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

Отличный пример демонстрирует Dayboard:





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





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





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

Текст, призывающий к действию

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

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

Например, Unbounce изменили текст кнопки с призывом к действию с «Создайте целевую страницу с высоким показателем конверсии» на «Просмотреть планы и цены» и увеличили объем продаж на 80%! Однако если вы посетите их сайт сегодня, вы увидите, что они по-прежнему используют первый вариант текста:





Зачем они это делают? Дальнейший анализ показал, что, хотя они повысили уровень продаж, на самом деле они снизили свой «идеальный» план покупок ($99/месяц) на 22%. При повышении уровня продаж общая прибыль снизилась.

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

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

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

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

• Статистика популярности в социальных сетях
• Количество подписчиков
• Кнопка, показывающая количество набранных твитов
• Отзывы
• Обзоры
• Упоминаниями в СМИ
• Упоминания в подкастах или интервью

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





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

Целевые страницы

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

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

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

Типичные случаи использования целевой страницы:

• Реклама на Adwords
• Реклама из социальных сетей
• Целевая страница для скачивания электронной книги
• Целевая страница для вебинара
• Страница с подпиской на блог
• Размещение ссылок на гостевые посты
• Ссылки на выступления
• Отраслевые специфические страницы (если ваш продукт обслуживает более чем одну отрасль)
• Страницы с QR кодами
• Размещение URL-адреса визитных карточек
• Конкурсы

Существует бесконечное множество причин для создания целевой страницы. Если вы используете систему управления контентом Wordpress, они могут быть созданы в пределах вашего сайта. Если вы не подготовлены технически или не имеете дизайнерских навыков, вы можете использовать внешние инструменты для создания этих страниц такие, как, например, Leadpages или Unbounce. Эти инструменты также позволяют связать ваши страницы в собственную структуру URL-адресов, так что они будут существовать как часть вашего веб-сайта.

Ключевые выводы





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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
8 способов оптимизировать WordPress сайт Jungle Статьи 5 27.06.2014 16:43
Как оптимизировать превью своего блога Bubble Магазины 0 30.04.2014 02:54
Дизайн как инструмент маркетинга Bentley Магазины 0 25.04.2013 00:54
Советы как оптимизировать конверсию на лендинге Alsu Партнёрки 2 25.11.2012 22:05
Оцените плз дизайн , юзабилити и удобство сайта. Slip Оффтоп 5 19.10.2012 02:33

Метки
веб-дизайн сайта, конверсия, лиды, оптимизация дизайна, стартап, целевая страница


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 21:16. Часовой пояс GMT +3.