Встречайте глобальный редизайн клиентской части 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 сложный
С одной стороны, провайдер может все очень гибко настроить, с другой стороны, пользователь-новичок сталкивается с тремя основными проблемами:
- Много шагов заказа услуги, некоторые бесполезны. Даже при покупке одного виртуального сервера его надо сначала добавить в корзину, и только потом оплачивать. Некоторые шаги в мастерах заказа услуг могут содержать по одному параметру, иногда такому, который нельзя редактировать. На каждом шаге какое-то количество пользователей обязательно отваливается.
- Услугу приходится выбирать из большого списка тарифных планов без современных фильтров по параметрам.
- После заказе статус заказанной услуги не очевиден. Например, у службы поддержки одного из наших партнеров мы выяснили, что пользователи обращаются в службу поддержки после заказа виртуального сервера с вопросом о том, почему он не работает (хотя деньги уплочены). Оказалось, что у этих пользователей не был подтвержден телефон, услуга заказывалась, оплачивалась, но не активировалась. Это нормальное поведение биллинга (такие настройки необходимы для исключения анонимного использования услуг), но пользователю необходимо предоставлять информацию о том, что происходит и как решить эту проблему в процессе и непосредственно после заказа, а не в службе поддержки.
Потеря пользовательского контекста
Когда пользователь совершает действия с теми или иными объектами, ему бывает нужно написать в службу поддержки. На скриншоте пример с виртуальным сервером.
Написать в поддержку из такого состояния можно (не очень очевидно, но в левом нижнем углу в большом меню есть «Поддержка → Запросы»). Но если нажать на «Запросы», то для возвращения к свойствам придется сделать минимум три клика через глобальную навигацию. Пользовательский контекст будет потерян, и кнопка «назад» в браузере тоже не поможет — она просто не работает с вкладками 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. Хотим сделать личный кабинет пользователя единой точкой управления ресурсами, которые он купил у провайдера.
Автор: al_sor
