Проектирование взаимодействия как удобство сайта конвертируется в деньги [ Андрей Муравьёв, генеральный директор ООО «Веб Креатор» ] +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