Юрий Ветров

Повысить конверсию или удобство использования?

Оба варианта лучше. Кейс с сайтом Московского Кредитного Банка

UI Modeling Company

О чем этот рассказ?

• Почему бизнесу мало интересно абстрактное «удобство использования»?

• Как интерфейс может решать бизнес-задачи?

• Наглядный кейс, показывающий как это работает.

2

1. Популярный жанрэкспертная оценка бывает разной – от нахождения неподчеркнутых ссылок до повышения конверсии

2. Где отдача от юзабилити?3. Как посчитать выгоду4. На примере сайта банка МКБ5. Какие ваши доказательства?

3

Экспертная оценка – популярный и востребованный жанр. Предложений на рынке сейчас хватает – несложно прочитать книгу Якоба Нильсена или Стива Круга и начать ругать сайт клиента за неподчеркнутые ссылки.

4

Вот и мы так думали в начале 2000х. Прочитали те самые книжки, прониклись страданиями пользователей и ринулись их защищать.

5

Писали о том, что неправильно ставить ссылки «Подробнее», даты публикации материалов в таком виде непонятны, название такого-то раздела лучше переименовать.

6

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

7

И переименование ссылок «Подробнее» к инструменту продаж имеет опосредованное отношение. Да, эти проблемы тоже важно решать – многие видели пожилых людей, которых вгоняют в ступор неказистые интерфейсы. Да и опытных тоже.

8

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

9

Так как же понять, на что все-таки делать упор в процессе улучшения юзабилити? Попробуем разобраться на примере.

10

Приз или деньги?

1. Популярный жанр2. Где отдача от юзабилити?

вопрос, который задают давно

3. Как посчитать выгоду4. На примере сайта банка МКБ5. Какие ваши доказательства?

11

Вопрос задается давно и часто, так что способов узнать отдачу от вложений в юзабилити (ROI) существует много.

12

В первую очередь нам нужно понять, что является показателем эффективности для нашего продукта?

13

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

14

Например, для сайтов, продающих товары или услуги, важна конверсия посетителей в покупатели.

15

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

В то же время для онлайн-СМИ метриками будут среднее для посетителя количество просмотров страниц и время пребывания на сайте.

16

А для программного продукта или веб-сервиса можно посчитать снижение обращений в службу поддержки.

17

И если вы хотите, чтобы клиент хорошо оценил вашу работу и порекомендовал коллегам – лучше не просто делать продукт абстрактно удобнее, а приносить пользу клиенту.

18

Как измерить эти показатели и доказать, что польза от улучшения юзабилити есть? Один из лучших способов – это веб-аналитика, в первую очередь Google Analytics.

19

Еще один инструмент – сравнительное юзабилити-тестирование. Мы также можем получить цифры «до» и «после».

20

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

21

Итак, допустим, цифры у нас есть. Что дальше? Возьмем для примера кейс с Московским Кредитным Банком.

22

1. Популярный жанр2. Где отдача от юзабилити?3. Как посчитать выгоду

математика конверсии и пример расчета

4. На примере сайта банка МКБ5. Какие ваши доказательства?

23

Попробуем посчитать отдачу от перепроектирования интерфейса. В нашем случае метрика – повышение конверсии по входящим заявкам. Цифры возьмем условные – для наглядности.

24

условныецифры*

Мы знаем бюджет проекта по улучшению интерфейса. Допустим, на экспертную оценку, легкий редизайн и внедрение нам понадобится $10 000.

25

условныецифры*$10 000 затрат

Эти затраты нужно как минимум оправдать. А еще лучше – получить отдачу. Для этого нужно узнать, сколько приносит каждый новый клиент. Предположим, это $100, из которых $10 уходит на привлечение клиента.

26

условныецифры*$100 прибыли

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

27

условныецифры* = 100$10 000

$100 человек

Математику посчитали. Но когда ждать этого счастья? Давайте оценим трафик. Допустим, в день на сайт приходит 10 000 посетителей. Из них 1000 – на нужную нам услугу. Заявку отправляют 500 человек – значит, наша конверсия 5%.

28

условныецифры* = 5%50

10 000

От клиента мы также знаем, что только 10% полученных заявок идут в работу, то есть по ним заключаются договоры. Получается, что итоговая конверсия – 0,5% или 50 заявок в день.

29

условныецифры* 0,5%0 0 0

В текущей ситуации сайт помогает зарабатывать $5000 в день. Если в результате перепроектирования показатели не ухудшатся, затраты на него отобьются за 2 дня. А если конверсия на сайте вырастет до 10% – заработаем уже $10 000.

30

условныецифры* = 2 дня

$5000$10 000

Выходит, что возврат инвестиций в перепроектирование займет всего 1 день! А если конверсию поднять в четыре раза, то счет пойдет уже на часы!!!

31

BREAKING NEWS!

Звучит, конечно, красиво, но в реальности все немного сложнее. Цифры конверсии не всегда такие большие и растут тоже не в разы.

32

0,005%

конверсии

0,5%

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

33

100 человек в день

1000

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

34

больше заявок = больше прибыли

1. Популярный жанр2. Где отдача от юзабилити?3. Как посчитать выгоду4. На примере сайта банка МКБ

от теории к практике

5. Какие ваши доказательства?

35

Московский Кредитный Банк обслуживает частных лиц и бизнес. Классический набор услуг и классические задачи – нужно сделать сайт более удобным в использовании и эффективным в поддержке продаж.

36

Клиент хочет понять, что и где подкрутить, чтобы эффективность сайта выросла? А также решить старые проблемы о которых и так знали – в первую очередь это механизм поиска точек обслуживания. Итак, стартуем по шагам.

37

1/ Изучаем специфику бизнеса и целевой аудитории, описываем сценарии ее работы.

38

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

• Узнать тарифы, расценки компании и другие финансовые условия предоставляемых услуг;• Найти наиболее удобный адрес представительства компании для совершения

подключения новых услуг и управления существующими;• Стать клиентом компании, подав заявку прямо на сайте;• Найти способ связаться с представителем компании для получения информации о

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

истории и рекомендации от рейтинговых агентств и других институтов;

2/ Исследуем существующий сайт – что и как там работает. На выходе у нас scope проекта – теперь мы точно знаем функциональность и структуру страниц, так что ничего не упустим в обзоре.

39

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

40

4/ Готовим оценку ключевых и второстепенных страниц. Обращаем внимание на три составляющих:

41

• Эффективность работы по основным сценариям.

• Продающие качества сайта.• Общую компоновку и соблюдение

принципов юзабилити.

5/ Даем рекомендации по решению найденных проблем и делаем выводы об основных направлениях улучшения.

42

43

Отчет об экспертной оценке юзабилити

44

Обзор проблем на страницах сайта

Задача №2 – перепроектирование страниц поиска точек обслуживания. Здесь проблемы понятны – классический пример построения интерфейса от модели реализации.

45

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

46

Когда нам нужно, например, положить деньги на пластиковую карту, разве мы ищем именно отделение с кассой? Вряд ли, нам подойдет и банкомат cash-in. Главное, чтобы отделение или банкомат были в удобном месте и работали в подходящее время.

47

Этот принцип и был положен в основу обновленного интерфейса – подбор точек обслуживания исходя из задачи клиента.

48

«Я на Пушкинской. Где здесь можно положить деньги на карту?»

?

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

49

• Операции по вкладам.

• Снять наличные с карты.

• Оформить кредит.

• Погасить кредит.• Обменять валюту.• Перевести деньги.• Положить деньги

на карту.

!

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

50

51

Варианты представления списка точек обслуживания

52

Структурные схемы страниц

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

53

54

Страницы точек обслуживания

1. Популярный жанр2. Где отдача от юзабилити?3. Как посчитать выгоду4. На примере сайта банка МКБ5. Какие ваши доказательства?

описание тезисов раздела

55

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

56

?

В результате внедрения рекомендаций из экспертной оценки конверсия по входящим заявкам выросла на 20%. Если вернуться к формулам, то можно попробовать перевести эту цифру в деньги.

57

+20% конверсии

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

58

бюджетконверсия

А как посчитать эффект от нового раздела с адресами точек обслуживания? Попробуем пройти основные сценарии в старом и новом интерфейсе:

59

Сценарий поиска Старая версия Новая версия

По требуемой операции

«Рядом с» метро, улицей, районом

частично

По адресу частично

Ближайшие к найденному

Этот кейс показывает, как работа над интерфейсом может улучшить и коммерческие свойства продукта, и его потребительские качества.

60

И хотя не во всех проектах удается работать над обоими показателями, мы активно стараемся помочь всем заинтересованным сторонам процесса – и бизнесу, и его клиентам. Только так работы по улучшению юзабилити дадут максимальный эффект.

61

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

62

Спасибо!

Юрий Ветровwww.jvetrau.com

twitter.com/jvetrau

www.uimodeling.ru

facebook.com/uimodeling

Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я уберу их из слайдов.