Текст книги "Создание сайтов"

Чат – это маленькое, легко сворачивающееся и разворачивающееся окно на сайте, в котором пользователь может переписываться с вашими сотрудниками, задавая им интересующие его вопросы (рис. 32). Неплохой способ сократить дистанцию между бизнесом и клиентом: когда потенциальный покупатель осознает, что «по другую сторону монитора» – живой человек, ему проще начать доверять сайту. Однако, прежде чем подключать виджет онлайн-консультанта, убедитесь в том, что ваши работники в достаточной мере осведомлены о ваших товарах или услугах и о всем, что с ними сопряжено (условия доставки, гарантии и т. д.). Также стоит узнать, есть ли вообще среди сотрудников те, кто будет общаться с покупателями компетентно и вежливо.

Вот несколько хорошо зарекомендовавших себя систем такого рода: Chatovod.ru (www.chatovod.ru), Cloudim.ru (www.clodium.ru), Jivosite.ru (www.jivosite.ru), LiveTex (www.livetex.ru), Webim.ru (www.webim.ru), Zopim.com (www.zopim.com).

Часть сервисов позволяет ради экономии сил создать шаблоны ответов на наиболее часто задаваемые вопросы, во многих реализована качественная аналитика и статистика по работе с посетителями.

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

^{Рис. 32. Онлайн-консультант (справа внизу) на сайте Webim.ru – сервиса, который предлагает такой плагин к установке}

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

Для крупного бизнеса может иметь критическое значение интеграция с CRM – системами управления взаимоотношениями с клиентами (подробнее см. в главе 22 «Сайт и ваши бизнес-процессы: по дороге с “облаками”»): разузнайте, возможен ли такой союз.

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

Наконец, простое решение – «привязать» к сайту один из популярных мессенджеров, например ICQ on-Site. Такое решение годится, если ничего, кроме переписки с заведомо заинтересованным пользователем, вам не требуется.

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

Полезны рейтинги: наиболее популярные на сайте статьи, самые-пресамые товары в интернет-магазине и т. д. Не менее привлекательна для многих юзеров возможность выступить в качестве судьи посредством голосования (например, можно спросить посетителей, в какой товарной категории вам стоит сделать пятипроцентную скидку на следующий месяц). Несколько виджетов такого типа вы найдете по адресу www.graddit.com/rus.

Зачастую виджет-«советчик» служит серьезным средством для повышения коммерческой отдачи от сайта. Так, сервис RetailRocket (www.retailrocket.ru) подсказывает посетителю интернет-магазина, какие товары имеет смысл купить в дополнение к изучаемому, какие являются самыми популярными и т. д. Закономерным образом такие предложения, ненавязчиво сделанные в привычной для пользователя форме, способны увеличить сумму его заказа, а в каких-то случаях послужить добавочным стимулом к совершению покупки.

Виджеты комментариев делятся на два основных типа. Первые – это приложения отдельных соцсетей («ВКонтакте», Facebook и т. д.). Вторые, такие как Loginza (www.loginza.ru) и Cackle (www.cackle.me), позволяют авторизоваться через любое из популярных в Рунете соцмедиа или, например, с помощью протокола OpenID. Весьма популярна также система комментариев Disqus (www.disqus.com).

Чуть иную функциональность обеспечивает сервис HyperComments (www.hypercomments.com): внедрив его, вы можете дать посетителям возможность привязать комментарий к конкретному пассажу в тексте, что будет кстати на тех сайтах, где аудитория серьезно обогащает контент.

При выборе такого виджета учитывайте тип ресурса и особенности своей коммуникации с аудиторией. Так, для развлекательного портала едва ли подойдет система, которая не дает администратору возможности заблокировать не только отдельного пользователя, но и IP: вы рискуете быть погребенным под лавиной спама. Ну а если у вашего проекта вау-дизайн, под который требуется подгонять все встраиваемые блоки, то не факт, что вы смиритесь с тем же Disqus, внешний вид которого почти неизменен (во всяком случае по состоянию на осень 2013 года). Наконец, если вам обязательно нужно разрешить посетителям оценивать комментарии, имеет смысл присмотреться к IntenseDebate (www.intensedebate.com); не у всех систем есть такая опция.

CAPTCHA – это аббревиатура, которая расшифровывается велеречиво: completely automated public turing test to tell computers and humans apart, а в живом и доступном переводе на русский – полностью автоматизированный публичный тест, позволяющий определить, кто пытается выполнить действие на сайте – человек или бот. Уверены, при попытке заполнить на каком-нибудь сайте важную веб-форму вы сталкивались с тем, что система показывала вам картинку с намеренно искаженными цифрами и буквами и предлагала вбить эти символы в окошко по соседству. Это тот самый барьер, который отсекает компьютерные программы от Homo sapiens: в распознавании форм сколь угодно сложные боты слабее человека.

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

Обратите внимание на ныне принадлежащую Google американскую ReCaptcha (www.google.com/recaptcha) и российскую, притом весьма оригинальную разработку KeyCAPTCHA (www.keycaptcha.com).

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

Обратите внимание

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

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

«В поисках идеальной системы комментирования»: http://habrahabr.ru/post/166383/

Использование виджетов на Setup.ru: http://www.setup.ru/instructions/widgets

Конструктор карт «Яндекса»: http://api.yandex.ru/maps/tools/constructor/

«Как добавить карту Google на веб-сайт или в блог»: https://support.google.com/maps/answer/72644?hl=ru

Виджеты карт 2ГИС: http://api.2gis.ru/widgets/

«Рассылка Setup.ru. Выпуск 23: добавление карты проезда на сайт: http://www.setup.ru/client/subscription/56

Виджеты «ВКонтакте» для сторонних сайтов: http://vk.com/developers.php?id=-1_27987570&s=1

Виджеты Facebook для сторонних сайтов: https://developers.facebook.com/docs/plugins/

Кнопки соцсетей от «Яндекса»: http://api.yandex.ru/share/

Полезная SEO-рекомендация по поводу виджетов: http://www.searchengines.ru/news/archives/mett_katts_sove_use_nofollow.html

Глава 16. Юзабилити и конверсия: заставляем сайт работать

В главе 2 «Создание прототипа: анатомия сайта» мы по касательной затронули такую обширную область знания, как юзабилити (англ. usability). Мы будем трактовать юзабилити не академически – просто как удобство сайта, сообразность его устройства задачам, перед ним поставленным, и вместе с тем как прикладную дисциплину, которая учит добиваться такой гармонии.

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

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

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

В свое время было выведено эмпирическое правило: на 10 % юзабилити определяется графическим дизайном, на 30 % – тем, насколько удачны интерфейсы, и на 60 % – тем, насколько полно и точно решает сайт задачу посетителя, насколько того удовлетворяют само предложение, его подача и общая функциональность сайта.

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

Помните, что юзабилити – дисциплина прикладная. Уместность того или иного элемента на сайте зависит не только от законов человеческого восприятия, но и от бизнес-ниши, страны, целевой аудитории и т. д. Нельзя сделать сайт для всех и каждого. Можно только для решения определенных задач какой-либо группы людей. Например, «карусель» – блок, в котором, сменяя друг друга, циклически прокручиваются кликабельные изображения, – будет к месту на новостном портале, но, возможно, окажется чужеродным в ньюс-блоке на сайте кадастрового ведомства. Вместе с тем многие требования к самим деталям интерфейсов поддаются формализации: в ту же «карусель» желательно не помещать больше пяти объектов, а если посетитель кликнул по модулю (например, по кнопке «Вправо» или «Влево»), то автоматическое «кружение» должно прекратиться – управление сразу же вверяется человеку.

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

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

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

• Главные элементы меню и значимые для навигации ссылки легкодоступны. Часто говорят, что вообще всю самую важную информацию надлежит размещать так, чтобы она была видна без прокрутки страницы. Спору нет, посетители предпочитают обходиться без скролла, однако если дать им понять, что ниже есть что-то небесполезное, они шевельнут колесико мышки. Так, по данным исследования компании cxPartners, если на первом экране контента чуть меньше ожидаемого, если там пустовато, то вероятность того, что пользователь прокрутит страницу вниз, ощутимо увеличивается.

• Внутренняя перелинковка упрощает хождение по сайту. Это на сегодняшний день не только и не столько SEO-инструмент, сколько средство для увеличения связности сайта. Блок «Рекомендованные товары» (см. рис. 17) тоже служит целям перелинковки.

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

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

• Распространенные в Вебе, общепринятые элементы расположены там, где пользователь ожидает их найти. Ему нужно дать возможность легко, «по мановению мышки», возвращаться на титульную страницу. В частности, в соответствии с одним из стандартов веб-интерфейсов логотип предпочтительно размещать слева вверху в шапке сайта на всех его страницах, делать кликабельным – так, чтобы он вел на главную.

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

• Все интерфейсы подлежат обработке бритвой Оккама. Согласно постулату средневекового английского богослова Уильяма Оккама, не следует привлекать новые сущности без крайней на то необходимости. Если, например, на странице оформления заказа все формы подлежат заполнению, то незачем напротив каждой ставить красную звездочку и давать сноску: «Помечены обязательные к заполнению поля». Это все равно что писать на двери работающего без выходных магазина: «Мы открыты в понедельник, вторник, среду, четверг, пятницу, субботу, воскресенье». Просто укажите над веб-формой: «Пожалуйста, заполните все поля».

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

Избегайте сложности и роскоши, вы не архитектор эпохи барокко. Если при заходе в интернет-магазин вы видите прогресс-бар – «Подождите, сайт загружается» – с призывом подождать пусть даже десять секунд, с какой степенью вероятности вы мигом закроете эту вкладку?

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

• Визитер, впервые заглянувший к вам, меньше чем за пять секунд понимает назначение сайта и первичные принципы его устройства. По приводимой компанией UsabilityLab статистике, от 40 % до 90 % посетителей закрывают в браузере вкладку с сайтом в течение нескольких секунд, если не могут понять, о чем он. Люди не изучают веб-страницу методично и последовательно с первого мгновения, а сканируют ее взглядом, словно скользя по ней.

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

• Принимается во внимание закон Фиттса. Согласно его переложению в плоскость веб-интерфейсов, время точного наведения на цель прямо пропорционально расстоянию до нее и обратно пропорционально ее размеру. Иначе говоря, значимые элементы должны быть досягаемыми для посетителя, будучи достаточно крупными для того, чтобы тот не играл в снайпера. Ни в коем случае нельзя делать так, чтобы «попадание» курсором в чекбокс требовало чрезмерно точного прицела. Отсюда, однако, не следует, что любую кнопку подтверждения заказа надо сделать крупной, насколько только удастся (подробнее – в статье «Когда стоит нарушить закон Фиттса», ссылку на нее см. в блоке «Полезно знать»).

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

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

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

• Ничто не обманывает ожиданий пользователей. Например, на сайте неплохой юзабилити-студии Uidg.ru по клику на красивые, привлекательные инфоблоки с надписями вида «Завершили юзабилити-аудит сервиса YouDo и предложили ряд улучшений. Теперь будет удобнее!» открываются не страницы с кратким описанием работ, а всего-навсего сайты клиентов компании. Между тем потенциальный клиент скорее ждет, что с титульной страницы его начнут убеждать кейсами, описанием приемов и методик.

• «Защита от дурака» надежна. Сказано грубо, но на деле подразумевается тот факт, что любая активность, которая потенциально способна испортить взаимодействие между сайтом и посетителем, не должна быть чересчур доступной. Например, если какое-то действие способно очистить «Корзину», необходимо четко обозначить, какое конкретно, и сделать невозможным его выполнение по ошибочному щелчку левой кнопки мыши. Без доведения до абсурда, как порой бывало в диалогах одной популярной операционной системы: «Вы уверены, что уверены в том, что хотите удалить файл?»

• Соблюдены основные рекомендации, описанные нами ранее в главах о контенте. Да-да, в них тоже многое было про юзабилити: удобочитаемые материалы, свободное пространство между блоками дизайна – все это ради того, чтобы улучшить восприятие сайта.

• Старайтесь использовать вместе не более семи однородных элементов (плюс-минус два в зависимости от ситуации); в меню – не более семи пунктов. Если объектов больше, разбивайте их на группы. Требование связано не с фэншуем или нумерологией, а сугубо с особенностями человеческого восприятия.

• Не требуйте регистрации, как грабитель – кошелька. Особенно это касается интернет-магазинов. Исключения возможны, взять хотя бы проект Shopogoliq.ru. Как заметил руководитель компании Никита Халявин в интервью SeoPult.TV, введение обязательной регистрации на первой странице парадоксальным образом – хотя психологические объяснения у явления есть – повысило конверсию с 1,5 % до 4 %. Но если ваш сайт предполагает регистрацию (например, пользователи передают вам свои персональные данные или вам просто критически важно иметь как можно больше информации о своей аудитории), ее форма должна быть легкодоступна. Чаще всего она размещается вверху справа.

Если только это дозволительно в вашем случае, дайте пользователям возможность авторизоваться у вас на сайте через их аккаунты в популярных соцсетях (см. главу 23 «Интеграция сайта с соцсетями: дисциплина и социализация»).

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

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

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

Еще одна форма соцдоказательства – виджет социальной сети, того же Facebook, демонстрирующий, скольким пользователям «Нравится это» и сколько среди них ваших друзей. Это не vox populi – «глас народа», а отдельные голоса, за которыми, однако, виден если не народ, то как минимум общественный класс или другая категория. Чувство сопричастности начинается с частного.

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

• Фотографии рядом с отзывами клиентов повышают доверие к самим откликам и к сайту. Разумеется, мы о подлинных снимках, а не о надерганных из фотостоков кадрах. Они дарят посетителю эмоции, а эмоции – это горючее, на котором тот преодолевает раздел за разделом, прорывается через каталоги товаров и платежные формы.