Стенфордські дослідження показують, що 75% користувачів оцінюють професіоналізм компанії за зовнішнім виглядом сайту. І людині потрібно менше ніж 1 секунда, щоб вирішити, залишатися на сайті, чи закрити вкладку, тому «не судіть книжку за обкладинкою» тут не працює. Як успішно провести редизайн сайту, на якому користувач буде залишатись довше? Один з останніх проєктів редизайну під моїм керівництвом продали за $38 млн, інші підіймали раунди інвестицій чи ставали частинами великих брендів. На прикладі роботи над платформою для донатів, пояснюю, які фактори потрібно враховувати, щоб редизайн «спрацював».
Як зробити хороший редизайн
Останні три роки P2H розробляють платформу для донатів для клієнта з Близького Сходу. За цей час через сайт та застосунок проєкту вдалося зібрати понад $51 млн пожертв. Зараз платформа перебуває в процесі редизайну, тому теорію будемо підкріплювати свіжими прикладами.
Почніть із детального аналізу показників
Перед тим, як розпочати редизайн вашого сайту, оцініть його поточну продуктивність. Проаналізуйте та задокументуйте різні показники, щоб отримати чітке уявлення про сильні та слабкі місця вашого сайту: оцініть кількість відвідувань, відвідувачів, відсоток відмов і час, проведений на сайті, за останній місяць. Це допоможе визначити, що саме можна покращити під час редизайну та на що це вплине. Звичайно, ви можете визначити цілі редизайну ще до того, як почнете аналіз, але краще бачити повну картину і, можливо, це зробить ваші цілі чіткішими.
Занотуйте, які інструменти ви використовували для збору цих метрик у минулому. Намагайтесь використовуйте ті ж самі інструменти для збору метрик до та після редизайну, щоб зберегти консистентність даних
Визначте мету редизайну
Якщо ваша мета зводиться до того, що ви просто давно не оновлювали сайт, цього може бути недостатньо для початку редизайну. Справа не лише у зовнішньому вигляді сайту, але й в його функціональності. Саме у такій ситуації вам допоможе аналіз і визначення слабких місць. Ви маєте чітко встановити зв’язок між метриками, які хочете покращити, та цілями, які плануєте досягти цими покращеннями. Зверніть увагу на те, що деякі метрики можуть бути пов’язані між собою. Наприклад, для збільшення конверсії може знадобитися одночасне збільшення трафіку та зменшення відсотка відмов.
Основними задачами редизайну нашої платформи було виправлення попередніх недоліків, поліпшення користувальницького досвіду зі збереженням логіки та зведення сайту до єдиного стилю.
Основним елементом майже кожної сторінки є картка донату. В залежності від типу проєкту ці картки змінювалися, що викликало ряд проблем зі сприйняттям та пошуком необхідної інформації. Тому всі картки були зведені до загального вигляду, що покращить користувальницький досвід.
Зробіть сайт адаптивним
Ті сайти, що адаптовані під різні екрани: смартфона, планшета, десктопа — більш привабливі для читача. Тому що забезпечують легку навігацію, зручне читання контенту та доступ до всіх функцій з будь-якого пристрою.
Це не тільки покращує UX, але й допомагає збільшити трафік, оскільки сприяє покращенню видимості в пошукових системах. Наприклад, Google враховує дружність сайту до мобільної версії й підвищує їх у видачі своїми алгоритмами.
Зараз 60% світового трафіку генерується з мобільних пристроїв, тому, якщо ваш сайт не є адаптивним, ви ризикуєте втратити великий шматок аудиторії. Зручне оформлення покупок та заповнення форм на будь-яких пристроях допоможуть підвищити конверсію. Окрім цього, адаптивний дизайн допомагає пришвидшити завантаження сайту та запобігти втраті відвідувачів через довге очікування.
Донейшн платформа, над якою зараз працює Олександр, має 5 версій та адаптується в залежності від пристрою. Через те, що майже вся структура платформи базується на картках, це не створює проблеми для адаптації та не втрачається консистентний вигляд всього продукту.
Зробіть сайт доступним
На відміну від адаптивності, доступність — це про те, наскільки легко користувачам із різними обмеженнями можна отримати доступ до вмісту та функціональності вашого сайту. Це стосується людей із вадами зору, слуху, рухової системи, когнітивними чи іншими обмеженнями. До елементів дизайну, що впливають на доступність, відносять навігацію, читабельність тексту, контрастність кольорів, доступність клавіатури чи миші та ін.
У багатьох країнах є законодавчі норми, які вимагають забезпечувати доступність сайтів для людей з особливими потребами. Наприклад, Web Content Accessibility Guidelines (WCAG) — це один зі стандартів, який надає рекомендації та критерії для створення доступних вебсайтів.
Доступність допомагає розширити аудиторію потенційних лідів та підвищити конкурентоспроможність бізнесу, але багато компаній ігнорують цей критерій. Наприклад, про наявність так званого стану фокусу в інтерактивних елементах сайту, що допомагає використовувати сайт без допомоги миші, забувають 90% проєктів.
Не забувайте про візуальну привабливість
Підбір кольорів, типографіки, композиції, макету та графічних елементів відіграють ключову роль у сприйнятті сайту. Це і є той набір, який формує враження відвідувачів у першу мить перебування на сторінці й за допомогою якого досягається мета дизайну.
UI/UX Tech Lead в P2H розповідає: «До редизайну картки з донатами на нашому сайті виглядали досить хаотично. Поведінка однакових елементів відрізнялась, а самі елементи могли бути розміщені в різних місцях однакових карток, що, скоріше за все, коштувало нам купи лідів. Окрім цього, мови сайтів англійська та арабська, тому нам доводилось підлаштовувати купу візувальних елементів так, щоб при переході з однієї мови на іншу вони виглядали однаково.
Окремо варто зазначити, що арабською сайт мав бути повністю віддзеркалений справа наліво, але це особливість роботи з клієнтами з Близького Сходу. Для забезпечення єдиного стилю та послідовності дизайну ми створили спеціальний UI-kit, що дозволив прискорити роботу над платформою використовуючи шаблонні елементи, та значно покращив користувацький досвід.
Орієнтуйтесь на користувача
Під час планування редизайну зосередьтесь на потребах та очікуваннях користувачів. Це допоможе зробити сайт інтуїтивно зрозумілим і зручним і збільшить ймовірність повторних відвідувань та покупок.
Це може прозвучати дивно, але сайт — це не про вас чи вашу компанію. Це про користувача і те, що він отримає, звернувшись до вас. І ваша задача, як дизайнера, показати, що людина звернулась до правильної компанії й може легко і швидко отримати те, що вона хоче, зрозумілим і доступним для неї способом. Наприклад, ми зробили нашу платформу для донатів схожу на звичайний інтернет-магазин, де можна додати декілька різних зборів у «корзину» і пожертвувати кошти на все одразу. Це пов’язано із законом Джейкоба, тобто законом пріоритету фамільярності, згідно з яким люди віддають перевагу використанню того, з чим вже знайомі та мають певний досвід користування.
Чекліст для хорошого редизайну (замість висновку)
Отже, підсумуймо, на що потрібно звернути увагу, якщо ви вирішили робити редизайн сайту:
1. Почніть із детального аналізу. Перед редизайном сайту проаналізуйте його продуктивність, оцінюючи різні показники, щоб визначити слабкі та сильні місця та встановити чіткі цілі редизайну. Використовуйте однакові інструменти для збору метрик до та після редизайну, щоб мати однорідні дані та зробити об'єктивне порівняння.
2. Визначте мету редизайну. Не обмежуйтеся лише оновленням зовнішнього вигляду, а зосередьтеся також на його функціональності. Встановіть зв’язок між метриками, які хочете покращити, та цілями, які хочете досягти.
3. Зробіть сайт адаптивним. Адаптивний дизайн поліпшує користувацький досвід, та збільшує трафік внаслідок кращої видимості сайту в пошукових системах та швидшому завантаженню на різних пристроях.
4. Зробіть сайт доступним. Це розширить аудиторію потенційних лідів, підвищить конкурентоспроможність компанії та забезпечить виконання законодавчих вимог у багатьох країнах.
5. Не забувайте про візуальну привабливість. Кольори, типографіка, композиція, макет та графічні елементи відіграють важливу роль у створенні першого враження про сайт та досягненні цілей редизайну.
6. Орієнтуйтесь на користувача. Ваш сайт повинен бути схожим на інші, якими відвідувачі користуються щодня, тож сконцентруйтеся на їхніх потребах та очікуваннях. Це допоможе зробити його інтуїтивно зрозумілим та зручним, підвищуючи ймовірність повторних відвідувань та покупок.