インターフェースの基本Views ポップオーバーについて

iOS human interface guidelineについてまとめていきたいと思います。
インターフェースの基本のviews、ポップオーバー(Popovers）について例を交えながらまとめたいと思います。

ポップオーバーとは、コントロールをタップしたときやエリア内で他のコンテンツの上に表示される一時的なビューのことです。

通常、ポップオーバーには、ポップアップが出現した場所を示す矢印が含まれています。ポップオーバーには、非モーダルまたはモーダルがあります。非モーダルなポップアップオーバーは、画面の別の部分をタップするか、ポップアップオーバー上のボタンをタップすることで解除されます。モーダルポップオーバーは、ポップオーバー上のキャンセルまたは他のボタンをタップすることで解除されます。

ポップオーバーは大画面に最も適しており、ナビゲーションバー、ツールバー、タブバー、テーブル、コレクション、画像、マップ、カスタムビューなど、さまざまな要素を含むことができます。ポップオーバーが表示されているときは、通常、ポップアップオーバーが解除されるまで、他のビューとのインタラクションは無効になります。ポップオーバーを使用して、画面上にコンテンツに関連するオプションや情報を表示します。たとえば、多くの iPad アプリでは、アクションボタンをタップすると、共有オプションのポップオーバーが表示されます。

①iPhoneでポップオーバーを表示しないようにしましょう

一般的に、ポップオーバーはiPadアプリに向いています。iPhoneアプリでは、ポップアップではなく、フルスクリーンのモーダルビューで情報を表示することで、利用可能なすべての画面スペースを活用することが出来ます。

②確認・案内のみの場合は「閉じる」ボタンを使用しましょう

キャンセルや完了などの閉じるボタンは、変更を保存したまま、または保存せずに終了するなど、分かりやすくするために含める価値があります。

一般的に、ポップアップオーバーは、その存在が不要になったら自動的に閉じるべきです。ほとんどの場合、誰かがその範囲外をタップしたり、ポップアップオーバー内のアイテムを選択したりすると、ポップアップオーバーは閉じます。複数の選択が可能な場合は、誰かが明示的に解除するか、その範囲外をタップするまでポップオーバーは開いたままにしておくべきです。

③非モーダルなポップアップオーバーを自動的に閉じる際に、常に作業を保存するようにしましょう

画面の別の部分をタップすることで、意図せずに非モーダルなポップアップオーバーを破棄してしまうことは簡単です。誰かが明示的なキャンセルボタンをタップした場合にのみ、作業を破棄します。

④ポップオーバーを画面上に適切に配置しましょう

ポップオーバーの矢印は、それを明らかにした要素にできるだけ直接指し示すべきです。

ポップオーバーは画面上でドラッグできないので、ポップオーバーを使用している間に人々が見る必要があるかもしれない本質的なコンテンツをカバーするべきではありません。また、ポップオーバーは、ポップオーバーを表示するためにタップされた要素をカバーすべきではありません。

⑤ポップオーバーは1つずつ表示しましょう

複数のポップアップオーバーを表示すると、インターフェイスが乱雑になり、混乱を招きます。ポップオーバーのカスケードや階層を表示しないでください。新しいポップアップオーバーを表示する必要がある場合は、まず開いているポップアップオーバーを閉じます。

⑥ポップオーバーの上に別のビューを表示しないようにしましょう

アラートを除いて、ポップオーバーの上には何も表示されないはずです。

⑦可能であれば、ユーザーが1つのポップアップを閉じて、1回のタップで別のポップアップを開くことができるようにしましょう

複数の異なるバーボタンがそれぞれポップオーバーを開く場合は、余分なタップを避けることが特に望ましいです。

⑧ポップオーバーを大きくしすぎないようにしましょう

ポップオーバーは画面全体を占領してはいけません。内容を表示し、それがどこから来たかを示すのに十分な大きさにしてください。ポップオーバーが画面上にうまく収まるように、システムがポップオーバーのサイズを調整することがあるので注意しましょう。

⑨カスタムする場合、ポップオーバーをポップオーバーのように見えるようにしましょう

ポップオーバーの視覚的な側面の多くをカスタマイズすることができますが、人々がポップオーバーと認識しないようなデザインを作成することは避けてください。ポップオーバーは、標準的なコントロールとビューを含む場合に最もよく機能する傾向があります。

⑩ポップオーバーのサイズを変更する際にスムーズな遷移を提供しましょう

ポップオーバーの中には、同じ情報の凝縮されたビューと拡大されたビューの両方を提供するものがあります。ポップオーバーのサイズを調整する場合は、変更をアニメーション化して、新しいポップオーバーが古いものに取って代わったような印象を与えないようにしましょう。

次回はスクロールビューについてまとめます。