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

Правильний дизайн сайту має вирішальне значення для того, щоб справити потрібне враження. Хороший вебдизайн демонструє надійність і формує довіру, тоді як поганий дизайн і слабкий UX змушують користувачів піти ще до завершення завантаження сайту (особливо якщо він завантажується довше ніж 2–3 секунди). І, до речі про довіру: чи знали ви, що під час оцінки надійності сайту 46% споживачів більше зважають на візуальні елементи, ніж на сам контент? Якщо ви шукаєте професійні послуги з дизайну, зверніть увагу на можливості вебстудії ARCC.

Сумна правда в тому, що люди й справді судять про книгу — кхм, вебсайт — за обкладинкою. І роблять вони це дуже швидко. Дослідження показали, що користувачам потрібно лише 50 мілісекунд (або 0,05 секунди), щоб сформувати думку про ваш сайт.

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

Що все це означає для вас?

Коротко кажучи, вам краще дуже добре подбати про те, щоб ваш вебсайт виглядав чудово і відмінно працював.‍

Від таблиць у Google Sheets, розфарбованих за кольорами, до коментарів-локшин завдовжки з есе, нескінченних імейлів і недбало розмальованих скриншотів, купи файлів із назвами на кшталт Real_Final_FINAL_version і безкінечних сповіщень у Slack цілодобово — має ж існувати кращий спосіб.

Він існує.

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

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

Ось про що ми поговоримо:

• Місце дизайн-фідбеку в загальному процесі вебдизайну,
• Чому важливо давати якісний фідбек щодо вебдизайну
• Найкращі практики надання відгуку щодо дизайну вебсайтів, та
• Як давати ефективний фідбек щодо вебдизайну. 

Погнали!

Процес дизайну вебсайту

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

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

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

Нижче ми коротко описали кожен крок процесу дизайну вебсайту. 

1. Бриф, дослідження та ідейний етап

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

На цьому етапі команда окреслює заплановані функції сайту та його цільову аудиторію. Далі проводять дослідження користувачів, щоб зрозуміти, як дизайн інтерфейсу (UI) та користувацького досвіду (UX) зможе найкраще задовольнити потреби майбутніх юзерів.

Щоб дізнатися більше, перегляньте цей зручний путівник з UX-досліджень від Think with Google.

2. Створення sitemap і вайрфреймів

Наступний крок — створити sitemap — по суті креслення ключових сторінок сайту, функціоналу та навігації — і вайрфрейм.

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

Як показано на зображенні нижче, вайрфрейми можуть бути низької або високої деталізації — залежно від рівня опрацьованості та «готовності».

3. Дизайн-макети та створення контенту

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

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

Їхня перша ціль — визначити загальний вигляд і настрій сайту. Після затвердження цього етапу вони детальніше відшліфовують дрібні елементи. 

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

Як і у випадку з вайрфреймами, дизайн-макети можуть бути низької або високої деталізації, як показано нижче.

Якщо ви використовуєте CMS-платформу — на кшталт WordPress, Wix, Squarespace чи Shopify, — ваш дизайнер може розміщувати макети безпосередньо в CMS замість того, щоб працювати в інструментах типу Sketch, Figma, Photoshop або InVision. Але не хвилюйтеся: ніхто не побачить сайт, доки його не опублікують.

4. Рев’ю дизайну та контенту й надання фідбеку

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

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

5. Прототипування, тестування та редизайн

На етапі прототипування макети дизайну й контент перетворюють на інтерактивну, високодеталізовану модель сайту.

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

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

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

Існує чимало чудових інструментів для пошуку учасників юзабіліті-тестів.

Після затвердження прототипу дизайн сайту нарешті передають команді веброзробки, яка програмує сайт і готує його до запуску. Звісно, якщо ви використовуєте систему керування контентом (CMS) із візуальним конструктором сайту й редагуванням «drag-and-drop», вам може знадобитися дуже мало (або взагалі не знадобитися) коду.

6. Запуск сайту

Якщо ви дійшли до цього етапу — вітаємо!

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

Однозначно поєднати. 

Що може піти не так? Чому важливий якісний фідбек щодо вебдизайну

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

• Ваш фідбек «губиться» й ніколи не опрацьовується
• Ваш фідбек незрозумілий, і дизайнер не розуміє вас, унаслідок чого збивається з курсу й робить усе зовсім не так
• Починається безкінечна переписка й «гойдалки» 
• Усі роздратовані, виснажуються, працюючи ночами, 
• Хтось погрожує звільнитися
• Дата запуску зсувається (втрачений прибуток не піддається підрахунку)

Поради та найкращі практики щодо надання фідбеку з вебдизайну

Дотримуйтеся цих порад, щоб давати кращий фідбек щодо вебдизайну.

1. Добре підготуйтеся

Ознайомтеся з основами UI та UX-дизайну. Читання цього блогу — хороший перший крок.

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

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

Гайдлайни Google Material Design — чудовий ресурс, якщо ви хочете зануритися в цю тему глибше й дізнатися про найактуальніші практики індустрії.

2. Будьте допитливими й ставте запитання

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

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

3. Починайте з «великої картини», а вже потім переходьте до деталей

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

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

4. Пояснюйте проблему, але не нав’язуйте рішення

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

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

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

5. Будьте зрозумілими, лаконічними й конкретними

Чим чіткіше ви висловите свій фідбек, тим легше дизайнеру буде його зрозуміти й внести саме ті зміни, які ви маєте на увазі.

Перед тим як почати, продумайте, що саме ви хочете донести своїм фідбеком, щоб зробити його максимально коротким і по суті. Уникайте коментарів-романів завдовжки з есе.

Коли це можливо, давайте фідбек у контексті — прив’язуючи його безпосередньо до того елемента дизайну, про який ідеться. Так ви зможете бути чіткими й конкретними та досягти піксельно точного узгодження.

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

6. Записуйте фідбек у правильному місці

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

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

Фідбек, наданий під час зустрічей, легко спотворюється або просто губиться. Фідбек, який приходить десятками (або сотнями) листів, дзвінків і повідомлень у Slack, вимагає колосальної «детективної» роботи, щоб зібрати все докупи. Не кажучи вже про те, що постійне перемикання між завданнями вкрай шкідливе для глибокої, зосередженої творчої роботи.

Щоб уникнути цих проблем, прив’язуйте свій фідбек безпосередньо до самого дизайну, щоб було одразу зрозуміло, про що йдеться. Зробіть скриншот і залиште на ньому анотації зі своїми коментарями.

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

Як давати ефективний фідбек щодо вебдизайну: використовуйте bubbles

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

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

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

Навіть спеціалізовані інструменти рев’ю вебдизайну, як-от InVision, серйозно програють, коли справа доходить до справжньої співпраці.

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

‍

Нижче ми описали, як використовувати bubbles, щоб оптимізувати робочий процес фідбеку щодо вебдизайну в чотири прості кроки.

Крок 1: Зробіть скриншот і додайте до нього анотований фідбек

Для цього просто зайдіть на сайт bubbles і натисніть «Get bubbles» або встановіть безкоштовне розширення Chrome і клацніть по іконці бульбашки, щоб відкрити нову bubble-сесію. 

Простий інтерфейс Bubbles дозволяє дуже швидко розпочати роботу.

Далі виберіть «Screenshot» і вирішіть, чи хочете створити новий скриншот, чи завантажити на bubbles вже наявний файл для анотації. Також ви можете ввімкнути опцію «scroll to select the full page» (зверніть увагу, що ця функція наразі доступна лише в розширенні).

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

Готово! Скриншот захоплено. Тепер ви можете клацнути будь-де на скриншоті, щоб створити червону точку (або «бульбашку») й залишити контекстний фідбек, показавши, точно що ви маєте на увазі.

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

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

Крок 2: Поділіться анотованим скриншотом 

Щоб надіслати скриншот дизайнеру (і/або решті команди, щоб зібрати їхній фідбек в одному місці), просто поділіться посиланням на bubble з усіма дотичними стейкхолдерами для перегляду. 

Завдяки тредам коментарів і @згадкам Bubbles перетворює надання піксельно точного фідбеку щодо дизайну вебсайту на справді спільний процес.

Крок 3: Інші рев’юери додають свій фідбек

Кожен рев’юер переходить у bubble за посиланням (йому навіть не потрібно спершу створювати акаунт!) і залишає свої коментарі, додаючи анотації до скриншоту.

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

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

Крок 4: Дизайнер відповідає на фідбек і закриває задачі

Дизайнер може переглянути весь фідбек в одному місці й відповісти на запитання та коментарі. Після досягнення консенсусу щодо спірних моментів він може переходити до внесення змін у дизайн.

Також дизайнер може перемикатися між статусами коментарів «Active» і «Resolved», відзначати їх як виконані в процесі роботи або @згадувати колег, щоб попросити додаткову інформацію.

Завдяки безкоштовному інструменту запису екрану в bubbles дизайнер також може провести рев’ю дизайну вебсайту. 

Один інструмент для дизайн-фідбеку, щоб керувати всім

Bubbles — незамінний інструмент для спільного, контекстного двостороннього фідбеку.

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

У цій GIF-анімації ви бачите, як за допомогою bubbles проводиться рев’ю дизайну вебсайту. Зверніть увагу на маленькі іконки бульбашок на панелі програвання, які позначають анотовані коментарі. 

Більше ніяких інформаційних «островів», продубльованого фідбеку та хаосу з версіями документів.

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

Більше ніяких думок у стилі «Що, до біса, вони мають на увазі?»

Більше ніякого фідбеку «на колінці» без жодного обдумування.

Тільки справжня творча співпраця.

Зареєструйтеся в bubbles за лічені секунди і почніть надавати своїй команді більш ефективний і по-справжньому корисний фідбек щодо дизайну вебсайту.

‍