Чи потрібен сайту редизайн? Почніть з юзабіліті-аудиту

Не переробляйте те, що працює.

ПОРИВ

«Сайту потрібен редизайн»

Майже в кожному проєкті настає момент, коли хтось відкриває чинний сайт, дивиться на нього секунд тридцять і виносить вердикт: «Потрібен редизайн».

Я й сам так робив.

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

Тому перше питання в мене тепер інше. Раніше воно звучало так: чи має сайт старий вигляд? Тепер так: чи є в сайту справжня проблема, і якщо є, то де саме вона сидить?

Коротко

• Сайт, що має застарілий вигляд, не обов'язково погано працює. Перш ніж наважуватися на редизайн, подивіться, що на ньому роблять люди: аналітику, теплові карти, записи сесій.
• Юзабіліті-аудит має завершуватися рішенням, а не автоматично новим сайтом. Іноді правильна відповідь - повне перезбирання. Частіше це точкова правка, новий код під звичним інтерфейсом або взагалі нічого.
• До висновку «не чіпати» ми дійшли на сайті власної студії-партнера і на клієнтському сайті, який із задоволенням перемалювали б для портфоліо.
• Навіть коли перезбирання виправдане, старий сайт лишається цінним: кращого матеріалу для дослідження в нового сайту не буде.
• Юзабіліті-аудит у Peretz коштує від $1 500. Редизайн, від якого ми вас відмовили, не коштує нічого.

ПОВЕДІНКА

Починати з поведінки, а не з екрана

Класичний процес редизайну напрочуд простий. Хтось відкриває чинний сайт. Дизайнер показує, що застаріло, маркетолог - що роблять конкуренти, власник каже, що сайт відчувається старим. Далі хтось відкриває Figma.

Мені здається, цього вже недостатньо. Перш ніж вирішувати, що переробляти, ми хочемо зрозуміти, що відбувається на сайті просто зараз. Ми проходимо аналітику, потім теплові карти й карти прокручування, потім кліки, зокрема «люті» кліки та кліки в порожнечу. Далі дивимося реальні сесії в інструментах на кшталт Microsoft Clarity, по одній людині, і намагаємося зрозуміти, що стояло за її діями.

Це три різні шари інформації. Аналітика каже, що сталося. Запис сесії показує, що людина насправді робила. Юзабіліті-аналіз намагається пояснити, чому.

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

ГАРНО

Коли гарна сторінка не працює

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

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

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

Сторінка може мати завершений вигляд і все одно залишити відвідувача розгубленим.

DEZZIGN

Редизайн, від якого ми себе відмовили

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

Коли працюєш у дизайні, з'являється професійна хвороба. Щодня бачиш нові сайти: нові сітки, нові шрифти, відео, моушн, WebGL, гарні журнальні розкладки. Потім відкриваєш свій сайт і думаєш: а чи не час?

Візуально з DeZZign можна зробити багато. Драматичніший перший екран, відео, цілком нову візуальну мову. Сайт мав би сучасніший вигляд, і мені було б цікаво це проєктувати.

А потім ми подивилися на сайт як на робочий інструмент бізнесу, а не як на об'єкт дизайну, і питання стало значно менш захопливим: що саме ми лагодитимемо?

Сайт простий і зрозумілий. Люди знаходять те, по що прийшли, сторінки завантажуються швидко. Clarity не показує жодної кризи юзабіліті: «лютих» кліків майже немає, ніщо не свідчить, що відвідувачі воюють з інтерфейсом. Точних цифр я публікувати не буду, але в них немає нічого, що редизайн міг би виправити. Свою основну роботу сайт робить.

То навіщо його переробляти? Бо нам набридло на нього дивитися? Це не бізнес-аргумент. Що довше ми розбиралися, то ясніше ставало: ті самі гроші й час дадуть більше, якщо вкласти їх у нові проєкти, контент і просування.

Для дизайн-агенції це трохи незручний висновок про власну студію. Але, як на мене, важливий.

Іноді найбільше редизайну хоче сам дизайнер.

ІНСТИТУТ

Коли дані сперечаються з очима

Інститут трихології - інша версія того самого завдання, тільки ставки вищі.

Якщо дивитися на сайт виключно очима сучасного дизайнера, легко уявити зовсім інший продукт: нову візуальну систему, велике відео на першому екрані, більше руху, кінематографічну подачу. Це могло б мати приголомшливий вигляд.

А потім дивишся, що відбувається насправді. Сайт швидко завантажується. Основні сценарії працюють: від симптому до потрібного відділення, потрібного лікаря і запису на прийом. Поведінкова картина в Clarity здорова, а фірмовий стиль напрочуд добре витримав час.

Тож чесне питання звучить так: чи допоможе новий сайт пацієнтові більше? Цього ми не знаємо. Ми знаємо, що новий сайт мав би новіший вигляд. Чи працюватиме він краще - окреме твердження, і доказів для нього поки ні в кого немає.

Мати новіший вигляд ще не означає працювати краще.

Медицина піднімає планку

Медичний сайт має іншу відповідальність, ніж модний бренд чи готель. Людина, яка на нього потрапляє, може бути стривожена або відчувати біль. Вона може не знати правильних термінів і шукати відповідь пізно вночі, бо з нею щось не так. Їй потрібна відповідь: що це може бути, до якого спеціаліста йти, як записатися, куди їхати.

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

ПІД КАПОТОМ

Новий код замість нового образу

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

Із сайтами схоже, але з однією важливою заувагою. Залишити інтерфейс у спокої не означає не чіпати взагалі нічого. Досить часто робота потрібна саме під капотом.

Сайт може здаватися старим, бо старий у нього фронтенд. CSS міг стати непідтримуваним, компоненти розрослися без жодної системи, CMS не дає бізнесу робити те, що потрібно, а бекенд відстав на кілька версій фреймворку. Доступність і швидкість можуть потребувати серйозної роботи. Але ніщо з цього саме собою не вимагає викидати інтерфейс, який люди вже розуміють.

Розумніше буває зберегти те, що працює для користувачів, - інформаційну архітектуру і сценарії, які приводять до заявок, - і перебудувати те, що під ними: код, крихкі частини фронтенду, усе, що стало технічним ризиком. Як це має вигляд на практиці, ми розповідаємо у статті «Оновлення старого сайту на Laravel або PHP».

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

ПЕРЕЗБИРАННЯ

Коли перезбирання - правильне рішення

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

Меблевий каталог, який ми робили кілька років тому, пішов іншим шляхом. Він задумувався як презентація: сторінка кожного товару була радше невеликим лендингом із великими фотографіями та історією, ніж карткою товару, і купити нічого було не можна. І дані, і люди казали нам, що цього замало. Відвідувачі йшли зі сторінок товарів саме тоді, коли знаходили те, що їм сподобалося, а менеджери клієнта чули телефоном одне й те саме: людям потрібна нормальна картка товару і можливість замовити онлайн. Тут аудит сказав «перезбирати», і ми перетворили каталог на інтернет-магазин.

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

Але й тоді старий сайт не варто просто викидати. Він знає те, чого ніхто не записав: які сторінки були важливими, які сценарії працювали, що люди шукали, куди клікали і що раз у раз намагалися зробити. Тому він стає матеріалом для дослідження нового сайту. Зберігати його дизайн не обов'язково, але зрозуміти його поведінку до заміни необхідно. Та сама логіка працює в більшому масштабі, коли об'єднуються дві компанії, - про це стаття «Що відбувається із сайтом після купівлі компанії?».

СМАК

«Я б зробив інакше» - це не метод

Дизайнери мають думки, це частина професії. У мене їх вистачає. Я можу подивитися на сторінку і одразу зрозуміти, як би я її вибудував. Іноді я маю рацію, іноді ні.

Проблеми починаються, коли особистий смак видають за доказ. «Я б пересунув цю кнопку». «Я б зробив перший екран значно більшим». «Я б прибрав цей блок». Кожне з цих рішень може виявитися чудовим, але поки його не зустріли реальні відвідувачі, це гіпотеза.

Для цього й потрібен юзабіліті-аудит. Він не замінює професійного судження. Він дає судженню, з чим посперечатися, і іноді це саме те, що потрібно дизайнерові. Та сама дисципліна працює і для брендів, про що ми писали у статті «Коли не потрібен ребрендинг», і для дизайну, якого люди навіть не мають помічати, - у статті «Дизайн, якого не помічають».

МАШИНИ

Структура для людей, зрозуміла машинам

Є ще одна причина, чому це важливіше, ніж кілька років тому. Сайт читають уже не лише люди. Його сканують пошукові системи, з нього беруть відповіді системи ШІ, і ШІ-агенти дедалі частіше використовують його, щоб зрозуміти, чим займається компанія.

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

Сторінка, яка веде людину цією логікою, - це і сторінка, яку найлегше розуміють пошуковик і ШІ. Писати сайти для ШІ не потрібно. Потрібно вибудовувати інформацію так, щоб її логіка була ясною: насамперед людині, а машині як наслідок. Чому робота над видимістю підсилює добрий сайт, але не рятує слабкий, ми пояснюємо у статті «SEO, AEO і GEO: підсилювачі, а не двигуни».

НАМІР

Справжня одиниця юзабіліті

Найпростіше пояснити, що ми шукаємо на аудиті, так: відстань між тим, що людина прийшла зробити, і тим, що її змушує робити інтерфейс.

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

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

АУДИТ

Що насправді дає аудит

Тут слово «редизайн» починає вводити в оману. Юзабіліті-аудит не має автоматично завершуватися новим сайтом. Він має завершуватися рішенням.

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

Рішення наприкінці зазвичай опиняється на одному зі щаблів цієї шкали, від найменшої зміни до найбільшої:

Кожен із цих результатів законний. Аудит існує не для того, щоб обґрунтувати проєкт. Його завдання - показати, який проєкт виправданий і чи виправданий узагалі. Юзабіліті-аудит у Peretz коштує від $1 500.

ЧОМУ МИ

Яка агенція таке пише?

Слушне питання: навіщо агенції, яка заробляє на редизайнах, публікувати статтю про те, як їх не робити? Питання чесне.

Ми давно переросли модель, у якій менеджери мусять продавати послуги, щоб агенція закрила місяць. Сьогодні Peretz радше мережа сильних спеціалістів. Хтось із них працює на рівні M&A і технічної перевірки перед угодами. Хтось веде власні бізнеси й продукти і тому зсередини знає, як це - витрачати гроші на те, що не окупається. Нас об'єднують процеси та якість, і ми шукаємо клієнтів, які женуться за тим самим, що й ми: за якістю і результатом.

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

Ми робимо редизайн, перезбираємо сайти і змінюємо платформи повністю, коли огляд показує, що саме це розв'яже проблему. Редизайн, проданий тому, кому він не був потрібен, - це дорогий проєкт і короткі стосунки. Аудит, який каже «поки зарано», - невеликий проєкт і часто початок довгої співпраці.

ДО FIGMA

Питання, яке варто поставити до Figma

У цифровому дизайні є дивний тиск: увесь час щось змінювати. Сайт п'ятирічної давності автоматично «старий», семирічний - «застарілий», а варто конкурентові запуститися з величезним відео на першому екрані, як такого хочуть усі. Але відвідувачі не сприймають сайти як скриншоти в портфоліо. Вони користуються ними як інструментами, з конкретною метою, і знайомий, зрозумілий і швидкий інтерфейс, який змінили лише тому, що він має старший вигляд, може створити проблеми, яких раніше не було.

Я досі люблю проєктувати нові сайти: чистий аркуш, пошук нової візуальної мови, момент, коли продукт зі старого інтерфейсу перетворюється на щось нове. Але дедалі більше переконуюся, що перше питання має звучати не «який вигляд матиме новий сайт?». Перше питання: що люди насправді роблять на теперішньому, де їм важко і яка найменша осмислена зміна розв'яже проблему.

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

Тож перш ніж міняти кузов, варто, мабуть, перевірити двигун.

Не переробляйте те, у чому ще не розібралися.

FAQ