Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

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

Команда сайта 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 – это обувной онлайн-магазин. Но самое интересное то, что Шея совсем не интересовала обувь. Что его на самом деле привлекало – так это работа с клиентами, а страсть к созданию у них сильных впечатлений принесла реальный успех компании.

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

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

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

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

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

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

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

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

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

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

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

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

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

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