【第１回】iOSアプリ ticket to UI/UX

iOSの開発を実業務ではじめて約３ヶ月、これまではとくに気づかなかったけれど、「実際につくってみてはじめて他アプリのUIのこだわりに気づくこと」というのがでてきました。

UI/UXについては興味があるので、他アプリのUIで気になったことがそれなりにたまった時点でこちらのブログに記していこうと思います（今回が第一弾です）。

あくまでも自分が感じたことなので、
「他のアプリでもそんなの当たり前だよー」
「一般的にはそのUIはアンチパターンですよー」
だとか色々あるかもしれませんが、そこはご容赦ください。

※下記に登場する各アプリは2012/12/09時点での最新バージョンのもの

"Facebook"におけるサブナビゲーションバーの動き

サブナビゲーションバーと勝手に呼んでしまいましたが、Facebookのタイムラインに表示される、下画像でいう"ステータス"、"写真"、"チェックイン"のボタンが配置されている箇所のことをここではそう呼ぶことにします。

このサブナビゲーションバー、実はタイムラインの画面を少しでも大きく見せるため、上のナビゲーションバーの下に潜り込む格好で出たり隠れたりするのですが（下の画像）、

どのタイミングで出たり隠れたりするのか、よくよくいじってみると細かな配慮があるように感じられました。
以下にサブナビゲーションバーの挙動をまとめてみます。

・デフォルトでは表示されている
・タイムラインを下に下げるときは隠れる
・（サブナビゲーションバーが隠れた状態で）タイムラインを上にゆっくり上げるときは隠れたまま
・（サブナビゲーションバーが隠れた状態で）タイムラインを上にそれなりの加速で上げるときは出てくる

どういう配慮があるかというと、
・（２つめ）：タイムラインを下げるということはいままさにユーザが情報をパーッと閲覧しようとしているので、画面サイズを広げて閲覧性を高めようという配慮
・（３つめ）：２つめのところでいう閲覧のところで、タイムラインをちょっと下げすぎてしまい少し戻りたい（＝タイムラインをゆっくり上げる）というときに、ユーザはその情報を閲覧したいという状況なので、ここでも画面サイズを広げて閲覧性は保ったままという配慮
・４つめ：ここは少し難しいところなのですが、閲覧性を高めるために隠していたサブナビゲーションバーをどうやって再び登場させるか、、、ここではタイムラインを上にそれなりの加速で上げる＝ユーザはあまり情報をとくに深く閲覧しようとはしていないと思われる状況ということで、それをトリガーとしています。

写真アプリなんかに見られる、サムネイル画像選択→大きな画像を表示、における画像のロードを感じさせないテクニック

これは多くの写真アプリでみられるテクニックだと思うし、私の同僚がPC上のflashでも使用していたテクニックです。
ここでは写真共有アプリ、"ISO500"というアプリをサンプル画像として説明したいと思います。

まず下の画像が、複数の写真のサムネイルが並んだ画面になります。

ここでサムネイルを選択すると、その写真の詳細画面へと遷移します。ここで表示する画像はサムネイルで表示していた画像よりも高解像度のものです。
なぜいちいちこのようにサムネイル用の画像と詳細用の高解像度の画像を必要とするのかというと、サムネイルのところで高解像度の画像のものを小さく表示するという仕様ですと、画像の読み込み時間がとても長くなってしまいますし、詳細画面のほうでもサムネイル画像を表示するという仕様ですと、明らかに見栄え（画質）が劣ってしまい、写真を見せるアプリなのに写真アプリではなくなってしまいますww

サムネイル用の画像と詳細用の高解像度の画像を用いるとき、１つ問題があります。サムネイルを選択後に詳細画面へと遷移、ただしここではじめて高解像度の画像をロードするので、それが表示されるまでの間、少なからずタイムラグが発生することになります。どうするか？インジケーターを表示する？それもありかもしれませんが、サムネイルの画像をまず仮で見せておくという手法があります。

そのうえで、高解像度の画像のローディングが完了した時点で表示をそちらに切り替える。

これで上述したタイムラグをユーザがそれほど気にすることなく写真を閲覧することができます。
（こういったことってUIというよりもUXに近いのかもしれませんね）

"Starmatic"にみる、操作ボタンを隠す方法

写真共有アプリではとかく写真を大きく見せて（またはクールにorスタイリッシュにみせるため）、その写真についての操作ボタンはどこかに隠しておくのが主流であると思います。ここでは写真共有アプリの"Starmatic"で用いられているテクニックについてみていきたいと思います。

こちらがある写真についての詳細画面になります。

このアプリではその写真について、いいねやコメント、シェアができるのですが、それらを行うためのボタンはどこにあるのでしょうか？答えは写真をタップすると、下画像のように写真上に各種ボタンが表示される、です。

問題は「そんなの知らねーよ」というものですねw
ただし、このアプリでは上記のUIの仕組みをほのめかすヒントのようなものがしっかりと埋め込まれています。
詳細画面が遷移した一瞬、下画像のようにいいね数・コメント数が写真の上に表示されます（一瞬表示され、フェードアウトする格好で２つ前の画像になります）。

これにより「写真の上になにか情報が表示される、もしくは存在する」とユーザの頭に刷り込ませ、写真をタップする可能性を少しでも高めているのだと思います。

・・・といった感じで、今後もこんな感じで続けていけたらと思いますw