Статьи

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

  1. Спростити розуміння великої кількості даних
  2. Спростити створення кампаній
  3. Внести вклад в material design
  4. Зробити рекламу красивіше і ефективніше
  5. Допомогти рекламодавцям зрозуміти їх цільову аудиторію
  6. висновок

Інструмент AdWords приносить Google більшу частину доходу від реклами, який обчислюється мільярдами доларів. Працюючи над AdWords, я звертав особливу увагу на UX для рекламодавців. Моєю метою було допомогти їм краще розуміти дані і приймати більш правильні рішення для бізнесу. Не можу поділитися всіма своїми напрацюваннями, але представлю деякі проекти, в яких я працював в якості провідного дизайнера.

Спростити розуміння великої кількості даних

Щоб розуміти, як працює рекламна кампанія, менеджери рекламно-банерної мережі повинні вміти розшифровувати величезна кількість табличних даних на семи вкладках, щоб зрозуміти, як працює їхня рекламна кампанія. Щоб отримати потрібну інформацію з усього обсягу даних, їм доводиться стає експертами в сортуванні, фільтрації і розподілі інформації. Це виглядає ось так:

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

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

Ці ранні дослідження допомогли задати тон всьому проекту

Підготовчі дослідження для відображення зведеного екрану. Ми використовували такий концепт для збору відгуків користувачів

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

Картки на вкладці після деяких змін Картки на вкладці після деяких змін

Для цього проекту потрібно було багато етапів призначених для користувача тестів і правок. Протягом цього часу я попрацював над візуалізацією даних з командою інженерів. Я пояснював їм, які інструменти необхідно впровадити - наприклад, можливість показу кругової діаграми.

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

Це рішення в подальшому надихнуло на перехід AdWords на Material design

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

Спростити створення кампаній

Раніше, щоб створити рекламну кампанію з усіма даними, було потрібно заповнити довгу складну форму, повну технічних термінів. Рекламодавцям потрібно було переводити свої бізнес-цілі в наші терміни та функції. Це викликало складності у всіх. Ось, наприклад, довжина форми тільки для першого кроку створення кампанії.

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

У нас було дві основні задачі:

  • визначити загальний набір цілей, необхідних рекламодавцю;
  • створити максимально зручний UX для вибору цілей.

Була виконана величезна робота, до якої залучили безліч людей, зацікавлених в продукті. Від них вимагалося прийти до спільної думки про систему і використання її для своїх потреб.

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

Ось деякі з них:

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

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

У другому випадку я використав розділові смуги і напис «або», щоб показати, що ці параметри можуть бути обрані разом. Використання радіокнопок ускладнило б сприйняття. Обидва ці підходи користувачі оцінили по достоїнству.

І ось наші користувачі замість гігантської форми побачили це. Ми попросили їх розповісти про цілі на своїй мові, а не на нашому, і налаштували весь процес тільки на підставі обраних варіантів.

Внести вклад в material design

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

Особливості Stepper, частина бібліотеки material design Особливості Stepper, частина бібліотеки material design

Зробити рекламу красивіше і ефективніше

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

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

Я створив ці чотири нових шаблону для AdWords Я створив ці чотири нових шаблону для AdWords

До того ж до цих концептів команда, яка працювала над форматами реклами, продовжувала працювати над автоматичною конвертацією текстової реклами в повноцінні банери. Для цього потрібно було взяти логотип рекламодавця, вибрати відповідні зображення з інших його оголошень і об'єднати з повідомленням з текстової реклами.

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

Збір цих логотипів і зображень відноситься до мистецтва розробки, але автоматично з'єднати їх в красиву картинку було складним завданням.

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

Це допомогло розробникам зрозуміти, як розташувати картинку в усіх можливих ситуаціях і для всіх основних розмірів банерів. Про це можна прочитати в блозі AdSense. Я не можу розголошувати цифри, але реалізація цього проекту довела, що успішна робота банерної реклами безпосередньо залежить від дизайну.

Допомогти рекламодавцям зрозуміти їх цільову аудиторію

Ще один мій проект - AdWords Audience Insight. Для запуску успішної кампанії рекламодавцю потрібно не просто знати, хто його цільова аудиторія, а й розуміти, хто буде сприймати посил реклами. AdWords Audience Insight відповість на ці питання.

Що стосується, інших моїх проектів, я щільно працював з менеджером по продукту, щоб ясно зрозуміти, яким повинен бути продукт. Потім вивчав призначені для користувача дослідження і отримував відгуки рекламодавців про використання системи. Ще я створив робочі HTML-прототипи, щоб наочно показати розробникам все анімовані елементи. Це також допомогло їм впровадити CSS в код продукту.

висновок

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

Новости