web-dev-qa-db-ja.com

削除ボタンはどこに配置すればよいですか?

ユーザーが保存したすべてのリンクを表示するサイドバーがあります。単なるサイドバーなので、できるだけシンプルでクリーンな状態に保ちたいと思います。したがって、削除のリンクの横にある十字アイコンを使用します。

オプション1

長所:削除するリンクがわかりやすい

短所:配置されていないボタンを削除する

Option 1

オプション2

長所:削除するリンクがわかりやすく、削除ボタンが整列

短所:削除ボタンを最初に置くのは奇妙なようです

Option 2

オプション3

長所:削除ボタンの位置合わせ、折りたたみアイコンの位置合わせも見栄えが良い。

短所:削除ボタンがリンクから遠く離れているため、誤って削除される可能性があります。 (行の周囲に境界線を追加するか、異なる色を使用して各行を分離すると、この問題を軽減できますが、サイドバーが乱雑に見えます)

Option 3

全体的に私はオプション3を好みますが、ユーザーが正しい削除アイコンをクリックするようにするにはどうすればよいですか?

================================================== ============

更新しました:

すべての提案をありがとう、私の最終的なデザインは以下のとおりです: enter image description here

2
eriee

あなたは置くことができます 取り消し線 誰かが対応する削除ボタンの上にマウスを置いている場合は、リンクの上。また、他の方法で強調表示することもできます。これにより、それが削除されていることが明らかになります。これを行う方法に関するいくつかのHTML/JS/CSS情報については、 here を参照してください。一般に、このWebサイト(w3schools)は、HTML/JS/CSSの優れた参照場所です。

2

設計をテストする;)

オプション3が最良の回答に最も近いと思います。アイコンを情報から遠ざけることにより、誤って削除することを少なくする必要があります。私が行う1つの変更は、表示されているとおりにテキストを拡張しないことです。削除アイコンは常に最初の行の右上に固定する必要があります。これにより、すべての要素の共通領域に配置されます。

1
Chris Griffith