Как мы делали cp.hoster.ru

Ура! Ура!

«Мы строили, строили и, наконец, построили» — именно с этих строк знаменитого мультипликационного персонажа хочется начать наш анонс.

Действительно, работа над панелью управления cp.hoster.ru продолжалась почти целый год.  Это было обусловлено не только сложностью проекта и технологическими особенностями, но и теми непредвиденными ситуациями, с которым приходилось сталкиваться с самого начала проекта.  Но, обо всём по порядку.

Планирование

Ни для кого не секрет, что дружественный интерфейс — это половина успеха любого нововведения.

Если пользователь не может интуитивно заказать, оплатить и управлять тем, что заказал, он, скорее всего, уйдёт или «скушает мозг» технической поддержке.

Проект создания новой панели управления зародился очень давно. Менялись руководители Hoster.ru и менялся взгляд на панель. Кто-то предлагал реализовать аскетичный дизайн с функционалом чуть ли ни на одной странице, кто-то предлагал сделать навороченную блоковую систему, которую пользователь мог бы настраивать под себя… Но, очевидно, что это крайности, которые привели бы к умножению ошибок, либо к огромным затратам и слишком долгосрочной реализации. В итоге была определена цель: сделать сбалансированный вариант, который был бы удобен, нагляден, а главное — интуитивно понятен пользователю.

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

В итоге, рвение всех сторон «устаканилось», и начались расчёты, изучение рынка, поиск партнёров-юзабилитистов и дизайнерский аутсорс. Поехали!

Реализация

Творцы взялись за карандаш и изобразили квадратное нечто с кнопочками.

Тем временем подоспели юзабилитисты. После нескольких месяцев плотного взаимодействия, появились первые цветные макеты, складывающиеся в логический прототип.

И тут нас ждал первый подвох: когда мы наложили логику прототипа на графику эскизов, мы поняли, что панель получится перегруженной и тяжёлой для интуитивного восприятия. Пришлось убрать часть «менюшек», сократить количество разделов и… снова «не то», т.к. посыпалась уже логика. Вызывая бурю эмоций у разработчиков, меняем логику. Изменили, но как-то поссорились с расположением кнопочек, пришлось ехать к юзабилитистам и, размахивая руками, отстаивать нововведения – спасибо им за терпение.

Опять изменение прототипа и перерисовка дизайна – варианты, сделанные нами «на коленке», сильно расстраивали. Поиск дизайнера… глаза в кучку после просмотра сотни работ, и вдруг: «Оно!» — работаем. Далее споры, опросы, анализ, решение. И через пару недель наш дизайн-макет стал совпадать с прототипом, но мы опять упёрлись в логику. Этот цикл компромиссов, казалось, не закончится никогда. С каждым обсуждением и переделкой мы собирали десятую часть страницы или раздела, меряли линейками экран, кликали с завязанными глазами на кнопки разделов, перерисовывали, передумывали и… — О чудо! — готовый дизайн-макет 10 основных страниц, вполне себе кликабельный, цветастенький и даже с, частично работающим, бэк-эндом.

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

И в тот момент, когда всё, казалось, готово – поплыла вёрстка.

Пришлось срочно менять CSS, так как то количество изменений, которое мы натыкали и намерили, оказалось критичным, и панель перекосило.

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

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

Тестирование

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

Итог

Мы гордимся:

  • Упрощённой регистрацией и удобным заполнением профиля;
  • Строго-вертикальным разделением: слева — финансы, справа — техническая часть;
  • Продуманной логикой: исходя из цели визита на страницу панель сама предлагает клиенту следующий оптимальный шаг;
  • Логикой разделения заказа и услуг;
  • Крупными кнопками с логичным расположением;
  • Автоматической активацией заказа (бета-тестирование);
  • Встроенной системой заявок с разделением по отделам и возможностью просмотра статуса (бета-тестирование);
  • Автоматическим созданием хоста и папки на сервере;
  • Автоматическим продлением услуг (бета-тестирование);
  • Привязкой к новым серверам и новой биллинговой системе;
  • Отсутствием визуальной перегруженности интерфейса.

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

Результат нашей работы, можно посмотреть и протестировать, заказав любую услугу хостинга на сайте http://www.hoster.ru/ — 10 дней тестового режима и простая регистрация. А ниже можно посмотреть забавный пример эволюции странички оплаты и управления счетами и немного других скрин-шотов.

Пример эволюции:

cphosterru-1

cphosterru-2

cphosterru-3

cphosterru-4

cphosterru-5

Немного основных разделов

cphosterru-123456

cphosterru-12345

cphosterru-1234

cphosterru-123