Чек-лист: как заказчику оценить работу дизайнера
Заказывая дизайн сайта как у частного специалиста, так и в многопрофильной студии, клиент всегда ожидает получить хороший продукт. Но как понять, насколько он хорош на самом деле? Привлекательная картинка не решает задачи по продаже товаров и услуг сама по себе: она работает только в связке с пользовательским опытом. Это и есть UX/UI дизайн, где первые две буквы отвечают за то, как потенциальный клиент взаимодействует с ресурсом, а вторые — за то, как сайт выглядит.
Хороший дизайнер знает, что итоговый продукт должен соответствовать базовым требованиям как UX, так и UI. Подробно о том, в чем отличия и особенности, поговорили в отдельном материале. А также собрали примеры хорошего UX. Сегодня поговорим о том, как строится работа такого дизайнера и дадим внятный чек-лист по проверке результата.
Коротко: как разрабатывается дизайн сайта
Всего несколько лет назад визуал стоял на первом месте. Сейчас расстановка изменилась, и на первый план вышло удобство пользователя. Дизайн — не конкурсная работа, а инструмент решения конкретной задачи. Элементы UX начинают прорабатываться еще на этапе предпроектной аналитики. С момента, как заказчик начинает делиться первыми данными о своем бизнесе и ожиданиях от проекта, дизайнер отмечает, какие фишки можно реализовать.
Этапы разработки эффективного дизайна:
- Брифинг.
Самое важное — выяснить цели и задачи проекта.
- Анализ ЦА.
Для UX важно детализировать данные, поэтому на этом этапе создаются аватары пользователей: это помогает понять, как с продуктом будет взаимодействовать конкретный пользователь.
Результаты анализа ЦА для стоматологической клиники.
- Создание структуры.
Это еще не прототип, а только набросок самых важных разделов и связей. Страниц и элементов, которые точно нужны проекту, чтобы достичь цели.
- Разработка прототипа.
На этом этапе уже видно, каким именно будет сайт. Чаще всего прототип выполняется в черно-белом формате, чтобы не отвлекать ярким визуалом от главного: расположения блоков, кнопок, форм захвата и так далее. Часто прототип выполняется в интерактивной форме: Figma дает такую возможность. В результате заказчик может прокликать все элементы и увидеть связи между страницами, оценить интерфейс и удобство пользователя.
- Сборка мудборда.
«Доска настроения» — референсы ресурсов или других проектов, на которые можно ориентироваться в создании своего. Интересные палитры, подходящие шрифты, иконки и так далее. На основе мудборда создается концепция дизайна.
Вот такой мудборд мы собрали при разработке сайта стоматологии.
По завершении дизайн-макет направляется на согласование. Хороший дизайнер разрабатывает несколько версий, чтобы заказчик мог выбрать ту, что подходит ему больше всего. А еще — подробно и охотно отвечает на любые вопросы. Рассказываем, как еще можно понять, что дизайн получился хорошим.
Чек-лист для проверки дизайнера
Разработать универсальный чек-лист непросто: каждый тип сайта имеет собственные особенности и детали, которые важно учитывать при оценке. Однако есть базовые критерии, которые должны быть реализованы в любом случае.
Удобство использования
- При переходе со страницы на страницу навигация остается неизменной.
- На каждой странице присутствует окно поиска.
- Разработана отдельная мобильная версия сайта.
- Ссылки и кнопки расположены таким образом, чтобы привлекать внимание, а их размер достаточен, чтобы легко было кликнуть.
- Все пункты меню находятся на своих местах, навигация и структура интуитивно понятны, в меню выделяется цветом или иным способом страница или раздел, на которой пользователь находится в данный момент.
- Формы захвата расположены в ожидаемых местах и не отвлекают от просмотра основного контента.
- На странице отсутствуют «мусорные блоки», вся информация имеет четкую и понятную структуру.
Оценить удобство использования можно уже по прототипу: для этого DarvinDigital создает максимально подробные прототипы, в которых не только есть все необходимые блоки, но и уже написаны все тексты.
Оформление контента
Имеет смысл проверять в том случае, если вы заказываете сайт под ключ в студии: не каждый частный дизайнер берет на себя написание текстов. В большинстве случаев дизайн-макет от индивидуального исполнителя не включает в себя текстовый контент за исключением разделов сайта.
- Логически связанный контент размещен рядом: блоки не разделены большим пустым пространством или формами.
- Отсутствуют страницы, в которых нет смысла, все разделы полезны для посетителя.
- Количество элементов, отвлекающих от просмотра основного контента, минимально.
- Текст контрастирует с фоном, оформлен читабельно, его легко можно разобрать, отделить заголовки от основного текста.
- Текстовый контент написан просто и понятно, полезен для посетителя.
- Текст имеет структуру, иерархию подзаголовков и списки, форматирование по правилам веб-типографики.
- При клике открывается полный размер изображения.
- Ссылки отличаются от остального текста по цвету.
- Если по ссылке был совершен переход, она выделяется другим цветом.
Страница блога стоматологической клиники
Формы для заполнения
- Если на сайте предусмотрена регистрация, сделать это должно быть максимально просто: минимум полей, интуитивная простота заполнения, выгода для пользователя отражена в форме.
- Заполнение крупной формы разбивается на несколько этапов.
- Все этапы сопровождаются подсказками.
- Указан формат ввода данных (например, для телефона или электронной почты).
- Целевая кнопка выделяется цветом и отличается от остального оформления.
- Квизы и другие интерактивные элементы с большим количеством этапов и расширенным функционалом имеют собственные страницы.
Квиз, разработанный для сайта стоматологии, интуитивно понятен, разделен на удобные этапы и выступает в качестве дополнительного элемента, улучшающего пользовательский опыт.
Обратная связь
- Контакты расположены не только в специальном разделе, но и в шапке, а также в футере.
- Есть кликабельные иконки мессенджеров для быстрой связи, кликабельный телефон.
- Форма заявки на обратную связь размещена в ожидаемом месте и не отвлекает от просмотра контента.
- Чат-бот или чат с сотрудником не перекрывает основной контент на любой версии сайта.
- При наличии оффлайн-офиса или точек продаж: есть карта с отображением местоположения и подсказками, как добраться.
Для сайта стоматологии нарисовали эстетичные иконки: все элементы кликабельны и интерактивны.
Дополнительный функционал
За реализацию конкретных функций и внедрение анимаций отвечает верстальщик, поэтому на этапе проверки дизайна можно лишь убедиться в том, что функционал реализован и проработан как таковой. Это особенно важно для интернет-магазинов, где подразумеваются прямые продажи.
Например:
- Проработаны страницы с условиями оплаты и доставки, отдельные страницы ввода данных, формы для заполнения имеют подсказки, контрастны по отношению к остальному сайту.
- В корзине отображаются все основные данные, включая миниатюру приобретаемого товара, количество, стоимость, способы оплаты, а также блок связанных или рекомендованных товаров. Есть кнопка, по которой можно вернуться обратно к покупкам.
- Иконка корзины контрастна по отношению к остальным элементам сайта, при добавлении товара отображается количество добавленных элементов.
- Разработаны страницы для покупки в один клик или для более детального оформления заказа.
- Разработана отдельная страница с юридической информацией и данными, подтверждающими безопасность личных данных клиентов.
Для сайта по импорту корейских б/у авто под ключ разработали сразу несколько дополнительных инструментов продаж и внедрили отдельные страницы, улучшив поведенческие факторы.
Как выбрать хорошего дизайнера
Найти подходящего специалиста непросто. Какие вопросы можно задать на старте, чтобы понять, что перед вами специалист:
- Методы оценки пользовательского опыта. Позволит познакомиться с методологией дизайнера и убедиться, что этот параметр вообще принимается во внимание.
- Как выявляются боли и возражения, как это будет отражено в дизайне.
- Принципы, которых специалист придерживается в дизайне. Например, если дизайнер работает только с минимализмом, а вы хотите более яркий и креативный сайт, лучше поискать другого специалиста.
- Действия, которые предпринимаются для того, чтобы разные типы пользователей могли быстро разобраться в дизайне сайта.
- Метрики для оценки эффективности UX/UI.
- Проводится ли тестирование прототипов и обработка обратной связи.
- Какие последние тренды учитываются в дизайне и почему.
Стоимость, опыт, портфолио — все это есть практически у всех. Важно уделить внимание деталям, которые действительно влияют на результат.
Внедрили инструменты, основанные на детальном анализе ЦА и создании аватаров пользователей, каждый эффективно работает.
Не знаете, где заказать продающий дизайн? Находитесь в поисках вдохновения? Сотрудники DarvinDigital рады вам помочь. Просто позвоните или заполните заявку на сайте. В ходе бесплатной консультации мы ничего не продаем: только отвечаем на ваши вопросы и помогаем найти решение конкретной задачи.
