Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AbemaTVのUIデザイン 僕なりの運用の心得

11,907 views

Published on

AbemaTVリードデザイナーの松本です。
この度サイバーエージェントグループでの技術カンファレンスCA BASE CAMPにて登壇させていただきました。

Published in: Design
  • Be the first to comment

AbemaTVのUIデザイン 僕なりの運用の心得

  1. 1. AbemaTVのUIデザイン 僕なりの運用の心得
  2. 2. 松本 俊介 Matsumoto Shunsuke iOS / Android UI Designer 2015年度新卒入社
  3. 3. AbemaTVの開発について
  4. 4. Director Designer QA iOS Android Web Server New Device
  5. 5. Director Designer QA iOS Android Web Server New Device
  6. 6. AbemaTVのUIデザイナーとして 立ち上げから運用までやってきて 気づいたこと
  7. 7. 新規事業の立ち上げは刺激的!
  8. 8. 新規事業の立ち上げは刺激的! 当たり前。
  9. 9. 運用こそ楽しい。刺激的。
  10. 10. KPIを達成する 新規立ち上げとは違うチームの動き方 勢いではどうにもならない
  11. 11. いかに論理的でいられるか 考察・進め方・アウトプット・管理…
  12. 12. 偉そうなことを言います、 すいません! あとでチクチク言わないで! 予防線
  13. 13. 1チュートリアル改修 アレェ、KPIこれでいいんだっけ!?
  14. 14. ビデオページへの 誘導チュートリアル チュートリアル改修
  15. 15. ユーザーにビデオページの存在 を伝えたい ビデオページの訪問ユーザーは 視聴転換率が高い だからビデオボタンを押して もらいたい! チュートリアル改修
  16. 16. リリースした結果、 ビデオページへの遷移は増えました わーいわーい チュートリアル改修
  17. 17. チュートリアル改修
  18. 18. まず、遷移が増えるのはそりゃそう。 チュートリアル改修
  19. 19. ビデオページでの視聴転換率が上がったか? ネガティブな影響はなかったか? を見るべき チュートリアル改修
  20. 20. チュートリアル改修 ビデオページへの遷移は2倍に増えたが 視聴転換率は下がった ( 74%→70% )
  21. 21. チュートリアル改修 母数が増えたので、許容範囲! ビデオページへの遷移は2倍に増えたが 視聴転換率は下がった ( 74%→70% )
  22. 22. チュートリアル改修 本当にそう?
  23. 23. チュートリアル改修 母数の増加による 視聴転換率の下がり方の安全ラインの 想定は曖昧だった 反省
  24. 24. チュートリアル改修 また、チュートリアルによる悪影響を 懸念することもできてなかった 反省
  25. 25. チュートリアル改修 KPIの設計は大事 デザイナーもそこをちゃんと考えるべき 反省
  26. 26. チュートリアル改修 Sketchファイルを納品したら終わり ではない! エンジニアの実装を確認したら終わり ではない!
  27. 27. チュートリアル改修 当たり前だけど… デザイナーとして 過程~結果まで見れてるか?
  28. 28. 2機能は増えるもの? 増やすだけじゃなくて削ることも大事さ
  29. 29. AbemaTV 2016年4月リリース時から 追加された機能 機能は増えるもの?
  30. 30. 横固定UIから縦UIも / 検索機能 / 運用ポップ アップ / Abemaビデオ機能 / ダウンロード 再生 / 追っかけ再生 / コメントブロック / カ メラシェア / 回遊施策 / マイビデオ機能 / 毎 回通知機能 / 倍速再生 / 自動で続き再生 / 視 聴履歴 / バックグラウンド再生 / 通信節約モー ド / 投票機能 / フィード番組表 / 各UI変更… 機能は増えるもの?
  31. 31. 機能はあればあるほどいいもんじゃない 機能は増えるもの?
  32. 32. もちろん場合によりますが… 機能は増えるもの? 選択肢が多いとどうなる?
  33. 33. 機能は増えるもの? 95年に米国で行われた有名な研究 出典:http://digitalcast.jp/v/12027/
  34. 34. 機能は増えるもの? A週:24種類のジャム B週:6種類のジャム スーパーにジャムの試食コーナーを設置し、 人々の行動を観察
  35. 35. 機能は増えるもの? 試食した割合 24種類のとき:60% 6種類のとき:40%
  36. 36. 試食した割合 24種類のとき 6種類のとき 機能は増えるもの?
  37. 37. 機能は増えるもの? お?選択肢が多い方が良い?
  38. 38. 機能は増えるもの? しかし
  39. 39. 機能は増えるもの? 購入した割合 24種類のとき:3% 6種類のとき:30%
  40. 40. 購入した割合 24種類のとき 6種類のとき 機能は増えるもの?
  41. 41. 機能は増えるもの? 選択肢が少ない方が購入していた! 6種類のとき
  42. 42. 機能は増えるもの? 人間は「決断」に疲れる 選択肢の多さはストレスになることもある
  43. 43. 機能は増えるもの? 機能が増えるなら 何かを削るか、 増えたように見えないデザインが 時には必要かもしれない。
  44. 44. 機能は増えるもの? マイビデオ通知を受け取る
  45. 45. 機能は増えるもの? 1つのボタンにまとめる予定 視聴予約通知を受け取る
  46. 46. 3部分最適なUI? 常に全体最適をすることを考えるべし
  47. 47. 部分最適なUI? AbemaTVは いろんなデバイスのUIが存在します
  48. 48. 部分最適なUI? 各OSの デザインガイドライン を重視しており、 表面的なUIデザイン は揃っているわけでは ない…。
  49. 49. 部分最適なUI? でも、デザインの意図はズレちゃダメ
  50. 50. 部分最適なUI? 例えば、リスト内の「タグ」のデザイン
  51. 51. 部分最適なUI? iOS AndroidTV テキストテキスト サブテキストサブテキストサブテキスト ビデオ テキストテキスト サブテキストサブテキストサブテキスト ビデオ
  52. 52. 部分最適なUI? この判断はOK OSの特性上、リストの矢印の有無が違う OSのガイドライン上、背景色が違う
  53. 53. AndroidTVの 暗い背景上の緑は目立ちすぎる だから、色を白にした 部分最適なUI? ビデオ ビデオ この判断は避けたいところ
  54. 54. 部分最適なUI? 正しい判断に思えるが、 デザインにおいて有彩色と無彩色の持つ 意味や役割は変わってくる
  55. 55. 部分最適なUI? ビデオ ビデオ デバイスによってタグの色が違うことで 意味合いが変わってしまう
  56. 56. 部分最適なUI? 部分最適をすることで デザインの意図はズレちゃダメ
  57. 57. 部分最適なUI? あくまでも全体最適
  58. 58. 部分最適なUI? デザイナーが分担作業してる時点で なかなか難しかったり… だからデザインシステム的なものが 必要だったりする
  59. 59. 4変化を恐れるな 改悪よりも、変わらないことの方が悪
  60. 60. 変化を恐れるな 意識的な話ですが UIを変えることに抵抗はないです。
  61. 61. 変化を恐れるな UI変更によってユーザーが戸惑うことはある 改悪と言われるようじゃもちろんダメ…
  62. 62. 変化を恐れるな でも、ガシガシ変えてこ
  63. 63. 変化を恐れるな 各指標は横ばいで、 汎用的なデザインに できたのでこの変更 は成功と言える。 Before After
  64. 64. 変化を恐れるな 松本調べの研究結果があります
  65. 65. 変化を恐れるな 「絶対5Sより大きいやつにしないわ」 「この持ちやすさがいいんだ」 「絶対機種変しないからな」 iPhone5Sを愛用していたAさんとBさん
  66. 66. 変化を恐れるな 「めっちゃいい」 「もう5Sには戻れない」 「めっちゃいい」 後日、iPhone7に機種変したAさんとBさん
  67. 67. 変化を恐れるな こういうことだと思う。 いろんな意味で
  68. 68. 5デザインの言語化 デザインなんて99%は言語化できるはず
  69. 69. 「言語化できない良さ」? 「言語化しすぎると人間味を失う」? 「堅苦しい」? デザインの言語化
  70. 70. ・言語化するための知識がない ・言語化することを怠ってる ・眠い 新米デザイナーが 言語化できないときは、だいたい デザインの言語化
  71. 71. デザインを言葉で説明すると、 チーム内で一気にコミュニケーションが進む デザインの言語化
  72. 72. とても細かい例をいくつか。 デザインの言語化
  73. 73. 黄色の上に白い文字はなんか見辛い! 読めないよね デザインの言語化
  74. 74. 黄色と白色はコントラストが 弱いため判別しづらい デザインの言語化
  75. 75. UIのアニメーションの イージングがないと、なんか変! デザインの言語化
  76. 76. 物体の動きには 初速と終速に差があるため UIのアニメーションにも イージングカーブが必要 デザインの言語化
  77. 77. 真ん中に配置したはずなのに、 なんかずれて見える! デザインの言語化
  78. 78. 「形」には重心があるので 真ん中に整列させただけでは 視覚的には正しくない デザインの言語化
  79. 79. このような言語化できる要素が 幾千もの粒度と数で絡み合い デザインはされている デザインの言語化
  80. 80. 熟練デザイナーは 「言語化・ロジック」を 「経験」として昇華し ショートカットしている デザインの言語化 ただ、イチイチ言語化してる時間はない…
  81. 81. ・言語化を忘れたデザイン ・経験によるショートカットのないデザイン デザインの言語化 いつか必ず矛盾を生んでしまうし メンバーの納得感もない
  82. 82. 6なんでこのデザイン? デザイナーの思考はブラックボックスじゃダメだ!
  83. 83. なんでこのデザイン? デザイナー 「デザインできました、Sketchどうぞ」 エンジニア 「なにこれ、微妙じゃない?」
  84. 84. なんでこのデザイン? あるある!
  85. 85. なんでこのデザイン? デザイナー = よくあるイメージ 優れた感性でなにやら 綺麗っぽいモノを 作り出す人たち
  86. 86. なんでこのデザイン? せめてUI/UXデザイナーからは このイメージをなくしたい
  87. 87. なんでこのデザイン? デザイナーの思考の過程も、 みんなに見えるようにするべき!
  88. 88. なんでこのデザイン? デザイナーではない人に 「デザインのことはよく分からん」 と思われていることの危機感
  89. 89. なんでこのデザイン? を共有できてなければ! なにが目的でどう考察されて どのようなデザインでユーザーに届けるか
  90. 90. なんでこのデザイン? チームにとって デザインはみんなのものであり デザイナーはそれらを整理して 取捨選択する人でありたい
  91. 91. なんでこのデザイン? @here これどう思いますか パターンこんな感じです エンジニアさん的には どう思います? @ioser ラフ段階ですが意見ください! どうです?コレ AとB、どっちが 実装的にもいいですかねぇ
  92. 92. なんでこのデザイン? Slackにデザインの過程を バンバン投げるようにしてます @here これどう思いますか パターンこんな感じです エンジニアさん的には どう思います? @ioser ラフ段階ですが意見ください! どうです?コレ AとB、どっちが 実装的にもいいですかねぇ
  93. 93. 7現状の大きな課題 なんで、ナビゲーションドロワーなの?
  94. 94. 現状の大きな課題 AbemaTVの ナビゲーションは ドロワーです
  95. 95. 現状の大きな課題 ナビゲーションドロワーのデメリット
  96. 96. 現状の大きな課題 ドロワーを開くまでなにがあるか不明 何でも入れられる便利スペースになりがち 必ず2タップ必要になる
  97. 97. 現状の大きな課題 メリットとしては、 「省スペース」ってくらい…
  98. 98. 現状の大きな課題 じゃあなんでドロワーなの?
  99. 99. 現状の大きな課題 リリース当初、 ・横UIだった ・そもそも機能がとても少なかった だから、ドロワーが最適だった
  100. 100. 現状の大きな課題 しかし機能が増えた今、 合理的なナビゲーションではない
  101. 101. 現状の大きな課題 最近の各アプリの Tab Bars Bottom navigation の流れ
  102. 102. 現状の大きな課題 YouTube
  103. 103. 現状の大きな課題 Tumblr
  104. 104. 現状の大きな課題 Reuters TV
  105. 105. 現状の大きな課題 Netflix 現状
  106. 106. 現状の大きな課題 「下タブ」 ある程度ナビゲーションが 重要なアプリでは使いやすそう…
  107. 107. 現状の大きな課題 AbemaTVでは A/Bテストプロジェクトが始動する予定
  108. 108. 現状の大きな課題 メルカリさんのように、 「ドロワー」VS「下タブ」は やってみたい
  109. 109. 現状の大きな課題 とか言ってますが いったんiPadで リリースする予定
  110. 110. 現状の大きな課題 「下タブになる時がいずれ来る」と思い、 ドロワーの項目数は抑えてきた
  111. 111. 現状の大きな課題 ドロワーを開くまでなにがあるか不明 何でも入れられる便利スペースになりがち 必ず2タップ必要になる
  112. 112. 最後に
  113. 113. 最後に 当たり前のことを つらつらと喋ってすいません
  114. 114. デザインがもっと 「みんなのもの」になってほしい 最後に
  115. 115. 運用フェーズって、 それが 叶えられそうな気がする! 最後に
  116. 116. メディアとして成功するため、 日々変化するAbemaTVのUIを 楽しみにしててください! 最後に
  117. 117. ご静聴ありがとうございました

×