Если вы не очень понимаете, что делаете, то давать обратную связь по дизайну сайта — и при этом держать весь процесс под контролем — может превратиться в кошмар для всех участников.

Правильно оформить дизайн сайта — критически важно, чтобы произвести нужное впечатление. Хороший веб‑дизайн повышает доверие и формирует ощущение надежности, тогда как убогий дизайн и плохой UX заставляют пользователей тут же уходить с сайта ещё до того, как он успеет загрузиться (особенно если загрузка занимает больше 2–3 секунд). И раз уж мы заговорили о доверии: знали ли вы, что при оценке надежности сайта 46% потребителей обращают больше внимания на визуальные элементы, чем на сам контент? Если вам нужны экспертные услуги по дизайну, обратите внимание на возможности компании по веб‑дизайну ARCC.

Печальная правда в том, что люди действительно судят о книге — кхм, сайте — по обложке. И делают они это очень быстро. Исследования показывают, что пользователю нужно всего 50 миллисекунд (то есть 0,05 секунды), чтобы сформировать мнение о вашем сайте.

Если вспомнить, сколько платформ поощряют нас принимать решения о ценности и делать быстрый выбор исключительно по внешнему виду (смотрим на тебя, Tinder и TikTok), становится ясно, что окно возможностей для той самой первой, решающей, впечатляющей секунды становится всё меньше.

Что всё это значит для вас?

Короче говоря, вам нужно чёртовски хорошо позаботиться о том, чтобы ваш сайт и выглядел отлично, и работал безупречно.‍

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

Он есть.

В этом руководстве вы узнаете, как организовывать и давать эффективную обратную связь по дизайну сайта — будь вы полным новичком, который даёт межфункциональные комментарии, дизайнером, проверяющим работу другого дизайнера, или руководителем бизнеса, которому нужна помощь с тем, как давать дизайн‑фидбэк.

Читайте дальше, чтобы узнать, как создать качественный финальный продукт, не травмируя своих дизайнеров и не попадая в чёрный список веб‑агентства, которому вы отдали работу на аутсорс.

Вот о чём мы поговорим:

• Как обратная связь по дизайну вписывается в общий процесс веб‑дизайна,
• Почему важно давать хорошую обратную связь по веб‑дизайну
• Лучшие практики по предоставлению обратной связи по дизайну сайта, и
• Как давать эффективную обратную связь по веб‑дизайну. 

Поехали!

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

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

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

Прежде чем начинать раздавать фидбэк, полезно понять, что происходит на других этапах, чтобы вы могли давать осмысленные указания и не оказались в глупом положении.

Ниже мы кратко разобрали каждый шаг процесса веб‑дизайна. 

1. Бриф, исследование и генерация идей

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

На этом этапе команда описывает предполагаемые функции сайта и его целевую аудиторию. Затем проводится пользовательское исследование, чтобы понять, как интерфейс (UI) и пользовательский опыт (UX) сайта смогут наилучшим образом удовлетворить потребности целевой аудитории.

Если хотите подробнее разобраться в этом этапе, посмотрите этот удобный гайд по UX‑исследованиям от Think with Google.

2. Создание сайта‑карты и вайрфреймов

Следующий шаг — создать карту сайта (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, но и у такого подхода есть минусы, особенно для удалённых и асинхронных команд.

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

Даже специализированные инструменты для ревью веб‑дизайна вроде 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 за пару секунд и начните давать своей команде более эффективную и содержательную обратную связь по дизайну сайта.

‍