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

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

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

Инструмент AdWords приносит Google большую часть дохода от рекламы, который исчисляется миллиардами долларов. Работая над AdWords, я обращал особое внимание на UX для рекламодателей. Моей целью было помочь им лучше понимать данные и принимать более правильные решения для бизнеса. Не могу поделиться всеми своими наработками, но представлю некоторые проекты, в которых я работал в качестве ведущего дизайнера. Упростить понимание большого количества данных


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



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

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



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

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

Карточки на вкладке после некоторых изменений

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

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



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

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



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

У нас было две основные задачи:

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

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

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



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

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

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

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

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

Особенности Stepper, часть библиотеки material design Сделать рекламу красивее и эффективнее

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

Для начала я осознал, что некоторые шаблоны баннеров в AdWords устаревшие и некрасивые. Их использовали мелкие рекламодатели, которые не могли нанять хороших дизайнеров. Я решил удалить 12 устаревших концепций и создал 4 абсолютно новых. Я отправился в Шанхай к разработчикам этой функциональности и неделю совершенствовал ее реализацию. Я помог им привести в порядок все перемещения и анимацию элементов. Также я рассказал им об основах хорошего дизайна.

Я создал эти четыре новых шаблона для AdWords

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

Конвертация текста в баннер

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

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



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

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

Что касается, других моих проектов, я плотно работал с менеджером по продукту, чтобы ясно понять, каким должен быть продукт. Затем изучал пользовательские исследования и получал отзывы рекламодателей об использовании системы. Еще я создал рабочие HTML-прототипы, чтобы наглядно показать разработчикам все анимированные элементы. Это также помогло им внедрить CSS в код продукта. Заключение

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