Веб-дизайн сайтів і магазинів: UX-аудит, прототип, картка товару

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

«UI/UX дизайн» — це макети під розробку: візуальний дизайн у Figma під кілька розмірів екрана з передачею розробнику. Тут зібрано роботи навколо макетів. Аудит і прототип ідуть до них: перший показує, що міняти, другий фіксує структуру. Картку товару й дизайн-систему беруть і без повного редизайну.

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

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

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

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

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

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

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

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