18. 1. «Я бы три раза уже ушла с этого сайта.
Ничего не понятно, нет привычных форм
поиска»
2. «Хочу позвонить менеджеру. К
предложенному в туре отелю нет
описания»
3. «Зачем мне все эти названия отелей? Я
же ничего не знаю про Болгарию, хочу
недорогой отель для поездки с детьми»

20. Ты кто такой? Давай, до свидания!
• Посадочныестраницыч
ащевидятлюди,
которыеовасещё
ничегонезнают!
• Почемуонидолжныдов
ерятьвам?

21. Лица людей
• Мы все – «социальные
животные»
• Даже мизантропов
привлекают
человеческие лица
• Выражение лица
позволяет быстро
понять, друг перед
нами или враг

22. Влияние направления взгляда
• Когда модель смотрит
на зрителя, зритель
смотрит на модель
• Когда модель смотрит
на предмет, зритель
смотрит туда же, куда
и модель

23. Ребенок может управлять взглядом

24. Кажется, что все просто
• Достаточно:
– Поместить на сайте лицо
человека, чтобы оно
привлекало к себе
первичное внимание
– Направить лицо или взгляд
на ключевой объект
• Лицо поймает взгляд и
«отпасует» его в нужную
область экрана
• В итоге не пользователь
выбирает объект, а объект
направляет внимание
пользователя

25. Проверим на практике
Действительно ли всё
элементарно?

26. План действий
• Выбираем «подопытный»
сайт, на главной странице
которого используется
лицо человека
• Минимально изменяем
дизайн главной страницы
так, чтобы придать лицу и
взгляду чёткую
направленность
• Проводим сравнительное
исследование
• Выясняем, какой вариант
работает лучше

27. Требования к подопытному сайту
• Имеет четкую коммерческую цель
– Мы хотим помогать тем, кто четко
понимает свои цели
• Дизайнеры сайта пытаются влиять
на внимание пользователя
– Мы любим ищущих людей
• Сайт работает с массовым рынком
– Читатель должен относиться к
примеру пристрастно
• Сайт рекламируется на дорогих
площадках
– Мы любим людей с серьёзными
намерениями
• Дизайн симпатичный и позитивный
– Мы любим красивые и приятные
вещи

28. Подопытный сайт. Берём в работу!
• Позитивно
• Целенаправленно
• Есть лицо
• Массовый сервис
• Сайт рекламируется на
Путешествия@mail.ru

29. Задача – найти отдых в Египте

30. Задача решена, если…
3 • Пользователь кликнул в
один из указанных
объектов:
1 – Форма поиска (1),
2
– Объект «Лучшие
предложения дня» (2),
– Ссылку «Поиск тура» в
верхнем меню (3).
• Клики в другие области
считаем
неэффективными с
точки зрения бизнес-
задач сайта.

31. Немного магии взгляда…
• При помощи
Photoshop:
• Скашиваем девушке
глаза в сторону формы
и слегка наклоняем
голову.
• Все остальное
оставляем без
изменений.
Было Стало

32. Пара слов о методологии
• В тестировании каждого
дизайна участвовало 11
человек (каждый раз новые)
• Мужчины и женщины
• Пользователи находили сайт
на Mail.ru
• Открывали его и должны
были решить, куда
кликнуть, чтобы найти тур в
Египет
• Тестирование продолжалось
до первого клика

33. Результаты тестирования
• Исходный дизайн • «Косые» глаза
– 3 неэффективных клика – 3 неэффективных клика
– Девушка почти не ловит взгляд – Пользователи меньше смотрят
– Взгляды рассредоточены в на логотип и больше — на
верхней части экрана «Лучшие предложения дня» (1)

34. Отрицательный результат
• Изменение направления
взглядя «модели» не
повлияло на количество
эффективных кликов
• Должно быть, это из-за
«пузырей», которые
отвлекли на себя
драгоценное внимание
пользователей?
• Давайте уберем «пузыри» и
протестируем снова!

35. Дизайн без «пузырей»

36. Тестирование без "пузырей"
• «Косые» глаза • Без «пузырей»
– 3 неэффективных клика – 4 (!) неэффективных клика
– Пользователи стали кликать
миниатюру внизу (зона 2) и
ссылки в верхнем меню (зона 1)
1
2

37. Разбор полетов
Что привлекло пользователей Почему пользователи стали
именно в этой миниатюре? замечать мелкие элементы?

38. Таинственная миниатюра
Эта девушка у вас
ассоциируется с отпуском?..
А эта?

39. Сравним приоритеты
Что бросается в глаза? А здесь?
Яркие «пузыри» — бесспорные Когда исчезли «пузыри», их место на
победители в борьбе за внимание пьедестале заметности заняли
пользователей другие элементы

40. Тактика победоносной битвы
• Вызываем приятные
ассоциации
– Никакого дресс-кода —
только пляжные
костюмы
• Направляем взгляд на
форму
– Понижаем визуальную
привлекательность
второстепенных
элементов

41. Купальник против дресс-кода

42. Приятные ассоциации +
концентрация = …
Без пузырей Купальник, без миниатюр
 4 неэффективных клика  Ни одного неэффективного клика!
 Внимание пользователей снова
сконцентрировалось на форме

43. Взгляд на победителя
• В предыдущем опыте
мы внесли сразу два
изменения
• Выясним, какое из них
оказалось
эффективнее
• Вернём миниатюры,
оставив девушку в
купальнике.

44. Приятные ассоциации или
концентрация?
Купальник, без миниатюр Купальник и миниатюры
 Ни одного неэффективного  2неэффективных клика
клика  Пользователи снова стали
обращать внимание на миниатюры

45. Что еще можно сделать с
победителем?
• Все клики были успешными,
но два клика были сделаны
не в форму
• Оба клика не в форму были
сделаны женщинами (хотя и
они были эффективными)
• Наше объяснение этому —
модель в купальнике
недостаточно влияет на
женщин
• А женщины явно покупают
туры не реже мужчин
• Создадим еще один вариант
дизайна, чтобы повысить
влияние на женщин

46. Влияние на женские взгляды
• Что для женщины
отдых? Море, солнце,
знакомство с
приятным мужчиной…
• Возможно, женщин
привлечет фотография
романтической пары
на пляже?

47. Романтика и женское внимание
Купальник, без миниатюр Романтическая пара
 Ни одного неэффективного  4неэффективных клика
клика  Похоже, локоть сработал в двух
направлениях…

48. Все 6 вариантов
3 ошибки 3 ошибки 4 ошибки
Без ошибок! 2 ошибки 4 ошибки

49. Сравним показатели
Любителям диаграмм

50. Концентрация кликов
Клики
100%
Верхнее меню
90% Ссылки вместо баблов
80% Миниатюры
Бабл
70%
Акции
60%
Форма
50%
40%
30% 1 — исходный дизайн
2 — «косые» глаза
20% 3 — без «пузырей»
4 — купальник, без миниатюр
10%
5 — купальник, с миниатюрами
0% 6 — романтическая пара
1 2 3 4 5 6
Варианты дизайна

51. Время до клика
Секунды
30
Муж.
Жен.
25 1 — исходный дизайн
2 — «косые» глаза
3 — без «пузырей»
20 4 — купальник, без миниатюр
5 — купальник, с миниатюрами
6 — романтическая пара
15
10
5
0
1 2 3 4 5 6

52. Эффективность
100%
Неэффект. клик
90% Эффект. клик
80%
70%
60%
50%
1 — исходный дизайн
40% 2 — «косые» глаза
30% 3 — без «пузырей»
4 — купальник, без миниатюр
20% 5 — купальник, с миниатюрами
6 — романтическая пара
10%
0%
1 2 3 4 5 6

53. Спасибо за внимание!
+7 (495) 933-01-
37 info@usabilitylab.ru
http://usabilitylab.ru
Москва, ул. 8 марта, д. 1, стр. 12