Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
190
読者を置き去りにする技術
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
66
ファイルアクセスに関する脆弱性
carotene4035
0
100
僕らだけのアニメを放映する
carotene4035
3
1.3k
Featured
See All Featured
It's Worth the Effort
3n
183
28k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
For a Future-Friendly Web
brad_frost
175
9.4k
We Have a Design System, Now What?
morganepeng
51
7.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Navigating Team Friction
lara
183
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
The Invisible Side of Design
smashingmag
298
50k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Optimising Largest Contentful Paint
csswizardry
33
3k
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ツールを読みます