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

Чек-лист: как проверить работу 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.

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