スマホアプリデザイナーひとりAdvent Calendar #15 /ex3/ 各OSの特徴をストアとSkyDriveから見る（SkyDrive編）

というわけで前回からの続きである今日はSkyDriveを比較対象に、iOS、Android、Windows PhoneのUIと、そこからどういう操作性に繋げているのか考えてみたいと思います。

今回は用意する時間がなかったのと、比較的どのOSも画面遷移が同等のため、iPhone版を軸に紹介したいと思います。

※あまり推敲していないのでツッコミどころありましたらお願いします！

TOP

起動後すぐにファイル一覧が表示されます。ナビゲーションには標準的なTab Barを使い、各カテゴリを分かりやすく分別しています。

見ての通り、SkyDriveで主に使われる画面は「ファイル」「最近見たファイル」「共有のアイテム」「設定」となっています。これはどのOSでも共通です。

iOSではNavigationBarのボタンからアクションシートを出すことで

 アイテムの追加、編集が行えます。追加をタップすると

 フォルダーの作成、写真やビデオの撮影（直接の追加）、既存フォルダーから選択（カメラロールから追加）が選べます。

 編集を選ぶと

編集ビューに変わり、アイテムの削除、移動が行えます。

iOSではこのように、アクションシートを経由して要素に対してアクションを行うのが標準的です。削除だけは横スワイプでもできますが、リスト表示でないと操作はできません。

前回の繰り返しになりますが、「確実にボタンをタップして操作を行える」のがiPhoneの特徴と言えます。見えやすさ（ボタンが存在しているという見えやすさ、ボタンが簡単に押せるという見えやすさ）が分かりやすさに繋がってるわけですね。

ビューの切り替え、更新

ページの一番上からさらにスクロールをすると、ビューの切り替えと更新の両方が表示されます。

更新はまだこの状態では行われず、

もう１段回引き下げて指を離すことで更新されます。いわゆる Pull To Refresh というやつですね。これもiOSならではの操作性です。

ただ、ビューの切り替えは普通はこういうところには隠さないので、標準的とは言えませんね。画面をさらにスクロールするというアクションに対して、2つの操作系統を入れているので、少し扱いづらさを感じます。

ビューの切り替えというとiOSにはSegmented Controlがありますが、Segmented Controlは固定されたUIとして使用されます。

Segmented Controlの一例、iTunes（iOS 6になってからSegmented Controlもとんと使われなくなりましたねぇ。。 ）。

つまり、Navigation Bar、Segmented Control、Tab Barの3つの固定されたバーによってコンテンツの表示領域が減るのを回避するために、あの配置にしてるわけですね。

さてここまでの画面を、AndroidとWPでも比較してみましょう。

左がAndroid、右がWPです。微妙に違いが生まれてきています。

下部バーのアイコンは、それぞれ左からAndroidが「表示切り替え、ファイルの追加、フォルダの新規作成、更新、Overflow（設定）」、WPが「ファイルの追加、表示切り替え、ファイルの選択、検索」となっています。

なおWP特有のUIとしてアプリバーのメニューがあります。アプリバー右端の「・・・」をタップするかバーを上にスワイプすると

このようにメニューが現れます。メニュー内容は上から「フォルダの新規作成、更新、設定」です。AndroidもWPも隠すUIがうまいなあと感心します。

まあ構成的にはOverflowもアプリバーメニューも同じなんですけどね。ちなみになんでここにアクションシートを加えないんだ、あれだってメニューを隠してるのと同じじゃないか、と言うと、アクションシートは入れられるものが限定されるからなんですね。メニューシートじゃなくてアクションシート。設定とか更新とか入れることってまず考えられないですからね。

参考までに、Appleのヒューマンインタフェースガイドラインのアクションシートの項には次のようなことが記載されています。

Action Sheetは次の目的で使用します。

・タスクを完了できる、別の方法を提示する。Action Sheetを使用することで、ユーザインターフェイスの特定の場所に選択肢を置いておかなくても、現在のタスクのコンテキストに合った一連の選択肢を提示することができます。

・危険な可能性のあるタスクを完了する前に、確認を求める。Action Sheetは、ユーザが行おうとしている手順によって生じるおそれのある危険な影響について考えることをユーザに促し、いくつかの選択肢をユーザに示します。ユーザは意図せずにコントロールをタップしてしまうこともあるため、このタイプのコミュニケーションはiOSベースのデバイスでは特に重要です。 

太字処理はこちらで加えました。つまりは

・全く無関係な項目入れるなよ！

・削除とかは誤タップあると怖いからワンクッション置けよ！

ということなので、アクションシートっていっぱい入るんだーじゃあ設定とか入れちゃおーなんてことはできないのです。

さて見比べてみてまず目に付くのは、やはりWPのPivot（フリック）による画面遷移でしょう。右にフリックすれば「最近見たファイル」に、左にフリックすれば「共有のアイテム」へすぐアクセスできます。WPは3OSの中で唯一ノータップによる階層の切り替えができています。

ではAndroidはどうなっているかと言うと、ActionBar上のタイトルをタップして

一度ウィンドウ（Spinnerと言います）を出して、もう一回タップして画面を切り替えます。一番遷移回数が多いですね。しかも物理的に大きなディスプレイの最上部なので、片手での操作は簡単とは言えません。でもGoogle的にはコントロール系統は上に置かせたいんですよねぇ（下にあるソフトウェアキーと近くなると誤動作が起きやすいため）。

さて前回の内容を覚えている方は「なんでScrollable TabsやFixed Tabsを使わないの？」と疑問に思うかもしれません。また逆に「なんでこんな遷移方法が存在してるの？（タブ切り替えのほうが楽じゃない？）」と思うかもしれません。

Android Designを見てみると、Spinnerを使う時のパターンとして

・タブを使うことによって縦の広さを犠牲にしたくない場合

・全く別の構成に変わる時（例えばアカウントの切り替え、カレンダーの月別ビューなど）

が挙げられています（意訳）。おそらく今回はiOSがSegmented Controlを採用しなかった理由と同じく、コンテンツの表示領域を広く持ちたかったため、ActionBarひとつで済むSpinnerを採用したのだと思います。

また、マイクロソフト的にも「みんなそんな頻繁に切り替えないだろう」と考えているからかもしれません。

個人的には、Overflow（・・・が縦に並んでるやつ）が下のBarにあることだし、ActionBarじゃなくていきなりFixedTabsでもいいような気はしますが（縦使いの場合、タブとOverflowは同列のレイアウトにできない）。

他の要素に目を移すと、iOSと違い、2つともアイテムの追加やビューの切り替えを下部のバーから行えるようになっています。

これはiOSの設計の弱点が見える好例だと思います。iOSにも、他のOSのように下部のバーにアクション類を置けるUIが備わっています。

それが、メールアプリでお馴染みのToolBarです。

 ToolBarはいま表示している画面に対し、何らかのアクションを行うために使われます。例えばメールではフラグの付与、フォルダ移動、アーカイブ、返信、新規作成が行えます。メールアプリはTabBarを使わずに画面遷移ができるので、ToolBarが使えるんですね。

で、ToolBarとTabBarの併用（TabBarの上にToolBarを置く）は基本できません。いや実装的にはできるかもしれない。でもデザイン的には完璧にNGです。表示領域がどーとか以前に、設計理念から外れてしまいます。何より美しくない。

そしてTabBarを使う設計の場合、ToolBarに置くようなアクションはアクションシートに格納されます。メールアプリにあるようにNavigationBarに独立したボタンを置くこともできますが、アクション数が多いと、やはりアクションシートに頼りがちになります。

アクションシートは「1つのボタンから複数のアクションを行えるので、TabBarベースのUIでも省スペースで設計ができる」反面、「画面の遷移をTabBarに任せているため、ユーザーがよく行うだろうアクション（SkyDriveの場合はファイルの追加）の階層が深くなってしまう」というデメリットもあります（まあ、設計次第で変えられますが）。

良くも悪くも、iOSの設計に適したUI要素と言えます。

ちなみに似た設計のDropboxが最近メジャーアップデートでUIが変わり、ここらへんの流れを綺麗にまとめています。

追加アイコンと編集アイコンの2つがあるので、目的が明確化されて良いと思います。まあ、普通そうするよねって感じではありますが、、

DropboxはメジャーアップデートするからにはカスタムUIでいこうと決心したのか、ここではアクションシートを使わずにポップアップウィンドウを実装しています。

ちなみに、ここで普通にアクションシートを出してしまうと、指を上から下へ移動させなくてはいけないので、ユーザーには距離的・時間的な負担を軽微ながらかけることになります。ポップアップはカスタムとしてベストな選択と言えるでしょう。

 アイテムの選択まわり

 まずはアプリの基本的な設計である「画面を遷移する」「アイテムを見る」ことについて比較してみました（階層が深くなった後の戻り方とかは前回比較したので割愛します）。

次は実際のコンテンツに対する操作…アイテムの選択、リネーム、共有、削除、移動などについて比較してみましょう。

 まずiOSですが、先述の通り、アクションシートから編集をします。編集から行える操作は、アイテムの選択と移動、削除のみです。リネームや共有はできません。なぜか？

それは、アクションが「いま開いてる画面に対してできるもの」だからです。実はこの画面はTOP画面なので、リネームも共有もできないんですね。で、これらを行うためにはどうすればいいかと言うと

 ひとつ下の階層（フォルダ）へ遷移すると、アクションシートに共有とリネームが出現します。

えっ、じゃあトップにある単一のアイテムはどうするの？と気付いた方、ご安心ください。

アイテム詳細へ遷移すると、名前の変更と共有の設定が行えます。

あ、ここではToolBar使われてますね。

アイコンは左から共有設定、削除、フォルダ移動、アクションシート（リネーム、ダウンロード）となっています。

共有設定。

 そしてアクションシート。

正直、このあたりの設計は標準UIがどうこうではなく、そもそもこのアプリの設計があんまりよろしくないところに起因してるのでなんとも言えないですね。解説するのに体力を使いそうなので敢えて書きませんが、共有設定から

最初から編集ボタンをどこかに置いておけばこんなまわりくどい設定にはならなかったはずなのに……

ちょっと話は脱線しますが、

編集画面に切り替わった時に、NavigationBarの片側に「共有ボタン」を、下のバーに「名前を変更ボタン」を置けばシンプルな設計になったのではないかと思います。

さてこんなまわりくどい設計をAndroidとWPがどう解決しているかと言いますと、一言で言うと長押しです。

上図がサムネイル表示の時にサムネイルを長押しした時の挙動です。AndroidはOverflowにリネームが格納されています。

Androidは下部のバーのアイコンが変わり、WPはパソコンで右クリックしたかのようにメニューが出てきます。 

またリスト表示では

Android は最初からチェックボックスが見えています。Gmailでも使われていますね。もちろん、長押しもできます。

また、WPはアプリバーの編集アイコンか、サムネイルの左側をタップすることで編集モードになりますが、なんとフォルダ移動と削除しかできません。共有は詳細画面からでも行えますが、リネームは長押しショートカットからのみです。潔い。

長押しを当たり前のように設計に入れているのは、iOSとの大きな違いです。もちろん、以前も書いたように長押しは気付かせるのが難しいです。ショートカット的な役割を持たせておき、次の画面などで同じアクションができるようにフォローをするのが通常の流れですが、WPのリネームのようにそこでしかできないこともあります。

WPは、アプリ一覧からホーム画面にアプリを登録する時に長押しを使うので、3OSの中では最もユーザーが長押しに慣れている、操作に組み込まれてることを把握している珍しいOSと言えます。

iOSやAndroidも長押しによるアクションはありますが、そのほとんどが特定画面に対してのもの（アイコンを長押しで移動、削除・テキストボックスで入力位置の移動、テキスト上で選択、コピー）のため、WPのように長押しをするとメニューが出てくる、という刷り込みの訓練はあまりされていないと思います。

このように、拡張的なUIに関しては、やはりiOSは少し遅れ気味と言わざるをえないでしょう。 

以上で一部分ではありますが解説を終わりたいと思います。次にまとめに…と思いましたが、どうもiPhone版の出来がいまひとつなせいか、うまく書けません。UX的な部分も、結局は設計と密接に関わってるから、だめなところは書けてもいい感じにまとめるのがどうも…

ただ1つ言うなら、繰り返しになってしまいますが「操作系統」という面から各OSを見てみると、もうそろそろiOSは限界なんじゃないかな、と思ってしまいます。標準UIの拡張性が幅狭いので、少し複雑なアプリを設計しようと思うと、どうしてもカスタムにしたくなることが多々あります。

拡張性、というか自由度の点ではAndroidが頭ひとつ抜けてるという印象です。ただ、逆にモダンすぎて一般のユーザーが果たしてどれだけ付いていけてるのか、と少し不安にもなります。WPはまだまだ発展途上ですね。ホントにもう…頼むぜ！（いい意味で

と、ひとまず大きなテーマを扱ってみたつもりですが、うまく書けてないところが多すぎですねー。

もともとは同僚から「3OS共通のアプリを事例に、UIとUXの比較とかなんちゃら」とリクエストを頂いたので、いっちょ何か書いてみようかと思ったのがきっかけでしたが、いざ書いてみると着地点を決めて詳細を詰めていくのが難しい。。

あと選んだアプリが割かし平凡な内容だったので、あまりUX的に違いがどうって言えなかったのがやっちゃった感ありますね… いやもちろんUI的な特徴は概ね解説できたとは思うんですが、逆に解説だけで終わってしまいました。申し訳ない。もっと時間作って書けばよかったー

たわむれに始めたひとりAdvent Calendarも残り5回。何を書こうか毎日考えてるのであまり深いことは書けないと思いますが、とりあえず完走目指してがんばってみるかあ。