IaaS, VPS, VDS, Частное и публичное облако, SSL
252,46
рейтинг
13 ноября 2014 в 14:57

Дизайн → Редизайн сайта хостинг-провайдера: ошибки и решения

image

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

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

Дизайн и создание интерфейсов продуктов являются одной из областей, в которых молодые проекты подчас вынуждены идти на компромиссы. И отказываться от них в дальнейшем совсем нелегко. Сегодня мы расскажем о том, как создавали сайт проекта хостинг-провайдера 1cloud и как, вскоре после запуска, работали над его редизайном.

Тестирование гипотез


Первоначальная концепция проекта формулировалась, как «магазин облачных решений» — мы хотели создать «маркетплейс», то есть площадку, на которую любой желающий мог бы загрузить свой продукт и продавать его. Однако после проведения анализа и первых тестов появилось понимание того, что лучше двигаться в сторону создания IaaS & PaaS-провайдера.

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

Ниже представлены макеты страниц, от внедрения которых мы отказались по разным причинам (по клику изображения открываются в полном размере):

image

Вариант в другой цветовой гамме:

image

image

В конечном итоге был привлечен новый UI-специалист. С ним удалось запустить проект, однако в интерфейсе все равно присутствовали определенные ошибки (особенно в навигации).

image

Внутренняя панель:

image

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

Для того, чтобы компенсировать потраченное время, мы решили прибегнуть к уже работающему решению, которое доказало свою жизнеспособность, и взяли за основу сайт популярной западной ИТ-компании DigitalOcean.

image

Отказ от временных решений


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

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

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

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

Что было сделано


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

Проблема: Поиск иформации о тарифах

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

Решение: Вынос калькулятора цен на главную страницу

На главную страницу был добавлен калькулятор цен, с помощью которого клиенты могут выбрать предварительно сконфигурированные тарифные планы (Low, Medium, High), но и сформировать «кастомный» тариф под свои нужды, указав любые возможные сочетания CPU, Storage и RAM.

image

Проблема: Слишком большой выбор тарифов путает пользователей

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

Решение: Конфигурация трех «жестких» тарифов и одного «кастомного»

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

Проблема: Никто не любит регистрироваться

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

image

Решение: Для регистрации достаточно указать email

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

Проблема: Скудная информация в тарифах

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

Решение: Вывод всей информации в конфигураторе на главной странице

Покупателю виртуального сервера необходимо сообщить о типе виртуализации, а также рассказать о других важных вещах, вроде типа диска, ширины канала и страны размещения. Вся подобная информация доступна на главной странице сайта 1cloud. Для основных позиций конфигуратора доступна интерактивная справка.

image

Проблема: Непонятно, как получить поддержку в экстренной ситуации

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

Решение: Ввод круглосуточной техподдержки

Помимо стандартного варианта с отправкой письма на почтовый адрес техподдержки, введена круглосуточная поддержка как по локальному номеру телефона в Санкт-Петербурге (+7(812) 313-88-33), так и по бесплатному номеру по всей России (8(800) 777-18-23).

Проблема: Сомнения в безопасности передаваемых данных

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

Решение: Использование защищенных соединений и сертификата, выданным авторитетным регистрационным центром

Сайты 1cloud.ru и panel.1cloud.ru используют сертификаты SSL сертификат выданный сертификационным центром (Go Daddy Secure Certificate Authority- G2). В данный момент ведутся работы по подключению EV-сертификата.

Проблема: Навязчивая безопасность

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

Решение: Возможность заказа сервера без SMS-верификации

Мы в 1cloud ввели тестовый период использования услуг, во время которого номер телефона пользователя не спрашивается. В дальнейшем возможен вариант, при котором условия тестового периода будут продлеваться после указания номера телефона.

Проблема: Неудобные способы оплаты

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

Решение: Добавление большинства популярных способов оплаты

Для физических лиц мы добавили возможности оплаты банковскими картами Visa, Master Card, а также электронными сервисами и с мобильных счетов (QIWI, Webmoney, ЯндексДеньги, МТС, Мегафон, Деньги@mail.ru, Web-Кошелек ПСКБ, EasyPay, LiqPay, Связной, Рапида, Евросеть).

Юрлица могут оплатить услуги только с помощью счета, но его можно сгенерировать прямо в личном кабинете.

Помимо решения этих проблем, мы занимались работой над созданием более приятного и удобного интерфейса. Что касается навигации, то раньше каждый раздел сайта смотрелся, как отдельный ресурс, все меню были оформлены разнородно — текущая версия интерфейса 1cloud.ru характеризуется большим единообразием.

image

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

К тому же мы планируем релиз нескольких новых услуг (например, DNS-aaS и Load Balance-aaS), что потребует интеграции систем управления ими в интерфейс личного кабинета.

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

На сегодня все. Будем рады ответить на вопросы и услышать обратную связь по реализации тех или иных элементов интерфейса в комментариях.
Автор: @1cloud
1cloud.ru
рейтинг 252,46
IaaS, VPS, VDS, Частное и публичное облако, SSL

Комментарии (16)

  • +3
    На мой взгляд очень сильно убивает облик серьезной компании это стоковые фотографии без обработки. Сразу появляется ощущение что сайт склепали из темплейта на WordPress, особенно не заморачиваясь.
    • 0
      А какая обработка должна быть? Картинка куплена, а не украдена, не очень понятен комментарий
      • +2
        Не хватает своего уникального стиля, фото реальных людей, продуктов. Тем чем проект будет отличатся от тысяч других сайтов.
        • –1
          Проект отличается от многих сайтов элементами, о которых мы рассказали по пунктам, если уж так говорить
          • +1
            я вот смотрю и все равно очень же похоже на digitalocean страница логин, один в один просто…
            А статья понравилась
            • +1
              Да, похожа, но в основном страницы логина так и делают — логотип, два поля с логином и паролем и кнопка. Особенно не разгуляешься.

              Спасибо, что читаете :).
      • +1
        Нужна ли эта картинка вообще? Слайдер с маркетоложеством и абстрактным клипартом меня бы только раздражал. И ссылку со знаком вопроса лучше ставить в конце label.
  • 0
    На первом фото у чувака справа клевый получился головной убор, кошерный)
  • 0
    В данном случае интерфейс лучше оценивать не по стоковым картинкам, а по тому, решает ли он поставленную перед ним задачу. В плане удобства калькулятора, он удобен, вполне, и думаю задачу свою решает не плохо. А вот слайдер свою задачу не решает. Его цель рассказать о плюсах, а сейчас он подгружает какие-то картинки, не яркие, ни о чем мне, как не опытному пользователю, не говорящие. Спас бы может быть еще текст, которым их подписали, но читать его в таком масштабе не удобно и не хочется.
    Поработайте над слайдером, и может быть имеет смысл убрать его и оставить только генератор тарифов, а плюсы вынести вниз четырьмя аккуратными иконками. Думаю было бы удобнее.
    • 0
      Спасибо за аргументированное мнение. Обязательно поработаем над тем, что Вы написали и внесем коррективы.
  • –1
    Спасибо за статью.
    У меня один впрос: как вы бретесь с опечаками в вших прсс-релизах?
    • +1
      Намек понятен ))

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

  • 0
    Спасибо за статью. Интересный сервис, самый дешевый с лицензионным windows server из тех, что я видел.
    Но, первые версии дизайна мне нравятся больше, и сам сайт не наполнен, это выглядит непрофессионально, да выбрать можно только windows-сервер. Вообщем, продукт еще сырой с точки зрения пользователя, имхо.
  • 0
    Спасибо за комментарий.

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

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

Самое читаемое Дизайн