как удобство сайта конвертируется в деньги

Проектирование взаимодействия
как удобство сайта конвертируется в деньги
[ Андрей Муравьёв, генеральный директор ООО «Веб Креатор» ]
+7 (495) 661-83-21 | office@web-creator.ru
Техноярость
Интерфейсы многих сайтов сложны и непонятны…
Это действительно раздражает пользователей.
Проблемы:
― Поиск нужной информации трудозатратен
и часто не приносит результатов;
― Навигация настолько сложна,
что многие пользователи теряются;
― Решение даже самых простых задач
отнимает массу времени;
― Своих целей на сайте достигают не все.
2
Цена ошибок интерфейса
Что же происходит, когда посетители сайта
не справляются с интерфейсом сайта?
Пользователи голосуют за коммерческие сайты
своим кошельком и цена ошибок измеряется
в денежных единицах.
― Потенциальные клиенты раздражены
и часть из них просто покидает сайт;
― Нагрузка на консультантов нерациональная,
так как сайт не отвечает на элементарные вопросы;
― Интернет-продажи падают или «на нуле».
3
Идеальный интерфейс
Пример максимально простого, удобного и практичного
пользовательского интерфейса:
4
Укрощение интерфейса
Нужны эффективный маркетинг и продажи?
Делайте сайты простыми и удобными.
― Сформулируйте цели и придерживайтесь их.
― Проектируйте взаимодействие в первую очередь
(то есть до создания дизайна и программирования).
― Тестируйте интерфейс и анализируйте
поведение посетителей.
5
Сформулируйте цели
Основная цель любого сайта – удовлетворение
потребностей посетителей. Достижение целей клиента
способствует достижению целей бизнеса.
Самый важный вопрос:
― Кому нужен сайт и зачем?
Выделите группы пользователей, дайте им имена
и охарактеризуйте в нескольких предложениях.
Опишите цели, которые преследуют эти посетители.
Выясните, что для них действительно важно.
Проще и эффективнее проектировать не для всех
посетителей сразу, а для конкретных персонажей.
6
Напишите сценарий
Сценарии использования – это последовательность задач,
которые решает пользователь на пути к достижению
своей цели.
7
1.
Опишите простой пошаговый сценарии использования
сайта, исходя из целей посетителя.
2.
Включите в этот сценарий опциональные шаги,
которые нужны не всем посетителям.
3.
Подумайте, что может помешать пользователю.
И упростите прохождение сценария.
Расставляйте приоритеты
Если у сайта широкая аудитория, решаемых задач очень
много и хочется «серьёзного функционала».
― Ориентируйтесь на большинство пользователей
или на «самое слабое звено».
― Выносите решение опциональных задач на
дополнительные страницы. Не перегружайте
интерфейс.
― Помните про конечную цель посетителя и про цели
бизнеса. Не сбивайте пользователей с пути.
8
Указывайте путь
Понятная структура и удобная навигация лежат в основе
любого успешного коммерческого сайта.
― Структурируйте информацию: группируйте похожие
элементы и выделяйте важное.
― Не дайте пользователю потеряться: показывайте
текущее местоположение и направляйте его к цели.
― Помогите пользователю найти нужную информацию:
используйте инструменты поиска и контекстные
(привязанные к содержанию) ссылки.
9
Создавайте прототипы
Важно наглядно оценивать удобство спроектированного
сайта еще на ранних этапах разработки.
― Рисуйте блок-схемы процессов.
― Создавайте схематичные изображения
ключевых страниц.
― Делайте простые демонстрационные сайты
и тестируйте их.
Собранная таким образом информация поможет
избежать многих ошибок на этапах дизайна и
программирования.
10
Тестирование
Любой интерфейс надо тестировать.
И чем раньше – тем лучше.
― Начинайте тестировать интерфейс на самых ранних
этапах, оптимально – на прототипах.
― Оценивайте дизайн не только с эстетической точки
зрения, но и исходя из сценариев использования.
― Ищите ошибки в программной части и держите
функционал «в рамках», не позволяйте опциональным
функциям влезать в основной процесс.
Помните о целях.
11
Аналитика
Все теории требуют проверки на практике.
― Собирайте данные о посещаемости сайта,
анализируйте их и находите закономерности.
― Выявляйте основные «точки выхода» и выясняйте
причины ухода посетителей с сайта.
― Вносите изменения: переносите невостребованные
функции и информацию в опциональные разделы.
― Тестируйте новые функции на реальной,
но количественно ограниченной аудитории.
12
Формулируем цели
Рассмотрим процесс проектирования взаимодействия на
примере интернет-магазина бытовой техники.
Кто: Василий Иванович Пупкин.
Информация:
Нашёл сайт магазина в поисковой системе, сидит на работе
и собирается купить чайник. В чайниках разбирается слабо.
Проводит много времени на просторах интернета (чаще
всего в социальных сетях) и в целом неплохо
ориентируется на большинстве сайтов.
Цель:
Приобрести чайник.
13
Пишем сценарий
Василий пришёл на главную страницу нашего сайта.
Шаг 1. Главная страница → Чайники
Главное:
― У нас есть чайники. «Жми сюда!»
Идеи:
― Товарная категория должна быть заметной
на главной странице.
― Слишком много категорий. Надо их группировать.
Чайники в категорию «Для кухни».
14
Пишем сценарий
Василий видит много чайников. Глаза разбегаются.
Шаг 2. Чайники. Выбор модели.
Главное:
― С выбором надо помочь.
Идеи:
― Отбор по критериям (цена, ТМ).
Остальные параметры при выборе менее важны.
― Нужны хорошие крупные фотографии каждого товара.
― Надо анонсировать здесь акции/новинки
по данному направлению.
― Советы и готовые решения будут полезны.
15
Пишем сценарий
Василий смотрит конкретную модель чайника.
Шаг 3. Чайник. Просмотр описания.
Главное:
― Убедить купить или предложить альтернативу.
― Предложить сопутствующие товары.
Идеи:
― Хорошие фотографии (чем больше – тем лучше),
понятное описание, расшифровка терминов.
― Блоки «сопутствующие товары» / «похожие модели».
16
Пишем сценарий
Василий кладёт чайник в корзину и приступает к
оформлению заказа.
Шаг 4. Оформление заказа.
Главное:
― Упростить процесс.
Идеи:
― Не требовать регистрации на сайте.
― Меньше обязательных полей (оптимально: имя и
контакты). Остальное – опционально.
― Меньше шагов оформления (оптимально 1 страница).
17
Частые ошибки
«Некогда заниматься проектированием,
этот сайт еще вчера надо было запустить!»
1.
Четкого представления о конечном результате
нет ни у Заказчика, ни у Исполнителя.
2.
Результат не соответствует реальным требованиям
рынка – работать с сайтом неудобно.
3.
Приходится либо переделывать «с нуля»
(дополнительные затраты времени и денег),
либо оставлять «как есть» (потеря клиентов).
Вывод:
не стоит экономить время на инвестициях в интерфейс.
18
Частые ошибки
«Сайт должен быть произведением искусства!»
― Красота требует жертв. Очень жаль, если этой жертвой
становится потенциальный клиент.
― Красивая картинка чаще всего удобным интерфейсом
не становится.
― Этот сайт может нравится людям, но пользоваться
они будут чем-нибудь более простым и удобным.
Вывод:
Баланс эстетики и эргономики достижим. Только начинать
надо с проектирования взаимодействия, а не с дизайна.
19
Частые ошибки
«Пользователь сайта должен иметь все возможные
инструменты, несколько невозможных и пару просто
невероятных»
― Стремление насытить интерфейс сразу всей доступной
функциональностью не имеет рациональных причин.
― Пользоваться таким сайтом могут только специально
обученные пользователи.
― Экономически неоправданный подход для сайтов
с широкой аудиторией.
Вывод:
Не стоит перегружать интерфейс множеством функций,
которые нужны только каждому сотому посетителю.
20
Частые ошибки
«Логика взаимодействия и интерфейс?
Пусть этим программисты занимаются!»
― Программисты это любят... Но они делают интерфейсы
для таких же IT-специалистов, как и они.
― Мышление разработчиков достаточно сильно
отличается от мышления даже «продвинутых»
пользователей.
― Интерфейс «для айтишников» – это жестокость по
отношению к пользователям.
Вывод:
Проектирование взаимодействия – это задача
гуманитарная, а не техническая.
21
Частые ошибки
«Сайт готов. Теперь интерфейсом можно не заниматься.»
― Смысл тестирования и анализа посещаемости в
улучшении конверсии и увеличении продаж.
― Упростить и сделать удобнее можно практически
любой интерфейс.
― Проектирование на основе теорий всегда требует
проверки на практике.
Вывод:
Тестируйте интерфейс, анализируйте поведение
пользователей. Улучшайте интерфейс и продажи будут
увеличиваться.
22
Спасибо за внимание!
[ Андрей Муравьёв ]
ООО «Веб Креатор»
office@web-creator.ru
+7 (495) 661-83-21