Как протестировать интерфейс сайта (UX/UI дизайн)

И не терять пользователей из-за явных ошибок
Ваш сайт может быть уникальным и полезным, но пользователь этого не поймет, если не разберется в том, как все работает.

Тестировать интерфейс сайта с точки зрения UX/UI дизайна нужно для повышения конверсии. Вы поймете, удобен ли сайт для пользователя, решает ли он поставленные задачи и комфортно ли человеку на ресурсе. Исправив ошибки UX/UI дизайна, вы получите довольную аудиторию вашего сайта. Рассказываем, как не упустить важное в таком тестировании.

Протестируйте UX

Термин «дизайн» в интернет-среде зачастую воспринимают как банальное «рисование», визуальное отображение сайта или приложения. Прямой же перевод слова design скорее означает «конструирование» или «проектирование».

UX — это User Experience. Это то, какой опыт получает пользователь от работы с вашим интерфейсом. Выполнил ли интерфейс задачу, которая ставится перед ним. UX — это концепция, на которой строится весь продукт.

Самостоятельное изучение интерфейса

Какую цель вы ставите перед сайтом? Задайте себе вопросы:

  • Для блога — смог ли пользователь комфортно получить информацию? Смог ли он поделиться вашей записью без препятствий?

  • Для интернет-магазина — смог ли пользователь комфортно сделать покупку? Сразу ли он разобрался, что здесь можно купить товар?

  • Для посадочной страницы — удобно ли пользователю оставить контактные данные для заказа? Соответствует ли то, чем вы побудили пользователя кликнуть на рекламу, тому, что он видит на странице?

Формируя концепцию UX, ориентируйтесь в первую очередь на заботу о пользователе. Ваша цель — продажа? Задача UX в этой ситуации — сделать покупку приятной. В интерфейсе сайта заложена возможность купить товар в один клик? На странице с товарами размещены отзывы о них или подробные обзоры? Есть ли инструкции?
UX/UI-дизайнер SpaceLab
 

Пример заботы о пользователи со стороны Samsung

На сайте Samsung можно не только купить телевизор, но и сравнить его с другими или скачать инструкцию


Проведите на своем сайте несколько часов. Составьте список вопросов, расширив предложенные выше, ориентируясь на свой бизнес. Прочтите о том, как анализировать сайты конкурентов — добавьте появившиеся вопросы в список.

Фокус-группа

Проведите UX-тестирование на фокус-группе. Найдите несколько десятков человек, подходящих под целевую аудиторию вашего сайта. Попросите их изучить ваш сайт.

  • Если это блог, пусть человек зайдет на сайт, откроет статью, прочитает ее и поделится с друзьями. Найдет другую. Оставит комментарий.

  • Если это магазин, нужно выбрать товар, сделать покупку, оставить отзыв. Добавить товар в корзину, выбросить его из корзины.

  • Если это сервис, человеку нужно попробовать его основные функции — пусть он посчитает процент кредита в калькуляторе, найдет нужные слова в SEO-мониторе и так далее.

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

Затем задайте пользователям вопросы, которые вы сформировали при самостоятельном изучении. На этой стадии вы узнаете, насколько отличается ваше представление о UX при использовании интерфейса сайта от представлений реальных пользователей. Исправьте ошибки.

Яндекс.Вебвизор

Если нет возможности проводить индивидуальные тесты, изучите архив сервиса «Вебвизор». Подключите Яндекс.Метрику, добавьте код сервиса на сайт. Подождите несколько дней, пока сервис соберет архив посетителей.

Посмотрите, как пользователи путешествуют по вашему сайту. На какой стадии чаще всего происходят отказы от использования сервиса?

Используйте сервис «Вебвизор» для изучения поведения пользователей на сайте

При помощи Яндекс.Вебвизора вы можете увидеть путь пользователя по вашему сайту

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

Тестируйте UI

User Interface — это визуальная составляющая интерфейса, конкретные требования к удобству форм и читабельности текста, дружелюбность к различным устройствам, на которых открывается сайт.

Если в UX мы говорим об общем соответствии целей сайта его интерфейсу, то в UI переходим к конкретике. UX — это удобно ли пользователю купить товар. UI — это выделенная визуально кнопка с иконкой „корзины“, видимая кнопка „получить консультацию“, структурирование статей заголовка и подзаголовками.
UX/UI-дизайнер SpaceLab
29% всех визитов на сайты совершается с мобильных устройств. Почти три четверти этих визитов приходится на телефоны, и их доля продолжает расти, рассказывают в исследовании Яндекса.


На конец осени 2016 доля мобайла в общем интернет-трафике Рунета достигла 62%, рассказал Сергей Архангельский, ведущий инженер команды ранжирования Google. 

Проверьте, как быстро грузится ваш сайт на мобильных с помощью PageSpeed Insights. С помощью специального сервиса Гугла проверьте оптимизацию сайта под мобильные устройства.

Google подсказывает, достаточно ли сайт оптимизирован для мобильных

Google проверит, насколько страница подходит для чтения на мобильных

Верстка страницы

Расположение элементов на странице, акцентирование внимания на отдельных блоках — все это проверяется с помощью A/B-тестирования.

  1. Посмотрите на текущую страницу сайта или отдельный блок на ней

  2. Подумайте, что может улучшить удобство пользователя

  3. Создайте копию страницы, измените верстку в соответствие с гипотезой

  4. Продемонстрируйте страницы двум разным группам пользователей

  5. Сравните результаты — время на сайте, количество отказов, переходы — проверяйте с помощью Яндекс.Метрики

Тестируйте различные подходы к верстке, ориентируйтесь на статистику. Конверсия на сайте может повыситься из-за банального смены очередности блоков. Почитайте подробную инструкцию по A/B-тестированию с помощью Google Analytics.

Пользовательское путешествие

Продумайте путь пользователя от попадания на ваш сайт до нужного им действия. Вот список вопросов:

  • Где сейчас находится пользователь?

  • Что он хочет получить?

  • Что он будет делать?

  • Сколько кликов нужно сделать для получения результата?

Пользователь попадает на ваш сайт несколькими путями:

  • Оказывается на главной странице, если сам ввел адрес сайта в строку браузера

  • Нашел ваш сайт в поиске — посмотрите, на какие страницы идет поисковый трафик с помощью систем аналитики

  • Кликнул на рекламное объявление

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

Пользователь ищет товар через поиск Яндекса. Он оказывается на странице с описанием товара. Человек хочет или просто купить товар, или прочитать его характеристики. Если этого нет — добавьте нужный контент и функции на сайт.

Визуальное оформление

Пользователь в интернете не читает страницы внимательно, он серфит их, пытаясь найти нужную информацию. Помогите ему, протестируйте визуальное оформление страниц.

Используйте для оформления статей

  • Подзаголовки

  • Абзацы разной длины

  • Маркированные и нумерованные списки

  • Изображения

Акцентируйте различные элементы на сайте:

  • Цветная подложка

  • Рамка

  • Блок с укрупненным текстом

  • Врезка

Изучите инструкцию по оформлению статей на сайте для привлечения внимания пользователей.

Пример вовлечение пользователей в серфинг по сайту

Content.Guru привлекает пользователей читать другие статьи с помощью выноса рекомендаций на поля
Навигация сайта

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

  • Если у вас интернет-магазин, попросите представителей ЦА зайти на главную и найти определенный товар. Структура каталога товаров должна быть логичной.

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

  • Если у вас блог, проверьте, насколько понятна для система распределения материалов по рубрикам.

Есть ли на главной странице информация, которая не нужна пользователю на старте его путешествия по сайту? Спрячьте ее, не перегружайте интерфейс лишними данными. Узнайте больше в нашем материале о грамотном создании навигации и структуры сайта.

Пример удобной навигации в магазине «ЛитРес»

На сайте магазина «ЛитРес» непопулярные разделы спрятаны во вкладку «Еще»

На сайте магазина «ЛитРес» непопулярные разделы спрятаны во вкладку «Еще»

Alt Пример удобной навигации в магазине «ЛитРес»

Title Сайт магазина «ЛитРес» как пример удачной структуры сайта

Итог

Прочитайте книги, которые помогут понять основную теорию проектирования интерфейсов:

  • Алан Купер «Основы проектирования взаимодействия»

  • Сьюзан Уэйншенк «100 главных принципов дизайна. Как удержать внимание»

  • Джеф Раскин Интерфейс: новые направления в проектировании компьютерных систем

Внедряйте отдельные элементы на сайт постепенно,проверяйте изменения с помощью A/B-тестирования.

Проверяйте, насколько удобно пользователю совершать действий, когда он находится на той или иной странице.

Главное — проверяйте, насколько каждый элемент интерфейса соответствует главной цели сайта.