Начните с пользователя

Перед началом работы над новым проектом по созданию дизайна мы обычно получаем бриф по дизайну, стандарты брендинга, высокоуровневые цели проекта, ТЗ. К сожалению, все они как правило сводятся к технической спецификации проекта. В них чаще всего не уделяется никакого внимания тому, как именно сайт должен выполнять множественные цели пользователей, ведущие к успешному взаимодействию с ним.

Цели пользователей могут быть самыми разными — от нахождения информации до получения нового навыка или покупки подарка кому-либо. Цели бизнеса, в свою очередь, могут состоять в получении лида, лайка, подписчика, покупателя, закачки или звонка.

Идентификация каждой цели посетителя и бизнеса является первым шагом к созданию потоков, учитывающих потребности обеих сторон.

Привяжите потоки действий пользователей к воронкам конверсии

Не все посетители сайта одинаковы. Они приходят из разных источников, имея варьирующийся уровень знаний и вовлечённости и различающиеся цели. Ваша задача как проектировщика взаимодействия с пользователем — направить эти входящие потоки в воронки конверсии.

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

Вот несколько типичных потоков пользователей:

• Платная реклама. Пользователь пришёл по баннеру или через рекламу в той или иной рекламной сети (Google AdWord, РСЯ).
• Соцмедиа. Пользователь пришёл из постинга своего знакомого в социальной сети.
• Электронная почта. Пользователь пришёл из рассылки или по реферральному приглашению.
• Поисковая выдача. Пользователь пришёл со страницы с результатами поиска.
• Новость. Пользователь встретил упоминание вас в новости или в постинге блога.

У каждого из таких посетителей свои потребности, опыт, ожидания и знания, к каждому нужен свой подход.

Вглубь воронки: как приобретается клиент

Давайте взглянем на критический для многих сайтов поток — заход по рекламе — и разложим его на составляющие. В качестве примера рассмотрим цепочку действий нового посетителя, который сначала становится подписчиком, а затем — покупателем.

Представим себе компанию, которая использует баннерную рекламу для привлечения новых клиентов.

Что касается графической рекламы, всё начинается с баннера. Дизайн баннера должен достигать одной желанной цели: получить клик от правильного пользователя. Перед тем, как сесть за рисование рекламного блока для целевых посетителей, попробуйте ответить на следующие ключевые вопросы:

• С пользователями какого типа вы хотите работать?
• Что именно они делают: активно ищут решение проблемы или бесцельно лазят по сайтам?
• Какую проблему они пытаются решить?
• Как лучше всего завладеть их вниманием?
• Как вы соотноситесь с пользователем?
• Какой посыл найдёт отклик у пользователя?
• Есть ли у пользователя болевая точка, давление на которую ваш продукт или сайт может снять?
• Как вы можете чётко и быстро сформулировать это решение?
• Какие призывы к действию действительно будут работать для ваших целевых пользователей?

Ваша реклама должна учитывать эти основные моменты и «цеплять» потенциального посетителя. Предварительное исследование и объективное тестирование помогут улучшить взаимодействие.

Прибегнув к этой модели, компания ReTargeter, к примеру, смогла улучшить CTR своего баннера в четыре раза. Стоит отметить, что они ценой ошибок сделали для себя достаточно важный вывод: не стоит тестировать слишком много вариантов одновременно. В противном случае сложно определить, какие именно изменения больше всего определяют результат.

В момент, когда пользователь попадает на страницу приземления, и есть момент начала работы потока. Поскольку эти пользователи приходят с малоинформативного ресурса (такого как баннер, в противоположность содержательному постингу в блоге), вам необходимо спроектировать поток, который заполняет информационные пробелы, давая пользователю знания, которые сконвертируют его.

В рассматриваемом нами примере пользователь должен сконвертироваться в подписчика рассылки. Однако в зависимости от бизнеса конверсией может быть создание аккаунта, скачивание документации или покупка. Какой бы ни была эта цель, суть в том, чтобы дать посетителю причину двигаться дальше по потоку вглубь воронки конверсии.

Для того, чтобы обеспечить это продвижение, используйте следующие методы:

• Выстройте уверенность посетителя путём чёткой формулировки ключевых преимуществ, подкреплённых легко усваиваемыми подтверждающими доказательствами.
• Переработайте контент и дизайн так, чтобы фокус был на чётком призыве к действию (в данном случае, на подписке).
• Уменьшите «трение» на каждом шаге. Запрашивайте у посетителя минимум информации, уменьшите количество заполняемых полей, производимых щелчков и время загрузки страницы.
• Создайте «приманку» — вызовите любопытство, удовлетворить которое можно только в случае завершения регистрации.

В блоге KISSmetrics есть отличная инфографика на тему анатомии идеальной страницы приземления. В ней наглядно расписаны элементы дизайна, интерфейса и рекламного текста, которые помогут вам удовлетворить посетителей и повысить конверсию.

Свяжите потоки для обеспечения полного взаимодействия с пользователем

Довольно несложно представить себе воронку на уровне «щёлкаем по баннеру, приземляемся на страницу, регистрируемся». А вот проектирование и построение многоуровневых воронок, приводящих к конечной цели — уже более сложная задача, требующая особого внимания.

В нашем примере мы успешно заполучили подписчика на рассылку через кампанию баннерной рекламы, но конечной целью бизнеса всё же является получение прибыли посредством продаж.

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

В рассматриваемом примере совокупная воронка состоит из воронки приобретения покупателя и потока управления взаимоотношениями с клиентом (CRM).

Выстраивание многоуровневых воронок создаёт связанный цикл взаимодействия с посетителем сайта. Таким образом мы получаем следующую воронку: рекламный баннер -> страница приземления -> подписка -> получение рассылки -> посещение страницы продукта -> покупка.

При проектировании этого потока стоит принять во внимание, что важнейшим рычагом является конвертирование подписчика в покупателя. Здесь применимы многие из рассмотренных ранее принципов, но на сей раз вы имеете дело с несколько большим количеством точек соприкосновения и воздействия.

В этом потоке вам необходимо рассмотреть все элементы стратегии CRM и потока покупки на сайте, включая:

• взаимодействие с подписчиком по почте;
• страницы, на которые подписчик приходит при возвращении на сайте,
• поток от внутренних страниц к странице завершения покупки.

При проектировании цепочки от подписчика к покупателю имеет смысл обратить внимание на следующие ключевые моменты:

• Расскажите пользователю историю, дайте ему яркий образ, с которым подписчик может себя идентифицировать.
• Убедитесь в том, что письма в рассылке усиливают этот образ и содержат подтверждение, которое напомнит пользователям, почему они подписались.
• Включайте в письма убедительные призывы к действию, дающие подписчику возможность соотнестись с образом и стать его частью.
• Поместите на страницы с контентом ярко выраженные призывы к действию и простые, прямые пути к покупке. Они поддержат надежду пользователя на идентификацию с образом.
• Сделайте процесс покупки максимально вылизанным. Тем самым вы усилите уверенность покупателя в приобщении.

Вы можете обеспечить беспрепятственное взаимодействие пользователя с сайтом, которое придаёт ему уверенности и повышает его вовлечённость, приводя к конечной цели — покупке.

Не менее важным здесь является то, что подобный поток повышает удовлетворение пользователя, достигаемое за счёт связи воронок, направляющих его точно к желанной цели, с минимальной путаницей.

Выводы

Вне зависимости от того, проектируете ли вы новый сайт или же оптимизируете существующий, проектирование потоков поможет вам избежать ловушки. Благодаря ему вы перестанете заниматься дизайном отдельных страниц и взаимодействием с пользователем, а вместо этого будете концентрироваться на удовлетворении потребностей пользователей.

Вы можете добиться намного лучших показателей, выставив наивысший приоритет тем потокам, которые приносят максимальную выгоду пользователям и бизнесу.

Продумывая пользовательские потоки, не останавливайтесь на первой конверсии, а продумывайте весь поток — до самой конечной конверсии, которая может отстоять от первой в нескольких шагах.

Это особенно важно для тех компаний, где первая конверсия часто является лишь прелюдией к получению дохода. Связав последовательные воронки, вы создаёте более сцепленное взаимодействие с пользователем, которое будет приносить намного лучшие результаты обеим сторонам.

Так что в следующий раз перед тем как приступить к работе над дизайном сайта, отступите на шаг и подумайте, какие потоки пользователей вы пытаетесь создать посредством сайта, и пусть дизайн будет построен вокруг этой идеи.

Статья основана на публикации Моргана Брайана “Stop Designing Pages And Start Designing Flows” в издании Smashing Magazine.

Заставка поиска Google 23 ноября посвященная Лему

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

Google радуй меня дальше и я буду продолжать с радостью тобой пользоваться.

Собственно к чему я это. Просто, смотря на статистику Openstat http://trends.openstat.ru/global-statistic-search-engines/2011/10 и наблюдая, как месяц от месяца Яндекс теряет свою долю в поиске, а Гугл ее набирает, не могу понять стратегию развития нашего глобального поискового монстра.

Читаю с удивлением в газете Ведомости, что Яндекс хочет сделать мобильную платформу. И тут же приходит на ум постоянные жалобы наших SEO специалистов, что невозможно дождаться пока Яндекс удосужится проиндексировать сайт, и когда в Гугле уже вся информация есть, то Яндекс может еще даже и не начинал. Всегда есть шанс, что я чего-то не понимаю, но мне кажется, что если компания заявляет слоган «Найдется всё», то нужно над этим и работать.

Чего же ждать?

Надеюсь, с Яндексом не произойдет то, что случилось в итоге с Рамблером, который перестал быть поиском и стал сервисным проектом, и вероятно, который в итоге будет просто большим контекстным проектом с огромным количеством страниц и просто за счет этого обеспечивающим себя местом под солнцем. Может у Яндекса есть тайный план, козырная карта (например, китайский поиск), но в большей мере мне кажется, что придет на смену текущему руководству компании новое, вероятно западное, если конечно удастся найти. Сейчас все рубятся за людей и переманивают из одной компании в другую, может и Яндексу удастся кого-нибудь переманить к себе. Но видно, что нужны новые действия и, наверное, новые люди, иначе и доля будет падать, и акции будут лететь вниз, вниз, вниз.

Пользователи тратят дополнительно 4,4 секунды на каждые дополнительные 100 слов при просмотре страницы.

При средней скорости чтения в 250 слов в минуту (это исследование для английского языка, точные цифры для русского могут отличаться, но тенденция вероятно сохранится) пользователь успевает прочитать только 18% слов от добавленных, т.е. только 18 слов из 100 новых в тексте.

Можно оценить объем текста, который пользователь будет читать максимально внимательно. Этот показатель будет зависеть от общего объема текста на странице.

Половину слов пользователь прочитает на странице содержащей меньше 111 слов. При среднем заполнении страницы  (593 слова) пользователь читает на ней 28% слов, хотя более реалистично выглядит цифра в 20%.

Ментальная модель пользователя основана на вере, а не на фактах. Пользователи основывают свои прогнозы о действии системы, таких как сайт, основываясь на собственных ментальных моделях.

У каждого своя ментальная модель. Из этого возникает основная проблема дизайна: несовпадение ментальной модели дизайнера и конечного пользователя, – у них они просто разные.

Ментальные модели имеют тенденцию меняться. Они динамичны и изменяются от опыта работы с системой, от общения с другими пользователями, от получения информации из других источников и даже на основе опыта взаимодействия с другими системами.

Большая часть пользовательского опыта и пользовательских ментальных моделей формируется на других сайтах и другими системами. ( «The Need for Web Design Standards» http://www.useit.com/alertbox/20040913.html )

Ментальные модели порождают проблемы:

• Модели смешиваются и пользователь начинает вести себя «не логично», например, ищут сайт «google» через поиск «yandex.ru» (более 2 миллионов чистых запросов и более 7 миллионов с упоминанием «google» в месяц);
• Модели инертны и пользователи могут ожидать от системы поведения согласно с уже знакомой для них моделью.

Понимание ментальных моделей пользователей может помочь в поиске причин ошибочного поведения на сайте или в системе. Возможно придется предпринять усилия, чтобы научить пользователей новой ментальной модели.

Различные методы юзабилии тестирования могут помочь в выявлении проблем с моделями и нахождения путей решения.

Собственно проблему, наверное, можно было бы сформулировать и более умно: выбранная модель продажи услуг на сайте не соответствует модели поведения потенциальных покупателей. То, что сработало бы для ситуации спонтанных покупок, наверняка не будет работать для сайта, у посетителей которого присутствует значительный промежуток времени для осмысленного выбора.

Значит нужно повышать доверие к компании, за счет раскрытия информации и выстраивания персональной коммуникации, и повышать осведомленность об услугах и их качестве, за счет глубины детализации материалов от раздела к разделу и использовании примеров предыдущих работ с обязательным описанием.

Глобально, все страницы были разделены на три направления по целям. Первая группа страниц и блоков должна формировать доверия к компании, вторая, закрывать вопросы связанные с информацией и побуждать к контакту, третья, облегчать жизнь для SEO специалистов при дальнейшем продвижении сайта.

К тому же нашелся повод сделать это. Usethics опубликовали в своем блоге несколько заданий (смотрите здесь) для своих потенциальных сотрудников и очень захотелось попробовать их сделать. Решил на примере первого из заданий показать, как можно использовать Indesign при проектировании.

Честно говоря, думал, что все займет у меня два дня. Но через два дня я успел сделать первое задание и написать пять страниц текста, чего оказалось недостаточным, чтобы рассказать обо всем процессе работы над проектом. После чего ушел в отпуск.

Материалы для статьи

И даже эту заметку я пишу только по той причине, что не знаю, удастся ли закончить основную статью. Но уже сейчас можно констатировать, что все проделанное оказалось не напрасным, как результат:

1. Я сделал новый макет для вафреймов, который использовал в работе
2. Сделал новую макетную сетку в дополнении к тем, что были у меня в работе. Попробовал использовать сетку 1140px CSS Grid System для широкого экрана в дополнении к сетке 960 Grid System.
3. Начал использовать новые маркеры для показа действии и для комментариев, пересмотрев при этом аннотации для Android и документацию Eightshapes.

Совсем недавно компания eDigitalResearch выпустила свой обзор онлайн торговли в Великобритании за март-май 2011 года. Использую методику тайных покупателей они оценили привлекательность и функциональность 51 крупнейшего онлайн продавца, другими словами они оценивали юзабилити сайтов. Полное исследование можно найти здесь.

Впечатляет подход eDigitalResearch к данному исследованию (методология) и масштабность. Оценка проводилось по 11 параметрам:

• Первые впечатления (Домашняя страница)
• Обзор (точнее, наверное, навигация по сайту )
• Поиск
• Страница товара
• Корзина
• Покупка
• Регистрация / Войти
• Доставка
• Возврат
• Сервисная служба Контакты (телефон)
• Сервисная служба Контакты (электронная почта)

Общая оценка удовлетворенности посетителей онлайн магазином.

Общая оценка удовлетворенности посетителей

Оценка по отраслям.

Оценка по отраслям

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

Сам проект был пилотным и я им занимался в свое удовольствие. Очень хотелось глубоко на материале пощупать, каково это делать структуру для социальной сети с множеством сервисов. Пощупать – удалось, сделать до конца – нет.

Ниже приведена объединенная схема страниц, которые были разработаны и отмечено, сколько приблизительно еще предстояло сделать.