Colors and User Experience _1
http://community.infragistics.com/ux/articles/colors-and-user-experience.aspx
As the name suggests, GUIs (Graphical User Interfaces) present their features and functions visually. The human-computer interaction is heavily based on seeing things, looking for things and interacting with graphical UI elements. Color is a main characteristic of any visual scene, not only on computer screens, but in any situation where we see something. Because most of what we see and interact with in our everyday life is colored (as opposed to shades of white-gray-black), we are very familiar with colors – maybe so much that we don’t think about them a lot. On the other hand, it does bother us when we need to read a dark-gray label on a black button. So colors have the potential to boost or wreck the user experience. The rest of the article will introduce the concept of user experience and highlight some aspects of colors and color perception together with recommendations for UI design.
その名前が示唆するように、GUI(Graphical User Interfaces)とは、そこに含まれるが特徴や機能を視覚的に表現するものである。 人間とコンピュータのインタラクションは、グラフィカルな UI 要素を用いた、視認と、参照、そして相互作用に大きく依存するものとなる。 色の使い方は、ビジュアルな観点における最大の特質であり、コンピュータのスクリーン上だけではなく、私たちが物を見るという、あらゆる状況においても重要だ。なぜなら、日常の生活で見分けるもの、そして相互に作用するものは、その大部分が色付されているからである(white-gray-black による影の対極として)。それほどに、カラーは私たちにとって馴染み深いものだが、あまり深く考えられていないという面もある。 その一方で、スクリーン上の黒いボタンの上に書かれた、濃い灰色のラベルを読むときに、私たちは悩まされる。つまり、カラーにより、ユーザー・エクスペリエンスは向上することもあれば、劣化することもあり得る。 この記事では、ユーザー・エクスペリエンスの概念を紹介すると共に、カラーに関する側面や、UI デザインで推奨される色彩感覚について取り上げていく。
User Experience
User Experience (UX) is a concept pertaining to the overall – or holistic – encounter between users and interactive technical systems. More concretely, it’s the degree of usability and appeal that a website or application provides to its users. Great usability implies that an interactive product allows its users to efficiently accomplish their goals. Well-known guidelines are provided by ISO 9241-110 [1] and Nielsen’s Heuristics [2].
ユーザー・エクスペリエンス(UX)は、ユーザーと対話型のテクニカルなシステムの間を結ぶ、あらゆる局面に付帯する概念である。 さらに具体的にいうと、それは有用性の度合いであり、また、Web サイトあるいはアプリケーションがユーザーを惹きつける魅力のことになる。 優れた有用性とは、ユーザーによる効率的な目的の達成を実現する、対話型のプロダクトのことを意味する。 広く知られるガイドラインとして、ISO 9241-110 [1] と Nielsen’s Heuristics [2] が提供されている。
Appeal refers to the emotional tie between users and a system they are interacting with. Do users love it? Hate it? Do they think it’s attractive or modern or engaging? Do they feel pride when they interact with it? Although appeal cannot be defined as concisely as usability, it is of equal importance for the success of a product because appealing systems are more enjoyable and desirable which increases their value.
魅力のアピールとは、ユーザーと相互作用するシステムの間の、感覚的な絆のことである。 それを、ユーザーは好むのだろうか? それとも、好まないのだろうか? ユーザーに対して、素敵だと感じさせ、モダンだと思わせ、とりこにすることが出来るのだろうか? そして更に、それと相互作用するユーザーに、誇らしい気分を提供できるだろうか? 魅力については簡潔に定義できないが、システムの魅力をアピールすることは、その価値を高める感覚的な要因となるため、プロダクトを成功させるという意味で、有用性と同等の重みを持つ。
Figure 1: User Experience
Colors and the UI
Color is the sensation that is invoked when light of wavelengths between 360nm and 720nm hits our eyes and then is processed by our visual system [3]. Our eyes feature three types of color receptors, each maximally receptive to long, medium, and short wavelengths of light. These are known as L-, M- and S-cones. As it can be seen in Figure 2, a light with a wavelength of 530nm triggers the M-cones most, the L-cones slightly less and the S-cones just a little. The perceived color impression would then be a green.
カラーとは、 360nm~720nm の波長の光が、私たちの目を刺激するときに検知され、続いて、視覚システム[3]により処理される知覚のことである。 私たちの目は、3種類のカラー感覚器官を特徴とし、それぞれが、長/中/短の波長を極限まで受容する。 それらの概念は、L/M/S コーンとして知られている。 Figure2で確認できるように、530nm の波長を持つ光は、その大部分が Mコーンを引きおこし、Lコーンはやや少なく、Sコーンはほとんど無いという状況である。 この波長は、グリーンとして知覚されるだろう。
Figure 2: Color perception is achieved through three cone types (after [4]).
On computer screens colors are defined through the RGB color model (R stands for red, G for green and B for blue). These three colors are called primary colors and correspond to the wavelengths the L-, M- and S-cone are most receptive for. Primary colors cannot be generated by mixing other colors. Instead, by mixing primary colors, all other colors can be generated. Each pixel on a screen shows a color generated by the interplay of one red, one blue and one green light source that are so close to each other that they cannot be distinguished.
コンピュータ・スクリーン上のカラーは、RGB カラー・モデル(R stands for red, G for green and B for blue)を介して定義される。 これらの3つの色は原色と呼ばれ、L/M/S コーンを受け入れる波長に対応する。 他の色を混ぜ合わせても、これらの原色を作ることはできない。 その反対に、原色を混ぜることで、すべての色を生成できる。 スクリーン上の個々のピクセルが識別できないほどに隣接し、また、赤/青/緑のライトが相互作用することで、カラーを生み出す。
Color Contrast
Typically, a colored object or area on a UI is not displayed in isolation, but is adjacent to or superimposed on another colored object or area. This creates contrast effects. Without sufficient contrast, we could not discriminate different parts on our screen. There is a good reason why office applications like MS Word, Powerpoint, Excel, Outlook, etc. are based on a white background with black as a default font color – this provides the maximum contrast and therefore optimum legibility.
一般的に、UI における色付されたオブジェクトやエリアは、個別に表示されるものではなく、別の色を持つオブジェクトやエリアと、隣接したり、重なりあったりする。 それにより、コントラストの効果が引き起こされる。 充分なコントラストが無いと、スクリーン上の個々のパーツを識別できなくなるだろう。 Word や、Powerpoint、Excel、Outlook といった Microsoft Office 製品が、デフォルトとして白い背景と黒のフォントを使う背景には、このような理由がある。つまり、最大のコントラストと、最適化された視認性を提供することになる。
Apart from this, color contrast can be deliberately used to draw the visual attention of users to relevant UI elements that feature important information or require inputs.
それとは別に、たとえば、ユーザーを視覚的に惹きつけ、重要な情報を提供する UI 要素や、入力を要求する UI 要素に対して、意図的にカラー・コントラストを適用することも可能である。
Color contrast also lends itself well to boost the visual appeal of a UI. Empirical studies show that warm colors (e.g. red, yellow, orange) are preferred on backgrounds of cool colors (e.g. blue, green, purple) and vice versa.
カラー・コントラストは、UI の視覚的なアピールを、それ自身で高めるという働きも持つ。実証的な研究では、暖色(たとえば red, yellow, orange)と、寒色(たとえば blue, green, purple)の対比が好まれるという、結果が示されている。
Contrast effects can also be detrimental for the user experience. Two prominent examples are discussed in the following. In general, any region in the visual field tends to induce its complementary color in neighboring areas. For example, a gray square will tend to look greenish when surrounded by red, and reddish when it is surrounded by green. This effect is known as simultaneous color contrast [4]. On UIs it can sometimes be seen that the same control, e.g. a push button, looks strikingly different on backgrounds of different colors.
また、コントラストは、ユーザー・エクスペリエンスにとって有害なものにもなり得る。 2つの顕著な例について、以下に説明する。 まず、一般的に、あらゆる視覚的な領域において、隣接するエリアを補色を誘発するという傾向を持つ。 たとえば、グレーの正方形は、赤に囲まれると緑色っぽく見え、緑色に囲まれると赤っぽく見えるという傾向にある。 この効果は、同時色対比として知られている[4]。 UI においては、たとえばプッシュ・ボタンなどの同一のコントロールが、異なる背景色の上では別のものに見えるという状況が、ときおり確認できる。
Another problematic contrast effect is chromatic aberration [5]. Lenses, including the lenses in our eyes, bend lights of different wavelengths by unequal amounts. The effect is that different colored stimuli are not projected at the same spot at the retina – an effect most noticeable for combinations of violet and red as well as blue and red (see Figure 3), because the wavelengths of violet and blue are at one end of the visual spectrum while the wavelength of red is at other end (see Figure 2).
コントラストにおける、もう1つの問題は色収差である[5]。 私たちの眼球を含めて、レンズは、それぞれの波長の光を、不等な量で屈折させる。 この効果により、それぞれの色による刺激が、網膜上の同じスポットに投影されなくなる。つまり、最も目立つ組み合わせは、violet/red と blue/red (see Figure 3) になるが、その理由は、violet と blue の スペクトルが左端にあるのに対して、red は右端にあるからだ (see Figure 2)。
Figure 3: The effect of chromatic aberration.
Consequently, the text in Figure 3 looks blurred against the background. Because of this, contrasts of red and violet/blue should be avoided on a UI. Despite this, red-blue color contrasts are pretty common, possibly because the person designing the UI tries to avoid the combination of red and green due to color deficiency reasons (see color deficiency below). Figure 4 shows combinations of background and foreground colors that provide a good contrast.
したがって、Figure 3 のテキストは、背景に対して不鮮明になる。 このような理由から、violet/red と blue/red のコントラストは、UI では避けるべきものとなる。 それにもかかわらず、色覚異常の理由から red/green の組み合わせは回避される。 そのため、残された blue/red の組み合わせは、UI デザイナーにとって一般的なものとなる。 Figure 4 が示すのは、適切なコントラストを提供する、バックグラウンド/フォアグラウンドの、カラーの組み合わせである。
Figure 4: Color combinations providing good contrasts.
ーーーーー
References
[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.
[2] Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.
[3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.
[4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W.W. Norton & Company.
[5] Kaiser, P. K., Boynton, R. M. (1996). Human Color Vision. Washington, D.C.: Optical Society of America.
ーーーーー
<続く>

ーーーーー
<関連>
カラー と ユーザー・エクスペリエンス _2
ユーザーのためのデータ・ビジュアライゼーション
UX と テキスト の関係を、論理的に解明する