Инструменты юзабилити для роста бизнеса

Инструменты юзабилити для роста бизнесаОбзор 5 летней практики юзабилити команды Ольшанский и партнеры

2

Создание персонажаМы покажем вам как использовать

12+ инструментов юзабилити для поиска зон роста вашего сайтаА также мы с коллегами поделимся своими наработанными чеклистами и ошибками, которые вам не стоит повторять

/180

3

Создание персонажаНа этом сделаем акцент

5/180

Создание персонажа

44

В ходе презентации вы узнаете..

/180


5

Вы узнаете в ходе презентации

5

1. Как определить, почему у вас недостаточно продаж, а у конкурентов дела идут получше

/180


6

Вот, что вы узнаете в ходе презентации

6

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

/180


7


7

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

/180


8


8

4. Новый подход к юзабилити!

/180


9

Классическое определение

9

Юзаби́лити — это научно-прикладная дисциплина, занимающаяся по вышением эффективности, продуктивности и удобства пользова ния инструментами деятельности.

/180


10

Что же такое юзабилити

10

Мы рассматриваем юзабилити, как часть процесса, направленного на существенное увеличение бизнес-показателей.

/180


11

Почему это важно для вас сейчас?

11

Большая часть того, что вы читали в чеклистах по юзабилити абсолютно неверно для вашего бизнеса

/180


12


12

Клиенты покупают только в случае низкой цены, забирая маржу

/180


13


13

Программисты за каждое изменение просят $, необходим план

/180


14


14

Непонимание очередности действий для увеличения продаж

/180


15

Точно для вас?

15

Если вы предприниматель и хотите получить четкий план для увеличения прибыли с сайта, то это для вас /180


16


16

Если вы собственник и хотите найти команду, которая имеет опыт работы с юзабилити, то это для вас

/180


17


17

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

/180


18


18

Если у вас есть проблема с конкурентами, который вас обгоняют, и вы хотите понять почему, то это для вас

/180


19


19

Если вы переживаете из-за того, что ваше время расходуется зря, и вложенные усилия могут быть выше, то это для вас, так как вы узнаете 12 инструментов юзабилити для роста вашего бизнеса /180


20

Чего не будет!

20

• У нас не будет надежды на фишки, которые срабатывают и приносят миллионы• У нас не будет ничего, что мы бы не попробовали сами• У нас не будет вещей, которые мы бы не использовали для своего бизнеса, даже наоборот – мы это используем для своего бизнеса!

/180


21

Мы тестировали различные инструменты

21/180


22

5 секундный тест

22

Используется для быстрого тестирования главной или посадочных страниц

Решает проблемы: непонятное предложение, навигация, спорное первое впечатление

Пример: https://usabilityhub.com/do/ef04f5a4d9ba/c4c8

/180

https://usabilityhub.com/do/ef04f5a4d9ba/c4c8


23


23

Вопросы после теста:

1. Что можно сделать на этой странице?2. Вы хотели бы ознакомиться дольше с этой страницей?Пример: https://usabilityhub.com/do/ef04f5a4d9ba/c4c8

/180



24


24

Сравнивайте ответы между собой.

Если они сильно отличаются, то есть проблемы

Пример: https://usabilityhub.com/do/ef04f5a4d9ba/c4c8

/180



25

Шаблон создания ценности

25

Используется, когда есть только идея,которую надо подтвердить

На выходе – понимание минимальногоПродукта для рынка

/180


26

Шаблон бизнес-модели

26

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

На выходе – понимание как согласоватьмного частей нового предприятия

/180


27

Шаблон бизнес-модели

27

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

На выходе – понимание как согласоватьмного частей нового предприятия

/180


28

Описание целевой аудитории

28

Персонажи vs Buyer Persona vs Психотипы пользователей

/180


29

Персонаж или Buyer Persona

29

Используется для подробного описания аудитории

• Мотивы• Цели• Барьеры

/180


30

Особенности покупки

30

Каждый бизнесимеет различные типы клиентов.

Необходима подстройка под каждый тип

/180


31

Экспертная оценка, чеклист

31

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

Быстрая оценка

/180

Эвристический анализ интерфейса

32

Базовые принципы удобного сайта

33

Создание персонажаЭвристики Якоба Нильсена

10 принципов удобного интерфейса Якоба Нильсена – это минимальный набор требований, которым должен отвечать любой интерфейс, чтобы обеспечить эффективное взаимодействие с человеком.

/180

34

Создание персонажаПринцип 1: Информирование пользователя о состоянии системы

Пользователь всегда должен ориентироваться и хорошо понимать, что происходит в системе.

/180


35

Принцип 1: Информирование пользователя о состоянии системы

Пользователь всегда должен ориентироваться и хорошо понимать, что происходит в системе.

/180

36

Создание персонажаПринцип 2: Соответствие между системой и реальным миром

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

/180

37

Создание персонажаПринцип 2: Соответствие между системой и реальным миром

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

/180

38

Создание персонажаПринцип 3: Свобода действий и контроль

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

/180

39

Создание персонажаПринцип 3: Свобода действий и контроль

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

/180

40

Создание персонажаПринцип 4: Единообразие и стандарты

Одни и те же элементы выглядят по разному на разных страницах, чего быть не должно!

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

/180

41

Создание персонажаПринцип 5: Предотвращение ошибок

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

/180

42

Создание персонажаПринцип 5: Предотвращение ошибок

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

/180

43

Создание персонажаПринцип 6: На виду, а не в памяти

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

/180

44

Создание персонажаПринцип 7: Гибкость и эффективность

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

/180

45

Создание персонажаПринцип 8: Эстетичный и минималистичный дизайн

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

/180

46

Создание персонажаПринцип 8: Эстетичный и минималистичный дизайн

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

/180

47

Создание персонажаПринцип 9: Понимание проблем и их решение

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

/180

48

Создание персонажаПринцип 10: Доступные справочные материалы

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

/180

49

Создание персонажаПример 1: соответствие между системой и реальным миром

Интерфейс говорит с вами на языке специалиста по автосервису

/180

50

Создание персонажаПример 1: соответствие между системой и реальным миром

Интерфейс учитывает уровень знаний среднего пользователя

/180

51

Создание персонажаПример 2: Предотвращение ошибок

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

/180

52

Создание персонажаПример 2: Предотвращение ошибок

Интерфейс исключает возможность ошибиться при подборе по параметрам

/180


53

Для чего и в каких случаях используется эвристический анализ интерфейса

53

• Поиск грубых ошибок в интерфейсе• Нет возможности провести полноценное юзабилити-

тестирование • Вы видите, что интерфейс кишит ошибками

/180


54

Что получается на выходе

54

• Список проблем, о которых спотыкаются ваши пользователи• Рекомендации к изменению

сайта• Первоначальное понимание,

как сделать интерфейс более человекоориентированным

/180


55

Что получается на выходе

55/180

Кейс: экспертный анализ cайта


57

С чем пришел клиент

57

Этап 1• Аудит SEO работы отдела

Этап 2• Комплексный интернет маркетинг• Экспертный анализ сайта

/180


58

Экспертный анализ сайта

58

Инструменты и проверки: • Эвристический анализ сайта• Сценарии поведения пользователей на сайте•Ошибки верстки• Скорости загрузки• и многое другое

/180


59

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

59

• Большое количество ошибок после 2 минут просмотра сайта c применением эвристик• Нет возможности найти

глубинные ошибки• Ограниченные сроки по

проекту

/180


60

Ошибки

60

• Принцип № 4 Единообразие и стандарты

/180

К какому товару относится кнопка?


61

Ошибки

61

• Принцип № 8 Эстетичный и минималистичный

дизайн

/180

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


62

Ошибки

62

• Принцип № 5 Предотвращение ошибок• Принцип № 3

Cвобода действия и контроль

/180

Можно выбрать фильтры с товарами, которых нет в наличии


63

Ошибки

63

• Принцип № 5 Предотвращение ошибок

/180

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


64

Ошибки

64

Принцип № 4 Единообразие и стандартыПринцип № 8 Эстетичный минималистичный дизай

/180


65

Итог

65

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

Андрей Федоров /180

ПерсонажиСоздаем сайт, ориентированный на пользователя


67

Проблема демографических данных

67

М/Ж30-50 летКиевская областьДоход: 5000-8000 грнПокупают технику в интернете

Можете ли вы понять, что нужно этому пользователю?

/180


68

Проблема демографических данных

68

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

/180


69

Персонаж

69

Персонаж – вымышленный образ потребителя, созданный на основе данных о реальных пользователях.

• Описывает определенный сегмент пользователей

• Рассказывает, какие цели, ожидания и трудности есть у этого сегмента

• Дает понимание для кого проектируется сайт

/180


70

Сила истории

70

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

/180


71

В каких случаях используются персонажи

71

• При проектировании нового сайта или приложения• Перед проведением юзабилити-тестирования• Поиск зон роста в существующем продукте• Для создания релевантного маркетингового сообщения,

нацеленного на определенные группы потребителей

?/180


72

Зачем вообще нужны персонажи

72

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

ПОЛЬЗОВАТЕЛЯМ, а не ВЛАДЕЛЬЦУ бизнеса• Для общения на одном языке между участниками проекта

– от инвестора до программиста

/180


73

Выгоды от создания персонажей

73

• Фокус на важных задачах пользователей• Проектируете хороший

пользовательский опыт• Снижаете риски создания сайта,

который не отвечает ожиданиям пользователей• Получаете инструмент для проверки и

генерации новых идей по улучшению сайта

/180


74

Как создать персонажей для вашего проекта

74

Шаг 1

• Проведите 15-20 интервью с пользователями вашего сайта• Постарайтесь сфокусироваться на

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

/180


75


75

Шаг 2

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

«Любители красивого»

(дизайн)

«Рационалисты» (функции + дизайн)

Главное «шобработало», не хотят

платить за бренд(цена + функции)

Знают чего хотят и разбираются

(функции + страна производства)

Выбирают по дизайну Ищут конкретные функции

Ориентированы на производство в Европе

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

«Недорого и стильно» (цена +

дизайн)

«Прижимистые»(функции +

дизайн + цена)

Консерваторы, любящие

практичность(функции + цена + страна)

«Хочу как BOSCH»(функции +

дизайн + страна)

«Технари» (Функции + параметры)

/180


76


76

Шаг 3

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

ожиданиях и барьерах каждого персонажа – это главные аспекты, с которыми вам предстоит работать

Цели и мотивы

Задачи

Барьеры и трудности

Описание

Личные данные + фото

/180


77

Используйте персонажей в проекте!

77

Выберите ключевого

персонажа – самый важный для

вас сегмент

Опишите идеальное

взаимодействие с помощью сценариев

Создайте прототипы страниц и

внедрите в жизнь, помня об

измерении KPI/180


78

Пример из нашей практики

78

Проблема с которой обратился клиент:• Нет понимания как

взаимодействовать с разными сегментами аудитории• Опытные пользователи уходят к

конкурентам• Большая часть новых

зарегистрировавшихся пользователей не делают даже одной покупки• Нужно снизить риски запуска

нового интерфейса личного кабинета

/180


79

Что мы сделали

79

Мы провели интервью с пользователями сервиса, и вот что выяснилось:• Новички часто не понимают, как

сделать первую покупку в США • Опытным пользователям не

хватает важных функций, которые упростили бы им зарубежный шоппинг

/180


80

Сегментация пользователей

80

Разбираются сами

Нужна персональная

помощь

Опытные

Новички

Осторожные новички

Бывалые самостоятель

ные

Любопытные начинающие

шоперы

Ленивые эксперты

/180


81

Получили 4 персонажа

81

«Новички»Нужна помощь и пошаговое руководство, чтобы уверенно сделать первые шаги

«Любопытные начинающие»Предпочитают разобраться сами при наличии инструкций

«Самостоятельные бывалые» Все делают сами и хотят упростить процесс покупки и доставки

«Ленивые эксперты» Есть опыт, требуют персональной помощи сервиса, чтобы тратить меньше времени

/180


82

Стратегические решения

82

Сфокусировались на удовлетворении потребностей 2-х персонажей:

Новички

Самостоятельные бывалые

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

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

/180


83

Анализ сценариев взаимодействия

83

• Было составлено более 20 сценариев использования сайта • Проведен анализ

каждого сценария с целью выявить новые требования

/180


84

Решение

84

Новички

/180


85

Решение

85

Самостоятельные бывалые

/180

BUYER PERSONA В ДЕЙСТВИИСОЗДАНИЕ LANDING PAGE ДЛЯ QA TRAININGS


87

ЧТО БЫЛО

87/180


88

С ЧЕГО НАЧАТЬ? С АУДИТОРИИ, КОНЕЧНО.

88

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

1. Первичный стимул к действию2. Факторы успеха 3. Воспринимаемые барьеры4. Критерии принятия решения 5. Путь покупателя

/180

user

2 - что себе представляет

user

2 - что себе представляет


89

ФАКТОРНЫЙ АНАЛИЗ КОНКУРЕНТОВ

89

Программа курса, кол-во часов Удаленное обучение Размер класса Стоимость и условия оплаты Преподаватели

Удобство трансфера, обеды, парковка и т.д. Помощь в трудоустройстве Рекомендации и отзывы Рейтинг компании (награды, клиенты,

партнеры, известность на рынке) Демо-уроки и акции

Факторы

/180

user

Количество часо?

90

ФАКТОРНЫЙ АНАЛИЗ КОНКУРЕНТОВ

Программа курса (количество матералов в классе, часы)

Удаленное обучение Размер класса

Стоимость и условия оплаты (рассрочка, отсрочка)

Преподаватели (опыт в индустрии, сертификация)

Удобство трансфера, обеды, парковка и т.д.

Помощь в трудоустройстве

Рекомендации и отзывы

Рейтинг компании (награды, клиенты, партнеры, известность на рынке)

Демо уроки и акции

http://tekruiting.com/ QA Automation - 123 часа, 6 недель Есть, по Skype 10 3000$, оплача частями 16 лет опыта в индустрии Есть своя паркова, напитки/еда

Составление резюме, консультация специалистов, прохождение техн. собеседования

Более 700 положительных отзывов от студентов. Топовые компании силиконовой долины оценили крс вышей оценкой

HP, IBM Бесплатное пробное занятие

https://www.portnov.com/ QA full time (неограниченное к-во лекций и лаборатонных часов) - полный рабочий день - 4 курса, по 25 часов в неделю (7-8 недель)QA Flex - вечернее время (с 7 до 11 часов) - 4 курса - 185 часов лекийQA Express - дневная программа (с 10 до 3 часов) - 4 курса - 185 часов лекций

Нет, обучение только в классе

Из видео можно судить, что человек 10

4200$ Работает на ранке с 1995 г.

Преподаватели с многолетним опытом работы

Необходима учебная виза для обучения в школе (рабочая предпочтителнее)

В течение 7-8 недель большинство студентов-очников начнают стажировку (оплачиваемую или неоплачиваемую)

Блог с отзывами в основном за прошлые годы

Рейтинг в Google+ - 4,7 (84 отзыва)

FB - 1717 likesYouTube - 28 048 followers

Выпускники устраиваются в престижных компании (например, yahoo)

-

1 курс на выбор - 40 часов лекций и 60 часов лабораторных занятий

1050$

http://www.qatraininginusa.com/ QA testing, soapUI testing Обучение online

Гибкий график

- -

Сертифицированные инструкторы

Система обмена знаниями

Возможно повторно пройти курс без затрат

Professional Resume Preparation and Resume Review + Recruiter Driven Job Placement assistance

FB - 4.8(5 отзывов) FB - 847 likes Скидки на рекомендуемые курсы, пробные уроки, бесплатные обущающие видео

http://www.h2kinfosys.co.uk/ QA testing training, selenium online training

FB - 4.8(765 отзывов)

Google+ - 4.7 (1 054 отзывов)

FB - 4 403 likesYouTube - 16k followers

Партнеры: AT&T, Cox communications, Verizon Wireless, GE Energy, TransUnion Credit bureau, IBM, Home Depot, Turner Boradcasting.

http://www.h2kinfosys.com/ QA, ruby/rails/watir/selenium

http://www.h2kinfosys.us/ QA training, selenium testing, database testing, software testing

http://www.bellevuecollege.edu/

-

Нет, обучение в рамках университета

- - -

Бесплатная парковка, бесплатный доступ к Интернету.

Обширная программа доступных сервисов для студентов

Центр карьеры - консультации один на одни / семинары / стажировки и многое другое

Google+ - 4.0 (95 отзывов)

- -

http://forteknowledge.com/ 6 различных курсов. Нужный - Automation selenium - 80 hrs

Сampus

- -

MBA at computer science + 5 years of experience as automation tester

- Стажировка для всех выпусников

(internships for all of the graduates)

Success stories + 1 review FB - 4.2 (11)

FB - 246 likes Зарегистрируйтесь сейчас и получите 15% скидку

https://hackbrightacademy.com/ 1. Softwvare engineering fellowship (12 weeks) 2. Introduction to programming

В школе полный день / не полный день

Оnline

4 16 570$ много преподавателей (phd's + experienced)

Alumnae Network - сеть для общения студентов и выпусников, с целью поддержки друг друга

90% get jobs (average starting salsry - 89k)

Отзывы студентов, видео-отзывы студентов, истории студентов

FB - 5 763 likes

Партнеры - "Amazon", Dropbox, Uber, FB, Forbes и другие

Студенты, которые закончили один курсов имеют право на получение скидки 500$

Если программа в первые 2 недели не оправдала ожидания, компания вернет деньги

http://www.trainingrite.com Different cources: limited class/videos only. Duration - 1 month live video coaching + video database recorded

Оnline - 300-400$ 1 teacher. 18 year exp

-

Подготовка резюме Google+ - 4.6(31) FB - 3 588 likes

YouTube - 4 110 -

http://www.qaonlinetraining.com/ Software testing online training - 45+hours

Оnline - 749$ Преподаватели с 15-м опытом работы

Тренинг портал для студентов школы

Оказывать помощь в трудоустройстве

(offer assistance in job placement)

Google - 4.8(24) FB - 278 likes

Партнеры: IBM, TATA, Aol., Infosys, VerSign Trusted

Бесплатные видео, запрос на пробный урок

Selenium training 20 hours+ Оnline - 750$ facebook - 4.6(22)

QA ba istqb - 72+hours Classroom - 1450$ (без скидки 2100$) Большое количество отзывов на сайте

http://mindsmapped.net/ Recorded lessons + attend classes online + 50 hours of online classes + online database for a lifetime

Оnline small groups 600$ Experienced and Knowledgable Trainers

provide OPT/CPT for deserving candidates (salt lake city)

Оказывать помощь в трудоустройстве

facebook - 4.8(5), google - 4.9(32) (as consulting company) + candidate's feedback (1222 satisfied candidates - stat blokc on landingpage)

FB - 1 676 likes Пробные уроки; скидка на сборные курсы; скидка 100$ если приведешь друга

/180

http://tekruiting.com/

https://www.portnov.com/

http://www.qatraininginusa.com/

http://www.h2kinfosys.co.uk/

http://www.h2kinfosys.com/

http://www.h2kinfosys.us/

http://www.bellevuecollege.edu/

http://forteknowledge.com/

https://hackbrightacademy.com/

http://www.trainingrite.com/

http://www.qaonlinetraining.com/

http://mindsmapped.net/

91

ПРОЦЕСС

/180


92

РАЗРАБОТКА СТРУКТУРЫ LANDING PAGE– МОДЕЛЬ PMPHS

92

Эффективный заголовок

«Боль»

Усиление «боли»

НадеждаРешение

Призыв к действию

/180

user

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

user

Выбрали эту можель потому

user

модель построения выгод AIDA и модель наименьшего зла Pain – More pain – Hope – Solution.

user

манипулятивная модель

user

Четко выраженная боль


93

СОЗДАНИЕ ЗАГОЛОВКА ПО МЕТОДУ 4U

93/180

user

Заголовок самое важное в ЛПейдж.

user

Метод усиления ценности продукта с помощью заголовка

user

Из факторов успеха, из того что важно для BP


94

ЭФФЕКТИВНЫЙ ЗАГОЛОВОК

94/180


95

БОЛЬ

95/180

user

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


96

БОЛЬШЕ БОЛИ

96/180

user

Из факторов и ожиданий.


97

НАДЕЖДА

97/180


98

РЕШЕНИЕ

98/180

user

Наш оффер. ЧТо предлагаем


99

ФАКТОРЫ УБЕЖДЕНИЯ

99

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

• Указать дополнительные выгоды - вкусный обед / ужин, доступ к онлайн библиотеке, бесплатная парковка

• Завершить сайт блоком FAQ - который будет служить для отработки возражений клиента

/180

user

Гарантия , доп. выгоды, социальные доказательства


100

ПРИЗЫВЫ К ДЕЙСТВИЮ

100/180


101

ТРУДНОСТИ – ПРОГРАММА КУРСА

101

Было

Стало

/180


102

ТРУДНОСТИ - ДИЗАЙНЕР

102/180


103

ТРУДНОСТИ – ПРОТОТИП ЦВЕТНОЙ VS Ч/Б

103/180

Юзабилити-тестирование

105

Что такое юзабилити-тестирование?

/180

106

Создание персонажаЗачем это все?

• Cайтов без недостатков практически нет• Понять, как и почему люди

используют продукт• С какими трудностями

сталкиваются пользователи• Проверить ваши решения до

этапа реализации• Не провалить продажи и

конверсию при очередном релизе

/180

107

Создание персонажаКогда проводить юзабилити-тестирование

Ищем зону роста

!Ощущаем проблемы Краш-тест новой функции

/ проекта

NEW

/180

108

Создание персонажаЧто мы можем тестировать

1. Рисунки на бумаге (мокапы / скетчи)

2. Интерактивный (кликабельный) прототип

3. Готовый продукт 3.1 Продукты конкурентов

/180

109

Создание персонажаКакие способы тестирования?

• Лабораторное • Удаленное модерируемое –

Skype• Автоматическое –

UserTesting, Loop, UserZoom и т.д.

/180

110

Создание персонажаПример из нашей практикиЗадача проекта:Тестирование интерфейса сайта и выведение рекомендаций по изменениям в интерфейсе с целью повышения конверсииПолученные инсайты:• Функцию «посмотреть отрывок» не

видели

/180

111

Создание персонажаПример из нашей практики

Задача проекта:Тестирование интерфейса сайта и выведение рекомендаций по изменениям в интерфейсе с целью повышения конверсииПолученные инсайты:• Функцию «посмотреть отрывок» не

видели• Не понимали в чем отличие

одинаковых книг

/180

112




одинаковых книг• Пропускали шаг «указать доставку и

оплату»

/180

113





оплату»• Неудобная навигация по категориям

в результатах поиска/180

114





оплату»• Неудобная навигация по категориям

в результатах поиска• Недостаточно было фильтров

/180

115


Что было сделано:• Функцию «посмотреть отрывок» -

кнопкой

/180

116



кнопкой• Функция сравнение + короткое

описание на товарном виджете

/180

117




описание на товарном виджете • Шаг «указать доставку и оплату»- в открытом положении

/180

118




описание на товарном виджете • Шаг «указать доставку и оплату» - в открытом положении• Визуально выделили разделы• Добавили перечень фильтров

/180

119

Создание персонажаКак провести юзабилити-тестирование?

Шаг 1

Разработать сценарии тестирован

ия

Подготовить оборудовани

е

Провести само

тестирование

Свести данные и

сгенерировать решение

Найти людей

Шаг 2 Шаг 3 Шаг 4 Шаг 5

/180

120

Создание персонажаДень 1. Участники тестирования

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

/180

121

Создание персонажаНапример

Пол / возраст Мужчины 25-45Женщины 30-50

Род деятельности

Информативность о товаре

Место приобретения продукта

Опыт приобретения продукта на вашем ресурсе

Руководители и менеджеры среднего звена, частники

От 20 тыс. грн

Низкая, продукта не знает, нуждается в консультацииИнтернет

1-2 раза совершал покупку

Доход

/180

122

День 2. Ищем людей за пару дней

1. Начать с себя, если до сих пор это не делали

2. Спрашиваем друзей / коллег / знакомых не вовлеченных в проект

3. Размещаем объявление в социальных сетях, на форумах, С2С площадках

/180

123

Создание персонажаДень 3. Разрабатываем сценарий тестирования

Необходимо составить не больше 10 (в идеале 5) ситуативных заданий приближенных к реальным сценариям взаимодействия.

Ссылка: пример сценария для тестирования

Сценарии должны быть:

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

Описывать реальный контекст Не содержать подсказок, как

выполнить то или иное задание/180

https://drive.google.com/open?id=0B5uruJ01hECFcmlneWgtY3JwdkE

https://drive.google.com/open?id=0B5uruJ01hECFcmlneWgtY3JwdkE

124

Создание персонажаДень 3. Разрабатываем сценарий тестирования

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

Да

Нет

/180

125

День 4. Приглашаем респондентов

1. По два часа на человека2. Не более 3 человек в день3. Всего 8-10 человек

*8 пользователей выявляют около 85% проблем

*по данным исследования

/180

126

Создание персонажаДень 5. Комната и оборудование

Убедитесь, что у вас все готово на технической стороне!

КомпьютерМикрофонПО:FastStone Capture /

Camtasia StudioЛист бумаги и ручкаМонитор Чай / печенье

/180

127

Создание персонажаДень 5-8. Встреча и проведение тестирования

1. Встретить

4. Наблюдать и модерировать

2. Поговорить перед началом

3. Провести инструктаж

6. Заплатить респонденту

5. Поговорить после и собрать

эмоции/180

128

Создание персонажаДень 9-11. Анализ результатов

Пересматриваем видео

Записываем все мысли и комментарии

Делим ошибки на 3 группы: критические, средней тяжести и низкой тяжести

Выделяем из слов респондентов потребности, а не готовые решения

/180

129

Создание персонажаЧто дальше?

Думаем как исправить / решить проблемы

Вносим изменения

Проверяем, хорошее ли решение

Запускаем на сайт

/180

130

Создание персонажаЧек-лист – правила поведения

Модерируйте сессию беспристрастно

Используйте технику “Мыслить вслух”

Вопросы (открытого типа) после задания

Следите за эмоциями Не помогайте тестируемому

(за исключением тупиковых ситуаций)

Не извиняйтесь за продуктСсылка: полный чек-лист →

/180

https://drive.google.com/open?id=0B5uruJ01hECFaUNwNGhkQnIwQW8

https://drive.google.com/open?id=0B5uruJ01hECFaUNwNGhkQnIwQW8

Удаленные User-сессии

Матрица анализа целевой аудитории

132

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

интервью

Юзабилити тестирован

ие

Анкетирование

Анализ трафика

Качественный анализ (инсайты)

Поведение (что люди делают)

Количественный анализ

Цели и отношение (что люди говорят)

Дневники/журналы

Фокус группы

Анализ пользовательских отзывов

Автоматизированные тесты

А/Б эксперименты

Записи видео экранов

/180


133

О проекте

133

Исходные данные:• Бронирование

апартаментов в Харькове

Задача:• Определить «узкие»

места в воронке конверсий

/180


134

Сценарий совершения целевого действия

134

Главная страница

• Использование формы поиска

Страница «плитка» вариантов

• Подбор подходящих вариантов

Страница апартамент

ов

• Бронирование понравившегося варианта

/180


135

Варианты решения задачи

135

1.Субъективная оценка клиента / специалиста

2.Субъективное мнение пользователя

Экспертная оценка

User-сессия

/180

Инструменты для удаленных сессий

136

Главная задача инструмента:• Запись микрофона

(что пользователи говорят?)

• Запись экрана (что пользователи делают?)

/180


137

Удаленные сессии. User Testing

137

• Точный таргетинг• Простота и

скорость• Носитель языка

тестируемой ЦА

• Не real-time• Рамки задания

/180


138

Целевая Аудитория

138

Мужчины в возрасте 25-50 лет

Уровень дохода – 45$k-120$k в год

Жители США и Канады Время пребывания в

интернете в сутки - 5+ часов

/180


139

Удаленные сессии – карта заданий

139

1). Search Google for "apartments for rent in Kharkov" term. Click on a couple of Google's search results, and explain what you're learning.

2). Go to http://www.apartment-kharkov.com/. Look at this page for five seconds. Then look away and answer this one question (without peeking!): What do you remember?

3). Staying on this page, look around and say what you think the site is about: what can you do here, what's it for, what strikes you about it?

4). Put yourself in the shoes of a person who searched Google for “apartments for rent in Kharkov” and ended up here. Quickly go through the process of searching the apartment and try to book it (without prepay). If this wasn't a test, would you have booked an apartment of this website? Why or why not?

5). Imagine you have to use transport in the city you come to. Can the apartment-kharkov.com website help you to solve this "transport problem"?

6). Do you trust this website? Does it look reliable? Why or why not?

7). Go to Google and find one other company that offer a similar service. Compare the two websites. Which did you prefer?

/180


140

Удаленные сессии – вопросы для «интервью»

140

1). Would you use the website in the future (please explain why or why not)?

2). If you had a magic wand, how would you improve?

3). What did you like about the website?

4). How likely are you to recommend to a friend or colleague (0=Not at all likely, and 10=Very Likely)?

/180


141

Удаленные сессии – как это выглядело?

141/180


142

Найденные проблемы

142

• Общее впечатление о сайте (дизайн)• Логика подбора апартаментов (отвлекающие /

неработающие элементы)• Галерея апартаментов и функциональность фото• Полезная информация о конкурирующих сайтах• Копирайтинг (качество «английского» в целом на сайте)

/180


143

Что сказали пользователи?

143

Пользователь 310 out of 10. I would recommend it because it puts a traveler at ease. Some of the other sites were alright, but your site is superior because it has a likeness to what I am familiar with on apartment search sites in America. Making people comfortable in a foreign situation goes such a long way.

Пользователь 14 out 10. This is only because of design of the website.

Пользователь 27 out of 10. I would give it a 10 if the website some how increased my level of comfort for doing business with it. If they had independent reviews from real people and how they were able to successfully do business with them I would recommend the site in a heart beat.

/180

144

Прототипы


145

Прототип

145

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

Что это? О_о

/180

146

Зачем нужен прототип

146

• Показать идею• Объяснить логику• Объяснить поведение• Проверить удобство интерфейса• Испытать продукт на себе• Испытать продукт на других• Пожить с продуктом

Антон Шеин, лекция Яндекс о прототипах

/180

147

Прототип – работа над логикой

147/180

148

Каким он должен быть?

• Монохромный ( В оттенках одного цвета)

148/180

149

Каким он должен быть?

• Монохромный ( В оттенках одного цвета)• В едином стиле (шрифты, библиотеки

элементов, сетки)

149Александр Мовчан /180

150

Из чего строим прототип

Много серых квадратов

Под разрешение 1366*768https://material.io/devices/

Тексты

12 колоночная сеткассылка на готовую сетку

150/180

https://material.io/devices/

http://gridcalculator.dk/#/1366/12/20/33

151

Инструменты для прототипирования

151/180

152152

Картинка, четко ассоциирующаяся с

заголовком на слайде

Прототип на бумаге

/180

Прототип на бумаге

153153/180

154

Adobe Photoshop

154

• Растровая графика• Есть артборды• Многие умеют им пользоваться•Большое количество готовых UI kits

/180

155

Adobe illustrator

155

•Векторная графика•Есть артборды•Просто управлять элементами•Можно использовать символы

/180

156

+ Векторная графика+ Просто использовать артборды+ Легко научиться+ Большое количество UI kits + Развитое комьюнити+ Очень продвинутая система символов+ Можно стримить артборды наКонечное устройство

Sketch (Mac only)

156/180

157

+ Векторная графика+ Просто использовать артборды+ Легко научиться+ Очень продвинутая система cимволов+ Можно стримить артборды на конечноеустройство+ Пока еще бесплатная+ Есть совместный доступ к проектам и веб версия программы

Figma

157/180

158158

МИНУССтатичная картинка

/180

159

Добавляем интерактив при помощи программ:

159/180

160160

Код?..

Графический редактор Код

РЕШЕНИЕ ВСЕХ ПРОБЛЕМ

с минимальными усилиями

Axure

+ Готовые библиотеки стилей+ Готовые библиотеки интерактивных виджетов+ Просто управлять элементами+ Похоже на реальный сайт+ Возможность выгружать на сервер и смотретьрезультат в браузере+ Возможность добавлять сложные логические элементы при помощи кода

Если вам необходимо улучшить юзабилити вашего сайта, зайдите на сайт www.olshansky.ua и отправьте ваш запрос

http://www.olshansky.ua/

Инструменты юзабилити для роста бизнеса

Design

Transcript of Инструменты юзабилити для роста бизнеса