Встречайте глобальный редизайн клиентской части BILLmanager — большого и сложного продукта для организации хостинга.
Я руководитель UX-группы в ISPsystem и хочу рассказать, как и почему мы это сделали.
Два года назад, в начале нашей работы, мы плохо представляли, что нам предстоит делать.
За это время компания не только приобрела дизайнеров и дизайнеров интерфейсов, но и значительно вырос штат фронтенд-разработчиков.
Мы научились работать по методологии Scrum и внедрили Youtrack для управления процессами разработки.
Если кому-то интересно, зачем мы все это делали и что делали, добро пожаловать под кат. 
BILLmanager от ISPsystem — комплексный программный продукт для автоматизации управления хостингом.
С одной стороны, это рабочее пространство для сотрудников хостинга (админка), где они могут управлять услугами, создавать тарифы и т. д. С другой стороны, это личный кабинет клиента хостинг-провайдера.
Наш редизайн пока затронул только клиентскую часть, то есть личный кабинет пользователя.
В личном кабинете клиент хостинг-провайдера может совершать платежи и отслеживать их историю, заказывать и управлять услугами, своим аккаунтом, а также писать в службу поддержки.
Продукт очень гибкий; В зависимости от настроек личный кабинет пользователя может выглядеть по-разному, что создает дополнительные трудности при проектировании и редизайне.
Почему вы решили изменить интерфейс?
ISPsystem появилась на рубеже 2000-х годов.Любой инструмент автоматизации в то время сам по себе был конкурентным преимуществом.
Для технологических компаний того времени было нормой то, что и сам продукт, и его дизайн были изобретены разработчиками-основателями.
То же самое было и с нами.
Но сегодня ситуация иная.
Сейчас хостинг заказывают люди, далекие от технических тонкостей – владельцы малого и среднего бизнеса, которым нужен простой и недорогой сайт. Они не хотят иметь дело со сложным интерфейсом и имеют на это право.
Столкнувшись с трудностями, они обращаются в поддержку или уходят не только из BILLmanager, но и от хостинг-провайдера.
Пришло время изменить интерфейс, сделать его простым и понятным для новой аудитории.
С чего мы начали?
Мы не делаем новый продукт, а дорабатываем существующий; тысячи людей используют его каждый день.Поэтому работа началась со сбора информации.
Мы обратились к нашим партнерам по хостингу.
Служба поддержки и отдел маркетинга предоставили много ценной информации о пользователях BILLmanager 5, включая ежедневные проблемы и сложности, с которыми они сталкиваются в интерфейсе.
Затем мы написали истории вакансий, разделили их на категории и расставили приоритеты, построили карту вакансий.
Затем мы нарисовали первые интерактивные прототипы нового интерфейса в Axure, чтобы понять и протестировать концепцию.
Прототипы оказались черновыми, далекими от использования в разработке, но помогли нам понять, куда двигаться дальше.
Прошло около четырех месяцев.
Далее я расскажу о некоторых проблемах BILLmanager 5 и важнейших принципах интерфейса BILLmanager 6, которые помогут вам избежать подобных проблем.
Проблемы с интерфейсом BILLmanager 5
Давайте посмотрим на проблемы интерфейса BILLmanager 5 с точки зрения новичка.Для опытных пользователей они не так значительны, но чтобы стать опытным пользователем, нужно использовать продукт каждый или почти каждый день.
А клиенты хостинг-провайдеров не заходят в личный кабинет, пока с заказанными услугами (например, виртуальным сервером) все в порядке.
По нашим данным, большинство клиентов провайдеров заходят в личный кабинет реже одного раза в неделю.
При этом стать опытным пользователем невозможно, а значит, неочевидные и непонятные с первого раза интерфейсные решения, скорее всего, так и останутся неочевидными.
Ниже приведен скриншот примера такого решения.
При первом использовании это сбивает с толку многих людей.
Функции, выделенные на скриншоте, становятся доступными, если щелкнуть строку в таблице (в данном случае строки представляют собой виртуальные серверы).
Но строка в таблице даже при наведении мыши вообще не выглядит кликабельной.
В этом случае выбранные функции никак визуально не связаны со строками таблицы.
И таких проблем в интерфейсе BILLmanager 5 немало, остановимся на самых главных.
Много ненужной информации
На скриншоте показан дашборд, каким его видит начинающий пользователь BILLmanager 5. Здесь очень много разнообразной информации, которая подается по принципу «потому что она есть».Полезная информация (выделена красным) теряется среди менее важной.
Это приводит к тому, что начинающие пользователи сталкиваются с проблемами при выполнении даже таких простых задач, как заказ услуг, пополнение баланса или обращение в поддержку.
Многие люди просто не замечают нужные кнопки и пункты меню (мы проверяли это на пользователях).
Процесс заказа услуг в BILLmanager 5 сложен.
С одной стороны, провайдер может очень гибко всё настроить, с другой — начинающий пользователь сталкивается с тремя основными проблемами:
- Для заказа услуги много шагов, некоторые бесполезны.
Даже при покупке одного виртуального сервера его необходимо сначала добавить в корзину и только потом оплачивать.
Некоторые шаги в мастере заказов на обслуживание могут содержать один параметр, иногда такой, который невозможно изменить.
На каждом этапе определенное количество пользователей обязательно выбывает.
- Вам предстоит выбирать услугу из большого списка тарифных планов без современных фильтров по параметрам.
- После заказа статус заказанной услуги не очевиден.
Например, от службы поддержки одного из наших партнеров мы узнали, что пользователи обращаются в службу поддержки после заказа виртуального сервера с вопросом, почему он не работает. Оказалось, что у этих пользователей не было подтвержденного номера телефона: услуга была заказана, оплачена, но не активирована.
Это нормальное поведение биллинга (такие настройки необходимы для предотвращения анонимного использования услуг), но пользователю необходимо предоставить информацию о том, что происходит и как решить эту проблему во время и сразу после заказа, а не в поддержке.
Потеря пользовательского контекста
Когда пользователь выполняет действия с определенными объектами, ему может потребоваться написать в службу поддержки.На скриншоте показан пример с виртуальным сервером.
Из этого состояния можно написать в поддержку (это не очень очевидно, но в большом меню в левом нижнем углу есть «Поддержка → Запросы»).
А вот если вы нажмете на «Запросы», то для возврата к свойствам 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
-
Обозреватель Стилей Дверей
19 Oct, 24 -
Мир Во Всем Мире…
19 Oct, 24 -
Финтех: 7 Трендов Космической Карьеры
19 Oct, 24 -
Мтс Добавляет Услуги Без Разрешения
19 Oct, 24
