web-dev-qa-db-ja.com

の最善の使用法(ヘルプ)およびi(情報)アイコンのUI

ヘルプおよび情報アイコンの使用の最良の基準は何ですか? (私は新しいユーザーなので画像を投稿することはできませんが、アイコンは?またはiのいずれかであり、最も一般的です)

私が提案する方法は、最も一貫しているように見えます(アプリケーションとWebサイト全体で使用すると、非常に矛盾します)。

ヘルプアイコンは次の場合に使用する必要があります。

  • アプリケーション/サイトのヘルプに直接リンクするか、起動します
  • 詳細な情報が必要であり、明確にするために複数のセンテンスが必要です。

情報アイコンは次の場合に使用する必要があります。

  • 少量の役立つテキストが適切です
  • UIに住んでいるか、
  • ロールオーバーで明らかになることがあります

どの基準を使用していますか?これらの適切な使用法をどのように定義しますか? iとの違いはありますか?アイコン、またはどちらか一方だけが必要ですか?

4
Leslie

ユーザーエクスペリエンスチームは、これを最後の可能な側面まで定義していませんが、これらのさまざまな標準にある程度の範囲を提供します。より具体的には、これらを Messages および Contextual Help と呼びます。

「i」情報シンボルは現在、一連のメッセージ要素の一部として使用されています(下の画像を参照)。ユーザーエクスペリエンスチームは社内向けと社外向けの両方のアプリケーションと連携しているため、考えられるさまざまなメッセージ用に開発しました。コンテンツに応じて、開発者は最も意味のあるメッセージスタイルを選択できます。ほとんどの場合、「i」情報メッセージは、一般的なメッセージを最もよく表すため、最もよく使用されます。

Different message types

これらのメッセージ要素は、情報提供のみを目的として作成されています。何かが重要であることを意味します。とユーザーに通知する必要があります。異なるスタイルは、特定のメッセージタイプをより強調することです。 「i」記号の使用は一般的なものであり、これらの他のメッセージスタイルは、伝達する必要のあるコンテンツのタイプをより適切に反映している場合があります。

のために "?"コンテキストヘルプの参照として使用するアイコン(下の画像を参照)。当面のコンテキストヘルプは、Qtips 2 jQueryプラグインに関連付けられています。このようにして、ユーザーは必要に応じてコンテキストヘルプを表示できます。これはフォームで最も一般的に使用されますが、開発者はアイコンを別のWebページにリンクすることに限定されません。

Example of contextual help from guide

ふたつのアイコンは意味のない意味を持っています。 「?」アイコンは、長い間、信頼できる事実上の支援基準でした。私が知っている「i」の情報記号は少し新しいですが、上記の基準にもなっています。他のアイコンシンボルを使用してどちらかを反映することをためらいます。

5
JeffH

あなたが提案した方法は、問題に取り組む最も普遍的で適切な方法だと思います。間違いなく!そして?アイコン。私はそれらを同じ意味で使用しません。 !より頻繁に使用することができ、入力フィールドまたは同様のものに迅速な洞察または説明を提供します。 A?質問と回答タイプの形式でナレッジベースにリンクします。また、別の意味を持つ可能性のあるシンボルと一緒に色付きのアイコンを使用することができます。ブルー!一般的な情報を示します。イエロー!注意として読む必要があることを示します。そして赤!エラーが発生していることを確認し、明確にするためにメッセージを参照してください。赤を使用することはありませんか?しますか?

0
Earle