実践的なユーザビリティ

デザインとは見た目だけにとどまらない

Dr. Charlie Kreitzberg および Ambrose Little

Dr. Charles B. Kreitzberg

Ambrose Little

センスが良いものは売れる。その点は、ソフトウェアも他の製品も変わりません。ビジュアル デザインが洗練されていれば、購入者を引き付けるだけでなく、その製品のすばらしさ、綿密さ、効果などがアピールされます。もちろん、パッケージが美しいからといって中身の品質が保証されるわけではありません。「美しさは皮一重」や「表紙で本の中身を判断するべからず」といった昔のことわざからも、このことがわかります。

しかし、ビジュアル デザインは重要です。洗練されたビジュアル デザインが品質の代名詞になるわけではありませんが、マーケティングにおいては、ビジュアル デザインを無意味なものだと片付けるのは間違いです。少なくとも、本格的で魅力のあるものにすべきです。顧客や大衆向けの製品を製造しているのであれば、独特の外観を生み出すことを検討するために、ビジュアル デザイナーを雇うのも一考に価するでしょう。製品がセットになっている場合は、外観に共通性を持たせることも重要です。

ビジュアル デザインは単なる飾りではありません。ユーザー エクスペリエンスに大きな影響を及ぼします。ここで、注目すべき領域をいくつか示します。

• ルック アンド フィール
• 読みやすさ
• アフォーダンスの発見
• 伝達のサポート
• 感情と信頼

ルック アンド フィール

ルック アンド フィールという用語は、製品の全体的な印象 (特徴) を表すときに使用されます。特に明確に定義されている用語ではありませんが、ビジュアル デザインが製品の特徴に大きく貢献することを連想させます。

一般に、"ルック" という用語には、色、フォント、グラフィックス、ロゴ、ブランドなどが含まれます。"フィール" はもう少しあいまいで、製品を使用する際のユーザー エクスペリエンスの質を表そうとしています。フィールは、ビジュアル デザインや他のデザイン要素 (情報アーキテクチャなど) の相互作用から生み出されます。また、インターフェイスに使用されるアニメーション、画面の移り変わり、文体などの要素からも影響を受けます。フィールは、「きちんとした」、「くだけた」、「使いやすい」、「力強い」、「積極的な」、「ゆったりした」といった形容詞や隠喩で表現されることがよくあります。このようにルックとフィールを別々に説明することも可能ですが、実際には、「ルック アンド フィール」と 2 つを合わせて全体的な印象を表現します。

ルック アンド フィールを実感するには、「CSS Zen Garden」をご覧ください。この「CSS Zen Garden」は、バンクーバー在住の Web デザイナー Dave Shea 氏が創設したページで、ビジュアル デザイナーたちが標準の HTML サイトのルック アンド フィールを考案する共同作業場です。ルールは、CSS スタイル シートを変更してグラフィックスを追加することは許されますが、HTML やコンテンツを変更してはいけません。その意味では、一部のフィールがあらかじめ設定されています。つまり、言葉を変えることはできませんが、見た目を変えることができます。

このサイトでは、複数のデザインを次々と変更できます。どれもとてもすばらしいものですが、ルック アンド フィールはまったく異なっています。デザインを切り替えていくにつれて、ビジュアル デザインへの取り組み方によってどれほどの差が生まれてくるかがよくわかります。

「CSS Zen Garden」では、デザインの好みが明らかになってくるはずです。ルック アンド フィールを選択する際は、選ぶ人の好みと、製品の目的にふさわしいかどうかが重要です。ユーザー エクスペリエンスの他の側面と同様に、ビジュアル デザインがユーザーの好みと目的に合うことが大事です。

「CSS Zen Garden」に寄稿しているデザイナーの中には、サイトのコンテンツよりも自己表現 (芸術) に重点を置いている人もいるように感じるかもしれません。これは深刻な問題です。多くのビジュアル デザイナーは、自身の芸術性に重点を置くあまり、読みやすさ、メッセージ性、アフォーダンス、ブランドなどをあまり適切に表現できていません。でも、これは重要なことです。つまり、すべての優れたアーティストが、ソフトウェア向けの優れたビジュアル デザイナーになれるわけではないのです。

Quince の UX Patterns Explorer では、ビジュアル フレームワーク パターンのプレゼンテーションに興味を持たれるかもしれません。ここでは、ソリューションを通して使用できる (つまり、ソリューション以外の資産でも使用できる) フレームワーク ("ビジュアル デザイン言語") を確立して、一貫性があり適切なデザイン フレームワークとなるようにするために、どのようにビジュアル デザインを使用するかを学習できます。

読みやすさ

読みやすさは、ビジュアル デザインに大きく左右されます。読みやすさとは、大まかに言うと、ユーザーがコンテンツを理解して処理できることです。ここでは、主にテキストの読みやすさに重点を置いて説明しますが、サポートしているあらゆる種類のコンテンツについて考慮してください。ビジュアル デザインは、読みやすさの点では、製品の情報アーキテクチャと密接に関連します。情報がその意味合いから視覚的序列としてどのように編成されるかに情報アーキテクチャが関わっていたことを思い出してください。ビジュアル デザイナーは、さまざまな種類の情報をどのようにレンダリングするかを決定することになります。

読みやすさについての問題を (無意識のうちに) 抱えてしまっている Web サイトに、「Mr. ボトル」(英語)、「Bella De Soto」(英語)、「 ヘヴンワークス」(英語) などがあります。これらのサイトは、「最低な Web ページ」(英語) で見つけました。このサイトは必ずしも信頼できる情報源とは言えませんが、問題があると考えられるサイトを見つける方法の 1 つではあります。これらのサイトをご覧になり、読みやすさについての問題を引き起こしている原因と、その解決方法を考えてみてください。

読みやすさに関する興味深いツールが、「 Readability 」(英語) です。このツールでは、さまざまなフォントのサイズや列の幅を調べてから、bookmarklet を使用して、好みの外観を任意の Web ページに適用することができます。

フォントや文字体裁は、製品のルック アンド フィールに非常に大きく影響します。フォントは静的で実用的なものと見られがちですが、感情に強く訴えかける効果があります。「Web デザイナー倉庫」(英語) は一見の価値があります。ここでは、強力なメッセージを伝えるためにビデオで使用する 18 の文字体裁の例を見ることができます。こういった動く文字体裁を使用する機会はそれほどないかもしれませんが、このツールの強力さをイメージできると思います。

文字のサイズは、読みやすさの重要な要因の 1 つです。多くの場合、開発者 (およびデザイナー) は若いので、高齢ユーザーの視覚がそれほど敏感ではないことをあまり考慮しません。その結果、一般的にフォント サイズが小さすぎます。ただし、拡大を使用できるブラウザーや、ニュースなどの情報サイトで利用されているような直接的なオプションを使って拡大がサポートされていれば、小さなフォント サイズを使用しても問題ありません。

フォントと背景のコントラストも、読みやすさの非常に重要な要因の 1 つです。一部のデザイナーの間では、通常のテキストに黒い文字ではなく灰色の文字を使用するのがはやっています。これは上品に見えますが、読みにくくなりがちです。図 1 の灰色のテキスト (10 ポイント、#AAAAAA) と黒のテキスト (10 ポイント、#000000) を比較してみてください。強調する必要のない少量のテキストで灰色を使用するのであれば効果的です。このような使い方は、ページをすっきりさせるのに役立ちます。しかし、主要コンテンツに灰色を使用すると、コンテンツが読みにくくなります。

図 1 テキストの色と背景のコントラスト

図 1 では、"lorem ipsum" というテキストを使用しています。ご存じかもしれませんが、これは、ビジュアル デザイナーが実際のコンテンツを使用しないで、文字体裁やレイアウトを調べるために使用するテキストです。ユーザーが具体的なコンテンツにとらわれずに視覚的な外観について意見を出しやすくなるため、レビューのプロセスを容易にする便利なツールと言えます。lorem ipsum の便利なジェネレーターは、「Lorem Ipsum」(英語) にあります。lorem ipsum はデザイン段階では役に立ちますが、プレースホルダー テキストを読むことと、意味のあるテキストを読むことは同じではありません。したがって、コンテンツを利用できるのであれば、ビジュアル デザインの決定前に実際のコンテンツで試してみることをお勧めします。

HTML では、テキストと背景色に実にひどい組み合わせを選ぶことができ、Web 上にはまったく考えられないデザイン例があります。W3C では、2 つの色を組み合わせたときに十分なコントラストがあるかどうかを判断するアルゴリズムを提案 (英語) しています。

Designer Plaything というちょっとしたオープン ソースのツールを使用して、図 1 の 2 つの例と、図 2 の不快な例を作成しました。

図 2 コントラストが不十分なため読みやすさが損なわれたテキスト

読みやすさに関して考慮すべきその他の要因を示します。

• 行間のスペース: 行間が狭いと見た目が窮屈になり、広すぎると段落のまとまりが損なわれます。最初は、行間を 1.5 に設定するのが適切でしょう。
• 行の長さ: 行が非常に長いと、目を通しにくくなります。リキッド レイアウトを使用すると、一部のモニターでは行が非常に長くなる可能性があるため、行の長さは 80 ～ 100 文字に制限することをお勧めします。たいてい、テキスト量が多い場合は行の長さを短くする方が好ましく、新聞社はずっと前から採用していましたが、列を複数にすると読みやすさが大幅に向上します。

文字体裁に関する便利なリソースについては、電子書籍『The Elements of Typographic Style Applied to the Web』(英語) を参照してください。

アフォーダンスの発見

ビジュアル デザインで考慮すべき 3 つ目の領域は、ユーザーがアフォーダンスを見つけやすくすることです。アフォーダンスとは、ある物を使用して何かを実行できることをユーザーに知らせる手がかりのことです。たとえば、リンクに下線を付けてそのテキストをクリックできることをユーザーに知らせたり、ボタンが浮き上がっているように見せることでそのボタンを押せることを伝えたりします。

一般に、適切にデザインされた UI オブジェクトは、アフォーダンスのしくみが明確です。オブジェクトを押せることをユーザーに示す際に、3D や影を使用して奥行感を出すのが効果的なのは、現実の世界を模しているからです。10 月号のコラム「ユーザーの頭の中をのぞく」で、メンタル モデルについて説明したことを思い出してください。たとえば、ユーザーは、現実の世界でボタンの押し方がわかっているため、その認識を、適切にデザインされたボタンのグラフィック表現に変換します。

クリックできる画面要素の上で手の形をしたカーソルを使用することも、アフォーダンスを見つける 1 つの方法です。これをうまく使用すれば、画面をすっきりさせるのに役立ちます。ただし、マウスをポイントしたときだけ明らかになるアフォーダンスを使用すると、ユーザビリティに関する問題につながります。インターフェイスで実行できる操作を見つけるためにユーザーにマウスを操作させるのは、あまり良いとはいえない考えです。それが主要操作であればなおさらです。

使用するほとんどのコントロールでは、アフォーダンスがどのように表されるかをそれほど心配する必要はありません。たとえば、スクロール バーの使い方は確立されているため、非常に明確です。しかし、グラフィカルなホット スポットを作成してナビゲーションやその他の動作を制御する場合は、ユーザーが、クリックする場所を理解していることが重要です。また、ユーザーが詳しくないコントロールであれば、(前回のメンタル モデルで取り上げたように)、コントロールのしくみをわかりやすく示すデザインにする必要があります。最近のユーザビリティのテストでは、多くのユーザーがアコーディオン コントロールの使用方法を理解していなかったことがわかりました。この問題を解決するために、コントロールのデザインをやり直すことになりました。

つまり、ビジュアル デザインでは、操作できる要素をユーザーに伝える必要があります。実行可能な動作の種類と、出力される結果を明らかにすべきです。

伝達のサポート

多くのビジュアル デザイナーは、ビジュアル言語を定義することで、製品のデザインに取り組みます。ビジュアル言語とは、概念の伝達を支援する、一連のデザイン原理です。ビジュアル言語の作成には、いくかの側面があります。

認知と関連付け

ビジュアル言語のある要素では、認知を利用します。ビジュアル処理は、単に目の前の物を観察するような受動的なプロセスではなく、選択と判断を伴う能動的なプロセスです。これらの問題のいくつかは 10 月号のコラムで説明しました。この認知の研究は、"ゲシュタルト心理学" という専門分野です。いくつかの認知の原理 (閉合、類同、連続、近接、図と地など) については知っておく価値があります。これについては、「ゲシュタルト心理学」(英語) を参照してください。

ビジュアル言語には、一般の心理的関連付けに基づいて構築される要素もあります。たとえば、自然を示すために有機的な感じの曲線を使用したり、機械を示すためにはっきりした角度や線を使用したり、混乱した感じを出すために意図的に支離滅裂にしたり、バランスや調和した感じを出すために対称にしたりします。

使用可能なその他の関連付けとして、文化的に定まる要素があります (たとえば、エラーや停止には赤色を使用し、OK や許可には緑色を使用します)。ただし、そのような関連付けには、文化が異なると意味が違ってしまう要素や、状況によって異なる要素があるため注意が必要です。たとえば、中国では赤はポジティブと考えられ、車や衣服に赤を使用するとセクシーさを表します。

「赤 = 問題あり」、「緑 = 問題なし」という連想がかなり普及していることを考えると、色を直感的でない方法で使用している場合を思いのほかよく見かけます。たとえば、フォーラムのプログラムに、図 3 のようなメッセージがありました。テキストを意図的に不明瞭にすることで、使用している色から第一印象を受けるようにしています。

図 3 問題ありを示す赤

使用されている色は問題ありを暗示していますが、図 4 に実際のメッセージを示します。

図 4 メッセージと色の不一致

見出しの色が、記述されているテキストの色よりも明るいことにも注意してください。メッセージ ボックスと見出しの色を変えると、メッセージがより明確に伝わります (図 5 参照)。

図 5 ポジティブなメッセージを示す緑

この目的と状況では、色を緑に変更するだけで、ビジュアル デザインが向上します。

情報アーキテクチャ

ビジュアル デザインは、情報アーキテクチャ (特に視覚的な序列) を強化するためにも使用できます。たとえば、通常は、コンテンツよりも見出しを大きくして太字にするのがほとんどです。そして、コンテンツの構造をわかりやすくするために、見出しを序列化します。テキスト内では、太字、下線、斜体や、要素の拡大と縮小を使用した強調度の設定、要素の役割についての読み手への手がかりの提示といった技法を使用します。

色は、特に慎重に使用すれば、すばらしい効果を発揮する領域の 1 つです。Quince には、カラー パレットを 2 色ほどに制限して、これらの色の明度 (彩度) と鮮やかさに変化を持たせることで視覚的な伝達を強化する、Few Hues パターン (英語) があります。インターフェイスが多彩な色であふれかえらなければ、色は優れた効果を発揮し、本当に重要な要素 (動作の呼び出しなど) のみを際立たせることができます。

色を使ってあまり重要でない要素を目立たなくすることで、重要なアイテムを引き立てることもできます。このような状況では、たとえば、灰色のテキストを使用してあまり重要でないアイテムを目立たない位置に置き、残りのアイテムを前面や中心に配置します。

図 情報アーキテクチャをサポートするビジュアル デザイン

感情と信頼

ビジュアル デザインが感情を動かし、アプリケーションやサイトの信頼性と、ユーザーの信頼感 (または不信感) に影響することがあります。たとえば、図 7 と図 8 の 2 つのサイトをご覧ください。それぞれコンテンツは同じですが、ビジュアル デザインが異なっています。

図 7 信頼できるかどうかがわからないベンダー

このようなサイトからテレビを購入したいと思いますか。本質的に信頼できますか。オンラインでいかがわしく思える会社に出くわすことがよくありますが、そういった会社を信頼したいとは思いません。次の別のデザインをご覧ください。

図 8 同じコンテンツでも、デザインが異なると信頼感が高まる

このデザインはより専門的で、信頼性や信ぴょう性があり、信用できます。このようなサイトの方が、クレジット カード情報を渡す可能性がはるかに高そうです。実際に、スタンフォード大学の Web 信頼性研究プロジェクト (英語) によって、ビジュアル デザインのこういった側面に関する具体的な研究が行われています。このガイドラインを読んで内容を理解することをお勧めします。Don Norman が執筆した、この分野に関する書籍『エモーショナル デザイン―微笑を誘うモノたちのために』(新曜社、2004 年) では、見た目の美しさが製品の受け入れに影響することについて詳しく説明しています。

大きな影響

ビジュアル デザインは見た目だけにとどまりません。ルック アンド フィール、読みやすさ、さまざまなコントロールのわかりやすさは、製品のユーザビリティとユーザー エクスペリエンスを大きく左右します。つまり、ビジュアル デザインは、見た目の美しさや個人的好みの問題だけではありません。

優れたビジュアル デザインは、ユーザーが画面要素のアフォーダンスを特定するのに役立ちます。そのため、製品の使いやすさに直接影響します。また、情報アーキテクチャをサポートし、ユーザーが伝達された情報を簡単に処理できるようにします。ビジュアル デザインは、写真とイラスト両方によってユーザーの感情を呼び起こし、全体的なルック アンド フィールによって、より繊細な感情を喚起します。感情に加え、信頼感を生み出す (または損なう) こともできます。つまり、ビジュアル デザインをささいなもの、見た目だけのもの、または表面的なものとして片付ける開発者もいますが、実際には大きな影響を及ぼす可能性があるのです。

ビジュアル デザインは非常に強力なツールなので、開発者はビジュアル デザインについて考え、この記事で説明しているような、より機能的な側面について理解する必要があります。品質の良いビジュアル デザインを作成するスキルを持っている人はそれほど多くはないため、ほとんどの場合、プロを雇うのが最も適切です。しかし、ビジュアル デザインを自身で作成する場合も他の人と共同で取り組む場合も、基本を理解することが重要です。優れた入門書として、『The Elements of Graphic Design: Space, Unity, Page Architecture, and Type』(英語) Alex White 著 (Allworth Press、2002 年) があります。この書籍では、7 つのデザイン コンポーネントから築き上げられる主な原理について説明されています。

デザインに関する記事を読むだけでなく、定評のある多くの優れたデザインの例や (賞を獲得したサイトを探してみてください)、自分が目にしてすばらしいと思うデザインを参考にしてください。こうしたデザインを分析して、なぜそのデザインがすばらしいのかを突き止めてください。あまり説得力がないデザインを見つけた場合は、改善しなければならない理由とその方法について考えてください。優れたデザインに触れる機会が増えるほど、デザインについて多くを理解できるようになり、優れたデザインを自身で作成できるようにもなります。プロのビジュアル デザイナーにはなれないかもしれませんが、彼らと一緒に効果的にデザインに取り組むことができます。どうしても自身でデザインしなければならなくなったときにも、優れたデザインを作成できるようになるでしょう。

ビジュアル デザインは、要素に卓越性をもたらすことによって、要素がユーザーや関係者にはっきり伝わるようになるため、すぐれた製品を生み出すのに大変役立ちます。

Dr. Charles Kreitzberg は、ユーザビリティのコンサルティングとユーザー エクスペリエンスのデザイン サービスを提供する Cognetics Corp. の CEO です。彼は、製品のビジネス目標をサポートしつつも、ユーザーを魅了し、楽しませる直感的なインターフェイスを作成することに情熱を燃やしています。セントラル ニュージャージー在住で、パフォーミング ミュージシャンとして夜間のアルバイトをしています。

Ambrose Little は、妻と 4 人の子供とニュージャージー州中部に住んでいます。彼はソフトウェアの設計と開発に 10 年以上携わっており、INETA の講演者であり、Microsoft MVP でもあります。最近は技術的な設計からユーザー向けの設計に移り、現在は Infragistics のユーザー エクスペリエンス デザイナーです。