web-dev-qa-db-ja.com

デスクトップのウェブサイト設定の歯車/スパナ/レンチアイコン、またはテキストラベルのどちらがより明確ですか。

(制限された企業環境のため)デスクトップのWebブラウザでのみ表示されるWebベースのツールを構築します。

余計な機能を使わずに、できるだけ最小限に抑えるようにしてください。ツールは、駐車スペースを予約するためのものです。非常にシンプルなので、すべての機能がアコーディオンビューまたはタブ付きビューの1つのページに表示されます。

ユーザーが新しい車の登録の追加やメールアドレスの変更などのアカウント設定を変更できるようにするモーダル設定/管理ページを追加したいだけです。

大きな問題は、A)ユーザーにとってわかりやすく、B)ページがきれいに見えること-テキストラベル「設定」または「アカウントの管理」とは何ですか。または、歯車/スパナ/レンチアイコン?

1
Rex

テキストラベル

テキストラベルは、アイコンよりも簡単に理解できるので、利点があります。つまり、コピーが十分に明確である場合です。たとえば、[設定]を押すと、どのアクションがトリガーされるかを確実に確認できます。

アイコン

一方、アイコンは非常にあいまいな場合があります。たとえば、「レンチ」はあらゆる種類の「構築ツール」、「設定」などを意味します...一部のアイコンは他のアイコンよりも理解しやすいです。あなたがリストしたものの中で、ほとんどの場合、「cog」アイテムが「設定」として使用されているのを見ました。アイコンの利点は、アイコンが簡単に認識できることです。

スペースに余裕があれば、最善の方法は両方を使用することです。認識可能性と理解可能性の組み合わせ。

これも良い参考回答です

5
Vince Caregnato

スクリーンリーダーとADAコンプライアンスに対応する必要がある状況で構築しているかどうかはわかりませんが、アイコンルートを選択する場合は、必ず WCAG規格 に従い、aria-labelまたはtitleのいずれかを含めてください。 。テキストと組み合わせるか、テキストのみを使用する場合、これはすでに処理されています。

0
Greg Hart