iOSの遷移まとめ
こんにちはPOP（@y_hiranai）です。趣味はお酒とゲームとUI/UX研究です。
今回は、社内向けに開催した「iOS遷移に関する資料」をnoteします。
新規でアプリを考えたり、サービスの改修を検討する際に、遷移の基本を知っているとエンジニアやデザイナーと話す時に楽ですよ〜という話でした。
iOS 3種類の画面遷移
SmartNewsのようなタブが無いアプリもありますが、基本はこの３種類で遷移します。
タブバーから遷移する「タブ遷移」。記事やリンクをクリックした際に利用されている事が多い「プッシュ遷移」。テキスト入力などの際に利用される「モーダル遷移」です。
各遷移の特徴は以下の通り。
1.タブ遷移
その名の通り、タブバーを使って画面を遷移します。Human Interface Guidelines（英語）では以下のように説明されています。
アプリの様々なセクションを素早く切り替える場合に使用する。アプリ内の関連情報を平均化し、可視化することで一度にアクセスすることが出来ます。
ちょっと分かりづらい表現ですが、タブバーに入れる導線は「メインコンテンツにどうやって（何を基準に）たどり着かせるか」が基本になります。
iTunesstoreのタブバー
iTunesstoreのタブバーはアプリの中のコンテンツを平均化し、どういった切り口でも目的のコンテンツにたどり着けるように設計されています。
LINEのタブバー
”コンテンツを平均化する”という話でしたが、LINEは少し変わった情報設計がされています。「タイムライン」「ニュース」「ウォレット」などチャット機能と直接関係ない機能が配してあります。
自社アプリ"ninaru"ではどうなっているか
Human Interface Guidelines（英語）を知る前に作ったUIにしては、それなりに設計されているという印象。
ただ「体験談」は「さがす」「お気に入り」と同列なのか？という疑問と、メニューの中に「妊娠スケジュール」という便利なコンテンツが隠れてしまっているのは勿体ないので、改良の余地ありです。
体験談が入りコンテンツも増えてきたので、MERYとかLOCARIのように、スワイプで横断的にコンテンツを回遊できるUIのほうが設計もキレイだし、ユーザーフレンドリーな気がするので変えてみたい・・・。
２.プッシュ遷移
タブ遷移は聞いたことあるけど、プッシュって何？通知の事？ってなりそうですが、何処でも見かけるこの遷移です。
Human Interface Guidelines（英語）では以下のように説明されています。
ドリルダウンとも呼ばれます。
情報は左から右に流れるという原則に従って右側に潜っていきます。画面遷移の一連の流れをひとつのタスクとして捉えたとき、プッシュ遷移はタスクを進行します。アプリの UI を設計するならまずはプッシュ遷移に収められるかを検討すると良いでしょう。
だそうです。ドリルダウンというのが一番イメージしやすいですね。
タブ遷移でも書いた通りタブバーが無いアプリもありますが、プッシュ遷移が無いアプリは弊社のなきやみbabyくらいなもので、普通はあります。
特徴として、プッシュ遷移先のページで”スイッチを切り替えたら、それは確定した事実として保存され、後は戻るだけ”という特性があります。
自社アプリ"ninaru"ではどうなっているか
大枠良さそうなんですが「メニューページ」の中にある「出産予定日設定」の中にタイムピッカーへの遷移が怪しいですね。ここはユーザーに１アクション強いているので、良くないUIになっている可能性があります。
（そもそもここはプッシュ遷移しないでモーダル遷移が良いのでは…？とも思うのでその話は次項で）
3. モーダル遷移
ポップアップやテキストピッカーなどでもこう呼ばれるとか、呼ばれないとか。遷移と呼ばれていますが、ページが変わるわけではなく、該当ページ内で完結できるのが特徴です。
Human Interface Guidelines（英語）では以下のように説明されています。
データが曖昧な状態にならないよう、自己完結した作業を最後まで進めたい場合に使用する。モーダル型の作業は短時間で済むよう簡単にし、対象となる範囲を制限する
YES or NO くらいの一問一答で終わるようなUIのときに使ってね。という感じでしょうか。
そしてもう一つ、モーダル遷移が定義している重要な特徴が。
多重モーダルは推奨されません。
もしそれ以上にモーダルを重ねるようなら画面設計の見直しを検討した方が良いでしょう。
なぜなら多重モーダルではユーザーは自身がどこからやってきたのかを忘れてしまうからです。前の前の前のモーダルが何をしていたタスクなのかをいちいち覚えていられません。ナビゲーションの経路をシンプルにすることはユーザーにとって親切な設計です。
Human Interface Guidelines（英語）でも書いている通りモーダル遷移は多重使用ご法度です。Appleは多重するならUI設計を見直せとまで言ってます。
自社アプリ"ninaru"ではどうなっているか
流石に多重モーダルはしてませんでした。良かった・・・笑
まとめ
タブ遷移
タブ遷移はホームに設置される都合上、目的と導線設計がわかりやすく、ユーザーも使いやすいです。
ただ、タブバーに乗せてしまうことで情報の粒度が平均化されやすく、重要度が高かった場合に目立つからと狙ってタブバーにおいたコンテンツは埋もれてしまうので注意が必要かもしれません。
誤った配置設計にしてしまうと、意図しないユーザー行動を誘発しかねないので、正しいコンテキストで設計する必要があります。
プッシュ遷移
プッシュ遷移はタスクを進行させることが出来るので、分かりやすく情報を選択できればシンプルな導線でユーザーを意図した箇所まで誘導することが出来ます。迷わせる事なく、正確に情報を絞っていくことが重要です。
モーダル遷移
モーダル遷移の使い所には注意が必要。
多様することは最適ではないし、二重・三重とモダールを重ねることはユーザーを迷わせる事になり、ユーザーが今何のアクションに対する判断をしているのか迷わせてしまい、離脱を生む原因になります。
静止画のプロトタイプだと、モーダル遷移の良し悪しが判断出来ないことが多いので、Adobe XDなどを使ってモーション込みの動的なプロトタイプなどでしっかり検証する必要がありそうです。
では。
最後に、検証でしようしたうちのアプリたちとスペシャルサンクス
妊婦さん向けアプリ"ninaru"
愛してやまないUIツール、Adobe XD
この記事が気に入ったらサポートをしてみませんか？