Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
使いやすい広告管理画面について 考えてみる @carotene4035
Slide 2
Slide 2 text
ぼくが今、分からないこと • 広告管理画面の全体像が分からない • 使いやすい広告画面の条件が分からない
Slide 3
Slide 3 text
わからないと困ること • データ(モデル)に引っ張られた 画面ができてしまう
Slide 4
Slide 4 text
例 • 広告のモデル構造の確認 – キャンペーン＞広告グループ＞広告 • このモデル構造から運用画面の 遷移図を想像すると、
Slide 5
Slide 5 text
画面遷移図
Slide 6
Slide 6 text
わからないと困ること • データに引っ張られた画面ができてしまう • 結果、使いにくいものに なってしまうかもしれない • こまる
Slide 7
Slide 7 text
よって、本日のゴール • 既存の広告管理画面を読んで、 簡易な画面遷移図をおこし、全体像を掴む • 画面遷移図から「使いやすい広告管理画面 の条件」を推測する
Slide 8
Slide 8 text
Google Adwards
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
運用画面との切り替えが存在する レポート画面との切り替えができる
Slide 11
Slide 11 text
運用画面との切り替えが存在する ここにもういちまい
Slide 12
Slide 12 text
画面遷移図
Slide 13
Slide 13 text
Google その１ • 運用とレポートを 機能として明確に分けていることがわかる
Slide 14
Slide 14 text
サイドバーに キャンペーン ＆ 広告グループ の 一覧画面 それぞれの 運用画面
Slide 15
Slide 15 text
整理すると、画面遷移図はこうなる
Slide 16
Slide 16 text
整理すると、画面遷移図はこうなる キャンペーンAの管理画面 ↓ 広告グループbの管理画面 へ１手で移動
Slide 17
Slide 17 text
整理すると、画面遷移図はこうなる サイドバーというハブを挟んで、階層をまたいで移動できる かつ、 ハブがいつも見えているので移動が１手ですむ かつ、 「運用画面」への遷移なのですぐ編集ができる
Slide 18
Slide 18 text
Google その2 • キャンペーンと広告をまたいだ移動を 意識した画面遷移になっている
Slide 19
Slide 19 text
さっきの画面遷移図 そもそも「運用」という考えが抜けてしまっている ただデータを並べているだけ ハブがないので、階層をまたいで移動しようとすると１階層戻らないといけない もーいろいろひどい
Slide 20
Slide 20 text
Facebook Power Editor
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
各階層の一覧画面 移動用ハブ
Slide 23
Slide 23 text
画面遷移
Slide 24
Slide 24 text
画面遷移 ハブを挟んで、階層をまたいで移動できる だたしこちらは一覧画面
Slide 25
Slide 25 text
Facebook その1 • キャンペーン一覧間の移動、 広告グループ一覧間の移動、 広告一覧間の移動を意識した作りになってい る
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
運用とレポート画面の両方を 開くことができる画面がオーバーレイしてくる （遷移はしない）
Slide 28
Slide 28 text
運用とレポート画面を行き来できる
Slide 29
Slide 29 text
画面遷移
Slide 30
Slide 30 text
画面遷移 ただ、これだと 運用・レポート間の 階層をまたいだ移動ができない
Slide 31
Slide 31 text
ここにもハブがある
Slide 32
Slide 32 text
画面遷移 これで移動できる
Slide 33
Slide 33 text
Facebook その3 • 広告グループ間の移動（レポート、運用）、 広告間の移動（レポート、運用）を意識した画 面遷移になっている
Slide 34
Slide 34 text
TwiAer（おまけ）
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
まとめ
Slide 37
Slide 37 text
広告管理画面 全体像 • レポートと運用はわかれている • 階層をまたいだ移動を意識した設計になって いる
Slide 38
Slide 38 text
ぼくから質問 • なぜ分かれているのか • 見るタイミング・人が異なるから？
Slide 39
Slide 39 text
使いやすい広告画面とは • キャンペーン間、広告間、その間など、 同レベル階層だけでなく、 違うレベルの階層での移動がしやすいこと • かつ、移動するときに１手ですむこと
Slide 40
Slide 40 text
使いやすい広告画面とは • 今回、ターゲットは代理店なので、 「広告主をまたいだ移動」というのが 鍵になってくる気がしている （実際この間の会議でもそのような画面設計 に落ち着いた）
Slide 41
Slide 41 text
使いやすい広告画面とは（おまけ）
Slide 42
Slide 42 text
Google Adwards
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
ページ遷移してる？ 引きで見ると…
Slide 46
Slide 46 text
広告の編集画面は、 先程グラフだったところだった ページ遷移してない！
Slide 47
Slide 47 text
赤枠の中が書き換わる
Slide 48
Slide 48 text
ここはいつも見えている ↓ いつでも移動できる！
Slide 49
Slide 49 text
• 枠の中身だけ書き換えることにより、遷移を ストレスを無くしている • かつ、 いつでも別の広告編集画面に移動することが できる
Slide 50
Slide 50 text
Facebook Power Editor
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
階層をまたいで 一気に広告作成まで いってる。すごい
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Googleは枠を書き換えていたが、 Facebookはoverlayで対応 広く使えるのが魅力的
Slide 55
Slide 55 text
おまけの条件 • 画面全体の遷移がすくない（ほぼ無い） • 画面の階層構造を感じさせない
Slide 56
Slide 56 text
ぼくから質問 • 他になにか「つかいやすい条件」はないか？
Slide 57
Slide 57 text
次回 • BIツールを読みます