FRMSKI開発ブログ

プログラミング、UI / UX、仕事、読書のことなど、日々の記録を綴ります

Human Interface Guidelines⑤ - App Architecture / Modality 和訳&まとめ

Modalityについての和訳です。

Modality(モダリティ)

 モダリティは、人々がタスクを完了したりメッセージや表示内容を却下するまで、他のことをやることを防ぎ、集中させます。アクションシート、アラート、およびアクティビティビューはモーダルエクスペリエンスを提供します。モーダルビューが画面上に現れるとき、ユーザはボタンをタップするかモーダルエクスペリエンスを終了することによって選択を行わなければならない。
 一部のアプリでは、カレンダーでイベントを編集するときやSafariでブックマークを選択するときなど、モーダルビューが実装されています。モーダルビューは、画面全体、ポップオーバーなどの親ビュー全体、または画面の一部を占有することができます。モーダルビューには通常、ビューを終了する完了ボタンとキャンセルボタンが含まれます。

f:id:frmski:20181014152226p:plain:w250 ←モーダリティビュー

モダリティの使用を最小限に

 一般に、人々は非線形の方法でアプリとやり取りすることを好みます。誰かの注意を引くことが重要な場合、アプリケーションの使用を続けるためにタスクを完了または放棄する必要がある場合、または重要なデータを保存する場合にのみ、モーダルコンテキストを作成することを検討してください。

明らかで安全な方法を提供する

 モーダルビューを却下したときに、人々が行動の結果を常に把握していることを確認してください。

簡単に、短く、焦点を絞った状態に保つ

 アプリ内にアプリを作成しないでください。モーダルタスクが複雑すぎると、モーダルコンテキストに入ったときに中断したタスクを見失う可能性があります。ユーザーは迷子になり、手順を辿る方法を忘れることがあるため、ビューの階層を含むモーダルタスクを作成することに特に注意してください。モーダルタスクにサブビューが含まれている必要がある場合は、階層を通る単一のパスと完了までの明確なパスを指定します。タスクを完了する以外の目的では、完了ボタンを使用しないでください。

必要に応じて、タスクを識別するタイトルを表示

 ビューをより完全に説明するために、ビューの他の部分にテキストを提供することもできます。

理想的に実行可能な情報を提供するためのアラート

 アラートはその経験を中断させ却下するためのタップを必要とするため、侵入が正当であると感じることが重要です。

通知設定を尊重する

 [設定]では、アプリから通知を受け取る方法を指定します。これらの設定を遵守することによって、ユーザーはアプリの通知を完全に無効にするようなことはしないでしょう。

ポップオーバーの上にモーダルビューを表示しない

 アラートを除いて、ポップオーバーには何も表示されません。モダルビューを表示する前にポップオーバーを閉じてください。

モーダルビューの外観を調整

 モーダルビューは、例えばナビゲーションバーを含むことができます。このような場合は、アプリのナビゲーションバーと同じ外観を使用します。

モーダルビューの種類

  • 全画面表示
    画面全体をカバーします。モーダルビューのコンテキスト内で完了できる潜在的に複雑なタスクに使用します。
  • ページシート
    横長方向に保持されているより大きなデバイスの基礎となるコンテンツを部分的にカバーします。すべてのカバーされていない領域は、それらとの相互作用を防ぐために淡色表示されます。小さなデバイスと縦向きの画面全体をカバーします。モーダルビューのコンテキスト内で完了できる潜在的に複雑なタスクに使用します。
  • フォームシート
    画面の中央に表示されますが、キーボードが表示されている場合は再配置されます。すべてのカバーされていない領域は、それらとの相互作用を防ぐために淡色表示されます。小さなデバイスで画面全体を覆うことがあります。情報の収集に使用します。
  • カレントコンテキスト
    親ビューと同じサイズで表示されます。スプリットビューペイン、ポップオーバー、またはフルスクリーンではない他のビュー内にモーダルコンテンツを表示するために使用します。

適切なトランジションスタイルを選択

 アプリと連携して一時的なコンテキストシフトの意識を高めるトランジションスタイルを使用します。デフォルトの遷移は、モーダルビューを画面の下から垂直方向にスライドさせ、一旦解除すると元に戻します。フリップスタイルのトランジションは、ビューを水平方向に反転させてモーダルビューを表示します。視覚的には、モーダルビューは現在のビューの背面に似ています。それは一旦解雇されたときに戻ってくる。アプリ全体を通して一貫したモーダルトランジションスタイルを使用します。