ЮЗАБИЛИТИ
Мазурк евич Артем
Линейный рук оводитель отдела юзабилити и UX
ПЛАН ОЖИДАНИЙ
2
1.
2.
3.
4.
5.
6.
7.
8.
СОДЕРЖАНИЕ
3
Понятие юзабилити
Связь SEO и юзабилити
Поиск овым системам важно,
к ак выг лядит Ваш сайт
Как сделать сайт
эффек тивнее( общие принципы)
Юзабилити- ошибк и
интернет- маг азинов
Юзабилити- ошибк и
к онтентных сайтов
Инструменты для анализа
пользователей
ПОНЯТИЕ ЮЗАБИЛИТИ
4
степень эффек тивности,
продук тивности и
удовлетворенности, с к оторой
продук т может использоваться
определенным пользователем, в
определенном к онтек сте
использования, для достижения
определенных целей
ПОНЯТИЕ ЮЗАБИЛИТИ
5
степень эффек тивности,
продук тивности и
удовлетворенности, с к оторой
продук т может использоваться
определенным пользователем, в
определенном к онтек сте
использования, для достижения
определенных целей
6
ПОЛЬЗОВАТЕЛИ, КОНТЕКСТ,
ЦЕЛИ
7
ФУНКЦИОНАЛЬНАЯ СВАЛКА
ДИАГРАММА ПУТЕЙ
Главная
страница
Список
к редитов
Страница
к редита
Onl i ne- заявк а
Пок упк а по
телефону
Отделения
банк а
Onl i ne-
к онсультант
Степан
потенциальный к лиент
- Приоритетныйпуть
- Альтернативные
пути
Второстепенная
навиг ация
Контак тный телефон в
шапк е и «зак азать
звонок »
Ссылк а в шапк е
«Задать вопрос
Onl i ne»
9
ЭКСКУРС В ИСТОРИЮ
10
ЮЗАБИЛИТИ
1980
г од
11
ЭФФЕКТИВНОСТЬ ПРОВЕДЕНИЯ РАБОТ ПО
ЮЗАБИЛИТИ
10- 20%
12
СВЯЗЬ SEO И ЮЗАБИЛИТИ
13
ДИАГРАММА ХАЙПА
14
ПОИСКОВЫМ МАШИНАМ ВАЖНО КАК
ВЫГЛЯДИТ ВАШ САЙТ
201
1Алг оритмы, к оторые отслеживают
удобно ли пользоваться сайтом.
15
ПОИСКОВЫМ МАШИНАМ ВАЖНО КАК
ВЫГЛЯДИТ ВАШ САЙТ
ТРАДИЙЦИОННАЯ ДИАГРАММА ПУТЕЙ
Главная
страница
Список
к редитов
Страница
к редита
Отделения
банк а
Контак ты
Иннок ентий
к лиент к онк урентов
- Приоритетныйпуть
- Альтернативный
путь
Пок упк а по
телефону
17
ПОИСКОВЫМ МАШИНАМ ВАЖНО
Наск ольк о быстро заг ружается
сайт.
18
ПОИСКОВЫМ МАШИНАМ ВАЖНО
Имеется ли в лог отипе сайта ссылк а
на г лавную страницу
19
ПОИСКОВЫМ МАШИНАМ ВАЖНО
Наск ольк о
г рамотно
оформлено
нижнее меню.
Наск ольк о
г рамотно
оформлена
страница с
к онтак тными
данными.
20
ПОИСКОВЫМ МАШИНАМ ВАЖНО
.Как оформлены тек сты
Стоит обратить внимание на дизайн тек стов. Разделены ли они на
абзацы. Есть ли между ними достаточные промежутк и,
обеспечивающие удобство чтения. Наск ольк о велик и/ малы эти
абзацы. Имеется ли тег <h1> в заг оловк ах.
Объем тек стовой информации, а так же процентное содержание
к лючевых слов на странице. Помните, что, если в тек сте
содержится более 5% к лючевых слов, поиск овый робот может с
лег к остью посчитать их за спам.
Присутствуют ли в тек сте г ипер- ссылк и и к уда они ведут. Робот
в состоянии проверить так ую информацию. Если проставлять в
тек сте ссылк и на ту же страницу, на к оторой расположен сам
тек ст - г ипер- ссылк ой это считаться не будет.
21
КАК СДЕЛАТЬ САЙТ ЭФФЕКТИВНЕЕ?
22
КОНТАКТНАЯ ИНФОРМАЦИЯ
Хороший пример
dostavka.ru
23
КОНТАКТНАЯ ИНФОРМАЦИЯ
Ук ажите все
свои к онтак тные
данные:
телефон, e
mai l , Skype,
I CQ и т. д.
Ук азывать
точное время
работы
оператора и
офиса.
Наг лядный
пример можем
наблюдать на
сайте 21vek. by
24
КНОПКА «КУПИТЬ»
( «ЗАКАЗАТЬ»)Решении купить
товар
осуществляется
с помощью
« »кнопки Купить
« ».либо Заказать
–Если ее нет
покупателя тоже
.нет
Как не стоит делать. Пример к ак было реализовано на сайте
col l et t obi anco. com.
25
ПЕРЕХОД В КОРЗИНУ С ЛЮБОЙ
СТРАНИЦЫ
Пок упатель в
любой момент
должен иметь
возможность
посмотреть,
к ак ой товар
он уже
выбрал.
26
ЦЕНА РЯДОМ С КАЖДЫМ ТОВАРОМ
Возможно с точк и продвижения это хороший ход, но к
сожалению с точк и зрения юзабилити так поступать нельзя.
Пример взят с сайта oz. by
27
ИНФОРМАЦИЯ ОБ ОПЛАТЕ И ПОЛУЧЕНИИ
ТОВАРА
Посетители
сайта
интересуются
информацией о
получении и
оплате товара
к ак при входе
на сайт, так и
в процессе
перемещения по
нему. Неплохая
реализация на
сайте
f rukt ovoz. ru.
ОБНОВЛЕНИЕ НОВОСТЕЙ И ОТОБРАЖЕНИЕ
В БРАУЗЕРАХ
28
Не обновляемый раздел
«Новости» вызывает
вопросы работает ли сайт
и предоставляет ли он
услуг и.
То, что удобно и к расиво в
одном браузере, может
ок азаться совершенно
непонятно в друг ом.
КАРТОЧКА ТОВАРА
29
Знак омство с
товарами в интернете
происходит через их
фотог рафии и
тек стовое описание.
Удачный пример на сайте
24moda. by
ЮЗАБИЛИТИ- ОШИБКИ ИНТЕРНЕТ МАГАЗИНОВ
30
ЧЕГО НЕ ХВАТАЕТ?
31
ПОЧЕМУ НУЖНО ПОКУПАТЬ ИМЕННО В
ЭТОМ МАГАЗИНЕ?
32
Количество отк азов – в 2
раза
Сайт ci f roci t y. ru
БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА
33
А Вы знаете к то входит в Вашу ЦА? Хороший пример mvi deo. ru.
БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА
34
Сайт
mvi deo. ru.
БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА
35
КАРТОЧКА ТОВАРА
36
Сайт
mvi deo. ru.
Изменить
БЫСТРОЕ ОФОРМЛЕНИЕ ТОВАРА
37
m. t verhi t . ru
БАННЕРНАЯ СЛЕПОТА
38
БАННЕРНАЯ СЛЕПОТА
39
ОФОРМЛЕНИЕ ЗАКАЗА
40
Пример к ак делать не стоит.
ОФОРМЛЕНИЕ ЗАКАЗА
41
Пример к ак делать не стоит. Сайт books. ru.
ОФОРМЛЕНИЕ ЗАКАЗА
42
Сайт f rukt ovoz. ru.
ОФОРМЛЕНИЕ ЗАКАЗА
43
Сайт f oodband. ru
ОФОРМЛЕНИЕ ЗАКАЗА
44
Сайт
remesl o4u. ru
ОФОРМЛЕНИЕ ЗАКАЗА
45
Сайт
remesl o4u. ru
ОФОРМЛЕНИЕ ЗАКАЗА
46
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
47
Сайт next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
48
Сайт next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
49
Сайт
next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
50
Сайт
next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
51
Сайт
next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
52
Сайт
next st ore. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
53
Сайт e5. ru.
СПОСОБЫ ДОСТАВКИ И ОПЛАТЫ
54
Сайт e5. ru.
СПИСОК ТОВАРОВ
55
Сайт ni nobrut t i . ru.
ВАЖНЫЕ ЭЛЕМЕНТЫ
56
Пример к ак делать не стоит shef kuhni . by.
57
ВАЖНЫЕ
ЭЛЕМЕНТЫ
БОЛЬШОЙ ВЫБОР
58
Не оставляйте пок упателя
наедине со списк ом из 200
товаров, десятк ом фильтров
и сортировок . Чем больше
нужно выбирать, тем меньше
вероятность пок упк и.
БОЛЬШОЙ ВЫБОР
59
Хороший пример на сайте e5. ru.
БОЛЬШОЙ ВЫБОР
60
Сайт e5. ru.
БОЛЬШОЙ ВЫБОР
61
Сайт e5. ru.
ТРЕБОВАНИЕ ЛИШНИХ ДЕЙСТВИЙ
62
КАРТОЧКА ТОВАРОВ
63
Решение «не к упить» всег да
принять значительно проще,
чем к упить. Пример к ак
делать не стоит posuda. ru.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
64
Базовый принцип юзабилити. Человек должен всег да понимать,
что ег о ждет после требуемог о действия. Поэтому при
оформлении зак аза название к нопок «Дальше» либо «Продолжить»
не г оворят ни о чем.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
65
Лучше всег о
ук азывать
к оличество
шаг ов и то, к
к ак ому из них
ты
переходишь.
Хорошая
реализация на
сайте
next st ore. ru.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
66
Как делать не стоит
kupi brand. by.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
67
Сайт kupi brand. by.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
68Сайт f avori t - mot ors. ru.
Различные пунк ты меню ведут на
одну и ту же страницу. У
пользователей не должно возник ать
чувства тог о, что разные слова,
ситуации или действия мог ут
означать то же самое. Ссылк и с
аналог ичными действиями и
функ циями должны выг лядеть
аналог ично, иначе пользователи не
понимая тог о к уда попали, начинают
совершать лишние действия, к оторые
ведут к уменьшению к оличества
пользователей г отовых дойти до
к лючевог о этапа.
ПРИНЦИП ОЖИДАЕМОГО РЕЗУЛЬТАТА
69Сайт f avori t - mot ors. ru.
АНАЛИЗ ПОВЕДЕНИЯ
ПОЛЬЗОВАТЕЛЕЙ
70
НА ЧТО СТОИТ ОБРАЩАТЬ
ВНИМАНИЕ?
источник посещаемости,
поиск овые запросы,
техническ ие параметры к омпьютера,
вебвизор,
к арта посещений,
диаг рамма путей.
71
НА ЧТО СТОИТ ОБРАЩАТЬ
ВНИМАНИЕ?
72
Конструк тор отчетов
НА ЧТО СТОИТ ОБРАЩАТЬ
ВНИМАНИЕ?
73
Карта ск роллинг а
ВОПРОСЫ
74
Gtalk, mail:
a.mazurkievich@artox-media.by
Facebook: …/artemSergeich
ПОЛЕЗНЫЕ РЕСУРСЫ
75
Книг и:
Алан Купер - «Психбольница в рук ах пациентов»
Стив Круг - «Веб- дизайн: к ниг а Стива Круг а, или ` не
заставляйте меня думать! ` »
Сайты:
ht t p: //usabi l i t y. by - сообщество специалистов по юзабилити,
проек тированию пользовательск их интерфейсов и user
exper i ence Беларуси
ht t p: //f resh. gui . ru - блог к омпании UI Desi gn Gr oup
ht t p: //www. yout ube. com/user/usabi l i t yl ab - к анал к омпании
Usabi l i t yLab
ht t p: //www. j vet rau. com – блог Юрия Ветрова об интерфейсах

юзабилити