$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
使いやすい広告管理画面について考えてみる
Search
carotene4035
August 22, 2018
0
38
使いやすい広告管理画面について考えてみる
carotene4035
August 22, 2018
Tweet
Share
More Decks by carotene4035
See All by carotene4035
GraphQLのN+1問題を解決したい
carotene4035
1
180
読者を置き去りにする技術
carotene4035
13
8.1k
Aws is emotional.
carotene4035
2
270
名称未設定.pdf
carotene4035
0
200
migrationツールについて
carotene4035
0
77
AWSネットワーク入門
carotene4035
2
300
adtech history
carotene4035
0
64
ファイルアクセスに関する脆弱性
carotene4035
0
100
僕らだけのアニメを放映する
carotene4035
3
1.3k
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
21
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Become a Pro
speakerdeck
PRO
25
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Thoughts on Productivity
jonyablonski
67
4.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What's in a price? How to price your products and services
michaelherold
243
12k
Gamification - CAS2011
davidbonilla
80
5.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
使いやすい広告管理画面について 考えてみる @carotene4035
ぼくが今、分からないこと • 広告管理画面の全体像が分からない • 使いやすい広告画面の条件が分からない
わからないと困ること • データ(モデル)に引っ張られた 画面ができてしまう
例 • 広告のモデル構造の確認 – キャンペーン>広告グループ>広告 • このモデル構造から運用画面の 遷移図を想像すると、
画面遷移図
わからないと困ること • データに引っ張られた画面ができてしまう • 結果、使いにくいものに なってしまうかもしれない •
こまる
よって、本日のゴール • 既存の広告管理画面を読んで、 簡易な画面遷移図をおこし、全体像を掴む • 画面遷移図から「使いやすい広告管理画面 の条件」を推測する
Google Adwards
None
運用画面との切り替えが存在する レポート画面との切り替えができる
運用画面との切り替えが存在する ここにもういちまい
画面遷移図
Google その1 • 運用とレポートを 機能として明確に分けていることがわかる
サイドバーに キャンペーン & 広告グループ の 一覧画面
それぞれの 運用画面
整理すると、画面遷移図はこうなる
整理すると、画面遷移図はこうなる キャンペーンAの管理画面 ↓ 広告グループbの管理画面 へ1手で移動
整理すると、画面遷移図はこうなる サイドバーというハブを挟んで、階層をまたいで移動できる かつ、 ハブがいつも見えているので移動が1手ですむ かつ、 「運用画面」への遷移なのですぐ編集ができる
Google その2 • キャンペーンと広告をまたいだ移動を 意識した画面遷移になっている
さっきの画面遷移図 そもそも「運用」という考えが抜けてしまっている ただデータを並べているだけ ハブがないので、階層をまたいで移動しようとすると1階層戻らないといけない もーいろいろひどい
Facebook Power Editor
None
各階層の一覧画面 移動用ハブ
画面遷移
画面遷移 ハブを挟んで、階層をまたいで移動できる だたしこちらは一覧画面
Facebook その1 • キャンペーン一覧間の移動、 広告グループ一覧間の移動、 広告一覧間の移動を意識した作りになってい る
None
運用とレポート画面の両方を 開くことができる画面がオーバーレイしてくる (遷移はしない)
運用とレポート画面を行き来できる
画面遷移
画面遷移 ただ、これだと 運用・レポート間の 階層をまたいだ移動ができない
ここにもハブがある
画面遷移 これで移動できる
Facebook その3 • 広告グループ間の移動(レポート、運用)、 広告間の移動(レポート、運用)を意識した画 面遷移になっている
TwiAer(おまけ)
None
まとめ
広告管理画面 全体像 • レポートと運用はわかれている • 階層をまたいだ移動を意識した設計になって いる
ぼくから質問 • なぜ分かれているのか • 見るタイミング・人が異なるから?
使いやすい広告画面とは • キャンペーン間、広告間、その間など、 同レベル階層だけでなく、 違うレベルの階層での移動がしやすいこと • かつ、移動するときに1手ですむこと
使いやすい広告画面とは • 今回、ターゲットは代理店なので、 「広告主をまたいだ移動」というのが 鍵になってくる気がしている (実際この間の会議でもそのような画面設計
に落ち着いた)
使いやすい広告画面とは(おまけ)
Google Adwards
None
None
ページ遷移してる? 引きで見ると…
広告の編集画面は、 先程グラフだったところだった ページ遷移してない!
赤枠の中が書き換わる
ここはいつも見えている ↓ いつでも移動できる!
• 枠の中身だけ書き換えることにより、遷移を ストレスを無くしている • かつ、 いつでも別の広告編集画面に移動することが できる
Facebook Power Editor
None
階層をまたいで 一気に広告作成まで いってる。すごい
None
Googleは枠を書き換えていたが、 Facebookはoverlayで対応 広く使えるのが魅力的
おまけの条件 • 画面全体の遷移がすくない(ほぼ無い) • 画面の階層構造を感じさせない
ぼくから質問 • 他になにか「つかいやすい条件」はないか?
次回 • BIツールを読みます