Кейс: Как Разрабатывался Новый Интерфейс Google Adwords

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

Редакция раздела «Интерфейсы» публикует перевод материала, завершенный Команда Скетчаппа.



Кейс: Как разрабатывался новый интерфейс Google AdWords

Инструмент AdWords генерирует большую часть миллиардов долларов доходов Google от рекламы.

Работая над AdWords, я уделял особое внимание UX для рекламодателей.

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

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



Облегчает понимание больших объемов данных

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

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

Это выглядит так: Такой подход требовал от рекламодателей слишком многого, и у многих из них были проблемы с рекламной сетью.

Проект «Отображение сводки» должен был решить эту проблему — создать сводную страницу с визуальным отображением ключевых данных.

Мне поручили разработать для него UX. Я решил использовать сводную страницу на основе карточек.

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

Эти ранние исследования помогли задать тон всему проекту.

Подготовительные исследования для отображения сводного экрана.

Мы использовали эту концепцию для сбора отзывов пользователей.

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

Карты на вкладке после некоторых изменений Этот проект потребовал множества раундов пользовательского тестирования и правок.

Все это время я работал над визуализацией данных с командой инженеров.

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

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

Это решение позже послужило толчком к переходу AdWords на Material design.

Кейс: Как разрабатывался новый интерфейс Google AdWords

Запуск сводного окна, отдых для глаз после предыдущего табличного интерфейса


Упростите создание кампании

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

Рекламодателям необходимо было воплотить свои бизнес-цели в наши условия и функции.

Это вызвало трудности у всех.

Вот, например, длина формы только для первого шага создания кампании.

Одним из моих крупнейших проектов в AdWords была новая платформа UX для создания таргетированных кампаний.

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

У нас было две основные задачи: определить общий набор целей, необходимых рекламодателю; создайте максимально удобный UX для выбора целей.

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

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

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

Было непросто создать интерфейс со всем набором инструментов и при этом не перегрузить его визуально.

Я использовал цвета, изображения и лучшую типографику, чтобы ее было легче читать.

Также нас преследовали технические трудности.

У рекламодателей было четыре целевых категории, но на выбор была только одна.

Более того, внутри категорий были взаимоисключающие варианты.

Чтобы решить первую проблему, я создал переходы и анимированные элементы, позволяющие сбросить выбор, если пользователь попытается выбрать несколько значений.

Во втором случае я использовал разделительную черту и знак «или», чтобы показать, что эти параметры можно выбирать вместе.

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

Пользователи оценили оба этих подхода.

И теперь наши пользователи увидели это вместо гигантской формы.

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



Внесите свой вклад в дизайн материалов

Создание кампании — это поэтапный процесс.

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

степпер — компонент, который позже был включен в библиотеку дизайна материалов.

Возможности Stepper, части библиотеки дизайна материалов.



Сделайте рекламу красивее и эффективнее

Ненавижу уродливые баннеры.

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

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

Для начала я понял, что некоторые шаблоны баннеров в AdWords устарели и некрасивы.

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

Я решил удалить 12 устаревших концепций и создать 4 совершенно новых.

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

Я помог им привести в порядок все движение и анимацию элементов.

Я также научил их основам хорошего дизайна.

Я создал эти четыре новых шаблона AdWords Помимо этих концепций, команда форматов рекламы продолжила работу над автоматическим преобразованием текстовых объявлений в полноценные баннеры.

Для этого нужно было взять логотип рекламодателя, выбрать подходящие изображения из других его объявлений и соединить их с посланием из текстового объявления.

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

Я предложил свою помощь.

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

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

Впервые дано столь подробное описание типа рабочего пространства и выбора цвета.

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

Об этом вы можете прочитать в блог АдСенс.

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



Помогите рекламодателям понять свою целевую аудиторию

Еще один мой проект — AdWords Audience Insight. Чтобы запустить успешную кампанию, рекламодателю необходимо не только знать, кто его целевая аудитория, но и понимать, кто воспримет послание рекламы.

AdWords Audience Insight ответит на эти вопросы.

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

Я также создал рабочие HTML-прототипы, чтобы наглядно показать разработчикам все анимированные элементы.

Это также помогло им внедрить CSS в код продукта.



Заключение

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

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

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

Вместе с данным постом часто просматривают: