Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Интерфейс клиентского портала

2016

Интерфейс клиентского портала

Переработали дизайн личного кабинета с учетом цифровых привычек новой группы клиентов.

Цена

~ 950 000 ₽

Сроки

Интерфейс клиентского портала

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

Услугами международной хостинговой компании Servers.com пользуется в основном средний и крупный бизнес с нетривиальными задачами и индивидуальными запросами. И с этим все хорошо. Сейчас компания хочет добавить простой и понятный продукт для менее продвинутых клиентов.

Наши задачи

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

Плюсы и минусы

  • Знакомая тема Нам не нужно объяснять, что такое хостинг. Мы сами пользуемся услугами хостинга и уже проектировали подобные системы.
  • Тестирование по итерациям Мы создавали дизайн итерациями и после каждой могли проверить интерфейс на реальных пользователях.
  • Разнородная аудитория Интерфейс должен быть удобен и для малого предпринимателя, и для сисадмина корпорации. Это нелегко — они слишком разные.
  • Англоязычные пользователи Трудно найти респондентов из Европы и США.

Решение

В общем виде процесс улучшения интерфейса выглядит так.

  1. Выяснить, что люди пытаются делать при помощи этого интерфейса. Это не всегда очевидно.
  2. Определить узкие места: что мешает пользователю выполнить ту или иную задачу?
  3. Избавиться от узких мест.
  4. Проверить, стало ли пользователю легче.

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

  1. Просим пользователя выполнить задачу.
  2. Составляем список проблем, предлагаем решения.
  3. Корректируем предложения с учетом ограничений и бизнес-требований заказчика.
  4. Проектируем решение.
  5. Изменяем интерфейс.
  6. Просим пользователя выполнить задачу еще раз.

План-график Servers.com

Самое интересное и сложное, как обычно, в деталях.

Поиск респондентов

Заказчик хорошо представлял, с какими клиентами нужно поговорить. И в России респонденты нашлись бы без особого труда — хватает знакомых любой степени технической грамотности в компаниях разного масштаба. Все сложнее, когда нужны респонденты из Америки и Европы. Мы публиковали объявления на форумах, подключали друзей, живущих за границей. Этап поиска затянулся, но в итоге мы нашли подходящих респондентов. Можно было приступать к более понятной работе.

Подготовка сценариев

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

Задачи и вопросы пользователю. Интерфейс клиентского портала | SobakaPav.ru Перед тестированием нужно подготовить задачи и вопросы пользователю

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

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

Тестирование. Интерфейс клиентского портала | SobakaPav.ru Записывали видео, чтобы обработать его в спокойной обстановке и показать заказчику, как себя ведут и что говорят обычные пользователи

Обработка результатов тестирования

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

Pезультаты тестирования. Интерфейс клиентского портала | SobakaPav.ru Даже если пользователь справился с задачей, мы выдаем рекомендации, как сделать интерфейс еще более простым

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

Дизайн интерфейса

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

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

Упростили подбор конфигурации. Пользователь видит таблицу с результатами подбора — так удобней сравнивать.

Дизайн интерфейса клиентского портала | SobakaPav.ru Пользователь указывает конфигурацию и получает список подходящих предложений

Строка в таблице разворачивается в детальное описание, а подробную спецификацию можно скачать в pdf.

Дизайн интерфейса клиентского портала | SobakaPav.ru По клику открывается полная техническая информация. Есть даже возможность скачать спецификацию

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

Дизайн интерфейса клиентского портала. Дашборд | SobakaPav.ru Дашборд — самое сложное в личных кабинетах. Делать его нужно в последнюю очередь

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

Дизайн интерфейса клиентского портала | SobakaPav.ru А вы знали, что серверам, как кораблям, дают имена?

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

Результат

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

Пока же очевидно, что интерфейс стал проще, не потеряв в функциональности.

Без потери функциональности интерфейс стал понятным для менее продвинутых пользователей.

Отзыв заказчика

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

Цена

~ 950 000 ₽

Сроки