Когда пользователь попадает на сайт, ему хочется получить некоторую информацию. И причем получить её достаточно быстро. Особенно это касается сравнения товаров, выбора тарифных планов для подписки, обзора цен и прочее аналогичное. Но у сравнительных таблиц есть еще одна важная особенность, что делает её востребованной в веб-дизайне – стимулирование продаж и, своего рода, подталкивание пользователей совершить какое-то действие. Этот элемент страницы может помочь вам продвинуть продукты, основанные на относительной ценности и помогает посетителям сравнивать различные продукты на первый взгляд.
Но все было бы просто, если достаточно было создать макет такой таблицы и поместить его на страницу сайта. Вот только если приглядеться внимательнее к разным сайтам, то такие таблицы очень разнообразны, и в этом есть свой смысл. Все они предлагают для сравнения разные параметры, функции и ту информацию, что нужна пользователям.
В этом материале мы копнем поглубже тему сравнительных таблиц и посмотрим, как они работают, какие у них цели, и что нужно учитывать веб-дизайнеру при работе с ними. Особенно это будет интересно в случае запуска интернет-магазина или создания сравнений продуктов в блоге и прочие варианты.
Введение в сравнительные таблицы
Итак, что же такое таблица сравнения? Это самая обычная HTML таблица с колонками для продуктов и строками с возможностями данных продуктов. Аналог…ага, разумеется, сравнения товаров на том же Яндекс.Маркет. Такие таблицы часто называют «ценовыми», потому как используется так много SaaS-инструментов, которые предлагают различные планы/товары по различным ценам. Цель же состоит в быстром обмене информации, чтобы пользователи могли проверить, какой товар они хотели бы использовать.
Но использовать ценовые таблицы можно и для физических продуктов или сравнений. Подумайте о том, что сравнительные таблицы целесообразны, как исследовательский элемент для разборчиво-придирчивых покупателей. Клиенты смотрят данные, прежде чем решить купить что-то. Если все данные представлены в одной таблице, то получится бесценный веб-ресурс, который, просто таки, будет поощрять пользователей что-то купить.
Но здесь важен момент, что таблица не должна быть огромной, все параметры необходимо разложить по частям, категориям, разделам. Всем вариантам необходимо прописать цену и, кроме этого, сравнить основные функции и преимущества для каждого варианта.
Дизайн таблиц сравнения
Давайте посмотрим теперь на некоторые тенденции дизайна для таблиц сравнения, чтобы увидеть, какие функции вы можете использовать в вашем собственном стиле. И, да, здесь нет ни одного «правильного» ответа, потому что каждый продукт немного отличается. Но лучшие таблицы просты в использовании и четко представляют информацию, которая действительно ценна для клиентов.
Выделение рекомендаций
Это можно увидеть почти в каждой ценовой таблице. Суть тенденции - выделение одного столбца, как рекомендуемого, лучшего среди прочих, популярного выбора у большинства покупателей.
Как правило, это не самый дешевый план/тариф, но здесь есть все, что можно получить за данную сумму. Вы можете использовать этот вариант чисто с психологической точки зрения, чтобы продать пользователям практически любой план из имеющихся.
Проект litmus использует таблицу с довольно большим количеством строк для сравнения между четырьмя планами. Но выделенный план (второй), вероятно, не слишком-то удобен и интересен для большинства. Но он более насыщенный, чем Basic, предлагая почтовую аналитику, интегрирование сред работы с кодом и иное. И в действительности, он не может стоить дороже своих соседей.
Аналогичный пример есть и на reg, где предлагается три разных плана на выбор. Можно заметить, что каждая колонка выполнена в разном цвете, несмотря на то, что средний план выделяется, как рекомендуемый. Цвета, «светофорные» оттенки, показывают быстро и наглядно, насколько планы насыщены функциями. Это позволяет создать иллюзию близости к пользователям, дать им ощущение более тесного взаимодействия, наглядного и дружелюбного.
Намного более тонкий и необычный эффект представлен на cloudways. Здесь и выделение цветом, и увеличение в размерах колонки-рекомендации, интересные эффекты анимации и прочее.
На самом деле можно использовать любые средства веб-дизайна, если есть желание создать выделение колонки. Цветовые заливки (градиент или полноцветные), рамки, фоны, дополнительные иконки, ленты, большой шрифт, анимацию кнопок и колонок – вариаций в действительности много и все они смотрятся весьма недурно.
Главное то, что цель веб-дизайнера – создать такую таблицу и такую колонку, которая бы реально выделялась бы среди прочих. И необходимо помнить, что быстро продажи от этого не увеличатся, но разница все же будет присутствовать, хоть и небольшая, но ощутимая.
Обширное сравнение данных
Помните, что пользователям необходима только информация и, соответственно, задача веб-дизайнера представить эту информацию четко и лаконично.
Это означает, что сравнительная таблица должна быть создана с большим количеством пространства, окружающего каждую строку и столбец. Лучше присматриваться к многообразию вариантов в интернете, а не просто копировать одну какую-то идею (а они, по факту, едины).
Вместо того, чтобы планировать таблицу на основе типов предложений, лучше попробовать представить самую полезную информацию посетителям.
Очень красивый пример можно найти на wufoo. Таблица простая и имеет плоский вид, поэтому глазами по ней легко скользить, изучая информацию. Сами таблицы имеют нейтральную цветовую схему, так что любые дополнительные цвета действительно выделяются и привлекают внимание (синие и зеленые блики).
Кроме того, можно заметить, что некоторые слова в таблице окрашены темнее и смелее, чтобы выделиться. Это делает визуальное скольжение намного более простым дополнительно к большому количеству свободного пространства вокруг слов.
А какие части текста выделены жирным шрифтом? Цифры, конечно! Цены, что важны и играют особую роль во всей этой идее сравнения. Общая стоимость, количество возможностей, функций и прочее – все это важная информация для покупателей. Предоставьте посетителям именно для них важную информацию и увидите, как она сыграет свою роль.
Другим примером большой таблицы является тарифная сетка rusonyx. На ней хочется остановиться подробнее, поскольку информация, представленная в ней, не является такой уж и полной. Покупатели в данном случае имеют возможность подбирать и настраивать тариф «под себя». Впрочем, здесь все также есть строки с разделителями, но текст гораздо мельче и его немного труднее читать. Существуют дополнительные иконки и… опции выбора, от которых окончательная цена тарифа меняется.
Попробуйте поставить себя на место среднестатистического покупателя. Легко ли вам найти информацию в вашей же таблице? Разобраться в ней и подобрать только то, что действительно важно? Если нет, то почему? Обычно ответ кроется в сочетании пространства и внимания к деталям.
Только главное и ничего более
Мы постоянно говорим об информации, потому как информация действительно помогает продажам через сравнительную таблицу. Но вот вопрос, какая же именно информация является для пользователей наиболее ценной? Очевидно, что цена для каждого пункта/плана должна быть заметной. То же самое касается особенностей предложений продукта (то есть, хостинг, создание контента, дизайн баннера и иное).
И вот самый отличный пример на shopify. Сравнение начинается с огромных цифр ежемесячных цен. И это дает пользователям четкую картину того, сколько нужно платить в зависимости от плана. Ниже можно найти большее количество информации, дополнительные функции и издержки по транзакциям.
Но, опять же, цель состоит в том, чтобы учитывать во время проектирования, как думает пользователь. Какие функции могут подтолкнуть совершить покупку? Включите их в таблицу таким образом, чтобы их было легко изучать и сравнивать.
Такие примеры часто можно встретить на amazon, на Intel и иных ресурсах, что каждый из нас использует достаточно часто в своей жизни. Эти сравнения одного продукта с аналогичными моделями дают возможность потенциальным клиентам представление о том, какие из них можно купить и чем они отличаются.
Но… это работает лучше всего для сравнения физических продуктов, потому что мы (обыватели) часто сравниваем размер, цену и дополнительные возможности (или их отсутствие). Если речь идет о чем-то виртуальном, цифровом, то такие сравнения создать сложнее, ибо цена начинает колебаться в зависимости от сложности работы и создания этого «нечто». Здесь лучшим становится вариант выделения основных параметров и функций с обязательным упоминанием всего того, от чего цена может измениться.
Невозможно точно сказать, что именно сравнивать, но до тех пор, пока сравнительная таблица будет поощрять кого-то купить ваши товары, то вы, вероятно, делать все правильно.
Ясность и визуальные эффекты
Маленькие иконки и иллюстрации могут действительно немного придать игривости общему дизайну и способствовать более удобному визуальному скольжению по строкам таблицы. Но все эти «украшательства» должны иметь отношение к макету и легко восприниматься. Пример у Rusonyx, выше, наглядное тому подтверждение.
Но также интересен и вариант сравнения у dnsmadeeasy. Они все сделали очень тонко, добавляя логотипы для каждой основной службы DNS и сравнивая их между собой.
Если сравниваются различные продукты или компании в обзоре, то обязательно стоит рассмотреть этот метод. Это отличный способ привлечь внимание к одному продукту, сравнивая его с другими.
Но также можно использовать иллюстрации, чтобы настроить таблицу планов в соответствии с уникальным брендингом. Этот пример вам, читатели, точно понравится. Речь идет о freshdesk.
Эти небольшие иллюстрации и анимационные значки не относятся непосредственно к компании или продукту. Но они помогают визуально понять, какие планы являются «большими» в отличие от прочих. Так что, можно смело сказать, на чем бы вы и сами смогли остановиться в своем выборе в зависимости от предпочтений и цены.
Не забываем о CTA
Покупатель должен точно знать, куда нажать, если он заинтересован в приобретении какой-то позиции из сравнительной таблицы. Вот почему обязательно нужна кнопка CTA в количестве, как минимум, одной для каждого из сравнивающихся товара. Бывает, что используют и две кнопки: в начале сравнения и по его завершению.
СТА является горячо обсуждаемой темой достаточно долгое время, потому что эти кнопки действительно помогают пользователям принять решение о приобретении товара. Они, как дверной проем из таблицы сравнения на страницу оформления заказа. И на каждом сайте они выполняются и рисуются по-разному, но всегда они видны, их легко найти, и они необходимы.
Посмотрим на плоские, практически воздушные и едва уловимые таблицы сравнения на typekit, semrush, nic. Везде используются либо полноцветные зеленые кнопки или прозрачные с яркой рамкой, что позволяет их выделить и привлечь к ним внимание. Текст «Подписаться», «Заказать» также имеет решающее значение, потому что он говорит о том, что именно происходит при нажатии кнопки. Было бы слово «Выбрать», смысл терялся немного. То ли просто выбор, то ли переход к оформлению и покупки.
Только зеленые элементы или выделенные красным на этих страницах, являются CTA, поэтому они довольно яркие. Это опять-таки помогает покупателям сориентироваться в таблице.
Аналогичные кнопочки можно увидеть и на hosting24, но их сравнительная таблица использует чередование цветовых схем.
Да, это соответственно влияет и на цвет кнопки CTA, так как она соответствует общему оформлению колонки. И это хороший пример объединения двух тенденций в одной таблице.
Здесь нельзя с точностью сказать, какой должна быть кнопочка. Прямоугольной формы или с закругленными углами, цветной или градиентной, плоской или объемной и так далее. Тут уже приходится веб-дизайнерам самим исходить из общего дизайна и таблицы, и сайта, и страницы.
Завершение
Всех этих знаний, что мы описали выше, вполне достаточно, чтобы создать таблицы цен/сравнений. Всегда стоит изучить другие примеры в интернете и посмотреть, существуют ли интересные тенденции, можете ли вы сами добавить что-то особенное к тому, что уже есть и, тем самым, создать нечто новое и интересное.
Это всегда хорошо и уместно изучить другие конструкции, чтобы просто посмотреть, что делают остальные веб-дизайнеры. Это не должно стать вашим окончательным выбором! Стройте новое на этих идеях, используя эмпатию и методы UX из популярных тематических исследований.
Со временем вы найдете идеальный способ структурировать годную к употреблению ценовую/сравнительную таблицу, которая преобразует весь объем информации и поможет посетителям найти информацию, в которой они нуждаются в первую очередь.