Партнерская сеть Target@mail.ru позволяет владельцам игр и приложений в социальных сетях (Одноклассники, МойМир) зарабатывать на показе рекламных объявлений. Нам предстояло спроектировать интерфейс той части партнерской сети, которая предназначена для владельцев рекламных площадок.

Задача:

Спроектировать и графически оформить весь интерфейс партнера от регистрации до вывода средств.

Результат:

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

Площадки — основной экран, с которым работает партнер, в компактном виде отражает важнейшую информацию по всем площадкам

Площадки — основной экран, с которым работает партнер, в компактном виде отражает важнейшую информацию по всем площадкам

«Статистика» отражает в наглядном виде суммарную информацию по всем площадкам по актуальным величинам: доходы, показы, клики

«Статистика» отражает в наглядном виде суммарную информацию по всем площадкам по актуальным величинам: доходы, показы, клики

Прозрачность и детализация взаиморасчетов между партнерами — залог долгого и плодотворного сотрудничества

Прозрачность и детализация взаиморасчетов между партнерами — залог долгого и плодотворного сотрудничества

Процесс:

Начинаем с главной страницы. Решили сделать акцент на том, ради чего все и затевается — сколько владелец площадки заработал.

Первый вариант главной страницы с выделением информации о доходе

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

Главная страница сервиса с двумя строчками данных статистики

Размещаем информацию в две строки, первая — фиксирована: со статистикой за текущий месяц , вторая — с переключателем: за вчера, за сегодня и новая идея: прогноз на конец текущего месяца.

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

Поэтому главная страница не нужна, входной становится страница „Площадки“ (по аналогии с рекламодателями и страницей? „Мои объявления“)».

Страница «Мои объявления» в разделе для рекламодателей сервиса Target@Mail.ru

Необходимо совместить 3 страницы: с главной страницы сохранить возможность пользователя оценить свой заработок; со страницы «Площадки» — все содержание; а со страницы «Мои объявления» (на сервисе рекламодателей) перенести формат построения страницы.

Главная страница, страница «Площадки» и страница «Мои объявления» (сервис рекламодателей) Заново созданная страница «Площадки»

В итоге, получаем совершенно новую страницу «Площадки».

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

Первый подход:

Гистограмма а) за 2 недели б) для всех площадок в) по доходу д) по дням Гистограмма а) за 2 недели б) для всех площадок в) по кликам д) по дням Гистограмма а) за последний месяц б) для всех площадок в) по доходу г) по дням

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

Гистограмма с возможным размещением данных по нескольким показателям.

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

Гистограмма а) за 2 недели б) для всех площадок в) по доходу, показам и кликам д) по дням Гистограмма а) за 2 недели б) для всех площадок в) по доходу д) по дням Гистограмма а) за последние 2 месяца б) для всех площадок в) по показам и кликам д) по дням

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

Заказчик: «Не пойдет. Может показаться, что верхний график „стоит“ на столбиках нижнего, а значит верхний уровень отражает оригинальную ситуацию. Давайте сделаем, как у рекламодателей — столбчатая диаграмма для одной величины и линейный график для второй».

График с данными в разделе для рекламодателей сервиса Target@Mail.ru

Отрисовываем финальный вариант с учетом пожеланий заказчика.

Новый вид графика на странице «Статистика»

Не менее интересно продвигалась работа над разделом «Помощь».

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

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

Страница «Помощь»

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

Окно поиска ответа на вопрос

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

Пример поиска ответа по ключевым словам вопроса

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

Форма отправки вопроса в службу поддержки

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

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

Набор графических элементов, использованных в прототипе