7 элементов эффективной страницы подписки

[actweb_ipartner]

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



7 деталей страницы подписки

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


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

1. Разделение пакетов услуг
2. Выделение главного предложения
3. Ясность, честность и привлекательность
4. Сравнение характеристик
5. FAQ
6. Справа-налево или слева-направо?
7. Доверие

Разделение пакетов услуг

Меньше всего вам нужно запутать пользователя. И хотя все 7 пунктов посвящены тому, чтобы этого избежать, самое большое значение имеет именно разделение предложений. Цвет, рамки, тени, вкладки… (я могу еще долго перечислять) помогут четко разделить ваши предложения. Это кажется очевидным, однако почему-то до сих пор приходится сталкиваться со страницами, на которых все навалено в кучу и нужно продираться через абзацы текста, чтобы понять, что к чему относится.

Также есть парочка простых правил:

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

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

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

• Бронзовый, Серебряный, Золотой, Платиновый
• Малый бизнес, Агентство, Компании
• Новичок, Эксперт, Гуру
• Базовый, Расширенный, Профессиональный, Максимальный
• Один, Несколько, Набор
• Младший Лейтенант, Лейтенант, Капитан, Вице-адмирал (ладно, ладно, я уже прикалываюсь)

Пример прогрессивной шкалы в подписках



Пример прогрессивной шкалы в подписках



Пример прогрессивной шкалы в подписках

Выделение главного предложения

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

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

• Увеличьте размер данного предложения.
• Выделите его цветом или рамкой.
• Добавьте тень, эффект наклейки или по-другому сделайте предложение визуально объемным.
• Сделайте больше кнопку, кегль текста или даже поменяйте ее цвет.
• Назовите его как-нибудь привлекательно, например: “Выбор пользователей” или “Лучшее предложение”.
• Сделайте более длинный заголовок или даже более подробное описание, чем у других предложений.
• И пусть оно мигает (ладно, я опять шучу).

Лучшее предложение выделяется из всех



Выделение предложений цветом
Ясность, честность и привлекательность

Понятные, четкие заголовки важны в любом месте, а на странице подписки особенно. Говорите прямо, просто и доступно. Помните, что краткость - сестра таланта. Объясняйте вещи доступно, используйте списки или иконки, чтобы еще быстрее донести пользователю суть предложения. Как уже было сказано выше, заголовки - отличный способ подчеркнуть разницу в ваших предложениях.
Также убедитесь, что текст честный. Эта страница не для пустых обещаний или бесстыдной лжи. Когда пользователи приходят на вашу страницу подписки, они уже немного знают о ваших продуктах или услугах и сейчас самое время показать их особенности и различия в наборах услуг. И если вы согласились быть честным, будьте им до конца: если пишете в пакете услуг “Самый популярный”, то это значит, что он действительно самый популярный.



Будьте честными, говоря: "Самое популярное"

Сравнение характеристик

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

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

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

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

Сравнение характеристик предложений



Сравнение характеристик предложений

FAQ

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

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

И последний совет здесь: не бойтесь назвать FAQ как-нибудь по-другому. Некоторые уже на автомате пропускают слова FAQ, но их может зацепить “Что вам нужно знать перед покупкой” или “Как это работает?”.






FAQ под пакетами услуг

Справа-налево или слева-направо?

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

Мое мнение, что нужно показать пользователю дешевые предложения и затем показать, что он получит, если возьмет пакет подороже, поэтому мой выбор - слева-направо. Я представляю это как-то так: “Ага, в Суперпакете на 6 фишек больше, чем в Обычном и это будет стоить всего на 10 долларов дороже… выгодно”. Если же расположить предложения наоборот, то получится так, что самые дорогие предложения увидят первыми и пользователь скажет: “Эээ, это дороговато всего за 6 фишек больше, чем в Обычном пакете”.

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

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



Пример размещения предложений слева-направо



У Dropbox предложения располагаются по вертикали

Доверие

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

• Звездочки примечаний: обычно, когда вы видите звездочки у текста, вы думаете: “Так, ну где тут сноски?”
• Сноски: пожалуйста, не делайте большой блок сносок внизу вашей стрницы, пожалуйста, пожалуйста! Это говорит пользователю только о том, что его пытаются где-то обмануть или что-то скрыть, даже если на самом деле это не так. Если вы не можете рассказать пользователю о предложении обычным шрифтом, без сносок, значит вам нужно задуматься о прозрачности вашего бизнеса и помыслов.
• Чрезмерное использование значков: Я ничего не имею против значка “30 дней гарантии”, избегайте нагромождения подобных значков. Это тоже самое, что ПИСАТЬ БОЛЬШИМИ БУКВАМИ В ПИСЬМАХ, ЧТО ВЫГЛЯДИТ КАК КРИК, А НИКТО НЕ ЛЮБИТ, КОГДА НА НЕГО КРИЧАТ.
• Дешевые, неуместные картинки: если вы занимаетесь предоставлением хостинга, избегайте девиц в откровенных маечках, обнимающих серверную стойку. Ничто так не обесценивает продукт, как подобные дешевые приемы.

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

1. Защищена ли моя приватность? Это же не спам?
2. Безопасна ли моя сделка?
3. Знаю ли я кого-нибудь, кто пользуется и доверяет этим товарам или услугам?

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

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

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




Источник: codrops

Автор:  Патрик Кокс (Patrick  Cox)

Перевод: ActualWEB

Опубликовано в блоге Actual WEB.