Проектирование взаимодействия как удобство сайта конвертируется в деньги [ Андрей Муравьёв, генеральный директор ООО «Веб Креатор» ] +7 (495) 661-83-21. - презентация

1 Проектирование взаимодействия как удобство сайта конвертируется в деньги [ Андрей Муравьёв, генеральный директор ООО «Веб Креатор» ] +7 (495) |

2 Техноярость Интерфейсы многих сайтов сложны и непонятны… Это действительно раздражает пользователей. Проблемы: Поиск нужной информации трудозатратен и часто не приносит результатов; Навигация настолько сложна, что многие пользователи теряются; Решение даже самых простых задач отнимает массу времени; Своих целей на сайте достигают не все. 2

3 Цена ошибок интерфейса Что же происходит, когда посетители сайта не справляются с интерфейсом сайта? Пользователи голосуют за коммерческие сайты своим кошельком и цена ошибок измеряется в денежных единицах. Потенциальные клиенты раздражены и часть из них просто покидает сайт; Нагрузка на консультантов нерациональная, так как сайт не отвечает на элементарные вопросы; Интернет-продажи падают или «на нуле». 3

4 Идеальный интерфейс 4 Пример максимально простого, удобного и практичного пользовательского интерфейса:

5 Укрощение интерфейса Нужны эффективный маркетинг и продажи? Делайте сайты простыми и удобными. Сформулируйте цели и придерживайтесь их. Проектируйте взаимодействие в первую очередь (то есть до создания дизайна и программирования). Тестируйте интерфейс и анализируйте поведение посетителей. 5

6 Сформулируйте цели Основная цель любого сайта – удовлетворение потребностей посетителей. Достижение целей клиента способствует достижению целей бизнеса. Самый важный вопрос: Кому нужен сайт и зачем? Выделите группы пользователей, дайте им имена и охарактеризуйте в нескольких предложениях. Опишите цели, которые преследуют эти посетители. Выясните, что для них действительно важно. Проще и эффективнее проектировать не для всех посетителей сразу, а для конкретных персонажей. 6

7 Напишите сценарий Сценарии использования – это последовательность задач, которые решает пользователь на пути к достижению своей цели. 1.Опишите простой пошаговый сценарии использования сайта, исходя из целей посетителя. 2.Включите в этот сценарий опциональные шаги, которые нужны не всем посетителям. 3.Подумайте, что может помешать пользователю. И упростите прохождение сценария. 7

8 Расставляйте приоритеты Если у сайта широкая аудитория, решаемых задач очень много и хочется «серьёзного функционала». Ориентируйтесь на большинство пользователей или на «самое слабое звено». Выносите решение опциональных задач на дополнительные страницы. Не перегружайте интерфейс. Помните про конечную цель посетителя и про цели бизнеса. Не сбивайте пользователей с пути. 8

9 Указывайте путь Понятная структура и удобная навигация лежат в основе любого успешного коммерческого сайта. Структурируйте информацию: группируйте похожие элементы и выделяйте важное. Не дайте пользователю потеряться: показывайте текущее местоположение и направляйте его к цели. Помогите пользователю найти нужную информацию: используйте инструменты поиска и контекстные (привязанные к содержанию) ссылки. 9

10 Создавайте прототипы Важно наглядно оценивать удобство спроектированного сайта еще на ранних этапах разработки. Рисуйте блок-схемы процессов. Создавайте схематичные изображения ключевых страниц. Делайте простые демонстрационные сайты и тестируйте их. Собранная таким образом информация поможет избежать многих ошибок на этапах дизайна и программирования. 10

11 Тестирование Любой интерфейс надо тестировать. И чем раньше – тем лучше. Начинайте тестировать интерфейс на самых ранних этапах, оптимально – на прототипах. Оценивайте дизайн не только с эстетической точки зрения, но и исходя из сценариев использования. Ищите ошибки в программной части и держите функционал «в рамках», не позволяйте опциональным функциям влезать в основной процесс. Помните о целях. 11

12 Аналитика Все теории требуют проверки на практике. Собирайте данные о посещаемости сайта, анализируйте их и находите закономерности. Выявляйте основные «точки выхода» и выясняйте причины ухода посетителей с сайта. Вносите изменения: переносите невостребованные функции и информацию в опциональные разделы. Тестируйте новые функции на реальной, но количественно ограниченной аудитории. 12

13 Формулируем цели Рассмотрим процесс проектирования взаимодействия на примере интернет-магазина бытовой техники. Кто: Василий Иванович Пупкин. Информация: Нашёл сайт магазина в поисковой системе, сидит на работе и собирается купить чайник. В чайниках разбирается слабо. Проводит много времени на просторах интернета (чаще всего в социальных сетях) и в целом неплохо ориентируется на большинстве сайтов. Цель: Приобрести чайник. 13

14 Пишем сценарий Василий пришёл на главную страницу нашего сайта. Шаг 1. Главная страница Чайники Главное: У нас есть чайники. «Жми сюда!» Идеи: Товарная категория должна быть заметной на главной странице. Слишком много категорий. Надо их группировать. Чайники в категорию «Для кухни». 14

15 Пишем сценарий Василий видит много чайников. Глаза разбегаются. Шаг 2. Чайники. Выбор модели. Главное: С выбором надо помочь. Идеи: Отбор по критериям (цена, ТМ). Остальные параметры при выборе менее важны. Нужны хорошие крупные фотографии каждого товара. Надо анонсировать здесь акции/новинки по данному направлению. Советы и готовые решения будут полезны. 15

16 Пишем сценарий Василий смотрит конкретную модель чайника. Шаг 3. Чайник. Просмотр описания. Главное: Убедить купить или предложить альтернативу. Предложить сопутствующие товары. Идеи: Хорошие фотографии (чем больше – тем лучше), понятное описание, расшифровка терминов. Блоки «сопутствующие товары» / «похожие модели». 16

17 Пишем сценарий Василий кладёт чайник в корзину и приступает к оформлению заказа. Шаг 4. Оформление заказа. Главное: Упростить процесс. Идеи: Не требовать регистрации на сайте. Меньше обязательных полей (оптимально: имя и контакты). Остальное – опционально. Меньше шагов оформления (оптимально 1 страница). 17

18 Частые ошибки «Некогда заниматься проектированием, этот сайт еще вчера надо было запустить!» 1.Четкого представления о конечном результате нет ни у Заказчика, ни у Исполнителя. 2.Результат не соответствует реальным требованиям рынка – работать с сайтом неудобно. 3.Приходится либо переделывать «с нуля» (дополнительные затраты времени и денег), либо оставлять «как есть» (потеря клиентов). Вывод: не стоит экономить время на инвестициях в интерфейс. 18

19 Частые ошибки «Сайт должен быть произведением искусства!» Красота требует жертв. Очень жаль, если этой жертвой становится потенциальный клиент. Красивая картинка чаще всего удобным интерфейсом не становится. Этот сайт может нравится людям, но пользоваться они будут чем-нибудь более простым и удобным. Вывод: Баланс эстетики и эргономики достижим. Только начинать надо с проектирования взаимодействия, а не с дизайна. 19

20 Частые ошибки «Пользователь сайта должен иметь все возможные инструменты, несколько невозможных и пару просто невероятных» Стремление насытить интерфейс сразу всей доступной функциональностью не имеет рациональных причин. Пользоваться таким сайтом могут только специально обученные пользователи. Экономически неоправданный подход для сайтов с широкой аудиторией. Вывод: Не стоит перегружать интерфейс множеством функций, которые нужны только каждому сотому посетителю. 20

21 Частые ошибки «Логика взаимодействия и интерфейс? Пусть этим программисты занимаются!» Программисты это любят... Но они делают интерфейсы для таких же IT-специалистов, как и они. Мышление разработчиков достаточно сильно отличается от мышления даже «продвинутых» пользователей. Интерфейс «для айтишников» – это жестокость по отношению к пользователям. Вывод: Проектирование взаимодействия – это задача гуманитарная, а не техническая. 21

22 Частые ошибки «Сайт готов. Теперь интерфейсом можно не заниматься.» Смысл тестирования и анализа посещаемости в улучшении конверсии и увеличении продаж. Упростить и сделать удобнее можно практически любой интерфейс. Проектирование на основе теорий всегда требует проверки на практике. Вывод: Тестируйте интерфейс, анализируйте поведение пользователей. Улучшайте интерфейс и продажи будут увеличиваться. 22

23 Спасибо за внимание! [ Андрей Муравьёв ] ООО «Веб Креатор» +7 (495)