前回に引き続き、UIの話です。
動画比較機能のUIを変えました。

変更したボタンについて

動画比較ボタンと、動画固定ボタンを置いておりました。

動画比較ボタンは、押すと選択した2つの動画を比較できる画面がでます。
動画の選択は、動画タッチで行います(選択された動画はオレンジの枠がつく)。

動画固定ボタンは、押すと動画が上部に固定され、動画を見ながらコメントをスクロールしながら見ることが出来ます。

初訪問の人でも、これらの機能を知ってもらおうとファーストビューに置いといたのですが、ダサいのでやめました。

継続的に使ってもらうのを前提にしているので、初見の人を想定するのはあまりよくないかなと。

ということで、右上の三転リーダーをタッチすると開くメニューの中に、動画比較と、動画の固定を入れました。

動画選択の方法を変更

いままでは動画比較に使う動画は、その動画をタッチすることで選択していました。
しかし、ある問題があったのです。
なんだかわかりますかね…？



それは…

スクロールの際にもタッチで反応してしまうことです。
そこで今回からあたらしく、動画操作に関するメニューをつくり、選択もそのメニューの中から行うことに。

この変更で得たものと失ったもの

得たもの : 
デザインのシンプルさ

失ったもの :
操作のシンプルさ


・得たデザインのシンプルさについて
動画比較、動画固定のボタンを格納したこと、
動画についての操作(選択、ダウンロード)をひとまとめに動画プレイヤーのメニューに格納したことで、デザインはシンプルになりました。
あと、長押しで比較用に動画保存という、誰も気づかないような操作法の機能もメニューで操作を明示出来たのはよかったです。

・失った操作のシンプルさについて
以前は

・動画をタッチ×2
・動画比較ボタンをタッチ

の計3タッチ(動画は2つ選択)で動画比較が出来てたのですが、
今は、

・動画操作メニューを開く
・「動画を選択」をタッチ
×2
・右上のメニューを開く
・「動画を比較する」をタッチ

の計6タッチ必要に。

うーん…。
動画比較がどれだけ使われているかまだデータはとってないのですが、使用頻度次第では、他の操作法に変えないといけなさそう。

代替案

ってことで代替案を考えました。
動画比較ボタンを出す操作が1回なのに対し、
動画選択ボタンを出す操作は2回。
こっちを減らしたいですね。

で、もともとは、スクロール時に動画が選択され得るのが問題でした。
ので、スクロールでタッチしても動画が選択されないようにすればいいのです。

ということで考えたのが、
動画比較ボタンをタッチ ⇒ 動画をタッチで選択　という逆の流れ。

普段のスクロールではタッチで反応しないようにし、動画比較モードにすると動画が選択できます。

代替案の問題点

しかし、こういった「モード」を使うのは最近嫌われております。

対象(動画)を選択　⇒　操作(比較)を選択

というのが、最近(というか人間工学的に)好まれる(らしい)オブジェクト指向デザインと呼ばれるもので、

操作(比較)を選択　⇒ 対象(動画)を選択

というのはあまり好まれない(らしい)です。

銀行の振込とか、パスモのチャージとか基本的に操作 ⇒ 対象の流れは使いづらいです。
他の操作をしたくなったときや操作選択をミスったときにいったん戻らないといけません。
なによりオブジェクト中心の現実世界との乖離が気になります。
現実で最初に操作をしていすることはありません。
ここに動画があるから、この動画をどうにでもできるという、現実と同じ自由度が欲しいです。

ちなみにGUIではファイルを選択 ⇒ 操作を選択　のようにオブジェクト指向になっています。
CLIでは操作を選択 ⇒ ファイルを選択 の流れになっています。
動詞 ⇒ 名詞 の流れは使いづらいです。

オブジェクト指向デザインの話は以下などをご参照ください。
参考 : オブジェクトベースなUIデザインに取り組むための心構え 

まとめ

前面にあるボタンは、使うときには便利な配置ですが、デザインのシンプルさを害して、慣れるまでは画面全体として使いづらくさせてしまいます。
優先順位を決める必要がありますね。
で、優先順位つけのためには使用頻度のデータが必要で、そのデータの信頼性を高めるためにユーザー数が必要です。
ユーザー獲得のために知名度アップや営業をしっかりやっていきたいと思います。
と同時に、やはりサクサク感が欲しいということでガワネイティブもしくはネイティブアプリ化する必要が…。
あぁやることたくさん…。
頑張ります。

本日もお読みいただきありがとうございました！
次回は、動画プレイヤーの変更についてお話したいと思います。