Новый интерфейс BILLmanager

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

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

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

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

ISPsystem появилась на рубеже 2000-х. Любой инструмент автоматизации в то время сам по себе был конкурентным преимуществом. Для технологических компаний того времени было нормой, что и сам продукт и его дизайн придумывали разработчики-основатели. Так же было и у нас.

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

Мы не делаем новый продукт, а переделываем существующий, им пользуются тысячи людей каждый день. Поэтому работа началась со сбора информации. Мы пошли к нашим партнерам хостинг-провайдерам. Служба поддержки и отдел маркетинга сообщили много ценной информации о пользователях BILLmanager 5, в том числе о ежедневных проблемах и задачах, с которыми они сталкиваются в интерфейсе. Затем мы написали Job Stories, разбили их по категориям и расставили приоритеты, построили job map…

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

Дальше я расскажу о некоторых проблемах BILLmanager 5 и о самых важных принципах интерфейса BILLmanager 6, которые помогут избежать таких проблем.

Рассмотрим проблемы интерфейса BILLmanager 5 c точки зрения новичка. Для опытных пользователей они не так существенны, но чтобы стать опытным, нужно использовать продукт каждый или почти каждый день. А клиенты хостинг-провайдеров не заходят в личный кабинет, пока с заказанными услугами (например, виртуальным сервером) все в порядке.

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

Ниже на скриншоте пример такого решения. При первом использовании оно ставит многих в тупик.

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

На скриншоте дашборд, каким его видит пользователь-новичок BILLmanager 5. Очень много разнообразной информации, которая предоставлена по принципу «потому что она есть». Полезная информация (выделена красным) теряется среди менее важной.

Это приводит к тому, что пользователи-новички сталкиваются с проблемами при выполнении даже таких простых задач, как заказ услуг, пополнение баланса, запрос в службу поддержки. Многие просто не замечают нужных кнопок и пунктов меню (мы проверяли это на пользователях).

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

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

Написать в поддержку из такого состояния можно (не очень очевидно, но в левом нижнем углу в большом меню есть «Поддержка → Запросы»). Но если нажать на «Запросы», то для возвращения к свойствам VDS придется сделать минимум три клика через глобальную навигацию. Пользовательский контекст будет потерян, и кнопка «назад» в браузере тоже не поможет — она просто не работает со вкладками BILLmanager 5.

Этот подход проявляется во всем. Главных интерфейсных компонентов два: формы и списки. Нужно предоставить информацию текстом — выводим ее в виде формы с недоступными для редактирования полями. Формат дат как в базе данных. Почти во всех таблицах есть поле id (зачем, если в нем нет никакой понятной человеку информации?).

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

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

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

Пользователю одномоментно не нужны все возможности продукта, у него нет задачи зайти в каждый уголок сайта или личного кабинета. Но BILLmanager 5 сделан таким, чтобы его было удобнее делать, и это так просто — добавить еще один пункт в бесконечное левое меню… и вот уже нужен поиск, чтобы найти пункт меню в глобальной навигации (что, вообще-то, катастрофа).

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

Да, горизонтальное меню сложнее в реализации, мы вынуждены были проработать детально все элементы глобальной навигации и протестировать эти гипотезы на прототипах. Зато теперь самое важное доступно сразу.

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

В BILLmanager 5 эта же информация либо раскидана по нескольким страницам (а иногда и разделам), либо ее нет вообще.

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

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

Также мы знаем, что пользователи чаще всего заказывают что-то одно. В этом случае шаг «добавить в корзину» является лишним. Поэтому в BILLmanager 6 появилась возможность заказать и оплатить услугу сразу, минуя корзину. Например, вот так можно настроить заказ SSL-сертификатов:

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

Дашборд имеет несколько состояний в зависимости от количества активных услуг у пользователя и настроек провайдера. Если услуг нет — биллинг показывает доступные к заказу услуги, отсортированные в заданном провайдером порядке, либо сразу отправит на заказ главной услуги (но мы бы рекомендовали провайдерам настраивать услуги на дашборде). Если заказанных услуг мало — просто выведет их на дашборде. Если услуг много — выведет на дашборд самые проблемные.

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

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

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

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

Интеграция ISPmanager и VMmanager. Хотим сделать личный кабинет пользователя единой точкой управления ресурсами, которые он купил у провайдера.