Лучшие практики веб-дизайна SaaS: стандарты дизайна и тенденции, которые стоит знать

Каковы лучшие практики веб-дизайна SaaS?

Это вопрос, на который я хотел ответить после того, как наткнулся на один сайт SaaS, после сайта SaaS, после сайта SaaS… Они выглядели почти одинаково:

Понимание лучших практик может быть отличным способом для веб-дизайнеров (и основателей SaaS) задуматься о присутствии своего бренда. Это подход, который Энди Крестодина применил несколько лет назад, когда анализировал веб-стандарты для 50 лучших маркетинговых сайтов . Это также может помочь дизайнерам, стратегам и основателям планировать свои дизайнерские инициативы, используя каркасы и определяя, какие ключевые элементы дизайна должны быть на их домашней странице.

Nielsen/Norman Group опубликовала один из первых документов по стандартам веб-дизайна и определила три уровня стандартизации:

• Стандарт: более 80 % сайтов используют один и тот же подход.
• Условность: 50–79 % веб-сайтов используют один и тот же подход.
• Путаница: 49% или меньше веб-сайтов используют подход

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

• Чувство безопасности и доверия при виде общих элементов дизайна
• Точно знать, куда идти, когда вам что-то нужно (например, «Домой» через щелчок по логотипу).
• Нет неопределенности с новыми иконками, кнопками и элементами дизайна. Все ключевые элементы (например, получение демоверсии) не пропущены.

Все эти вещи могут сделать работу пользователя более плавной и интуитивно понятной.

Но в пространстве SaaS есть много вещей, которые, похоже, копируются без веской причины.

Итак, чтобы лучше понять стандарты веб-дизайна SaaS, мы взяли 250 лучших сайтов из SaaS 1000, чтобы создать набор данных, который показал нам, что стало стандартом, что было обычным, а что было подбрасыванием монеты.

Вот более пристальный взгляд на лучшие практики проектирования SaaS, которые появятся в 2022 году:

Логотипы брендов всегда слева

Итак, вы решили создать логотип (или обновить существующий) и думаете, где на своем сайте его разместить. Размещение вашего логотипа в левом верхнем углу веб-сайта является общепринятой практикой дизайна. С 2019 года мы даже увидели увеличение количества логотипов слева от навигации на 1%! Это подход, который большинство дизайнеров используют внутри и вне SaaS. Логично признать, что большинство людей в Северной Америке просматривают сайт слева направо.

Но иногда (в нашем исследовании, один раз) дизайнер решает разместить логотип где-то еще. Хотя мы не видели, чтобы сайты размещали свой логотип справа; мы нашли DataDog, который разместил свой логотип прямо в середине своего сайта:

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

Большинство веб-сайтов SaaS адаптированы для мобильных устройств

Мы живем в мобильном мире.

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

В 2018 году 52,2% всего мирового онлайн-трафика приходилось на мобильные телефоны. Вот почему так приятно видеть, что почти все SaaS-компании инвестируют в адаптивный дизайн и лучшие практики мобильных целевых страниц , а не только в разработку для настольных компьютеров.

Видео можно найти на трети сайтов

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

Мы были очень удивлены, обнаружив, что у большинства веб-сайтов нет видео на своих главных страницах, и еще больше удивились, увидев снижение на 13% по сравнению с нашим предыдущим исследованием в 2019 году.

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

Сегодня спрос на эти типы видео по-прежнему достаточно высок (более 14 800 поисковых запросов на видео с пояснениями в месяц), однако только немногим более половины SaaS-компаний используют их.

В верхней части страницы всегда есть основной призыв к действию

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

Размещение CTA обычно можно найти выше сгиба

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

Синий проходит зеленый как новый выбор для кнопок SaaS

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

Популярность синих кнопок CTA значительно выросла с 2019 года, превысив зеленую примерно на 3% (это был самый популярный цвет CTA в 2019 году). Для этого есть веская причина: синий цвет чаще всего используется для гиперссылок, и он привлекает внимание.

Бесплатная пробная версия превосходит «Начало работы» как самый популярный призыв к действию в SaaS

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

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

• Начать

• Запросить демонстрацию

• Запланировать демонстрацию

• Зарегистрироваться

• Получить бесплатную демоверсию

• Получите X бесплатно

Наиболее распространенными словами и фразами в призыве к действию, как правило, являются: «Бесплатно», «Демонстрация», «Получить», «Начало работы», «Попробовать X» и «Запросить…». Комбинация этих слов чаще всего встречается в первичных призывах к действию SaaS.

Лучше всего использовать светлый фон

В SaaS не часто можно увидеть сайт с черным фоном:

Большинство сайтов (92%) использовали белый или светлый цвет в качестве основного фона для своих сайтов.

Использование реальных людей используется 80% SaaS

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

Это ОГРОМНЫЙ скачок по сравнению с тем же исследованием, которое мы проводили в 2019 году . Всего 3 года назад только 56% веб-сайтов использовали реальных людей на своих главных страницах, что представляет собой колоссальный рост на 24%.

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

Пользовательские иллюстрации очень распространены (70%)

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

Вот снимки некоторых сайтов и их иллюстрации:

Это интересная тенденция.

Как вы думаете: помогает ли такой подход к дизайну выделяться стартапам или заставляет их сливаться с другими? Это имеет значение? Вызывает ли это чувство доверия?

Половина брендов SaaS используют инструмент живого чата

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

Наше исследование показало, что чуть более 5% SaaS-сайтов имеют окно чата в углу, готовое к взаимодействию. На большинстве этих сайтов использовались службы Intercom или Drift.

Так стоит ли следовать стандартам?

Это зависит.

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

Вот список советов по дизайну веб -сайта, если вы хотите, чтобы сайт был не таким, как все:

• Не используйте плоскую иллюстрацию в качестве абстрактного представления вашего бренда.
• Не используйте темно-оранжевые или желтые кнопки на главной странице.
• Не оставляйте выравнивание вашего ценностного предложения на сайте
• Разместите свой логотип посередине или справа
• Используйте темный фон для вашего сайта

Соответствует ли ваш сайт этим стандартам? Вас что-то здесь удивило?