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

Юзабилити кунг фу секретные техники улучшения

поведенческихфакторов

Мария Чайкина Ашманов и партнеры

Ведущийюзабилити специалист в

« »Ашманов и партнеры• 2006 (9 )Вюзабилити с года лет

• 7 лет работала в Usabilitylab

• -Провелаюзабилити 400 тестирование более чем с

пользователями

• 140 Сделала более проектов

• 5 Написала статей на темуюзабилити

Поведенческиефакторывнутрисайта• Показатель отказов

• Время пребывания на сайте

• Количество просмотренных страниц

• Показатель возвратов на сайт

• Идругие

:Ситуация

• Нужно оценить сайт с точки зрения юзабилити

• Улучшить его поведенческие

факторы

• Времени мало , О боже что

?делать

Если брать за примерюзабилити сайтыв, топе

то есть риск ошибиться Иногда сайты могут быть в топе и соответствовать алгоритму

, , поиска но это не значит что у них все хорошо с юзабилити

Первая страница Яндекс

Хороший интерфейс может быть у, сайта которого еще нет даже на первой

странице органического поиска

№ 1Прием

, Шапка сайта как и голова

, человека должна

знакомиться с пользователем и

рассказывать осебе

, Вот телефон звоните или мы

перезвоним

Мыработаем !без выходных

Мыдавно на!рынке

1900 Работаем с года до. .н э

10:00 Каждый день с до17:00

Пример №1. Шапка сайта

ДО

ПОСЛЕ

Пример №2. Главная страница

ДО ПОСЛЕ

Отказы по сайту 2 раза

Отказы на главной 15%на

Конверсия в контакты 8%на

№ 2Прием

Сайт должен в красках

рассказать о своих

достоинствах

№ 3. Пример Преимуществакомпании

ДО

ПОСЛЕ

№ 3Прием

Анализ полей формы заявки

ИспользуемАналитикуформ дляанализа

Чемменьшеполей вформе, . заявки тем лучше Спорные поля

нужно убирать

Удаление этого поля повысило

конверсиюформы 34%на

. Форма заявки на услугу дляюр лиц « »содержала поле Тип бизнеса

№ 3Прием

Если на некликабельное

, нажимают то его нужно делать

кликабельным

?Кликабельное

НЕТ

?Кликабельное

!НЕТ

Какнайти некликабельное?кликабельное .Карта кликов ЯндексМетрика

ДО

ПОСЛЕ

Теперь названия и

картинкикликабельн

ы

№ 4Прием

Меню должно протягивать

пользователю руку, , помощи помогая а не

мешая ориентироваться на сайте

№1.Пример Сверх длинное меню

Меню занимает несколько экранов прокрутки вниз

№3. Пример Сверх керативное меню

№2. Пример Выбранный пункт меню не подсвечивается

ДО

ПОСЛЕ

Пример №3. , Очень большаяшапка меню в нестандартном месте

ДО

ПОСЛЕ

Глубина просмотра при входе на главную 1 настр Время на сайте при входе на главную 1 намин

№ 5Прием

Закон близости винтерфейсе

Закон близости

?С кем эта девушка

Закон близости

?С кем эта девушка

, , Объекты расположенные близко воспринимаются связанно

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

№ 6Прием

Чем слабее мотивация

пользователя , читать текст тем

больший упор нужно делать на

оформление и инфографику

Сначала проверяемконтрастностьтекстаhttp://www.bl2.ru/

Разбиваем текст на кусочки Набор коротких кусочков притягивает

, больше чем длинный текст

Про картинки

Желательно делать к картинкам подписи

, Если подписали то расположите надпись

под картинкой

№ 4Пример

ДО ПОСЛЕ

Увеличена контрастностьшрифта Добавлены графические маркеры

списка Добавленыфотографии

Добавлен призыв к действию , . .Добавлены блоки ведущие на др стр

№ 7Прием

Как сделать новости на сайте

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

, Размещать там где они актуальны, – Например информация об отделениях в разделе

« »Отделения

Зацепить внимание новостями

Мария Чайкина[email protected]

http://slideshare.net/fayona

Спасибо за внимание