Московский государственный университет имени М. В. Ломоносова _____________________________________ Факультет журналистики Кафедра новых медиа и теории коммуникации Основы проектирования интерфейсов: от исследования аудитории до тестирования Работу выполнила студентка IV курса в/о (405 группы) Е.М. Савицкая Научный руководитель: канд. филол. наук. Засурский И.И Москва 2018 Оглавление Введение…………….. ................................................................................................................................ 3 Проектирование интерфейса. Ключевые этапы ................................................................................. 4 Персоны………….……… .............................................................................................................................. 4 Основные этапы пути пользователя ........................................................................................................ 6 Точки взаимодействия ................................................................................................................................ 8 Usability………….…….. ..............................................................................................................................11 Заключение…………. ..............................................................................................................................13 Библиографический список ..................................................................................................................14 Приложение………… ..............................................................................................................................15 Пример базового анализа психофизиологии восприятия интерфейсов на примере сайта Pizza Hut……………………. ..............................................................................................................................15 `2 Введение Сегодня невозможно себе представить ни одну компанию, будь она уже крупным игроком на рынке или лишь проектом-стартапом, которая не имела бы своего веб-сайта. Интернет, а именно его неограниченные информационные пространства и относительно невысокая стоимость позволяют каждому желающему создавать своё «онлайн-лицо». Цели, которые ставят перед собой создатели сайтов, могут быть различны: презентация продукта, информирование о последних новостях внутри компании (так называемые корпоративные сайты), или же просто веб-сайт в качестве онлайн-визитки. Однако ни одна компания не обходится без своей интернет-платформы: она уже стала основным инструментом продвижения товаров и услуг. Потенциальный потребитель сегодня, увидев рекламу какой-либо услуги, в большинстве случаев, конечно, начнет интересоваться подробностями предложения, используя Интернет, а именно веб-сайт компании. Однако сайт не всегда может быть удобен и понятен для пользователя. Именно поэтому в момент создания платформы необходимо тщательно изучить свою аудиторию, проанализировать все возможные риски. Также при последующей оптимизации и совершенствовании созданного сайта необходимо использовать инструмент повышения уровня удобства пользователя, а значит и объёмов продаж: юзабилити1 тестирование. С помощью нескольких инструментов онлайн и оффлайн формата можно вычислить ЦА проекта, провести с ней работу, узнать ее основные потребности, реализовать эти потребности в интерфейсе и затем уже 1 “Usability” — удобство и простота использования [пер. с англ.] `3 доводить до совершенства онлайн-платформу с точки зрения удобства пользователя и получаемой бизнесом конверсии. Проектирование интерфейса. Ключевые этапы Персоны В самом начале необходимо определиться с целевой аудиторией нашего сервиса: кто будет основным потребителем продукта. Для этого необходимо создать несколько «персонажей». Персонаж (или персона) – это представитель группы наших потребителей. Персонаж вбирает в себя уникальный набор шаблонов поведения, связанных с реализацией собственной потребности (например, человек хочет заказать еду, если почувствовал голод). Персонажи нужны для возникновения у проектировщика/маркетолога, который работает с проектом, эмпатии. Без этого невозможно понять, чего именно хочет наш потребитель. Также персонаж представляет собой своего рода контейнер, в котором содержатся все находки исследований нашей ЦА, т.е. все ее основные и уникальные черты воплощаются сразу в одном лице. Всего персонажей может быть несколько, однако необходимо создать ключевого персонажа: на кого бизнес сделает свою основную ставку. Именно через него будет реализовываться основной CJM —customer journey map, по которому, как мы предполагаем, будет перемещаться основной пользователь на нашем сайте. Какие основные пункты необходимо указать для описания ключевого персонажа: 1. Имя 2. Фото (для визуализации персоны) 3. Характеристика (профиль) 4. Контекст использования нашего сайта 5. Цели использования `4 6. Что для него важно 7. Что для него полезно 8. Страхи 9. Мечты, мотивация, авторитеты, цитаты, поведенческие переменные и проч. Существует несколько основных, часто допускаемых маркетологами и тестировщиками ошибок при создании портрета пользователя. Их необходимо избегать:  Забыли выделить задачи  Нет требований  На выбранного персонажа неразумно делать ставку  Сценарий не соответствует персонажу  В описании персонажа много ненужных деталей  Все персонажи схожи друг с другом Ниже представлен пример описания ключевого персонажа для тестового сервиса, через который любой человек, получивший услугу, может написать о ней отзыв, попадающий напрямую владельцу бизнеса/ответственному менеджеру. `5 Основные этапы пути пользователя Для того, чтобы понять, как ключевой персонаж может найти нашу платформу в Интернете, необходимо прописать основные этапы его пути. Каким образом он перейдет на сайт? Это будет реклама, пост от блогера, совет друзей? Какой из вариантов больше всего подходит для бизнеса, с которым мы работаем? Как пользователь будет работать с информацией на сайте? На какие кнопки он обязательно нажмет, чтобы достичь целевого действия2. Например, основные этапы пути пользователя при заказе пиццы могут быть такими: 1. Потенциальный покупатель видит рекламу пиццы, например, в социальных сетях. В этот момент возникает потребность узнать про товар больше, или даже попробовать его. 2. Начинает искать информацию про этот товар в интернете, если он не кликнул на ссылку сразу. Может спрашивать про этот товар у друзей, пробовали ли они его использовать/сталкивались ли с ним вообще. 2 Целевое действие — это удовлетворение потребности пользователя через совершение ключевого действия, которое предполагали создатели сайта. Например, пользователь был голоден, он зашел на сайт доставки еды и заказал роллы. Заказ роллов – целевое действие, на которое рассчитывали создатели сайта. `6 3. Может забыть про этот товар через какое-то время. 4. Снова видит где-то этот товар. Контакт может произойти с помощью различных каналов: реклама, он мог увидеть эту пиццу на вечеринке у друзей, или наткнуться на вывеску ресторана на улице. 5. Снова начинает поиск товара. 6. Потенциальный покупатель переходит на сайт. 7. Находит там интересующий его товар, открывает вкладку с ним 8. Изучает характеристики товара, цену, отзывы о вкусе, состав 9. Смотрит цены на других сайтах для сравнения цены и условия покупки/доставки 10. Возвращается на сайт, если предложения других ресурсов его не устроили 11. Снова находит карточку товара 12. Делает заказ 13. Оплачивает заказ онлайн 14. Получает товар через сервис доставки 15. Пробует продукт 16. Оставляет отзыв о продукте (если эмоциональная отдача была максимальной: очень понравилось/очень не понравилось) 17. Возможна повторная покупка Таким образом необходимо прописать определенный комплекс действий, которые совершит пользователь, чтобы приобрести товар или услугу. Такое описание необходимо для понимания, как именно будет вести себя покупатель: когда захочет уйти с вашего сайта, когда остаться; что может его привлечь, а что оттолкнуть. `7 Точки взаимодействия Если рассмотреть сценарий действий пользователя более глубоко, его можно поделить на два сегмента: пункты, в которых он будет взаимодействовать с интерфейсом компании, и пункты, в которых он никак не соприкасается с брендом. Пункты, в которых персонаж хоть как-то прикасается к компании — это точки взаимодействия, именно здесь начинается работа пользователя и сайта. Выделив точки взаимодействия, необходимо их описать:  Через какой канал пользователь пришел  Какова его цель  Какова его потребность (не путать с целью, потребность заключается в физиологии человека. Например, потребность – утолить голод, цель — заказать пиццу). Какие действия он совершает и что при этом чувствует  Какие у него страхи  KPI, связанные с данной точкой контакта  Целевые действия пользователя  Возможности для улучшения Ниже приведен пример точек взаимодействия пользователя при заказе пиццы на сайте компании Pizza Hut3. 1. Главная страница сайта  Канал - прямой запрос, ссылка в соц. сетях, реклама и проч. внешние каналы 3  Цель клиента - поиск товара, который понравится  Потребность клиента - утолить голод как можно быстрее https://pizzahut.ru/ `8  Действия, чувства - кликает на рекламный баннер. Чувство голода усиливается за счет аппетитных фотографий еды, хочет побыстрее сделать заказ  Страхи - Боится, что цены на блюда будут высоки/состав его не устроит/не будет выгодных акций или нет доставки на его адрес проживания  KPI, связанные с данной точкой контакта- % пользователей, кликнувших на баннер/нажавших на изображения пицц/перешедших в любой другой раздел меню   Целевые действия - пользователь добавил товар в корзину Возможности улучшения - делать подборку актуальных баннеров “новое предложение + самые успешные акции среди пользователей”, сделать кнопку “добавить в корзину” более яркой/поменять цвет Авторизация/регистрация 2.  Канал - главная страница сайта  Цель клиента - покупка понравившегося товара с помощью обязательной авторизации/регистрации  Потребность клиента - утолить голод понравившимся продуктом  Действия, чувства - вводит свои контактные данные, устает от этих дополнительных движений, хочет быстрее перейти к оформлению заказа, просмотру меню  Страхи и барьеры - Боится за сохранность введенных контактных данных, вообще может уйти к конкурентам еще на стадии предложения зарегистрироваться, боится, что на почту/телефон будет приходить спам  KPI, связанные с данной точкой контакта - % пользователей, прошедших регистрацию/авторизацию   Целевые действия - пользователь авторизовался/зарегистрировался Возможности улучшения - упростить процедуру регистрации и авторизации или полностью ее упразднить `9 3. Открытие плашки с подробной информацией о товаре 4. Добавление товара в корзину 5. Оформление заказа 6. Онлайн-оплата заказа  Канал - страница оформления заказа  Цель клиента - оплата выбранного товара, без ошибок системы  Потребность клиента - приобрести продукт удаленно, с уверенностью в его последующем получении  Действия, чувства - вводит данные своей карты, подтверждает транзакцию через смс, переживает, нервничает  Страхи и барьеры - Боится, что введенные данные карты могут украсть/деньги могут списаться, а сайт этого не увидит и попросить оплатить заново. Деньги с карточки могут списаться потом, сложно будет понять, где именно произошла утечка его данных  KPI, связанные с данной точкой контакта - % пользователей, которые произвели онлайн-оплату  Целевые действия - пользователь совершил онлайн-оплату заказа  Возможности улучшения - использовать для онлайн-оплаты известные пользователю ресурсы, которым он доверяет, бонус при оплате картой сейчас или при следующей покупке (скидка), или партнерская программа с известной платежной системой 7. Страница с информацией о статусе заказа на сайте 8. Чтение письма на почте с подтверждением заказа `10 Usability После визуализации точек взаимодействия становится понятно, где сайт может не удовлетворить потребности пользователя, не оправдать ожидания и т.д. После этого можно начинать создавать гипотезы — некие предположения, где именно человек может столкнуться с проблемой при движении к достижению целевого действия. Эти гипотезы необходимо тестировать. Такое UX тестирование (юзабилити) может проводиться на разных платформах, сейчас существует множество компаний, предлагающих подобные инструменты. Задавая необходимые параметры ЦА, мы можем отобрать подходящих респондентов и провести тестирование. Что именно можно тестировать: 1. Веб-сайты. Респонденты открывают страницу веб-сайта и работают с ним как обычно, только во время теста идёт запись их действий. Для тестирования достаточно согласится на временную установку вебрасширения (которое автоматически удаляется по окончанию теста). 2. Мобильные приложений. Работа по принципу записи действий на экране. 3. Мобильные версии сайтов. Работа по принципу записи действий на экране. 4. Тестирование десктопных приложений. Работа по принципу записи действий на экране. 5. Лендинги, баннеры, контент. Неотъемлемой частью тестирования лендинг пейджей и контента является так называемый 5-ти секундный тест. Участнику на заданное время (3-5 сек.) показывают страницу или баннер, а затем задают вопросы по увиденному. А в случае с лендингами далее даются задания на поиск информации, заполнение форм заявок и т.д. 6. Первый клик. Используется при тестировании навигации по страницам. Участника просят кликнуть на тот раздел сайта, где он стал бы искать ту или `11 иную информацию, затем задаются доп. вопросы. На основе кликов всех участников строится тепловая карта кликов. Приведенные выше примеры — базовый набор тестов юзабилити. Естественно, в практическом варианте их гораздо больше. Самое главное, что необходимо соблюдать при создании теста – логику. Логика теста – это набор правил пропуска шагов. Правила работают по логике «Условие → Пропуск». Если респондент что-то делает, то мы можем не показывать ему определенные шаги. Чаще всего она используется в двух случаях: 1. Когда необходимо сохранить некое распределение в выборке (например, «50% респондентов – мужчины. 50% респондентов – женщины»). 2. Когда есть задания или вопросы, которые должны увидеть только определенные респонденты («если ответил «Да» на вопрос, задать уточняющий», или же «половина респондентов проходит на одно задание, половина — на другое»). Обе эти задачи решаются выставлением ряда условий «Если, то». Например, «Если на вопрос 1 респондент выбрал вариант ответа 1, то пропускаем вопрос 2». Схематично это выглядит следующим образом: `12 Заключение Как только мы протестируем наши гипотезы и узнаем, чего именно не хватает пользователям, можно начинать менять интерфейс. И снова тестировать. И снова менять. Этот процесс также непрерывен, как и развивающийся рынок маркетинга, IT, продаж. Описанная в работе структура исследования аудитории и интерфейса необходима для базового понимания работы с ЦА и принципами ее поведения. `13 Библиографический список Гештальт-принципы в дизайне интерфейсов. URL: https://medium.com/%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D1%8B%D0%BF%D0%BE%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0 %B2%D0%B0%D0%BD%D0%B8%D1%8E%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0% BE%D0%B2/%D0%B3%D0%B5%D1%88%D1%82%D0%B0%D0%BB%D1%8C%D1%82%D0%BF%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF%D1%8B-%D0%B2%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0% BE%D0%B2-76b75ff090ea Brain, Body and Bytes: Psychophysiological User Interaction. URL: http://hci.usask.ca/uploads/175-PC-BCI-workshop-EA(2).pdf Алан Купер — «Об интерфейсе. Основы проектирования взаимодействия.» `14 Приложение Пример базового анализа психофизиологии восприятия интерфейсов на примере сайта Pizza Hut Сценарий: заказать доставку пиццы 1. Заходим на главную страницу сети Pizza Hut. Мы фокусируемся на баннере, далее - на изображениях пицц. Нет кнопки “заказать” у представленных пицц, приходится скроллить вниз. Принципы:  Используется правило 4±24 для меню в верхней части. Основные пункты видны сразу, все остальные спрятаны в «бургер» в верхней части.  Изображение. Фотографии пицц на странице стимулируют принятие решения о покупке 4 «Магическое число семь плюс-минус два» («кошелёк Миллера») —закономерность, обнаруженная американским учёным-психологом Джорджем Миллером, согласно которой кратковременная человеческая память, как правило, не может запомнить и повторить более 7 ± 2 элементов. Сегодня считается, что более верно числовое соотношение 4±2 `15  Группировка объектов. Все пиццы сгруппированы вместе, их легче выбирать. 2. У пицц появились кнопки “в корзину”. Предполагаем, что при нажатии на нее произойдет добавление понравившейся позиции в корзину. Принципы:  Геометрическая память (пользователь предполагает, что на всех страницах позиции будут расположены подобным образом, по три в строке)  Группировка объектов (все объекты группируются по три позиции в строке)  Оформление текста. После изображения взгляд пользователя фокусируется на названии, затем на цене. Если пользователь всё еще заинтересован в позиции, он обращается к описанию состава пиццы под названием.  Контраст цвета. Кнопка “call to action” выделяется красным цветом для привлечения внимания. Поскольку в данном случае красный цвет брендовый (см. логотип), он не вызывает раздражения. `16 3. После нажатия кнопки “в корзину” появляется всплывающее окно с сообщением о необходимости выбрать ресторан. Пользователя это вводит в ступор, поскольку он просто хочет добавить пиццу в корзину и не понимает, для чего необходимо выбирать ресторан. Принципы:  Расфокус. Выделено только окно с важной информацией.  Контраст цвета. Яркая, заметная кнопка “выбрать” 4. После нажатия “выбрать” открывается карта доставки. Выбираем адрес путём “перетаскивания” иконки с домиком. В данном окне слишком много `17 красного цвета: кнопки, значки ресторанов, значок для “перетаскивания”, зоны доставки. Принципы:  Фокус на цвете. Красный цвет привлекает внимание к главному. Однако в данном случае слишком много красного цвета, он играет роль раздражителя.  Работа с положительной динамикой. Слева направо можно ввести свой точный адрес в окошке. 5. После выбора адреса повторно добавляем пиццу в корзину, поскольку она не сохранилась с предыдущего действия (разные ветки меню). Справа видна заполненная корзина. В ней слишком много разрозненных элементов по цвету, размеру и шрифту. Внимание обращается сначала к кнопке «оформить заказ», затем к доп. информации о времени доставки и ее цене, поскольку они вторые по яркости элементы. Для понимания дальнейшей информации необходимо применять дополнительное усилие. «Рекомендации», призванные повысить средний чек, не работают, тк. не видны из-за слишком мелкого шрифта. Принципы: `18  Фокус на цвете. Ярко выделена кнопка «оформить заказ»  Работа с положительной динамикой. В корзине последовательно распределена важная информация: адрес доставки, ее детали, содержимое корзины, рекомендации.  Оформление текста. Расположение в прямоугольнике удобно для чтения, однако сам текст слишком маленького размера, плохо читаем. 6. Оформление заказа. Пользователю предлагается заполнить поля контактных данных и уточнить детали, затем, нажать кнопку «оформить заказ». Принципы:  Фокус на цвете. Ярко выделена кнопка «оформить заказ». За такое количество действий пользователь привык, что красные кнопки кнопки дальнейшего действия.  Использование группировки объектов. Все окна для заполнения данных пользователя сгруппированы в центральной части экрана. Корзина, т.е. вторичная информационная панель, оставлена справа, если пользователь захочет проверить детали своего заказа. `19  Геометрическая память. Необходимые для заполнения поля встроены в привычной логической последовательности: имя, номер телефона, почта, детали заказа.  Баннерная слепота. В данном случае пользователь не видит не конкретную рекламу, а информацию, указанную слева от полей для заполнения: фразы «оформление заказа», «уточните детали», «способ оплаты».  Интерлиньяж. Расстояние между строками для заполнения информации очень комфортно воспринимается пользователем, в случае необходимости исправления не мешает. `20