Кейс: Как разрабатывался новый интерфейс Google AdWords
Позитив 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
Также к этим концептам команда, работавшая надо форматами рекламы, продолжала работать по-над автоматической конвертацией текстовой рекламы в полноценные баннеры. Для того этого нужно было взять логотип рекламодателя, подобрать подходящие изображения из других его объявлений и слить с сообщением из текстовой рекламы.
Конвертация текста в баннер
Накопление этих логотипов и изображений относится к искусству разработки, а автоматически соединить их в красивую картинку было сложной задачей.
Я предложил свою участие. Сперва детально расписал работу фреймворка интересах выбора нужных цветов из доступных в логотипе, пусть они сочетались с рекламируемым брендом. Следом создал большую рабочую область нате основании полученного изображения и соотношения сторон. Такое детальное изложение типа рабочей области и выбора цвета было завершенно впервые.
Это помогло разработчикам счесть, как расположить картинку во всех возможных ситуациях и чтобы всех основных размеров баннеров. Об этом годится. Ant. нельзя прочесть в блоге AdSense. Я не могу звонить во все колокола цифры, но реализация этого проекта доказала, как будто успешная работа баннерной рекламы напрямую зависит ото дизайна.
Помочь рекламодателям понять их целевую аудиторию
До этого времени один мой проект — AdWords Audience Insight. Про запуска успешной кампании рекламодателю нужно безграмотный просто знать, кто его целевая помещение, но и понимать, кто будет (идёт посыл рекламы. AdWords Audience Insight ответит держи эти вопросы.
Что касается, других моих проектов, я накрепко работал с менеджером по продукту, с тем чтобы ясно понять, каким должен бытийствовать продукт. Затем изучал пользовательские исследования и получал отзывы рекламодателей об использовании системы. Опять я создал рабочие HTML-прототипы, дай вам наглядно показать разработчикам все анимированные круги. Это также помогло им насадить CSS в код продукта.
Заключение
Создание основного источника дохода исполнение) Google требует дисциплинированной, тщательной и самоотверженной работы по-над проектом. Каждая деталь дизайна, каждое формулировка подвергалось тщательному обсуждению и проработке. Изрядно обладать глубокими знаниями продукта, по-над которым идет работа, и использовать отзывы и исследования чтобы улучшения дизайна.
нет комментариев