Ми вивчили 100 сайтів SaaS, щоб розкрити тенденції дизайну + найкращі практики (ось що ми знайшли)

Які найкращі практики веб-дизайну SaaS?

Це питання, на яке я поставив відповідь після спотикання на сайті SaaS, після SaaS, після SaaS… Це виглядало приблизно так само:

Розуміння кращих практик може стати прекрасним способом для веб-дизайнерів (та засновників SaaS) задуматися про свою власну торгову марку. Це підхід. Енді Крестодіна зайняв кілька років тому, аналізуючи веб-стандарти для топ-50 маркетингових сайтів. Це також може допомогти дизайнерам, стратегам та засновникам спланувати свої дизайнерські ініціативи у розумінні каркасів та визначити, які ключові елементи дизайну повинні бути на їх домашній сторінці.

Група Nielsen / Norman опублікувала один з перших фрагментів документації щодо Стандарти веб-дизайну та визначила три рівні стандартизації:

  • Стандарт: 80% + сайти використовують той самий підхід
  • Конвенція: 50–79% веб-сайтів використовують той самий підхід
  • Плутанина: 49% або менше веб-сайтів використовують підхід

В той час, як я спочатку мав багато розчарувань з lookalike SaaS брендами; чим далі я розглядав міркування щодо дотримання стандартів дизайну та передового досвіду, тим більше я розумів перевагу послідовності. Деякі з переваг, які мають наступні веб-стандарти дизайну, включають:

  • Почуття безпеки та довіри, бачачи загальні елементи дизайну
  • Точно знати, куди піти, коли вам щось потрібно (наприклад, додому через. Натисніть логотип)
  • Ніякої невпевненості щодо нових іконок, кнопок та елементів дизайну
  • Жодних ключових елементів (наприклад, отримати демонстрацію) не пропущено

Всі ці речі можуть зробити користувальницьку роботу більш гладкою та інтуїтивно зрозумілою.

Але в просторі SaaS є багато речей, які, здається, копіюються без поважних причин.

Тож, щоб краще зрозуміти стандарти веб-дизайну SaaS, ми взяли топ-100 сайтів від SaaS1000.com в січні 2019 року, щоб створити набір даних, який показав нам, які речі стали стандартами, що було звичайним, а що - монети. Ось детальніше ознайомимось з найкращими практиками дизайну SaaS, що відбуваються у 2019 році:

Логотипи бренда завжди знаходяться на лівій стороні

Розміщення логотипу в лівій верхній частині веб-сайту є звичайною найкращою практикою дизайну. Саме такий підхід застосовує більшість дизайнерів усередині SaaS і поза SaaS. Це логічний вибір, якщо визнати, що більшість людей у ​​Північній Америці переглядають сайт зліва направо.

Але іноді (в нашому дослідженні; раз) дизайнер вирішує розмістити логотип десь в іншому місці. Поки ми не бачили, щоб жоден із сайтів розмістив логотип праворуч; ми знайшли DataDog, який розмістив свій логотип прямо посередині свого сайту:

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

Більшість веб-сайтів SaaS відрізняються мобільністю

Ми живемо в мобільному світі.

Чуйні веб-сайти - це чудовий спосіб переконатися, що ви не доставляєте зруйнованих вражень людям на робочому столі або відвідуєте мобільний телефон

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

Відео можна знайти на трохи менше 55% сайтів

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

Очікування, що очікуються на спадщину, пов'язані з виготовленням високоякісного відео, все ж можуть стримувати бренди від цієї інвестиції. Ілюстровані пояснювачі продуктів набули популярності кілька років тому і стали популярним сервісом, купленим через сайти, такі як Fiverr та Upwork. Сьогодні попит на такі типи відео все ще досить високий (понад 14 800 пошуків записів відеозаписувачів щомісяця), але лише трохи більше половини компаній SaaS ними користуються.

Завжди є первинний заклик до дії вище складки

У спільноті SaaS є чітка найкраща практика, що ваш заклик до дії, що спонукає людей робити щось, повинен бути вище рівня. Більше 90% усіх сайтів, що були включені в це дослідження SaaS Design, мали кнопку або заклик до дії, що знаходиться вище згину.

Розміщення заклику до дії відрізняється

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

Які кольори компанії SaaS використовують для кнопок?

При аналізі різних закликів до дій спостерігалася чітка тенденція до зелених та помаранчевих кнопок.

Безкоштовна демонстрація - найпопулярніший заклик до дії

На веб-сайтах, які ми переглядали, на яких є заклик до дії, зазвичай є чітка річ, яку вони хочуть робити. Більшість із них використовують мову, орієнтовану на дії (%%), і підштовхують відвідувача зробити щось, що підштовхує їх далі до воронки. Деякі варіанти включають:

  • Графік демонстрації
  • Запит демонстрації
  • Отримайте безкоштовну демонстрацію
  • Отримайте X безкоштовно
  • Почати
  • Спробуйте X

Найпоширеніші слова + фрази в рамках заклику до дій, як правило, були: Безкоштовно, Демо, Почніть, Почніть, Спробуйте X та Запит ... Деякі з цих слів з’явились разом (наприклад, Безкоштовна демонстрація або Спробуйте X безкоштовно), але використовуючи комбінацію з цих слів, як правило, виявляється найбільше в первинних КТ SaaS.

Використання світлого фону - найкраща практика

Нечасто бачити веб-сайт із чорним фоном у SaaS:

Більшість сайтів (92% з них) використовували білий або світлий кольори як основний фон для своїх сайтів.

Використання реальних людей використовується лише 56% SaaS

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

Також було чудово побачити досить багато різноманітності у виборі зображення. Єдине, чого бракувало, - це побачити подібний рівень різноманітності на цих сторінках "Нашої команди", але це вже інший раз.

Спеціальні ілюстрації дуже поширені (70%)

Зростання користувацьких ілюстрацій штурмом охопило спільноту SaaS. Це щось, що впродовж останніх 3 років з'являється на сайті за сайтом. Наша професійна думка полягає в тому, що це тенденція, але це лише кілька відсоткових пунктів, щоб стати найкращою практикою.

Ось короткий знімок деяких сайтів та їх ілюстрацій:

Це цікава тенденція.

Як ви думаєте: чи допомагає такий підхід до дизайну виділятися стартапам чи це призводить до того, що вони змішаться? Це важливо? Це викликає почуття довіри?

Половина брендів SaaS використовує інструмент чату в прямому ефірі

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

Наше дослідження виявило, що майже 50% сайтів SaaS мають вікно чату в кутку, готовий займатися. Більшість цих сайтів використовували послуги Intercom або Drift.

Тож чи слід дотримуватися стандартів?

Це залежить.

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

Ось список дій, які потрібно зробити, якщо ви хочете, щоб сайт не був таким, як усі:

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

Чи відповідає ваш сайт зараз цим стандартам?

Чи щось тут вас здивувало?

Спочатку опубліковано як кращі практики веб-дизайну SaaS: Labs Foundation

Ця історія опублікована в найбільшій підприємницькій публікації "Середній бізнес", в якій розміщено +430 678 осіб.

Підпишіться, щоб отримувати наші основні історії тут.