読者です 読者をやめる 読者になる 読者になる

よりぶろ

アプリのUIとかについて書いてく予定

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

時間のある休日は少し変わったネタをということで、iOS、Android、Windows PhoneのUIを比較してみようと思います。

昨日はUSA TODAYが最適かなあと思ったのですが、考えてみるとスライドメニューなど独自要素もあるので、なるべく標準的なUIを使ってるアプリで比較したいなあと思い、各OSのアプリストアとSkyDriveを参考に、2日に分けて考えてみたいと思います。

ストアは共通のアプリというわけではありませんが、ほとんどのユーザーが使うこと、アプリを探すという目的は一致していることから選びました。

SkyDriveは幸いかなiOSが未だ標準UIを使っているのと、ファイルの選択や名前の編集など、他のアプリでも使われるアクションも多いため選びました。

 

 

ストアアプリを見比べる

まずストアですが、今回は画面をただ並べるだけだと前後の文脈がわからないので、「人気のあるSNSアプリをインストールする」という仮定のもと、簡単な遷移図を作ってみました。

 

iOS

 

Android

 

Windows Phone

 

こうして見比べると、iOSは画像を多用・タブの常時表示、Androidは情報を1画面 / 1階層に多く表示・出し惜しみをしない、WPは階層もレイアウトもシンプルに、という印象を持ちます。

またAndroidとWPはアプリ以外にも書籍やゲームなどを別カテゴリとして持っており、1階層目はそれらにアクセスするためのハブページとなっています。

逆にiOSの特徴として、おすすめとランキングがタブで別れており、完全に別画面として機能していることが挙げられます。一覧もすぐに表示するわけではなく、プレビュー的な画面(3階層目)を1つ挟んでいます。

それでは各画面の比較をしてみましょう。なお比較しやすいようにiOSは解像度を横720px合わせに拡大しています。

 

TOP

 便宜上、AndroidとWPは2階層目からにします。

まず目を引くのはWPでしょう。何しろ情報がアプリ1つしかありません。初めて見る人は驚くかもしれませんが、WPには情報を集約する場所として「ハブ」という概念が存在しており、横にフリックすることでその全体像が見えます。

ファーストビューで見えない情報はユーザーに認識されづらいため、優先度は低くなるのが普通です。しかしWPのハブは1画面に見える情報を最小限に抑えることにより、1巡するのに5画面ありますが情報量的にはiOSやAndroidの1画面分くらいになっています。

情報が大きく表示されていることで見やすく、アクセスもしやすいです。反面、情報量は少なく、詳細な情報もここではわかりません。あくまでも入り口に特化した設計と言えます。

iOSとAndroidの画面構成はよく似ていますが、違いがあるとすれば「iOSは画面を切り替えるのにボタンを使っているが、Androidはスワイプで切り替えている」点です。

iOSはその登場以来、UIをほぼ変えずに現在まで至っています。一方、Androidはメジャーアップデートごとに(特に2.3から4.0)UIが変わってきています。よりスマートフォンらしい操作性を採用するAndroidに対して、これまでのユーザーの学習を裏切らないiOSといったところでしょうか。

ちなみに、Androidもスワイプで画面を切り替えますが、これも立派なタブです。UI的にはScrollable Tabsと呼ばれる要素で、Androidはこの他に固定式のFixed Tabsもあります。まあFixedと言いながらスワイプでも切り替えられるんですけどね。

違いとしては、Scrollableはラベルだけ・多くのページを使ってよい。Fixedはラベルの変わりにアイコンを使用・画面に見えるページ数(大体が最大3)だけにする、となっています。

 Fixed Tabsの具体例、連絡先アプリ。上部にある3つのタブがFixed Tabs。

 

カテゴリを選ぶ

 カテゴリを選ぶのに特にどのOSが使いやすくて使いづらいというのはないと思います。

強いていうなら、iOSのみ、おすすめとランキングが分かれているので、それぞれでカテゴリ選択をしなくちゃいけないという点ですが、タブで移動ができるので問題はないでしょう。

 

ランキング

 ランキングは各OSごとに特徴が見られます。

まずiOSですが、トップ有料・トップ無料・トップセールスが一覧できます。リストに移るには次の階層へ行く必要がありますが、この画面内でもフリックで順位を進めることができます。また一覧画面の特徴として、詳細画面に移らなくてもアプリのインストールが可能です。

 一覧に遷移すると、ここでもカテゴリを変えることができる。

 

Androidは相変わらず情報量が多いのが特徴です。一気にランキング上位を見渡せます。またフリックによる切り替えもスムーズなので、他のOSよりも情報を多く、効果的に得ることができます。

WPは標準的なリストです。他のOSに比べると情報量は少なく、取り立てて目立つ点はありませんが、WPらしい見やすさが特徴と言えます。

ちなみに、アプリをインストールするために段々と階層が深くなっていますが、どのOSもすぐに検索が行えるようになっています。

 

アプリ詳細

 では、アプリの詳細情報を表示する画面はどのようになっているのでしょうか。

どのOSにも共通して、アプリ情報、スクリーンショット、ユーザーレビュー、関連アプリがあります。またSNSやメールを通しての共有も可能です。iOSはいいね、AndroidはGoolge+がすぐに行えます。

iOSはタブで詳細+スクショ、レビュー、関連を切り替えます。Androidはスクロールすることで全ての情報が見れます。また、それぞれより詳細な画面へ遷移ができます。WPは詳細、レビュー、スクショ、関連をフリックで切り替えます。

Androidはスクロールして大量の情報を消費しなければいけないため、タブやフリックで分けている他のOSに比べると少し見難いです。逆に、スクショに動画を入れられるのはAndroidだけです。

iOSは適度なマージンでレイアウトされていて、タブで情報も分けられているので情報がうまく整理されています。

WPはこれまた特徴がないのが残念です。WP全般に言えますが、視認性を高めるためにフォントサイズを大きくした結果、画面に空きが大きく発生しています。並べるとわかりますが、実はAndroidとWPとでスクロール可能な範囲はそう変わらなかったりします。

 

で、実際使ってみるとどうなのよ

と、ここまではただ画面を並べて表面的な部分の説明でしたが、実際に使った感じはどうでしょう。

最初のほうにも書きましたが、アプリストアの目的は「欲しいアプリを見つける」「面白いアプリに出会える」が主で、その他に「アプリのアップデート」「これまで購入したアプリの再インストール」などがあります。

結果から言うと、どのOSも特別に使いにくいというわけではありません。またコンテンツとしても唯一無二のものなので使い続けるうちに慣れていきます。

使い勝手に関しては明日のSkyDriveのほうに詳しく記載する予定です。

 

iOS

iOSのまとめとしては、まず起動した時の画面の賑やかさ、Tab Barによってどんな画面があるか、情報を先にユーザーに見せるという安心さが大きなポイントです。アプリはスマートフォンの要。それをまとめるストアですから、やはり賑やかなほうがユーザーはわくわくします。

また初代 iPhone から使われ続けているタブですが、やはりナビゲーションとして優秀です。階層をいくら深く行っても、タブをタップすることで一番上の階層に戻れるのも使い勝手が良く、アプリを探してついつい迷子になってしまいがちなユーザーをちゃんと導いてくれます。

「おすすめ」では、まず大きなイメージでいま一番おすすめのアプリのバナーを表示し、次にニュースリリースと注目先品、おすすめアプリのバナー(小)、人気作品と続きます。

AndroidやWPのように1画面1構成ではなく、複数の入り口をちょい見せすることで、うまく動線を作っていると思います。

アプリのアップデートや再インストールに関しても、特に問題なく使えます。一覧やGeniusから詳細に行かずに直にインストールできるのは、特に無料アプリのランキングなどで「とりあえず入れてみよう」という時に役立つので、重宝してる方も多いのではないでしょうか。

反面、変わらないことがiOSの弱点でもあります。

現状、画面内の要素しかフリックで切り替えができておらず、画面全体をフリックで切り替えることはTabBarとの兼ね合いもあるためか採用されていません。まあ採用されたらされたでAndroidに近くなる気がしますが、、

しばしばiOSは「ボタンばっかり使わないで、もっとジェスチャを使えばいいのに」と言われます。それは、話題に挙がるモダンなアプリがジェスチャを多用していることからも伺えます。

UI面では堅実ながらも若干後塵を拝している印象です。そろそろ次のOSで刷新とかされるんですかねぇ。

 

Android

Androidはこの回や他の回でも書いているように、機能的であり、情報をよく露出させています。

ぱっと見の情報量が多く、人によっては好みが分かれそうです。

見やすさの定義というのも人によって様々なので、Google的には「1度に多くの情報を見せることが見やすさに繋がる」というスタンスなのでしょうかね。

Scrollable Tabsで表示している画面数が多いのはちょっと気になりますね。まあ使えば気にならないけど。

アプリストアとして書籍や映画など他コンテンツも充実しているため、マーケットアプリとして統一されているのは良いと思います。また、レビューが日付順や参考順などでソートできる点や自動アップデートが行われる点など、全体の設計面よりもアプリに近いシステム面で良い印象があります。

 

Windows Phone

個人的には、WPは少し機能不足な面が否めないなと感じました。具体的には

・階層を戻る手段がバックボタンしかない

・過去にインストールしたアプリの再インストール手段が検索から探すしかない

例えばアプリを見る→関連アプリを見る→関連アプリを見る→... と続けていくと、TOPに戻るのが困難になりますが、iOSはTabBarのタブをタップ、AndroidはActionBarのロゴをタップで一番上の階層にすぐに戻ることができます。

今回の遷移図はとりあえず下の階層へ移動しただけですが、実際にはこんな単純な遷移では終わりません。途中でおすすめを見返したくなるし、カテゴリを変えたくなるし、検索もしてみたい。そういうユーザーの動線を想定して設計する必要がありますが、WPはそこらへんちょっとしにくい感あります。

そもそもWPはそんなに階層深くならない設計思想(と勝手に思っている)なので、こういうパターンはあまり考えられていないのでしょうね。

また、端末を買い換えた時などはこれまでインストールしたアプリを入れたくなるのが常ですが、スマートフォン単独で一覧することが現状叶いません(WebのWindows Phone ストア経由から閲覧・インストールは可能)。

後発のOSなのだから、ここら辺は何かしら対応が欲しかったところですね。

あとは正直、この特徴的なUIがどれだけ多くの人に受け入れられるかだと思っています(その前に端末…)。

Hubはまだまだ改良の余地があるだろうし、画面上部をタイトルが埋めているというのも、何か新しい解決方法があるんじゃないかと思います。

僕自身はWP大好きなので、これからに期待です。Windows 8とどこまで融合していくのか楽しみです。8みたいに上下のエッジからスワイプでAppBar出たりしないかな。

 

 

という感じで長々と書いてしまいましたが、読み返してみるとあんまり特徴らしい特徴が書けてない…!うーん、UX的な考察っていうのも難しいですねぇ。

まあその辺はSkyDrive辺に持ち越しましょう。