画面遷移の性質を事前に伝える重要性
モーダル・プッシュ・タブ
iOSの画面遷移には、大きく分けて３つの画面遷移があります。
３つの画面遷移アニメーションを見てみましょう。
| モーダル | プッシュ | タブ |
|---|---|---|
 |
 |
 |
モーダルは下から次の画面が、プッシュは右から次の画面が表示されます。
タブには小さなアニメーションがついていますが、瞬時に切り替わるように感じます。
これらの使い分けや、考え方は次の記事が参考になります。
遷移する前から認知は始まっている
この記事では、画面遷移の前段階に焦点を当てます。特にモーダルやプッシュは、ボタンがトリガーとなることが多く、ボタンデザインの多様性から遷移の種類が分かりにくくなることがあります。
実際に、このボタンだけではどんな画面遷移が起こるか分かりにくい。
ユーザーが画面遷移を特別意識することは少ないかもしれませんが、iOSを使用する以上、正しい画面遷移のルールは無意識に認知されています。
誤った遷移方法を示すUIは、ユーザーに混乱を引き起こす可能性があります。
たとえば、「Explore navigation design for iOS」では、ボタンによる強制的なタブ移動は乱雑さを生むため、適切ではないとされています。これは、タブバー以外ではタブが移動しないという認知に反する動作が原因の一つと考えられます。
認知的不協和を伴う体験は、単なる違和感に留まらず、その影響を軽視することはできません。乗り心地の良い車を選ぶことや、理解しやすい書籍を手に取ることと同様に、ユーザーは自らの直感に基づき、違和感のないアプリケーションを選択します。たとえビジネスモデルが優れていても、UIの適切さが競合との差別化に寄与することは明白です。
遷移の種類ごとに見た目を変える
遷移前にその種類を伝える最も効果的な方法は、タブバーのように遷移を示すUIコンポーネントにユニークな視覚的特徴を持たせることです。
| プッシュ | タブ |
|---|---|
 |
 |
特にプッシュ遷移を示すボタンには、シェブロン（＞のアイコン）を付ける慣習があります。iOSの標準アプリを観察すると、多くの場合このルールが守られていることが分かります。
シェブロンをタップすると必ず情報が展開される
一貫性とユニーク性を守る
このアプローチを応用することで、他の遷移にも独自の視覚的特性を持たせることが可能です。
例えば次のボタンは、iOSでは一般的ではありませんがユーザーにリンクを開く事や、ブラウザが開かれる印象を与えます。
 |
 |
このように、同じ遷移を表現するにも、表現の方法は複数あります。
これらをアプリ内で混在して使用すると、ユーザーは存在しない機能の違いに意識を取られます。
説明できる違いが無いのであれば、同じ表現を再利用することが望ましいと言えます。
モーダルに関しては、コンテキストを切り替えるという特性上、様々な形状であることが一般的です。
しかし、シェブロン付きのボタンでモーダルを開くなど、他の画面遷移コンポーネントのユニーク性を奪わないように注意します。
シェブロン付きのボタンでモーダルすると違和感がある
特徴的な画面遷移アニメーションを持つモーダルであれば、アニメーションに応じて遷移に使用するUIコンポーネントに独自の視覚的特性を付与することが望ましいでしょう。
まとめ
iOSにおける画面遷移のデザインは、ユーザーの認知を考慮した上で行う必要があります。モーダル、プッシュ、タブの各遷移方法には、それぞれの特性があり、適切な視覚的表現を用いることで、ユーザーは直感的に操作を理解しやすくなります。遷移前の段階からユーザーに明確な情報を提供することが、スムーズなインターフェース体験を生む鍵です。デザインにおいては、一貫性を持たせつつ、異なる遷移方法には独特の視覚的特徴を持たせることが重要です。
Discussion