web-dev-qa-db-ja.com

閉じるボタンを配置する場所

次のように、画面の上部中央に設定ボタンが表示されたメインビューがあります(悪いモックアップはご容赦ください)。

enter image description here

このボタンにタッチすると、設定が上から下にアニメーションで表示されます(メインビューの上にドロップダウンされます)。

設定メニューが画面全体を覆います-非常に重要

enter image description here

私の質問は、閉じるボタンをどこに配置するかです。

設定ビューの上部中央部分(メインビューと同様?)おそらく下部ですか?

(設定メニューのドロップダウンが良いオプションではないと思われる場合に備えて、コメントをお待ちしています。).

1
Itzik984

一番下

下の画像を見てください。ボタンを上に配置するのが下に配置するよりも難しく、単純なタッチ操作を実行するために両手が必要であることもわかります

enter image description here

しかし、これが唯一の理由ではありません(それは本当に重要ですが)

closeアクションは、コンテンツの後、または少なくともコンテンツに干渉しない位置に来る必要があります。 モーダルを考えてください:通常はclose button、そしてかなり頻繁に、clickable close element右上、コンテンツから遠く離れています。これは、ユーザーが最後のミリ秒までに閉じる予定の内容をユーザーが読み取れるようにする必要があるためです。

それを上に配置すると、ほとんどの情報が覆われます。下の画像のようになります。

enter image description here

要するに

下部(または少なくともコンテンツの後)に配置することは、閉じるボタンの論理的で予想される動作です。快適で片手で簡単にアクセスできます。そして、これらすべてが、ユーザーが毎回何をしているのかをユーザーに認識させる

5
Devin

画面下部の中央に閉じるボタンを配置します。これは、Android <5およびすべての最近のiOSバージョンの通知パネルに表示されます。同じ概念がSnapchatメニューに組み込まれています。上部と中央にあるメニューアイコン(ゴースト)をクリックしますメニューが上から下に移動します下の中央にメニューを閉じるボタンがあります:

Snapchat menu (Photo from the verge)

1
CKH4

デバイスによって、理想的な配置は少し異なります。 Androidは画面が大きいので、下が親指に最も近いのが最適です。iPhoneは小さいので、手の届きすぎずにボタンを画面の上に配置できます。ただし、ユーザーが画面の上部中央部分をタップしたことを考えると、ユーザーが期待するとおりの一貫性を保つために、そこに配置するのが最適な配置だと思います。

0
David Sheridan