Twitter新機能「Twitter Video」の開発におけるデザインの変遷と秘話をTwitterのデザイナーが公開

最長30秒のムービーの撮影・編集をアプリ上で行え、そのままツイートで投稿できるのがTwitterの新機能「Twitter Video」です。Twitter Videoの開発にはさまざまな試行錯誤があったようで、同機能のデザイナーを務めたPaul Stamatiou氏が、その知られざる開発秘話を公開しています。

Designing Twitter Video — PaulStamatiou.com
http://paulstamatiou.com/twitter-video/

リアルタイムで動き続けるTwitterというプラットフォームにはネイティブのビデオサポートが必要である、という考えからTwitter Videoのプロジェクトはスタート。TwitterのデザイナーであるStamatiou氏が最初に取りかかったのは、新機能のUIデザインを考えてプロトタイプを作成し、テストをすることでした。UIデザインの候補は多岐にわたり、その全てをプロトタイプでテスト。Stamatiou氏はプロトタイプ作成に「Framer Studio」というソフトウェアを使用しました。

デザインをプロトタイプでテストする作業は途方もなく長い時間がかかったそうですが、そのかいもあって開発の初期段階でUIのデザインに特に大きな問題は起こらなかったとのこと。ただし、「ユーザーの誤操作を招いてしまいそうな削除ボタンの位置とサイズ」に関しては、プロジェクトチームから指摘がありました。Stamatiou氏は指摘を受けた後、「撮影後に新たなページが立ち上がり、削除ボタンをタップしてムービーを消去する」という流れそのものを、「ドラッグ操作でゴミ箱に捨てる」という直感的な操作に変更しました。

その後もデザインを変更する度にプロジェクトチームから指摘が相次ぎましたが、「新しいデザインを作成してプロトタイプでテスト」という作業を何度も繰り返し、満足のいく機能が完成。いよいよTwitterのCEOであるディック・コストロ氏に新機能を確認してもらう段階まできましたが、コストロ氏のフィードバックは良い内容ではありませんでした。

コストロ氏がフィードバックで指摘したのは「ムービー撮影中に表示されるバー」に関してです。ムービーの撮影中は、画面下部にボタンが左から右に動くバーを表示して、ユーザーが何秒間撮影したかを確認できるようにしています。しかしながら、コストロ氏は「撮影時間の30秒に対してバーが長いため、ボタンがゆっくり移動し、撮影できているのか確認しづらい」と指摘しました。

コストロ氏よって指摘された問題点を解決するために、Stamatiou氏は再び撮影画面のUIを変更する作業を開始。画面上部に30秒をカウントするタイマーを搭載してみるなど、デザイン候補はかなりの数になったそうです。

タイマーの表示位置が下になっているバージョン。こちらは開発途中の画像になります。

デザインの修正を行った後に待っているのは、一般ユーザーによる機能テストです。一般ユーザーよる使用テストから得たものは大きく、さまざまな機能を変更するきっかけになったとのこと。例えば「ムービーの確認・編集画面でユーザーが困惑していた」ことがデザインを変更するきっかけになったり、その反面「撮影時間をカウントするタイマーを搭載することでユーザーが撮影時間を的確に把握できた」や「Twitterからカメラを起動して撮影まで、操作がわからないユーザーはいなかった」など、手応えを感じられる意見もありました。

ムービー撮影後のUIもユーザーが見ただけで直感的に操作を行えるようにデザインする必要があったわけです。

また、iOSとAndroidの違いから発生した問題もありましたが、それはエンジニアのチームと連携して修正。デザイナーがエンジニアの仕事に介入するのはリスクがあるようですが、Stamatiou氏はTwitterの技術的な部分にも関わっていることもあり、エンジニアとの間で問題が起こることはありませんでした。問題が起こるばかりか、iOSとAndroidのコーディングについて学べることがたくさんあったそうです。

リリースの直前にはTwitterの全社員に使用してもらい、さらに修復できるところがあるかチェック。使用した社員からはバグの報告が多々あり、リリースの直前までバグの対応に追われていたとのこと。Twitter Videoの開発にはデザイナーとエンジニアの強固な連携が重要で長い道のりでしたが、新機能を使うユーザーを町中で見ると感動し、Stamatiou氏は「これが僕のTwitterで働く理由です」と述べています。