$30 off During Our Annual Pro Sale. View Details »

使いやすい広告管理画面について考えてみる

carotene4035
August 22, 2018
31

 使いやすい広告管理画面について考えてみる

carotene4035

August 22, 2018
Tweet

Transcript

  1. 使いやすい広告管理画面について  
    考えてみる
    @carotene4035

    View Slide

  2. ぼくが今、分からないこと
    •  広告管理画面の全体像が分からない  
    •  使いやすい広告画面の条件が分からない  

    View Slide

  3. わからないと困ること
    •  データ(モデル)に引っ張られた  
    画面ができてしまう  

    View Slide


  4. •  広告のモデル構造の確認  
    – キャンペーン>広告グループ>広告  
    •  このモデル構造から運用画面の  
    遷移図を想像すると、

    View Slide

  5. 画面遷移図

    View Slide

  6. わからないと困ること
    •  データに引っ張られた画面ができてしまう  
    •  結果、使いにくいものに  
    なってしまうかもしれない  
    •  こまる  

    View Slide

  7. よって、本日のゴール
    •  既存の広告管理画面を読んで、  
    簡易な画面遷移図をおこし、全体像を掴む  
    •  画面遷移図から「使いやすい広告管理画面
    の条件」を推測する  

    View Slide

  8. Google  Adwards

    View Slide

  9. View Slide

  10. 運用画面との切り替えが存在する
    レポート画面との切り替えができる

    View Slide

  11. 運用画面との切り替えが存在する
    ここにもういちまい

    View Slide

  12. 画面遷移図

    View Slide

  13. Google  その1
    •  運用とレポートを  
    機能として明確に分けていることがわかる

    View Slide

  14. サイドバーに  
    キャンペーン  
    &  
    広告グループ
    の  
    一覧画面  
    それぞれの  
    運用画面

    View Slide

  15. 整理すると、画面遷移図はこうなる

    View Slide

  16. 整理すると、画面遷移図はこうなる
    キャンペーンAの管理画面   
    ↓  
     広告グループbの管理画面  
    へ1手で移動

    View Slide

  17. 整理すると、画面遷移図はこうなる
    サイドバーというハブを挟んで、階層をまたいで移動できる  
    かつ、  
    ハブがいつも見えているので移動が1手ですむ  
    かつ、  
    「運用画面」への遷移なのですぐ編集ができる

    View Slide

  18. Google  その2
    •  キャンペーンと広告をまたいだ移動を  
    意識した画面遷移になっている

    View Slide

  19. さっきの画面遷移図
    そもそも「運用」という考えが抜けてしまっている  
    ただデータを並べているだけ  
    ハブがないので、階層をまたいで移動しようとすると1階層戻らないといけない  
    もーいろいろひどい  

    View Slide

  20. Facebook  Power  Editor

    View Slide

  21. View Slide

  22. 各階層の一覧画面  
    移動用ハブ

    View Slide

  23. 画面遷移

    View Slide

  24. 画面遷移
    ハブを挟んで、階層をまたいで移動できる  
    だたしこちらは一覧画面  

    View Slide

  25. Facebook  その1
    •  キャンペーン一覧間の移動、  
    広告グループ一覧間の移動、  
    広告一覧間の移動を意識した作りになってい

    View Slide

  26. View Slide

  27. 運用とレポート画面の両方を  
    開くことができる画面がオーバーレイしてくる  
    (遷移はしない)  

    View Slide

  28. 運用とレポート画面を行き来できる  

    View Slide

  29. 画面遷移

    View Slide

  30. 画面遷移
    ただ、これだと  
    運用・レポート間の  
    階層をまたいだ移動ができない  

    View Slide

  31. ここにもハブがある  

    View Slide

  32. 画面遷移
    これで移動できる  

    View Slide

  33. Facebook  その3
    •  広告グループ間の移動(レポート、運用)、  
    広告間の移動(レポート、運用)を意識した画
    面遷移になっている

    View Slide

  34. TwiAer(おまけ)

    View Slide

  35. View Slide

  36. まとめ

    View Slide

  37. 広告管理画面 全体像
    •  レポートと運用はわかれている  
    •  階層をまたいだ移動を意識した設計になって
    いる  

    View Slide

  38. ぼくから質問
    •  なぜ分かれているのか  
    •  見るタイミング・人が異なるから?

    View Slide

  39. 使いやすい広告画面とは
    •  キャンペーン間、広告間、その間など、  
    同レベル階層だけでなく、  
    違うレベルの階層での移動がしやすいこと  
    •  かつ、移動するときに1手ですむこと  

    View Slide

  40. 使いやすい広告画面とは
    •  今回、ターゲットは代理店なので、  
    「広告主をまたいだ移動」というのが  
    鍵になってくる気がしている  
     
    (実際この間の会議でもそのような画面設計
    に落ち着いた)  

    View Slide

  41. 使いやすい広告画面とは(おまけ)

    View Slide

  42. Google  Adwards

    View Slide

  43. View Slide

  44. View Slide

  45. ページ遷移してる?  
     
    引きで見ると…

    View Slide

  46. 広告の編集画面は、  
    先程グラフだったところだった  
     
    ページ遷移してない!

    View Slide

  47. 赤枠の中が書き換わる  

    View Slide

  48. ここはいつも見えている  
    ↓  
    いつでも移動できる!  

    View Slide

  49. •  枠の中身だけ書き換えることにより、遷移を
    ストレスを無くしている  
    •  かつ、  
    いつでも別の広告編集画面に移動することが
    できる

    View Slide

  50. Facebook  Power  Editor

    View Slide

  51. View Slide

  52. 階層をまたいで  
    一気に広告作成まで  
    いってる。すごい

    View Slide

  53. View Slide

  54. Googleは枠を書き換えていたが、  
    Facebookはoverlayで対応  
     
    広く使えるのが魅力的

    View Slide

  55. おまけの条件
    •  画面全体の遷移がすくない(ほぼ無い)  
    •  画面の階層構造を感じさせない  

    View Slide

  56. ぼくから質問
    •  他になにか「つかいやすい条件」はないか?

    View Slide

  57. 次回
    •  BIツールを読みます  

    View Slide