93
1 Сайт Школы Канал на Youtube

Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

  • Upload
    yandex

  • View
    298

  • Download
    0

Embed Size (px)

Citation preview

Page 2: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Usability и дизайн: как не помешать пользователю

Алексей Иванов

Page 3: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Что такое юзабилити и почему оно важно

Page 4: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Юзабилити - удобство сайта для посетителя при достижении определенных целей.

Page 5: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

7 этапов взаимодействия с пользователем

〉Найти потенциального клиента

〉Произвести правильное первое впечатление

〉Предоставить необходимую информацию

〉Презентовать себя и завоевать доверие

〉Вернуть ушедшего посетителя

〉Мотивировать к действию

〉Обеспечить удобную коммуникацию

5

Page 6: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

Page 7: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Что определяет успех коммерческого сайта?

〉Трафик

〉Конверсия трафика в покупки

〉Средний чек

〉Повторные покупки

7

Page 8: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Информационное и функциональное наполнение сайта

Page 9: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Люди приходят на сайт за информацией.

Page 10: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Любой функционал сайта может помешать посетителю сайта стать вашим клиентом.

Page 11: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

11

Page 12: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

12

Page 13: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

13

Page 14: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

14

Page 15: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

15

Page 16: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Упростите всё, что можно.

Page 17: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

17

Page 18: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Не заставляйте посетителей проходить квесты на сайте

Page 19: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

19

Page 20: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

20

Page 21: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

21

Page 22: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Оставьте на сайте только тот функционал, который у вас хорошо работает.

Page 23: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

23

Page 24: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

24

Page 25: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

25

Page 26: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Проектирование входных страниц

Page 27: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Входные (главные) страницы сайта

〉Откуда посетитель приходит на сайт?

〉Что он уже знает про вас?

〉Что он ждет от сайта?

〉Чем вы зацепите внимание посетителя?

〉Какие действия должен совершить?

〉Чем должен закончиться просмотр страницы?

27

Page 28: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

28

Page 29: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

29

Page 30: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

30

Page 31: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

31

Page 32: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

32

Page 33: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

33

Page 34: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

34

Page 35: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

35

Page 36: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Вы должны «зацепить» посетителя с первых секунд.

Page 37: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Какая информация нужна на сайте?

〉Цены

〉Скидки

〉Наличие

〉Условия оплаты

〉Срок отгрузки и условия доставки

〉Описания и характеристики

〉…

37

Page 38: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

38

Page 39: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

〉Преимущества компании

〉Отзывы

〉Награды

〉Дополнительные товары и услуги

〉…

39

Page 40: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

40

Page 41: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

41

Page 42: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

42

Page 43: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

43

Page 44: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

Page 45: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Для каждой страницы сайта

〉Откуда будут приходить на неё посетители?

〉Что они должны увидеть на странице?

〉Какова цель посещения страницы?

〉Чем должно закончиться посещение страницы?

45

Page 46: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Определитесь с концепцией сайта

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

〉Прохождение пути по сайту для достижения цели,

〉Вовлечение пользователя для многократных заходов на сайт.

46

Page 47: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Совмещение нескольких сценариев

〉Опишите группы аудитории с разным поведением

〉Спланируйте отдельные сценарии для каждой группы

〉Спроектируйте сайт для каждой группы

〉Определите возможность совмещения этих сайтов в одном

47

Page 48: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Развитие бизнеса может потребовать пересмотра сценариев и переделки сайта

Page 49: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

49

Page 50: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Управление конверсией

Page 51: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Управление конверсией

〉Анализ

〉Устранение ошибок

〉Тестирование идей улучшения

51

Page 52: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Информация должна быть размещена там, где она востребована

Page 53: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

53

Page 54: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

54

Page 55: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Мотивируйте посетителей обратиться к вам.

Page 56: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Мотивация обращения

〉Что интересует посетителя после просмотра сайта?

〉С кем он хочет это обсудить?

〉Предложите ему позвонить по телефону и получить эту информацию.

56

Page 57: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Мотивируйте обратиться сразу.

Page 58: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

58

Page 59: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Вовлекайте, мотивируйте, а не навязывайтесь.

Повышайте конверсию без фанатизма.

Page 60: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

60

Page 61: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

61

Page 62: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

62

Page 63: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Не используйте слишком много шрифтов.

Page 64: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

64

Page 65: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Основные принципы распределения информации

Page 66: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Изменение акцентов информации

〉В зависимости от источника перехода

〉Для посетителей из разных регионов

〉В зависимости от дня недели и времени суток

66

Page 67: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

67

Page 68: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Если какой-то элемент можно убрать с сайта, убирайте его.

Page 69: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

69

Page 70: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Мобильная версия сайта и принципы юзабилити

Page 71: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Посетители мобильного сайта

〉Кто приходит на мобильную версию?

〉Почему они заходят на мобильную версию?

〉Заходили ли они раньше на ваш сайт?

〉Какая информация нужна в этот момент?

71

Page 72: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

72

Page 73: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

73

Page 74: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

74

Page 75: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

75

Page 76: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

76

Алексей Иванов

Генеральный директор агентства ISEE Marketing

Контакты

@a_n_ivanov

ivanov.aleksey

+7 (495) 212 10 43

[email protected]

Page 77: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Вопросы и ответы

Page 78: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

Page 79: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

На сколько важно размещение кнопки купить в карточке товара и все таки важен ее цвет или нет?

Page 80: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Как уменьшить количество брошенных корзин?

Page 81: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

81

Page 82: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

82

Page 83: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

83

Page 84: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

А можно ли в юзабилити внедрить игровой процесс и не помешает ли он пользователю?

Page 85: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Хотелось бы услышать на семинаре рекомендации для рынка b2b.

Page 86: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Насколько важно Usability для сайтов не связанных с продажами и получением прибыли?

Page 87: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Как заставить пользователя опуститься ниже по странице?

Page 88: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

Page 89: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

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

Page 90: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

С каким самым (самыми) удобными интерфейсами Вы сталкивались?

Page 91: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

Можно ли выделить базовые правила юзабилити, которые будут работать всегда и везде? И если да, то останутся ли они такими спустя годы, не смотря на развитие интернет технологий?

Page 92: Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Школе вебмастеров яндекса

92

Алексей Иванов

Генеральный директор агентства ISEE Marketing

Контакты

@a_n_ivanov

ivanov.aleksey

+7 (495) 212 10 43

[email protected]