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

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

СОДЕРЖАНИЕ

2

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

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

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

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

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

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

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

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

3

1.

2.

3.

4.

5.

6.

7.

8.

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

4

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

5

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

6

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

7

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

8

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

9

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

10

ЮЗАБИЛИТИ

1980 год

11

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

10-20%

12

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

13

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

14

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

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

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

15

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

16

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

17

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

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

18

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

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

19

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

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

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

20

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

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

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

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

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

21

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

22

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

23

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

24

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

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

25

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

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

26

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

27

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

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

28

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

29

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

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

30

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

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

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

31

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

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

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

32

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

33

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

34

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

Сайт cifrocity.ru

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

35

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

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

36

Сайт mvideo.ru.

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

37

Сайт mvideo.ru.

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

38

m.tverhit.ru

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

39

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

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

40

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

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

41

Сайт fruktovoz.ru.

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

42

Сайт remeslo4u.ru

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

43

Сайт remeslo4u.ru

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

44

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

45

Сайт nextstore.ru.

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

46

Сайт nextstore.ru.

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

47

Сайт nextstore.ru.

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

48

Сайт nextstore.ru.

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

49

Сайт nextstore.ru.

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

50

Сайт nextstore.ru.

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

51

Сайт e5.ru.

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

52

Сайт e5.ru.

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

53

Сайт ninobrutti.ru.

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

54

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

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

55

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

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

56

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

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

57

Сайт e5.ru.

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

58

Сайт e5.ru.

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

59

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

60

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

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

61

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

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

62

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

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

63

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

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

64

Сайт kupibrand.by.

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

65

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

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

66

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

67

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

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

68

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

ВОПРОСЫ

69

Gtalk, mail: a.mazurkievich@artox-media.by Facebook: …/artemSergeich

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

70

Книги:

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

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

Сайты:

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

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

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

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