70
ЮЗАБИЛИТИ Мазуркевич Артем Линейный руководитель отдела юзабилити и UX

9.юзабилити мазуркевич артем

  • Upload
    zaharec

  • View
    139

  • Download
    11

Embed Size (px)

Citation preview

Page 1: 9.юзабилити мазуркевич артем

ЮЗАБИЛИТИ Мазуркевич Артем Линейный руководитель отдела юзабилити и UX

Page 2: 9.юзабилити мазуркевич артем

СОДЕРЖАНИЕ

2

Понятие юзабилити

Связь SEO и юзабилити

Поисковым системам важно, как выглядит Ваш сайт

Как сделать сайт эффективнее(общие принципы)

Юзабилити-ошибки интернет-магазинов

Юзабилити-ошибки контентных сайтов

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

Page 3: 9.юзабилити мазуркевич артем

ПЛАН ОЖИДАНИЙ

3

1.

2.

3.

4.

5.

6.

7.

8.

Page 4: 9.юзабилити мазуркевич артем

ПОНЯТИЕ ЮЗАБИЛИТИ

4

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

Page 5: 9.юзабилити мазуркевич артем

5

ПОЛЬЗОВАТЕЛИ, КОНТЕКСТ, ЦЕЛИ

Page 6: 9.юзабилити мазуркевич артем

6

ФУНКЦИОНАЛЬНАЯ СВАЛКА

Page 7: 9.юзабилити мазуркевич артем

7

КОНТЕКСТ ИСПОЛЬЗОВАНИЯ Отправив мужа на работу, Анна зашла в комнату к малышу, в это время ребенок спал. Воспользовавшись свободной минутой, Анна села за компьютер и зашла в интернет пообщаться в социальных сетях, почитать форумы, написать несколько электронных писем старым знакомым по университету. На одном из форумов её внимание привлекло фото нового вида глоксинии. Анна стала читать о понравившемся растении, заметила рекламу о его продаже в интернет-магазине и перешла по ссылке на страницу каталога сайта, где продается глоксиния.

Page 8: 9.юзабилити мазуркевич артем

8

ЭКСКУРС В ИСТОРИЮ

Page 9: 9.юзабилити мазуркевич артем

9

МЕТРИКИ У ВОЕННЫХ КОНСТРУКТОРОВ

Page 10: 9.юзабилити мазуркевич артем

10

ЮЗАБИЛИТИ

1980 год

Page 11: 9.юзабилити мазуркевич артем

11

ЭФФЕКТИВНОСТЬ ПРОВЕДЕНИЯ РАБОТ ПО ЮЗАБИЛИТИ

10-20%

Page 12: 9.юзабилити мазуркевич артем

12

СВЯЗЬ SEO И ЮЗАБИЛИТИ

Page 13: 9.юзабилити мазуркевич артем

13

ДИАГРАММА ХАЙПА

Page 14: 9.юзабилити мазуркевич артем

14

ПОИСКОВЫМ МАШИНАМ ВАЖНО КАК ВЫГЛЯДИТ ВАШ САЙТ

2011 Алгоритмы, которые отслеживают удобно ли

пользоваться сайтом.

Page 15: 9.юзабилити мазуркевич артем

15

ПОИСКОВЫМ МАШИНАМ ВАЖНО КАК ВЫГЛЯДИТ ВАШ САЙТ

Page 16: 9.юзабилити мазуркевич артем

16

КОНВЕРСИОННЫЙ ПУТЬ

Page 17: 9.юзабилити мазуркевич артем

17

ПОИСКОВЫМ МАШИНАМ ВАЖНО

Насколько быстро загружается сайт.

Page 18: 9.юзабилити мазуркевич артем

18

ПОИСКОВЫМ МАШИНАМ ВАЖНО

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

Page 19: 9.юзабилити мазуркевич артем

19

ПОИСКОВЫМ МАШИНАМ ВАЖНО

Насколько грамотно оформлено нижнее меню.

Насколько грамотно оформлена страница с контактными данными.

Page 20: 9.юзабилити мазуркевич артем

20

ПОИСКОВЫМ МАШИНАМ ВАЖНО

Как оформлены тексты.

Стоит обратить внимание на дизайн текстов. Разделены ли они на абзацы. Есть ли между ними достаточные промежутки, обеспечивающие удобство чтения. Насколько велики/малы эти абзацы. Имеется ли тег <h1> в заголовках.

Объем текстовой информации, а также процентное содержание ключевых слов на странице. Помните, что, если в тексте содержится более 5% ключевых слов, поисковый робот может с легкостью посчитать их за спам.

Присутствуют ли в тексте гипер-ссылки и куда они ведут. Робот в состоянии проверить такую информацию. Если проставлять в тексте ссылки на ту же страницу, на которой расположен сам текст - гипер-ссылкой это считаться не будет.

Page 21: 9.юзабилити мазуркевич артем

21

КАК СДЕЛАТЬ САЙТ ЭФФЕКТИВНЕЕ?

Page 22: 9.юзабилити мазуркевич артем

22

КОНТАКТНАЯ ИНФОРМАЦИЯ Хороший пример dostavka.ru

Page 23: 9.юзабилити мазуркевич артем

23

КОНТАКТНАЯ ИНФОРМАЦИЯ Укажите все свои контактные данные: телефон, e mail, Skype, ICQ и т.д. Указывать точное время работы оператора и офиса. Наглядный пример можем наблюдать на сайте 21vek.by

Page 24: 9.юзабилити мазуркевич артем

24

КНОПКА «КУПИТЬ» («ЗАКАЗАТЬ») Решении купить товар осуществляется с помощью кнопки «Купить» либо «Заказать». Если ее нет – покупателя тоже нет.

Как не стоит делать. Пример как было реализовано на сайте collettobianco.com.

Page 25: 9.юзабилити мазуркевич артем

25

ПЕРЕХОД В КОРЗИНУ С ЛЮБОЙ СТРАНИЦЫ

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

Page 26: 9.юзабилити мазуркевич артем

26

ПЕРЕХОД В КОРЗИНУ С ЛЮБОЙ СТРАНИЦЫ

Page 27: 9.юзабилити мазуркевич артем

27

ЦЕНА РЯДОМ С КАЖДЫМ ТОВАРОМ

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

Page 28: 9.юзабилити мазуркевич артем

28

ИНФОРМАЦИЯ ОБ ОПЛАТЕ И ПОЛУЧЕНИИ ТОВАРА Посетители сайта интересуются информацией о получении и оплате товара как при входе на сайт, так и в процессе перемещения по нему. Неплохая реализация на сайте fruktovoz.ru.

Page 29: 9.юзабилити мазуркевич артем

29

ИНФОРМАЦИЯ ОБ ОПЛАТЕ И ПОЛУЧЕНИИ ТОВАРА

Page 30: 9.юзабилити мазуркевич артем

ОБНОВЛЕНИЕ НОВОСТЕЙ И ОТОБРАЖЕНИЕ В БРАУЗЕРАХ

30

Не обновляемый раздел «Новости» вызывает вопросы работает ли сайт и предоставляет ли он услуги.

То, что удобно и красиво в одном браузере, может оказаться совершенно непонятно в другом.

Page 31: 9.юзабилити мазуркевич артем

КАРТОЧКА ТОВАРА

31

Знакомство с товарами в интернете происходит через их фотографии и текстовое описание.

Удачный пример на сайте 24moda.by

Page 32: 9.юзабилити мазуркевич артем

ЮЗАБИЛИТИ-ОШИБКИ ИНТЕРНЕТ МАГАЗИНОВ

32

Page 33: 9.юзабилити мазуркевич артем

ЧЕГО НЕ ХВАТАЕТ?

33

Page 34: 9.юзабилити мазуркевич артем

ПОЧЕМУ НУЖНО ПОКУПАТЬ ИМЕННО В ЭТОМ МАГАЗИНЕ?

34

Количество отказов – в 2 раза

Сайт cifrocity.ru

Page 35: 9.юзабилити мазуркевич артем

БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА

35

А Вы знаете кто входит в Вашу ЦА? Хороший пример mvideo.ru.

Page 36: 9.юзабилити мазуркевич артем

БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА

36

Сайт mvideo.ru.

Page 37: 9.юзабилити мазуркевич артем

КАРТОЧКА ТОВАРА

37

Сайт mvideo.ru.

Page 38: 9.юзабилити мазуркевич артем

БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА

38

m.tverhit.ru

Page 39: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

39

Пример как делать не стоит. Так было на сайте procvetok.ru.

Page 40: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

40

Пример как делать не стоит. Сайт books.ru.

Page 41: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

41

Сайт fruktovoz.ru.

Page 42: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

42

Сайт remeslo4u.ru

Page 43: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

43

Сайт remeslo4u.ru

Page 44: 9.юзабилити мазуркевич артем

ОФОРМЛЕНИЕ ЗАКАЗА

44

Page 45: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

45

Сайт nextstore.ru.

Page 46: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

46

Сайт nextstore.ru.

Page 47: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

47

Сайт nextstore.ru.

Page 48: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

48

Сайт nextstore.ru.

Page 49: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

49

Сайт nextstore.ru.

Page 50: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

50

Сайт nextstore.ru.

Page 51: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

51

Сайт e5.ru.

Page 52: 9.юзабилити мазуркевич артем

СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ

52

Сайт e5.ru.

Page 53: 9.юзабилити мазуркевич артем

СПИСОК ТОВАРОВ

53

Сайт ninobrutti.ru.

Page 54: 9.юзабилити мазуркевич артем

ВАЖНЫЕ ЭЛЕМЕНТЫ

54

Пример как делать не стоит temptation.by.

Page 55: 9.юзабилити мазуркевич артем

БОЛЬШОЙ ВЫБОР

55

Не оставляйте покупателя наедине со списком из 200 товаров, десятком фильтров и сортировок. Чем больше нужно выбирать, тем меньше вероятность покупки.

Page 56: 9.юзабилити мазуркевич артем

БОЛЬШОЙ ВЫБОР

56

Хороший пример на сайте e5.ru.

Page 57: 9.юзабилити мазуркевич артем

БОЛЬШОЙ ВЫБОР

57

Сайт e5.ru.

Page 58: 9.юзабилити мазуркевич артем

БОЛЬШОЙ ВЫБОР

58

Сайт e5.ru.

Page 59: 9.юзабилити мазуркевич артем

ТРЕБОВАНИЕ ЛИШНИХ ДЕЙСТВИЙ

59

Page 60: 9.юзабилити мазуркевич артем

КАРТОЧКА ТОВАРОВ

60

Решение «не купить» всегда принять значительно проще, чем купить. Пример как делать не стоит posuda.ru.

Page 61: 9.юзабилити мазуркевич артем

ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА

61

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

Page 62: 9.юзабилити мазуркевич артем

ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА

62

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

Page 63: 9.юзабилити мазуркевич артем

ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА

63

Как делать не стоит kupibrand.by.

Page 64: 9.юзабилити мазуркевич артем

ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА

64

Сайт kupibrand.by.

Page 65: 9.юзабилити мазуркевич артем

АНАЛИЗ ПОВЕДЕНИЯ ПОЛЬЗОВАТЕЛЕЙ

65

Page 66: 9.юзабилити мазуркевич артем

НА ЧТО СТОИТ ОБРАЩАТЬ ВНИМАНИЕ?

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

66

Page 67: 9.юзабилити мазуркевич артем

НА ЧТО СТОИТ ОБРАЩАТЬ ВНИМАНИЕ?

67

Конструктор отчетов

Page 68: 9.юзабилити мазуркевич артем

НА ЧТО СТОИТ ОБРАЩАТЬ ВНИМАНИЕ?

68

Карта скроллинга

Page 69: 9.юзабилити мазуркевич артем

ВОПРОСЫ

69

Gtalk, mail: [email protected] Facebook: …/artemSergeich

Page 70: 9.юзабилити мазуркевич артем

ПОЛЕЗНЫЕ РЕСУРСЫ

70

Книги:

Алан Купер - «Психбольница в руках пациентов»

Стив Круг - «Веб-дизайн: книга Стива Круга, или `не заставляйте меня думать!`»

Сайты:

http://usability.by - сообщество специалистов по юзабилити, проектированию пользовательских интерфейсов и user experience Беларуси

http://fresh.gui.ru - блог компании UIDesign Group

http://www.youtube.com/user/usabilitylab - канал компании UsabilityLab

http://www.jvetrau.com – блог Юрия Ветрова об интерфейсах