Создаем идеальную страницу “Цены”

‍В этой серии статей мы рассказываем о дизайн-паттернах, а также методах проектирования удобных и эффективных интерфейсов.

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

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

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

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

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

Итак, если бы мы хотели создать идеальную таблицу с ценами, что бы мы сделали? Давайте начнем с самого главного вопроса: как люди вообще сравнивают атрибуты на странице “Цены”?

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

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

1. Паттерн газонокосилки

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

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

2. Регулярное возвращение к заголовкам таблицы

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

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

3. Ощущение продвижения вперед: слева направо

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

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

4. Полный список функций в качестве справочника

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

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

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

Хотя эта информация действительно полезна, она, на первый взгляд, перегружает пользователей, часто требуя от них продолжительного неустанного взаимодействия. Переходить от строки к строке утомительно, но многие пользователи считают это неотъемлемой частью процесса. (Как мы увидим позже, сравнение характеристик должно быть доступно на странице “Цены”, но не должно быть главным и центральным ее элементом).

5. Множественные сравнительные сканирования

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

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

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

6. Не все функции одинаково важны

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

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

Учитывая эти поведенческие паттерны, давайте рассмотрим некоторые шаблоны и функции, которые могут пригодиться при проектировании страницы “Цены”.

Простые планы без сюрпризов

Дизайн страницы “Цены” в значительной степени зависит от того, насколько сложным является ценообразование. Если все достаточно просто, изобретать колесо не придется — нужно лишь убедиться, что клиенты понимают суть предложения и его стоимость.

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

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

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

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

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

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

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

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

Кроме того, разница между "Sign up" (зарегистрироваться) и "Free trial" (бесплатный пробный период) была очевидна не всем пользователям. Эти чрезмерно упрощенные формулировки сбивали некоторых людей с толку.

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

Очевидное решение: таблица с ценами

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

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

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

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

Иногда все тарифные планы невозможно разместить в одной строке. До недавнего времени Dropbox располагал свои планы в 2 ряда. Это определенно лучше, чем пытаться втиснуть 6 колонок в ограниченное пространство (сейчас их 5 и они размещены в одной строке). Клиенты могут протестировать некоторые тарифные планы бесплатно.

‍Zendesk группирует свои тарифные планы по вкладкам. Не все опции отображаются постоянно, сначала пользователи должны указать, что именно они ищут: индивидуальные или корпоративные тарифные планы. Здесь также есть специальная кнопка, которая открывает окно с подробным сравнением всех 4 планов.

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

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

Сфокусируйтесь на ключевых функциях

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

Центральный элемент страницы “Цены” на сайте Contentful — не длинная сравнительная таблица. Вместо этого посетителей встречают 3 основных тарифных плана со списком некоторых ключевых особенностей. Полный список функций также доступен, но расположен ниже и не перетягивает на себя внимание. Такое решение проще и эффективнее.

‍

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

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

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

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

Покажите различия построчно

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

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

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

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

Обозначьте различия визуально

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

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