web-dev-qa-db-ja.com

コンセプトを表すのに最適なアイコンを見つける方法は?

私はビジュアルプログラミング言語を開発しています。 この論文 を読んだ後、アイコンが言語を改善し、理解を深めるための非常に良い解決策であるように見えます。しかし、私はプログラマーであり、UIデザイナーではないため、プログラミング言語のセマンティクスを伝えるアイコンを選択する方法を(今のところ)考えることはほとんどできません。

たとえば、私の言語では、プロセスが楕円で表されているプロセスに接続されているリンクが長方形で表されているオブジェクトは、プロセスがそのオブジェクトをツールとして使用し、変更しないことを意味します。 (下の画像を参照):

enter image description here

しかし、白丸の代わりにどのアイコンを使用すればよいですか?道具?本(読み取り専用)?機械のハンドル?そしてもちろん、これは言語で使用できる唯一のリンクではありません。また、引数などのオブジェクトにアイコンを追加したいと思います。

「XXXに最適なアイコンは何ですか」という質問はすべて具体的すぎて閉じられています。質問は使用するアイコンを選択するにはどうすればよいですか?この件について私が読むことができる本/論文/チュートリアルはありますか?

6
vainolo

短い答えは、いくつかのアイデアをブレインストーミングし、実際のユーザーに対して反復テストを使用して、選択肢を絞り込んで絞り込むことです。詳細は 機能のアイコンをどのように作成または選択するのですか? を参照してください。

ただし、アイコンが提供する「知覚上の類似性」は、ムーディーが引用した論文で説明されているものを含め、他の考慮事項ほど重要ではない場合があることを考慮してください。これらの他の考慮事項は、刺激的なアイコンの実現と競合する可能性があります。

  • 差別。 2つの異なる概念の最も刺激的なアイコンは、互いに似ているように見え、混乱を招く可能性があります。

  • 乱雑。多くの場合、アイコンは大きくて詳細にする必要があるため、ユーザーは何を呼び起こすべきかを認識できますが、これにより、視覚的に乱雑な図が大きく読みにくくなる場合があります。

  • ラベル付けスペース。単純なアウトラインシンボルを使用すると、ラベルを境界内に配置して、ラベルを明確にすることができます。アイコンは細部で満たされている場合があり、アイコンの横にラベルを付ける必要があります。密な図では、何が何にラベル付けされているかが不明確になる可能性があります。

  • 表現力。単純な形状を使用すると、他の グラフィックディメンション (たとえば、陰影、パターン)を使用して追加情報をエンコードできます。このようなエンコードはアイコンには適さない場合があります。たとえば、消しゴムは認識できるようにピンクまたは白である必要がありますが、色分け(青、緑など)を使用できない場合があります。

ビジュアルプログラミングで使用している抽象的な概念はうまく視覚化するのに向いていないため、アイコンが喚起する知覚的な類似度は、せいぜい控えめになると考えてください。また、シンボルが比較的少なく、初心者が凡例やキーに簡単にアクセスできるようにする必要があるため、任意のシンボルを使用しても学習が速くなることを考慮してください。全体として、アイコンよりも単純な形状の方が良い場合があります。

または、両方を使用できる場合もあります。デフォルトで初心者の場合は、アイコンを(大きくて乱雑に)使用して、学習しやすく、初心者が最初に使用する可能性のある単純なプログラムに適しているようにします。ユーザーは、アイコンが学習され、ユーザーがより複雑なプログラムの準備ができたら、アイコンを類似の形状にグローバルに「単純化」することができます。たとえば、プロセスは簡略化して円になる歯車で表すことができます。オブジェクトプロパティは、簡略化すると長方形になる引き出しです。おそらく、他の考慮事項を満たすために、単純な形状firstを選択してから、逆に作業してそれらを初心者の刺激的なアイコンにする必要があります。

3

アイコンを探しているのではなく、symbolsを探しているようです。かなり根本的な違いがあり( http://www.iicm.tugraz.at/thesis/ahollosi_html/node6.html を参照)、この違いを理解すれば、問題はすでに半分解決されています。

プロセスとして楕円、オブジェクトとして長方形を使用しています...言い換えると、すでにシンボルを使用しているので、今はアイコンの検索を開始しないでください。

UMLに似た独自のシンボリック言語を作成するか、フローチャートシンボルのような既存のシンボルセットを使用できます。または、特定の既存の基礎から始めて、その上に独自のシンボルを追加することもできます。この場合、明確な意味を与える限り、オープンサークルを完全に使用できます。シンボルはパレットからドラッグ可能ですか?その場合、パレット上のシンボルはよく記述されている必要があります。例:読み取り専用接続/読み取り/書き込み接続/プロセス/オブジェクト/ ...接続をクリックするとどうなりますか?あなたはどこかにいくつかのプロパティを見るようになりますか?ユーザーは既存の接続のプロパティを変更できますか?基本的には、Rational Roseと、それらが「を持っている」、「から派生した」などの接続を処理する方法を確認する必要があります...

「読み取り専用」を表すアイコンを本当に探しているのなら(私は疑問ですが)、最初に思い浮かぶのは、その上に十字が付いている鉛筆または錠です。

3
Bart Gijssens

考慮すべきことは、どのシンボルがオブジェクトまたはおそらくデータのセグメントを表し、どのシンボルがプロセスまたはおそらくアクションを表すかです。

答えはユーザーによって異なる場合があります

  • プログラマーの場合、UMLやIDEの規則(クラスの長方形、イベントの稲妻など)に慣れます。

  • 彼らがプログラマーではない場合(そしておそらくそうである場合でも)、ソフトウェアの世界の外で同等のもの(たとえば、一連の機械的なホイール、パイプ、またはプロセス用の虫眼鏡)を考えれば、彼らが理解するのにかかる時間は短くなります。 、オブジェクトのパッケージまたはブック)。実際に一緒に使用できるペアを見つけて、それを使用してください。

ユーザーが特定のドメインのユーザーである場合は、ドメインから同等のものを探してみてください。
例えば。彼らがプログラマーである場合、コンピューターのハードウェアの世界の同等物(CPUやファイルなど)を使用できます。

シンプルでありながら現実的なシナリオの例でいくつかの選択肢をスケッチし、さまざまな人々に画像から何を理解しているかを尋ねます(事前の情報を提供せずに、たぶん各人に1つの画像を表示して、累積的な理解を防ぐ必要があります)。

0
Danny Varod