狠狠撸

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

松本俊介
Matsumoto Shunsuke
iOS / Android UI Designer
2015年度新卒入社

础产别尘补罢痴の开発について

Director
Designer
QA
iOS
Android
Web
Server
New Device

AbemaTVのUIテ?サ?イン僕なりの運用の心得

AbemaTVのUIデザイナーとして
立ち上げから運用までやってきて
気づいたこと

新规事业の立ち上げは刺激的！

新规事业の立ち上げは刺激的！
当たり前。

运用こそ楽しい。刺激的。

KPIを達成する
新規立ち上げとは違うチームの動き方
勢いではどうにもならない

いかに論理的でいられるか
考察?進め方?アウトプット?管理…

偉そうなことを言います、
すいません！
あとでチクチク言わないで！
予防線

1チュートリアル改修
アレェ、KPIこれでいいんだっけ!?

ビデオページへの
誘導チュートリアル
チュートリアル改修

ユーザーにビデオページの存在
を伝えたい
ビデオページの訪問ユーザーは
視聴転換率が高い
だからビデオボタンを押して
もらいたい！

リリースした結果、
ビデオページへの遷移は増えました
わーいわーい

まず、遷移が増えるのはそりゃそう。

ビデオページでの視聴転換率が上がったか？
ネガティブな影響はなかったか？
を見るべき

ビデオページへの遷移は2倍に増えたが
視聴転換率は下がった ( 74%→70% )

母数が増えたので、許容範囲！
ビデオページへの遷移は2倍に増えたが
視聴転換率は下がった ( 74%→70% )

本当にそう？

母数の増加による
視聴転換率の下がり方の安全ラインの
想定は曖昧だった
反省

また、チュートリアルによる悪影響を
懸念することもできてなかった
反省

KPIの設計は大事
デザイナーもそこをちゃんと考えるべき
反省

Sketchファイルを納品したら終わり
ではない！
エンジニアの実装を確認したら終わり
ではない！

当たり前だけど…
デザイナーとして
過程～結果まで見れてるか？

2機能は増えるもの？
増やすだけじゃなくて削ることも大事さ

AbemaTV
2016年4月リリース時から
追加された機能
機能は増えるもの？

横固定UIから縦UIも / 検索機能 / 運用ポップ
アップ / Abemaビデオ機能 / ダウンロード
再生 / 追っかけ再生 / コメントブロック / カ
メラシェア / 回遊施策 / マイビデオ機能 / 毎
回通知機能 / 倍速再生 / 自動で続き再生 / 視
聴履歴 / バックグラウンド再生 / 通信節約モー
ド / 投票機能 / フィード番組表 / 各UI変更…

機能はあればあるほどいいもんじゃない

もちろん場合によりますが…
選択肢が多いとどうなる？

95年に米国で行われた有名な研究
出典：http://digitalcast.jp/v/12027/

A週：24種類のジャム
B週：6種類のジャム
スーパーにジャムの試食コーナーを設置し、
人々の行動を観察

試食した割合
24種類のとき：60%

試食した割合
24種類のとき
6種類のとき

お？選択肢が多い方が良い？

しかし

購入した割合

購入した割合
24種類のとき
6種類のとき

選択肢が少ない方が購入していた！
6種類のとき

人間は「決断」に疲れる
選択肢の多さはストレスになることもある

機能が増えるなら
何かを削るか、
増えたように見えないデザインが
時には必要かもしれない。

マイビデオ通知を受け取る

1つのボタンにまとめる予定
視聴予約通知を受け取る

3部分最適なUI？
常に全体最適をすることを考えるべし

部分最適なUI？
AbemaTVは
いろんなデバイスのUIが存在します

各OSの
デザインガイドライン
を重視しており、
表面的なUIデザイン
は揃っているわけでは
ない…。

でも、デザインの意図はズレちゃダメ

例えば、リスト内の「タグ」のデザイン

iOS
AndroidTV
テキストテキスト
サブテキストサブテキストサブテキスト
ビデオ
テキストテキスト
サブテキストサブテキストサブテキスト
ビデオ

この判断はOK
OSの特性上、リストの矢印の有無が違う
OSのガイドライン上、背景色が違う

AndroidTVの
暗い背景上の緑は目立ちすぎる
だから、色を白にした
ビデオ
ビデオ
この判断は避けたいところ

正しい判断に思えるが、
デザインにおいて有彩色と無彩色の持つ
意味や役割は変わってくる

ビデオビデオ
デバイスによってタグの色が違うことで
意味合いが変わってしまう

部分最適をすることで
デザインの意図はズレちゃダメ

あくまでも全体最適

デザイナーが分担作業してる時点で
なかなか難しかったり…
だからデザインシステム的なものが
必要だったりする

4変化を恐れるな
改悪よりも、変わらないことの方が悪

変化を恐れるな
意識的な話ですが
UIを変えることに抵抗はないです。

UI変更によってユーザーが戸惑うことはある
改悪と言われるようじゃもちろんダメ…

でも、ガシガシ変えてこ

各指標は横ばいで、
汎用的なデザインに
できたのでこの変更
は成功と言える。
Before After

松本調べの研究結果があります

「絶対5Sより大きいやつにしないわ」
「この持ちやすさがいいんだ」
「絶対機種変しないからな」
iPhone5Sを愛用していたAさんとBさん

「めっちゃいい」
「もう5Sには戻れない」
「めっちゃいい」
後日、iPhone7に機種変したAさんとBさん

こういうことだと思う。
いろんな意味で

5デザインの言語化
デザインなんて99%は言語化できるはず

「言語化できない良さ」？
「言語化しすぎると人間味を失う」？
「堅苦しい」？
デザインの言語化

?言語化するための知識がない
?言語化することを怠ってる
?眠い
新米デザイナーが
言語化できないときは、だいたい

デザインを言葉で説明すると、
チーム内で一気にコミュニケーションが進む

とても細かい例をいくつか。

黄色の上に白い文字はなんか見辛い！
読めないよね

黄色と白色はコントラストが
弱いため判別しづらい

UIのアニメーションの
イージングがないと、なんか変！

物体の動きには
初速と終速に差があるため
UIのアニメーションにも
イージングカーブが必要

真ん中に配置したはずなのに、
なんかずれて見える！

「形」には重心があるので
真ん中に整列させただけでは
視覚的には正しくない

このような言語化できる要素が
幾千もの粒度と数で絡み合い
デザインはされている

熟練デザイナーは
「言語化?ロジック」を
「経験」として昇華し
ショートカットしている
ただ、イチイチ言語化してる時間はない…

?言語化を忘れたデザイン
?経験によるショートカットのないデザイン
いつか必ず矛盾を生んでしまうし
メンバーの納得感もない

6なんでこのデザイン？
デザイナーの思考はブラックボックスじゃダメだ！

なんでこのデザイン？
デザイナー
「デザインできました、Sketchどうぞ」
エンジニア
「なにこれ、微妙じゃない？」

あるある！

デザイナー　=
よくあるイメージ
優れた感性でなにやら
綺麗っぽいモノを
作り出す人たち

せめてUI/UXデザイナーからは
このイメージをなくしたい

デザイナーの思考の過程も、
みんなに見えるようにするべき！

デザイナーではない人に
「デザインのことはよく分からん」
と思われていることの危機感

を共有できてなければ！
なにが目的でどう考察されて
どのようなデザインでユーザーに届けるか

チームにとって
デザインはみんなのものであり
デザイナーはそれらを整理して
取捨選択する人でありたい

なんでこのデザイン？ @here これどう思いますか
パターンこんな感じです
エンジニアさん的には
どう思います？
@ioser
ラフ段階ですが意見ください!
どうです？コレ
AとB、どっちが
実装的にもいいですかねぇ

Slackにデザインの過程を
バンバン投げるようにしてます
@here これどう思いますか
パターンこんな感じです
エンジニアさん的には
どう思います？
@ioser
ラフ段階ですが意見ください!
どうです？コレ
AとB、どっちが
実装的にもいいですかねぇ

7現状の大きな課題
なんで、ナビゲーションドロワーなの？

現状の大きな課題
AbemaTVの
ナビゲーションは
ドロワーです

ナビゲーションドロワーのデメリット

ドロワーを開くまでなにがあるか不明
何でも入れられる便利スペースになりがち
必ず2タップ必要になる

メリットとしては、
「省スペース」ってくらい…

じゃあなんでドロワーなの？

リリース当初、
?横UIだった
?そもそも機能がとても少なかった
だから、ドロワーが最適だった

しかし機能が増えた今、
合理的なナビゲーションではない

最近の各アプリの
Tab Bars
Bottom navigation
の流れ

YouTube

Tumblr

Reuters TV

Net?ix
現状

「下タブ」
ある程度ナビゲーションが
重要なアプリでは使いやすそう…

AbemaTVでは
A/Bテストプロジェクトが始動する予定

メルカリさんのように、
「ドロワー」VS「下タブ」は
やってみたい

とか言ってますが
いったんiPadで
リリースする予定

「下タブになる時がいずれ来る」と思い、
ドロワーの項目数は抑えてきた

最后に
当たり前のことを
つらつらと喋ってすいません

デザインがもっと
「みんなのもの」になってほしい
最后に

運用フェーズって、
それが
叶えられそうな気がする！
最后に

メディアとして成功するため、
日々変化するAbemaTVのUIを
楽しみにしててください！
最后に

ご静聴ありがとうございました

狠狠撸

AbemaTVのUIテ?サ?イン 僕なりの運用の心得

More Related Content

AbemaTVのUIテ?サ?イン 僕なりの運用の心得

AbemaTVのUIテ?サ?イン僕なりの運用の心得

AbemaTVのUIテ?サ?イン僕なりの運用の心得