Только после того как реальные люди начнут пользоваться вашим продуктом, вы узнаете, на правильном ли вы пути в разработке своего решения и набора функций. МэтМуленвег, разработчик – основатель системы управления контентом WordPress, проводит прекрасную аналогию между использованием и кислородом: «Вы никогда не сможете до конца предугадать, как аудитория отреагирует на то, что вы создадите, пока это будет оставаться за кадром. Это значит, что все, над чем вы работаете и не выпускаете в свет, просто умрет как от нехватки кислорода». Этот раздел представит ряд техник, которые помогут вам вызвать первоначальный интерес к продукту и создать непрерывный процесс регистрации после его выпуска.

Рисунок 6.1. Страница «Скоро открытие» сервиса SquidChef

 

Скрытый опрос

Первое, что нужно для любого большого продукта, это пользователи. И вы можете привлечь их еще до запуска своего детища, и даже до начала его создания. Возможно, вы знакомы со страницей Coming soon («Скоро открытие/запуск»). Она разработана для продвижения нового продукта или услуг, которые должны быть вскоре выпущены. На странице высвечиваются характеристики и преимущества продукта, запрашивается ваш e-mail на случай, если вы захотите получить уведомление о его выпуске.

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

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

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

Рисунок 6.2. Форма, собирающая е-mail на странице Monotask

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

Рисунок 6.3. После подтверждения вашего e-mail-адреса показывается краткий опросник

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

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

 

Сделайте регистрацию скрытой

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

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

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

Например, когда компания ZURB создавала домашнюю страницу для одного своего заказчика и перенесла кнопку регистрации вниз страницы, обнаружилось, что конверсия увеличились на 350 % – неслабое улучшение. У Vendio регистрационная форма стояла первой позицией на одной из страниц, сместив текст вниз. При переделке дизайна форму перенесли на отдельную страницу, а ссылку на нее оставили надомашней. Что в итоге?

Конверсия поднялись на 60 %.

Рисунок 6.4. Сайт Vendio с формой регистрации прямо на главной странице (исходная версия)

Рисунок 6.5. Сайт Vendio с регистрационной формой, перенесенной на отдельную страницу (финальная версия)

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

 

Плавное вхождение в контакт

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

Например, когда Twitter переделывал свою регистрационную форму, то ввел дополнительный шаг в процесс. Теперь на первом шаге Twitter пытается подключиться к e-mail-адресу посетителя для поиска друзей, которые уже пользуются Twitter. Если пользователь не хочет показывать контакты своей почты, то он окажется прямиком на пустой странице профиля – не самое лучшее начало.

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

Редизайн сработал? Да: конверсия выросла на 29 %.

Рисунок 6.6. Twitter помогает вам найти людей для подписки на их ленты в процессе регистрации

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

 

Последовательная регистрация

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

Рисунок 6.7. Регистрационная форма сервиса Stripe позволяет вам «пропустить этот шаг»

Рисунок 6.8. Вы можете сразу, без регистрации, «перескочить» на рабочий экран Stripe. Верхняя ссылка «Save account» («Сохранить учетную запись») позволит вам зарегистрироваться позже

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

Рисунок 6.9. Регистрационная форма Facebook с подтверждением адреса e-mail

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

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

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

Интересная деталь в форме Facebook – это то, что пользователя повторно просят подтвердить свой e-mail-адрес, а не пароль. В этом есть свой смысл. Если вы забудете ваш пароль, ссылка на восстановление всегда может быть отправлена по почте. Но если ваш адрес некорректен, то повторная регистрация будет гораздо сложнее.

 

Формы – аккордеоны

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

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

Рисунок 6.10. Компания Apple использует форму-аккордеон на их сайте для онлайн-покупки. Обратите внимание, что кнопка «Continue» («Продолжить») находится внутри каждого блока, а не внизу страницы

Насколько хорошо работает эта техника на практике? Etre, компания из Лондона, занимающаяся юзабилити, провела тестирование форм-аккордеонов. В нем приняли участие 24 простых пользователя в возрасте от 19 до 48 лет, с обычным опытом покупок через Интернет. Тестировались два варианта формы: с формой на нескольких страницах и с одной страницей, где все поля формы находится вместе. Один из вариантов предлагал пользователям нажать на следующий заголовок для того, чтобы развернуть его. В другом располагалась кнопка в конце каждого раздела.

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

Это значит, что если ваш контент чувствителен ко времени, например если вы проводите аукцион, то форма-аккордеон может стать лучшим выбором.

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

Когда люди заполняют формы, они ищут кнопку «Подтвердить».

А активизируемые мышью заголовки слишком далеки от привычек и ожиданий пользователей. Поэтому, если вы используете форму-аккордеон, убедитесь, что кнопка «Подтвердить» стоит внизу каждого раздела.

 

Гендерный вопрос

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

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

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

Рисунок 6.11. Гендерный вопрос в регистрационной форме Bagcheck

 

Хорошие значения по умолчанию

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

Рисунок 6.12. Etsy пытается догадаться о вашем местонахождении на основании языковых настроек вашей системы

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

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

 

Дизайн интерфейсов – это копирайтинг

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

Контекст может изменить значение слов. Институт Baymard провел исследование по удобству пользования и выяснилось, что слово «continue» («продолжить») в интерфейсе онлайн-магазинов сбивало с толку трех из десяти испытуемых.

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

Так, вместо «continue» используйте более описательное выражение, как «continueshopping» («продолжить покупку») или «continuetocheckout»(«перейти к оформлению заказа»). Ясность лучше краткости.

Рисунок 6.13. Amazon использует кнопку Proceedtocheckout («Оформить заказ»)

Вот другой пример. У HubSpot была надпись на экране настроек домена: «Add domain»(«Добавить домен») – что приводило в замешательство. Разработчики HubSpot имели в виду то, что клиенты могли пользоваться этим интерфейсом для добавления существующего домена к их учетной записи. А пользователи думали, что программа просит их создать новый домен, то, чего они не хотели делать, потому что у них уже был один.

Глагол «add» («добавить») сбивал всех с толку. HubSpot изменили надпись на «Connectyourdomain» («Подключите ваш домен») – и инцидент был исчерпан.

Рисунок 6.14. На сайте Target опускают глагол и просто используют слово «checkout» («оформление заказа»)

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

 

Особое внимание деталям

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

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

У Square очень много таких фишек. Когда вводите номер AmericanExpress, группировка цифр изменяется от 4 до 4, 6 и 5, отображая числовую структуру на карте, который вы пользуетесь. Так как CVV у AmericanExpress находится впереди, иконка карты не будет переворачиваться, а вместо этого покажет вам, где его найти на карте. Если вы вводите некорректное количество цифр кода, поле «вздрогнет» и станет красным. Это означает, что вы ошиблись. Также невозможно введение неправильного срока действия. Интерфейс просто не позволит вам этого сделать. Такое внимание к деталям приходится по душе клиентам. Это помогает им правильно заполнить форму и подсказывает направление, если затрудняются или ошиблись. Также берутся во внимание различные случаи использования, например расположение кода CVV на определенной карте может быть спереди, а не сзади.

Рисунок 6.15. Square скрывает полный номер карты и подсвечивает местонахождение CVV в иконке

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

 

Эта цитата Стива Джобса хорошо созвучна со знаменитым высказыванием Генри Форда: «Если бы я спросил клиентов, чего они хотят, они бы ответили: более быструю лошадь». Инновации происходят, когда вы пробуете новое, а не зацикливаетесь на старых способах решения проблем. Распространенные дизайны шаблонов и практический опыт показывают нам, что работает хорошо, но они не учат нас тому, как создать что-то лучшее. Слепое применение шаблонов, конечно, обеспечит вам получение надежного продукта. Но с другой стороны, вы будете плестись в хвосте тех компаний и дизайнеров, которые внедряют новаторские идеи в поисках лучших решений.

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

Рисунок 6.16. Эксперимент Apple со стилем кнопок представлен в виде селектора, похожего на слайдер

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

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

Однако это не сработало. Многие пользователи не восприняли это изменение на ура, и Apple вернулась к прежнему дизайну, в котором кнопки реально выглядели как кнопки, а «утапливалась» выбранная в данный момент. Несмотря ни на что, эксперимент не провалился. Дизайнеры получили ценную информацию о том, какой сценарий лучше работает, и в конечном итоге было оставлено оптимальное решение. Если что-то идет вразрез с общепринятыми шаблонами, но помогает лучше решить проблему, то этот способ неизбежно станет рекомендуемым.

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

 

Интерактивный сторителлинг

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

Когда NerdCommunications разрабатывал приложение «Ben the Bodyguard» («Бен-телохранитель»), то сделал сайт в виде интерактивной истории. Мы видим опускающуюся на город тьму и таящие угрозу улицы. В центре приложения представлен герой – Бен-телохранитель. Когда вы прокручиваете страницу вниз, он начинает двигаться с вами, а если вы прокрутите дальше, он раскроет идею приложения и то, для чего это вам нужно. Создателям приложения удалось преобразовать ваш обычный маркированный список характеристик и преимуществ в интерактивные и захватывающие впечатления.

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

Рисунок 6.18. Бен-телохранитель сопроводит вас на интерактивной прогулке по Злым улицам

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

Рисунок 6.19. Дойдите до конца игры в «Spent». Без денег в течение месяца

 

Измеритель завершенности

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

Например, у компании Klout из Сан-Франциско измеритель завершенности находится под заголовком «Connect» («Подключиться»). Это список дел в виде обычного текста, который предлагает вам выполнить различные действия, такие как подключить вашу учетную запись на Klout к сетям Twitter или Facebook, следовать за Klout в Twitter, поделиться вашими показателями на Klout и т. д. Как только вы выполняете какое-то действие, оно вычеркивается из списка. Другим примером может служить Groupon (американский сервис коллективных скидок). Его измеритель завершенности в боковой колонке – это список действий, такой же как у Klout, но с индикатором выполнения вверху, который заполняется по мере вычеркивания позиций. Почему это работает? Здесь на кону два психологических фактора. Во-первых, любопытство. Людям интересно узнать, что произойдет, когда измеритель достигнет 100 %. Будет ли какая-то награда в конце? Второй фактор – это цепочка обратной связи. Когда пользователь выполняет задачу, она отмечается, и показания измерителя растут. Так устанавливается четкая цель, и пользователи получают указания, что делать дальше.

Рисунок 6.20. Измеритель завершенности Klout приглашает пользователей быть активнее и вычеркнуть пункты из списка дел

 

Режим реального времени

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

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

Рисунок 6.21. Уведомления в режиме реального времени в Bagcheck

В приложении есть еще больше «штучек», работающих в режиме реального времени. Например, когда кто-нибудь дает комментарии по теме, они тотчас появляются.

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

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

 

Селектор страны

Селекторы страныпредставляют собой выпадающее меню, открывающее на странице длинный список стран, который вы будете прокручивать, чтобы выбрать нужную вам. Можем ли мы придумать что-то получше? Да. Кристиану Холсту и Джейми Эплсиду из института Baymard удалось переделать селектор страны, чтобы сделать процесс более удобным. Идея такова – использовать живое поисковое поле для выбора страны. Так если пользователь начинает печатать название, включается поиск и выпадает список совпадений. Верхний вариант будет выделен, поэтому пользователь просто должен нажать клавишу Enter, и этот вариант окажется в поле. Пользователь уже знает, чего он хочет, поэтому впечатывание первых букв из названия страны намного быстрее, чем прокручивать список, в котором может стоять тысяча позиций.

Рисуок 6.22. Селектор страны в действии

Эта реализация работает, так как она решает три основных проблемы. Во-первых, вы должны учитывать опечатки и последовательность; пользователь может печатать слова в неправильном порядке или неверно по буквам. Во-вторых, некоторые страны имеют не одно название. Например, Нидерланды – это Голландия. Поэтому люди, которые пишут «Голландия», должны быть уверены, что получат правильное сочетание. То же касается и Америки, когда это название пишут вместо Соединенных Штатов.

И, наконец, некоторые страны более распространены среди ваших пользователей. Поэтому, если кто-то начинает впечатывать «United» (Соединенный, объединенный), первым сочетанием лучше сделать «United States»(Соединенные Штаты), а не «United Arab Emirates» (Объединенные Арабские Эмираты). Если только, конечно, большинство ваших пользователей не из ОАЭ.

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

 

Прогрессивный вход в систему

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

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

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

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

Рисунок 6.23. Введение вашего имени на странице авторизации запускает поиск пользователей на сайте Bagcheck

Рисунок 6.24. Как только вы найдете свою учетную запись, вы увидите опции, которые можете использовать при авторизации

 

Отзывчивый мобильный интерфейс

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

Когда компания 37signals приступила к разработке мобильной версии своего приложения управления проектами Basecamp, она пыталась найти пути решения этих проблем и создать интерфейс, который превзошел бы исходный вариант. Для управления касаниями 37signals убедилась, что все элементы имеют состояние «выбрано». Так, чтобы при прикосновении клавиша немедленно подсвечивалась, и пользователь мог узнать, что его выбор зарегистрирован, и он нажал верно.

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

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

Рисунок 6.25. Если начальная загрузка длится дольше положенного, появится сообщение, которое известит вас о том, что приложение все еще работает (грузится)

 

Меню пиктограмм

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

Рисунок 6.26. Скромная вращающаяся пиктограмма в правом верхнем углу, которая говорит пользователю о том, что приложение проверяет обновления на сервере

Другой пример – шведский магазин обуви Heppo.se. Здесь вы снова видите выпадающее меню, где представлены различные модели туфлей и сапог, которые вы можете купить.

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

Рисунок 6.27. Селектор Bonlook для очков

Рисунок 6.28. Heppo.se показывает пиктограммы каждой модели обуви, которую они продают

 

Тони Шей создал электронному магазину Zappos историю успеха. С момента его присоединения в 2000 году к Zappos в роли исполнительного директора, годовой доход компании ежегодно удваивается. В 2009 году он достиг миллиарда долларов. Zappos – это обувной онлайн-магазин. Но самое интересное то, что Шея совсем не интересовала обувь. Что его на самом деле привлекало – так это работа с клиентами, а страсть к созданию у них сильных впечатлений принесла реальный успех компании.

«Мы задали себе вопрос, чего мы ждем от этой компании. Мы не хотели просто продавать обувь. Меня не интересовала обувь. Я был страстно увлечен работой с клиентами».

Тони Шей, основатель Zappos

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

Все это вносит вклад в общую картину, а гарантия того, что все будет хорошо, делает ваших клиентов счастливыми.

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

 

Поддержка смайликом

Как повысить качество поддержки, которую предоставляет компания, с помощью визуализации? 37signals разработала рейтинговую систему, когда в конце каждого обращения по электронной почте люди оценивают поддержку, которую они получили. Рейтинговая система имеет три ссылки: одна для «great» («отлично»), другая для «just OK» («хорошо») и последняя «not so good» («не очень хорошо»). Каждая оценка сопровождается смайликом, для того чтобы выбор можно было сделать быстрее. Смайлики раскрашены под цвета светофора: зеленый для «отлично», желтый для «хорошо» и красный для «плохо».

Рисунок 6.29. 37signals представляет оценки своей службы поддержки на «Страничке смайликов»

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

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

37signals также использует эту систему как мощное орудие маркетинга.

Страница создана для отображения 100 последних рейтингов, визуализированная с помощью смайликов, раскрашенных под цвет светофора. Таким образом, преобладание зеленого на большой стене из «улыбочек» натолкнет покупателя на мысль, что поддержка со стороны 37signals действительно хорошая.

 

Документация тоже впечатляет

Документация часто является слабым звеном во впечатлениях пользователя. На самом деле писать неувлекательно и читать незанимательно. Но так не должно быть. Команда MailChimp (сервис e-mail-рассылок) разработала отличный способсоздания документации. Сначала даются основы, описываются основные функции. Потом каждый раз при получении запроса о поддержке компания отписывает основательные, детальные ответы. После отправки ответа клиенту MailChimp сохраняет его в базе знаний. Таким образом, потребитель получает отличный сервис, а затраченное время также идет на создание исчерпывающего ресурса базы знаний, которым он (потребитель) может пользоваться.

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

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

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

Рисунок 6.30. Картинка со страницы справки о временных зонах

 

Предоставление кредита

Райан Карсон на ThinkVitamin ратует за предоставление кредита пользователям, когда что-то идет не так. Если пользователи сталкиваются с какой-то проблемой на сервере, Райан компенсирует им убытки кредитованием их аккаунта (например, предлагает период бесплатной подписки). Это необычное решение проблемы. Клиенту показывают, что если что-то пойдет не так, ThinkVitamin возьмет на себя полную ответственность. Такая тактика отлично работает в пользу ThinkVitamin. Люди не привыкли к всеобъемлющему клиентскому сервису. Поэтому когда они соприкоснутся с этим, их благодарность не будет знать предела. И не только. Они также захотят поделиться своими впечатлениями. Предоставляя клиенту больше того, за что он заплатил, и вы приобретете больше, чем потеряете, и к тому же сделаете людей счастливее, терпимее. Они будут готовы рекомендовать ваш сервис всем друзьям.

 

«Ответьте, пожалуйста!»

Любое взаимодействие с вашими клиентами – это возможность для всестороннего контакта, укрепляющего ваши взаимоотношения. Удивительно, но многие компании сегодня все еще пользуются «безответными» почтовыми адресами ([email protected]). Но, в конце концов, лучше показать вашим клиентам, что вас волнует их мнение, чем сказать о том, что им не нужно отвечать вам, так ведь?

Однако дела обстоят намного хуже. «Безответные» e-mail-адреса могут негативно отразиться на показателе доставки писем. Например, Google’s Priority Inbox мониторит адреса, на которые отвечает большинство людей, и отмечает их как важные. Вполне вероятно, что их спам-алгоритм также учитывает ответы. Ведь если вы шлете ответ на почту, скорее всего, адрес подлинный, и это не спам.

Что же делать? А вот что! Превратите проблемный адрес «no-reply» («не отвечать») в «please-reply» («пожалуйста, ответьте»). Если у вас есть система техподдержки пользователей, вы можете переправлять ответы, которые получаете, туда. А потом обрабатывать их как обычно.

Рисунок 6.31. Современная система управления платежами обычно имеет опцию выдачи кредита на активный клиентский счет. Представленный пример – кредитная страница платежного сервиса Recurly

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

 

Поощрение преданных пользователей

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

Рисунок 6.32. Компания Dropbox нашла способы простого обращения к людям через почту и соцсети

Раньше Dropbox оплачивала рекламу, но потом пришла к выводу, что слишком много денег тратится на привлечение клиентов, а вложения не возвращаются в доход. Компания пересмотрела свою стратегию и сосредоточилась намаркетинге, ориентированном на пользователя (customer-drivenmarketing). Новый подход заключался в поощрении преданных клиентов за рекомендации продукта своим друзьям. Dropbox стимулировал обе стороны: рекомендатели получали дополнительное бесплатное хранилище, а их друзья – большее пространство памяти, чем могли бы иметь.

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

 

Спасибо!

Как часто вы благодарите своих покупателей за то, что они выбрали ваш продукт или сервис? Типичный ответ, который вы получите от большинства компаний, это автоматизированное сообщение по почте. Придумать что-то особенное не так уж и сложно. Почему бы не порадовать вашего клиента письменной благодарственной открыткой? Не по электронке, а именно настоящей! Этот небольшой жест не будет вам стоить ровным счетом ничего, но вашим покупателям будет приятно, а ваш бренд действительно выделится.

Рисунок 6.33. Благодарственная открытка от Wufoo

Так действует со своими главными покупателями компания Wufoo. Благодарственную открытку пишет каждый из сотрудников. Для ускорения процесса в него вовлекаются все. По пятницам, члены команды пишут примерно по 10 открыток людям, которые помогли их компании добиться успеха.

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