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

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



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

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

    Почему решили менять интерфейс


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

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

    С чего мы начали


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

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

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

    Проблемы интерфейса BILLmanager 5


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

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

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



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

    Много ненужной информации


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



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

    Процесс заказа услуг в BILLmanager 5 сложный


    С одной стороны, провайдер может все очень гибко настроить, с другой стороны, пользователь-новичок сталкивается с тремя основными проблемами:
    1. Много шагов заказа услуги, некоторые бесполезны. Даже при покупке одного виртуального сервера его надо сначала добавить в корзину, и только потом оплачивать. Некоторые шаги в мастерах заказа услуг могут содержать по одному параметру, иногда такому, который нельзя редактировать. На каждом шаге какое-то количество пользователей обязательно отваливается.
    2. Услугу приходится выбирать из большого списка тарифных планов без современных фильтров по параметрам.
    3. После заказа статус заказанной услуги не очевиден. Например, у службы поддержки одного из наших партнеров мы выяснили, что пользователи обращаются в службу поддержки после заказа виртуального сервера с вопросом о том, почему он не работает. Оказалось, что у этих пользователей не подтвержден телефон: услуга заказывается, оплачивается, но не активируется. Это нормальное поведение биллинга (такие настройки необходимы для исключения анонимного использования услуг), но пользователю необходимо предоставлять информацию о том, что происходит, и как решить эту проблему в процессе и непосредственно после заказа, а не в службе поддержки.

    Потеря пользовательского контекста


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



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

    Проблемы BILLmanager 5 нельзя исправить косметическими изменениями. Дело не в иконках или размере текста (хотя и в них тоже). Дело в подходе: продукт сделан так, как его было удобно ДЕЛАТЬ, а нужно, чтобы его было удобно ИСПОЛЬЗОВАТЬ.

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

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

    Принципы интерфейса BILLmanager 6


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

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

    Простая информационная структура для пользователя


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



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



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

    Карточки объектов


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



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

    Контекст важен


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



    Разные способы заказа услуг


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

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



    Думаем, что нужно пользователю


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

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

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

    Тестируем на себе


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

    Что дальше


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

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

    Интеграция ISPmanager и VMmanager. Хотим сделать личный кабинет пользователя единой точкой управления ресурсами, которые он купил у провайдера.
    ISPsystem 134,08
    Софт для хостинга: ISPmanager, BILLmanager и др.
    Поделиться публикацией
    Комментарии 11
      0
      Круто выглядит!
      А интерфейс для ISPManager планируете переделывать, может, уже ведутся работы? В нем тоже хватает неочевидных вещей.
        0
        работы над новым интерфейсом ISPmanager ведутся, да
          0
          Спасибо, рады, что вам нравится интерфейс!
          Соглашусь насчет неочевидных вещей в ISPmanager 5, причины во многом схожи с биллингоыми.
          В прошлом году представляли партнерам концепцию ISPmanager 6 — по ссылке статья на эту тему.
          0

          А имя уже можно сменить или всё ещё залочено в коре?

            0
            А что на счет модулей интеграции? Например Opennebula, vSphere и т.д. Сторонние разработчики читаю доку и шлют в лес…
              0
              Антон, конечно, будем расширять список интеграций. В первую очередь появится модуль интеграции с OpenStack, далее в планах — vSphere. OpenNebula пока нет в road map…
                0
                А какие сроки примерно? Интересует OpenStack и vSphere?
                  0
                  Модуль OpenStack на стадии разработки, и сроки релиза появятся чуть позже — рекомендую следить за changelog'ом. По vSphere пока не дам никакой информации — будет очень примерно.
              0
              Несколько раз уже видел, как ваша поддержка переименовывает тикеты в биллинге потому, что в новом интерфейсе нет понятия тема тикета и автоматически генерируется изрядная чушь. Так ли надо было это убирать? Один из моментов, кстати, который сдерживает от апгрейда на 6-ку.
                0
                Напишу несколько слов, почему мы так сделали. Кажется что для пользователя, который новичок, запрос в поддержку это некий стресс (большой или маленький, наверное зависит от обстоятельств). Поэтому, если смотреть со стороны этого пользователя, лучше бы этот процесс был попроще. И мы сделали попроще. Поддержке придется чуть сложнее чем раньше, но мы знаем, что в значительном количестве тикетов, созданных с помощью старого интерфейса, где тему указать можно, поддержка все равно переименовывает тикеты, потому что туда пользователи-новички иногда пишут что-то типа «Здравствуйте», или иное, не относящееся к сути вопроса.

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

                Впрочем, хоть мы и верим в то, что сделали правильно, если поймем по фидбеку, что стало сильно хуже — будем думать, как все исправить.
                  0
                  Странно, у нас пользователи в теме пишут именно тему, а «Здравствуйте» уже в теле сообщения. Хотя возможно, у кого-то это не так и поле мешает.

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

                  Плюс, сотруднику поддержки гораздо удобнее по теме сообщения сразу прикинуть, сможет он ответить на него или надо передать запрос дальше.

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

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

              Самое читаемое