Videogram

動画視聴の行動パターンに基づく動画プレーヤーの設計

オンライン動画の抱える課題は、解決済みか!?

Youtube、Facebook、そしてVineやVimeo。どのサービスでも、動画の視聴の仕方は似たようなもので、スクロールしながらサムネイルを眺めて、ひとつ選んで再生する。そして一時停止して、コメントしたり、「いいね」したり、シェアしたりする。オンラインでの動画視聴はある程度完成しているようにも見えます。だからこそ、信じられないような野心を持ったスタートアップが多数ある中、動画サービスにはさほど関心を向けなくてもいいような気もしてきます。

ところがVideogramとの出会いにより、その考え方が間違っていることに気付きました。もちろんまだ荒削りなところはあるものの、そこには動画サービスの新たな可能性を感じたのでした。

Videogramというサービス

Videogramは、動画を視聴する新しい方法として生み出されました。動画のコンテンツから最も興味深い瞬間を掘り起こして、ユーザーに見せるものです。インターフェース上では、ひとつのサムネイルだけでなく、複数のサムネイルのパッチワークが表示され、それらを元にその動画が見るに値するかどうかを決めることができます。さらに、動画が完全に読み込まれるまで待ったり、面白い部分を探し求めて最後まで飛び飛びに見たりする必要もなく、最も興味を引かれる部分から再生することができます。Videogramを使ってみて、オンライン動画には未解決の課題がまだたくさんあることがわかりました。

Videogramは、そういった現状をよく理解しています。東京を拠点にし、サンフランシスコ、ムンバイ、そしてソウルにオフィスを構える同社は、Turner Broadcasting、NTTドコモ、Samsung、そして500 Startupsからの投資を受けており、様々なマーケットを横断して、動画のパブリッシャーのニーズやユーザー行動を独自に把握しているようでした。ただ、社内にデザイナーがいないために、エンゲージメントを高められない要因となっていたユーザビリティの課題の解決に苦しんでいました。

まずはリサーチから

Videogramを使ってみると、数分のうちに多くのユーザビリティの問題を特定することができましたが、念の為にユーザの行動観察調査も数回に分けて行いました。

1

以前の動画埋め込みのフォーマット

調査の結果、下記のようなことに気付きました。

1

さらに、友人や知り合いがYouTubeやiTunesを使ってどのように動画を視聴しているのかも観察しました。多くの場合、動画の視聴は集中して行うことではありません。視聴者は、動画の一時停止ボタンを押すことなく、複数のデバイス、ブラウザのウィンドウ、そしてアプリなどを使って、友人とチャットしたり、コメント、レビュー、プロフィールを読んだり、意見をシェアしたり、時には同時に仕事やショッピングをしたりさえもします。

このような観察を通して、私たちはVideogramをなめらかな視聴体験をサポートする最高のツールにする機会を見出しました。

そして、リデザインへ

どんな動画なのかを明らかに

どんな動画なのかをより簡単に把握できるように、フレームの数を制限し、画像サイズのバリエーションを5つから3つに減らし、レイアウトを簡略化しました。

1

残したフレーム形式は、大きめの3つのみに

Our new player bar アップデートされた「マンガ・ビュー」の例。雑然としていた画面が整理され、マンガのように物語をざっと把握しやすくなった。

よりシンプルになった新しいレイアウトは、Videogramの発想の起点となったマンガの形式に近づいたものになりました。こうすることによって、どのフレームが先に来るのか、そしてどの方向に動画のストーリーが進行していくのかをユーザが直感的に把握できるようにしています。

さらに、それぞれのフレームにタイムコードを追加し、背景色を動画との関連性が強い黒に変えました。

最後に、プレーヤーのUIをより大きく、従来的な見た目の再生ボタンとタイムラインに変えました。これは、オンライン動画視聴の体験において既に確立された部分があり、そこがないとユーザが混乱してしまうからです。

サムネイルのグリッドに戻ることなく、他のキーフレームに簡単にアクセスできるようになった。あくまで埋め込みでありながら、多様なインタラクションが可能になっている。

なめらかなUI

新しい埋め込みを通して、ユーザーは、一時停止する必要なくブラウジング、視聴、コメント投稿、という3つのモードを行き来することができます。

動画が再生され始めると、他のユーザーのタイムスタンプされたコメントが、物語の進行とシンクロするかたちで流れます。つまり、他の人の反応を、その反応にとって重要な瞬間に読み取ることができ、発言の文脈を理解することができるわけです。

この純粋に楽しい機能は、音楽プレーヤーでは既に人気ですが、動画に組み込まれるのはほぼ初めてのことです。ニコニコ動画ではリアルタイムでコメントが表示されますが、画面がフォントに覆い尽くされます。猫の動画などには適しているかもしれないものの、動画によっては邪魔になってしまうこともあるでしょう。

Videogramのコメントモードでは、動画は再生され続けながらも一時的に脇にそれ、文字を入力し始めたら停止し、コメントを投稿したら再開します。

動画をシェアする際には、自動的にその時点でのフレームが選択され、ツイートやピンに書き込む内容がよりわかりやすくなります。

デモ動画をご覧ください

プロジェクトの進め方

Videogramプレーヤーのプロトタイプは、反復型(iterative)で設計と開発を7週間集中的に行って出来上がったものです。

プロジェクトの勢いを保つために、ミーティングの際に「宿題をつくらない」というルールを設けました。そして、毎週金曜日にVideogramチームと会い、プロトタイプを見せて一緒に使用感を確かめることで、何がうまく機能していて何が機能していないかなどの決断をしていきました。

プロトタイプはブラウザ上で動かすことができたため、双方のチームが継続的に手軽な「廊下テスト」を実施し、ビジネスパートナーや投資家に使ってもらって、アイデアや意見を聞き出すことができました。新UIの性能を十分に試した上で、VideogramチームはAQとの共同作業で新しいプレイヤーを構築していきました。

双方のチームは、新しいバージョンが前と比べてはるかに上回っているものだと認識していながらも、同時にソフトウェアというものは完成されることがないということも理解していました。この共通の認識があったため、最も重要な意見やアイデアに焦点を合わせ、想定の時間と予算内で目的を明確に定めた美しいバージョンを届けることができましたのだと思います。

おすすめの事例

Moodstone with Google

スマートフォンの先の世界で感情的な「もの」を設計する