モーダル閉じるボタンのスタイル
レスポンシブWeb /モバイルアプリケーションのモーダルウィンドウの閉じるボタンの再設計案を探しています。私はこれについて私自身の考えを持っていますが、UI/UXコミュニティに重みを付けたいと思います。
以下の閉じるボタンの戦略、AとBについてコメントし、どのアプローチが最善であるかについての考えを追加してください。
モーダルの場合、一般的な方法はWebアプリのBです。モバイルアプリの場合、タッチ/タップ操作を簡単にするために、Aにあるような大きなボタンがよく使用されます。ただし、その場合、2番目のアクションであるため、UIの下部にある閉じるボタンが上部にある可能性が高くなります。ボタンを上部に配置すると、モーダルの残りのコンテンツが表示される前に閉じるボタンに注意が向けられます。それが意図されていない場合、一般的にそれは悪い習慣です。
これの一般的な規則は '[〜＃〜] a [〜＃〜]で、これはモーダルで最も一般的に見られます。
次の理由により、閉じるボタンを上部に配置することはお勧めできません。
- これはユーザーが最初に目にするものである可能性が高く、ポップアップモーダルが与えられた場合、通常は突然の発生で、その下のコンテンツを考慮せずにタップする傾向があります。
- 閉じるボタンの一般的な慣例は、一般的にコンテンツの下にあるため、ユーザーは実際に提示されたものを実際に読む可能性が高くなります。十字はより繊細で邪魔にならず、ボタンほど注意を向けないので、同じ効果はありません。
Ｂ．.
ここで何か新しいものを作成する必要はありません。 「B」は、ユーザーが普段慣れ親しんでいるものです。したがって、ユーザーに認知感覚を視覚的に再訓練させる必要はありません。
KISSアプローチを思い出してください。
モーダルを閉じることは、ユーザーに期待する最初のことではありません。したがって、サイズと配置の点でそれに比例した重要性を与えてください。右上は、ほとんどのユーザーが期待する場所です。覚えておくべきこと：
- モーダルでの主要なユーザー操作の邪魔にならない閉じるボタンを用意します。
- ボタンキーボードをアクセス可能にします。
- ボタンは親指で見やすい大きさにします。
- モーダルがすべての画面サイズで期待どおりに機能することを確認します。場合によっては、閉じるボタンが届かない/目に見えない、これが最も煩わしいことです。