НОВАЯ ПАНЕЛЬ HOSTER.RU! УРА!

Ура! Ура!
«Мы строили, строили и, наконец, построили» — именно с этих строк знаменитого мультипликационного персонажа хочется начать наш анонс.
Действительно, работа над панелью управления cp.hoster.ru продолжалась почти целый год. Это было обусловлено не только сложностью проекта и технологическими особенностями, но и теми непредвиденными ситуациями, с которым приходилось сталкиваться с самого начала проекта.
Но обо всём по порядку.

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

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

Только спустя 6 месяцев с момента появления этого дизайн-макета мы смогли насладиться заказом услуги на свежесвёрстанной панели — это была первая серьёзная веха. После того, как эйфория первой удачи покинула нас, мы стали обращать внимание на мелочи. Так новая панель обзавелась подсказками, модальными окнами, некоторыми красивостями и удобностями.
И в тот момент, когда всё, казалось, готово – поплыла вёрстка.
Пришлось срочно менять CSS, так как то количество изменений, которое мы натыкали и намерили, оказалось критичным, и панель перекосило.
Разумеется при вторичной вёрстке были учтены все (насколько это возможно) предыдущие нюансы, красивости добавлены в шаблоны, JavaScript обуздан, а Ajax исправлен. К дизайну и юзабилити вопросов не было, дело упёрлось в неготовность бэк-энда.
Пока мы думали, как же сделать клиенту удобно, разработчикам стало скучно, они закисли на текучке, и их ряды несколько опустели. В связи с этим привязка функционала к интерфейсу затянулась на лишние недели.

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

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

Результат нашей работы, можно посмотреть и протестировать тут: http://test.hoster.ru/account
Ниже вы найдёте немного скрин-шотов.

P.S. Кстати, у нас одна свободная вакансия в отделе разработки. Работаем на PHP ;)

Эволюция на примере страницы пополнения счетов и пополнения баланса:

1

 

:)

 

2

 

От первого макета сохранились только бумажные эскизы.

3

 

Борьба за кнопочки.

4

 

Конечный вариант макета

5

 

А так пополнение баланса выглядит сейчас.

7

 

Пожалуй, самый мощный раздел -  управления хостингом.

 

 

Комментировать

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Опрос

В какой доменной зоне вы регистрируетесь чаще всего?

  • RU (100%, 2 ответ(-ов)
  • РФ (0%, 0 ответ(-ов)
  • COM (0%, 0 ответ(-ов)
  • SU (0%, 0 ответ(-ов)

Всего ответов: 2

Проголосовать

Loading ... Loading ...

Подписка

Можно почитать на:

vkontakte
Google+
Facebook
habrahabr

Фото

x_90e4baf0 x_d342010a x_caac2243 x_3c88059e

Дмитрий Шаров

Генеральный директор

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