Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Юзабилити кунг фу
секретные техники
улучшения
поведенческих
факторов
Мария Чайкина
Ашманов и партнеры
Ведущий юзабилити специалист в
«Ашманов и партнеры»
• В юзабилити с 2006 года (9 лет)
• 7 лет работала в Usabilitylab
• Пр...
Поведенческие факторы внутри сайта
• Показатель отказов
• Время пребывания на сайте
• Количество просмотренных страниц
• П...
Ситуация:
• Нужно оценить сайт с точки зрения
юзабилити
• Улучшить его поведенческие факторы
• Времени мало
О боже, что
де...
Если брать за пример юзабилити сайты в топе,
то есть риск ошибиться
Иногда сайты могут быть в топе и соответствовать алгор...
Хороший интерфейс может быть у сайта,
которого еще нет даже на первой странице
органического поиска
Прием № 1
Шапка сайта, как и
голова человека,
должна
знакомиться с
пользователем и
рассказывать о
себе
Вот телефон,
звоните или мы
перезвоним
Мы работаем
без выходных!
Мы давно на
рынке!
Работаем с 1900 года до н.э.
Каждый де...
Пример №1. Шапка сайта
ДО
ПОСЛЕ
Пример №2. Главная страница
ДО ПОСЛЕ
Отказы по сайту 2 раза
Отказы на главной на 15%
Конверсия в контакты на 8%
Прием № 2
Сайт должен в
красках рассказать о
своих достоинствах
Пример № 3. Преимущества компании
ДО
ПОСЛЕ
Прием № 3
Анализ полей
формы заявки
Используем Аналитику форм для анализа
Чем меньше полей в форме заявки, тем
лучше. Спорные поля нужно убирать
Удаление этого поля повысило
конверсию формы на 34%...
Прием № 3
Если на
некликабельное
нажимают, то его
нужно делать
кликабельным
Кликабельное?
НЕТ
Кликабельное?
НЕТ!
Как найти некликабельное кликабельное?
Карта кликов Яндекс.Метрика
ДО
ПОСЛЕ
Теперь
названия и
картинки
кликабельны
Прием № 4
Меню должно протягивать
пользователю руку помощи,
помогая, а не мешая
ориентироваться на сайте
Пример №1. Сверх длинное меню
Меню занимает
несколько экранов
прокрутки вниз
Пример №3. Сверх керативное меню
Пример №2. Выбранный пункт меню не
подсвечивается
ДО
ПОСЛЕ
Пример №3. Очень большая шапка,
меню в нестандартном месте
ДО
ПОСЛЕ
Глубина просмотра при входе на главную на 1 стр
Время ...
Прием № 5
Закон близости в
интерфейсе
Закон близости
С кем эта девушка?
Закон близости
С кем эта девушка?
Объекты, расположенные близко,
воспринимаются связанно
К какому туру
относится цена?
Прием № 6
Чем слабее
мотивация
пользователя
читать текст, тем
больший упор
нужно делать на
оформление и
инфографику
Сначала проверяем контрастность текста
http://www.bl2.ru/
Разбиваем текст на кусочки
Набор коротких кусочков притягивает больше,
чем длинный текст
Про картинки
Желательно делать к
картинкам подписи
Если подписали, то
расположите надпись под
картинкой
Пример № 4
ДО ПОСЛЕ
Увеличена контрастность шрифта
Добавлены графические маркеры списка
Добавлены фотографии
Добавлен приз...
Прием № 7
Как сделать новости
на сайте полезными
для пользователей
Размещать там, где они актуальны
Например, информация об отделениях – в разделе «Отделения»
Зацепить внимание новостями
Мария Чайкина
mchaykina@gmail.com
http://slideshare.net/fayona
Спасибо за внимание
Upcoming SlideShare
Loading in …5
×

РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих факторов на сайте

288 views

Published on

Презентация с доклада на конференции РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих факторов на сайте

Published in: Internet
  • Be the first to comment

  • Be the first to like this

РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих факторов на сайте

  1. 1. Юзабилити кунг фу секретные техники улучшения поведенческих факторов Мария Чайкина Ашманов и партнеры
  2. 2. Ведущий юзабилити специалист в «Ашманов и партнеры» • В юзабилити с 2006 года (9 лет) • 7 лет работала в Usabilitylab • Провела юзабилити-тестирование более чем с 400 пользователями • Сделала более 140 проектов • Написала 5 статей на тему юзабилити
  3. 3. Поведенческие факторы внутри сайта • Показатель отказов • Время пребывания на сайте • Количество просмотренных страниц • Показатель возвратов на сайт • И другие
  4. 4. Ситуация: • Нужно оценить сайт с точки зрения юзабилити • Улучшить его поведенческие факторы • Времени мало О боже, что делать?
  5. 5. Если брать за пример юзабилити сайты в топе, то есть риск ошибиться Иногда сайты могут быть в топе и соответствовать алгоритму поиска, но это не значит, что у них все хорошо с юзабилити Первая страница Яндекс
  6. 6. Хороший интерфейс может быть у сайта, которого еще нет даже на первой странице органического поиска
  7. 7. Прием № 1 Шапка сайта, как и голова человека, должна знакомиться с пользователем и рассказывать о себе
  8. 8. Вот телефон, звоните или мы перезвоним Мы работаем без выходных! Мы давно на рынке! Работаем с 1900 года до н.э. Каждый день с 10:00 до 17:00
  9. 9. Пример №1. Шапка сайта ДО ПОСЛЕ
  10. 10. Пример №2. Главная страница ДО ПОСЛЕ Отказы по сайту 2 раза Отказы на главной на 15% Конверсия в контакты на 8%
  11. 11. Прием № 2 Сайт должен в красках рассказать о своих достоинствах
  12. 12. Пример № 3. Преимущества компании ДО ПОСЛЕ
  13. 13. Прием № 3 Анализ полей формы заявки
  14. 14. Используем Аналитику форм для анализа
  15. 15. Чем меньше полей в форме заявки, тем лучше. Спорные поля нужно убирать Удаление этого поля повысило конверсию формы на 34% Форма заявки на услугу для юр. лиц содержала поле «Тип бизнеса»
  16. 16. Прием № 3 Если на некликабельное нажимают, то его нужно делать кликабельным
  17. 17. Кликабельное? НЕТ
  18. 18. Кликабельное? НЕТ!
  19. 19. Как найти некликабельное кликабельное? Карта кликов Яндекс.Метрика ДО ПОСЛЕ Теперь названия и картинки кликабельны
  20. 20. Прием № 4 Меню должно протягивать пользователю руку помощи, помогая, а не мешая ориентироваться на сайте
  21. 21. Пример №1. Сверх длинное меню Меню занимает несколько экранов прокрутки вниз
  22. 22. Пример №3. Сверх керативное меню
  23. 23. Пример №2. Выбранный пункт меню не подсвечивается ДО ПОСЛЕ
  24. 24. Пример №3. Очень большая шапка, меню в нестандартном месте ДО ПОСЛЕ Глубина просмотра при входе на главную на 1 стр Время на сайте при входе на главную на 1 мин
  25. 25. Прием № 5 Закон близости в интерфейсе
  26. 26. Закон близости С кем эта девушка?
  27. 27. Закон близости С кем эта девушка? Объекты, расположенные близко, воспринимаются связанно
  28. 28. К какому туру относится цена?
  29. 29. Прием № 6 Чем слабее мотивация пользователя читать текст, тем больший упор нужно делать на оформление и инфографику
  30. 30. Сначала проверяем контрастность текста http://www.bl2.ru/
  31. 31. Разбиваем текст на кусочки Набор коротких кусочков притягивает больше, чем длинный текст
  32. 32. Про картинки Желательно делать к картинкам подписи Если подписали, то расположите надпись под картинкой
  33. 33. Пример № 4 ДО ПОСЛЕ Увеличена контрастность шрифта Добавлены графические маркеры списка Добавлены фотографии Добавлен призыв к действию Добавлены блоки, ведущие на др. стр.
  34. 34. Прием № 7 Как сделать новости на сайте полезными для пользователей
  35. 35. Размещать там, где они актуальны Например, информация об отделениях – в разделе «Отделения» Зацепить внимание новостями
  36. 36. Мария Чайкина mchaykina@gmail.com http://slideshare.net/fayona Спасибо за внимание

×