Из статьи вы узнаете:
- по каким критериям оценивать работу 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.