Задача:
Результат:
Буквально за два месяца был полностью (67 страниц) спроектирован весь интерфейс партнера.
![Площадки — основной экран, с которым работает партнер, в компактном виде отражает важнейшую информацию по всем площадкам](https://userhouse.ru/i/project/result/images/Result_1_hr.jpg)
Площадки — основной экран, с которым работает партнер, в компактном виде отражает важнейшую информацию по всем площадкам
![«Статистика» отражает в наглядном виде суммарную информацию по всем площадкам по актуальным величинам: доходы, показы, клики](https://userhouse.ru/i/project/result/images/Result_2_hr.jpg)
«Статистика» отражает в наглядном виде суммарную информацию по всем площадкам по актуальным величинам: доходы, показы, клики
![Прозрачность и детализация взаиморасчетов между партнерами — залог долгого и плодотворного сотрудничества](https://userhouse.ru/i/project/result/images/Result_3_hr.jpg)
Прозрачность и детализация взаиморасчетов между партнерами — залог долгого и плодотворного сотрудничества
Процесс:
Начинаем с главной страницы. Решили сделать акцент на том, ради чего все и затевается — сколько владелец площадки заработал.
![Первый вариант главной страницы с выделением информации о доходе](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/1.png)
Хорошо, но сложно отследить динамику — «На этой неделе мы заработали больше чем на прошлой? А в этом месяце?» Плюс заказчик просит выводить не только деньги, но и показы, клики, CTR. Добавляем требуемые величины и возможность сравнения цифр с прошлыми периодами.
![Главная страница сервиса с двумя строчками данных статистики](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/2.png)
Размещаем информацию в две строки, первая — фиксирована: со статистикой за текущий месяц , вторая — с переключателем: за вчера, за сегодня и новая идея: прогноз на конец текущего месяца.
Заказчик: «Да, с переключателем хорошо придумали, оставляем. И вот еще: у нас уже готовы страницы сервиса рекламодателей? Необходимо при проектировании партнерской сети сохранить преемственность.
Поэтому главная страница не нужна, входной становится страница „Площадки“ (по аналогии с рекламодателями и страницей? „Мои объявления“)».
![Страница «Мои объявления» в разделе для рекламодателей сервиса Target@Mail.ru](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/3.png)
Необходимо совместить 3 страницы: с главной страницы сохранить возможность пользователя оценить свой заработок; со страницы «Площадки» — все содержание; а со страницы «Мои объявления» (на сервисе рекламодателей) перенести формат построения страницы.
В итоге, получаем совершенно новую страницу «Площадки».
Большое внимание уделяем гистограммам со статистикой. Стараемся найти формат отображения, который будет наглядным в различных условиях. Учитываем, что на графике может отображаться любая из величин: показы, клики, CTR, цена за клик, доход, а так же, что данные могут группироваться по любому из периодов: день, неделя, месяц.
Первый подход:
В процессе работы над видом гистограмм заказчик добавляет пожелание видеть на одном графике сразу несколько величин. Ищем способы совмещения данных.
![Гистограмма с возможным размещением данных по нескольким показателям.](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/11-12.png)
Худрук: «Не пойдет. Построй такой график за 3 месяца по трем величинам и попробуй разобраться в получившемся. Надо убирать массивную заливку столбиков, делать ее легче, но усилить акцент на верхней границе столбика. И надо выводить значения один над другим, чтобы можно было отследить динамику по каждому».
Дизайнер: «Нарисовал. Изменил тип отображения нескольких величин на одном графике и изменил отображения каждого столбца. Теперь тенденции видно значительно лучше, независимо от выбранного временного периода.»
Заказчик: «Не пойдет. Может показаться, что верхний график „стоит“ на столбиках нижнего, а значит верхний уровень отражает оригинальную ситуацию. Давайте сделаем, как у рекламодателей — столбчатая диаграмма для одной величины и линейный график для второй».
![График с данными в разделе для рекламодателей сервиса Target@Mail.ru](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/16.png)
Отрисовываем финальный вариант с учетом пожеланий заказчика.
![Новый вид графика на странице «Статистика»](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/17.png)
Не менее интересно продвигалась работа над разделом «Помощь».
Заказчик: «Мы хотим, чтобы пользователь самостоятельно мог решить свои вопросы и только в крайнем случае обращался в службу поддержки».
Мы: Предлагаем совместить на одной станице все способы решения проблемы пользователя, акцентировав внимание на уже написанных материалах.
![Страница «Помощь»](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/18.png)
Центральное место занимает список часто задаваемых вопросов, слева раздел подробной справки, снизу форма задания вопроса.
![Окно поиска ответа на вопрос](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/19.png)
Нововведение заключается в том, что когда пользователь ввел свой вопрос, система анализирует его и предлагает релевантные разделы справки.
![Пример поиска ответа по ключевым словам вопроса](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/20.png)
Если и это не помогло решить проблему, пользователь может обратиться в службу поддержки. Форма отправки вопроса в службу поддержки идет сразу после списка ссылок.
![Форма отправки вопроса в службу поддержки](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/21.png)
Таким образом мы увеличиваем вероятность самостоятельного решения проблемы пользователем и уменьшаем нагрузку на службу поддержки.
Заказчик попросил сделать прототип не условным, а с графическим оформлением интерфейса. К деталям отнеслись с любовью и вниманием.
![Набор графических элементов, использованных в прототипе](/i/target.%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81/22.png)
Поделиться в соцсетях
Другие проекты по проектированию интерфейсов
![Маркет Красок](https://userhouse.ru/i/client/logos/_Market_Krasok_2_hr.png)
![Ultima](https://userhouse.ru/i/client/logos/_Ultima_2_hr.png)
![Happy Bottle](https://userhouse.ru/i/client/logos/_hb_2.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![Forex Club](https://userhouse.ru/i/client/logos/_ForexClub_2_hr.png)
![ILP Agency](https://userhouse.ru/i/client/logos/_ILP_2_1_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)
![Резонит](https://userhouse.ru/i/client/logos/_Rezonit_2_hr1.png)