Чек-лист: как проверить работу UX/UI-дизайнера

Из статьи вы узнаете:

• по каким критериям оценивать работу UX/UI-дизайнера;
• какие параметры сайта позволяют судить о его удобстве;
• что должно быть на главной странице, карточке товара, в корзине и на прочих страницах сайта.

UX/UI-дизайнер занимается проектированием пользовательского интерфейса сайта с учетом визуальной составляющей и удобства его использования. UX (User Experience) — это опыт взаимодействия пользователя с сайтом; показывает, насколько просто ему удалось достичь цели. UI (User Interface) — это визуальная составляющая интерфейса сайта.

К UX/UI-дизайнерам часто обращаются с уже готовыми сайтами, требующими переработки или доработки под определенные задачи, а также сотрудничают при проектировании сайта с нуля, чтобы минимизировать количество ошибок в юзабилити.

Предлагаем чек-лист для оценки результатов работы UX/UI-дизайнера.

Что проверять

Удобство (юзабилити) сайта

• Настроена навигационная цепочка («хлебные крошки») — ссылки, которые отражают путь пользователя от главной страницы до текущей.
• Отображение навигации не изменяется при переходе с одной страницы на другую.
• Адрес сайта прост для запоминания, настроены семантические (человекопонятные) URL.
• На всех страницах сайта есть окно поиска.
• Используются персонализированные настройки валюты, региона, языка, версии сайта и т.п., которые активируются автоматически в зависимости от месторасположения пользователя.
• Отсутствуют «битые» ссылки;
• Для наиболее важных действий используются кнопки («купить», «оформить» и т. п.), а не ссылки.
• Сайт адаптирован для просмотра на экранах мобильных устройств.
• Всплывающие окна ненавязчивы, показываются только потенциально заинтересованным посетителям.
• По сайту можно перемещаться без использования мыши.
• Ссылки и кнопки расположены на достаточном расстоянии и имеют размер, не затрудняющий клики по ним.

Доступность контента

• Логически связанный контент размещается рядом.
• Контент полезен для пользователей: нет страниц, созданных только ради SEO и/или не несущих смысловой нагрузки.
• Страницы имеют достаточно свободного пространства, минимум отвлекающих от основного контента элементов.
• Обеспечен достаточный контраст между текстом и фоном (проверка — checkmycolours.com).
• Текст написан понятным и доступным для целевой аудитории языком, без излишней заспамленности и «воды» (проверка — text.ru и glvrd.ru).
• Текст отформатирован и удобен для чтения: наличие отступов между абзацами, содержание с якорными ссылками, шрифт без засечек, информация представлена в виде списков, в наличии подзаголовки, блоки цитат и т.п.
• Изображения можно увеличить, кликнув по ним.
• Ссылки легко различимы на фоне обычного текста.
• Ссылки, по которым были переходы во время текущей сессии, подсвечиваются другим цветом.

Формы и регистрация

• Регистрация должна иметь смысл для пользователей: например, для участия в бонусной программе, для доступа к демо-версии и т.п. — регистрация ради регистрации недопустима.
• В формах имеются только самые важные поля (зачастую достаточно e-mail и имени), если обойтись без развернутой формы нельзя, ее заполнение разбито на 2 или 3 этапа.
• Использованы выпадающие подсказки, например, при указании населенного пункта.
• Указан формат ввода данных, например, для номера телефона или банковской карты.
• При неправильном заполнении формы данные не теряются, а информация об ошибке с пояснением отражается возле соответствующего поля.

Главная страница

• На главной странице размещена ключевая информация (преимущества, этапы работы и т.п.), которая позволяет посетителю сориентироваться в деятельности компании.
• Имеется конкретный призыв к действию: сразу понятно, что нужно сделать пользователю, чтобы совершить целевое действие.
• Контактные данные расположены на видном месте.

Страница «О компании»

• Контент страницы отвечает на основной вопрос потенциального клиента: «Чем компания можете быть полезна?»
• Контент на странице – не только текст: есть инфографики и видеоролики о деятельности компании, фотографии ключевых сотрудников с описанием их направлений работы и контактных данных.
• Кратко описана история деятельности компании, подробно – предлагаемые продукты и услуги, их конкурентные преимущества, сертификаты соответствия. Текст изложен от первого лица.
• Продемонстрированы достижения компании: оценки в различных рейтингах, участие в конкурсах, премиях, выставках и пр., благодарственные письма и положительные отзывы довольных клиентов.
• На странице размещены ссылки на профили в профессиональных сервисах / группах / сообществах.

Страница «Контакты»

На странице размещены:

• ФИО сотрудников, ответственных за коммуникации;
• номера телефонов;
• адрес(а) электронной почты на домене сайта и другие способы связи (Skype, Telegram, Viber и др.);
• ссылки на профили в социальных сетях;
• физический и юридический адреса;
• карта проезда;
• форма обратной связи.

Страница «Примеры работ»

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

Карточка товара

Страница карточки товара включает:

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

Рекомендуем прочитать: Как понять, что такое юзабилити: 35 пунктов из тысячи

Корзина

Страница корзины содержит:

• наименование товара с основными характеристиками;
• фото товара;
• цену, а при наличии – указание скидки;
• количество приобретаемого товара;
• кнопку для возврата к покупкам.

Теперь вы знаете, на какие критерии обращать внимание при оценке работы UX/UI-дизайнера. Естественно, каждый сайт уникален, и каждый требует особого подхода при оценке юзабилити. Но если вы заметили, что многие критерии из списка не выполняются, стоит как минимум задать вопросы дизайнеру и получить объяснение.

Совершенствуйтесь в сфере веб-разработки на бесплатных вебинарах или получите максимум актуальных знаний о юзабилити и повышении конверсии сайтов в бизнес-пакете выступлений с CyberUsabilityDay 2018 – тематической онлайн-конференции обучающего центра Cybermarketing.