フォントサイズはユーザにまかせよう

テキストのサイズが小さいとタスクの処理効率が激減し、ユーザに不便を強いることになる。IE4 では、フォントサイズが簡単に変更できる優れたデザインを採用していた。次世代のブラウザでは、ぜひこのデザインを復活させてほしい。

技術的進歩は、時に裏目に出ることがある。「改善」するはずのテクノロジーが、ユーザにとっては改悪になる場合があるのだ。ウェブもこの問題の例外ではない。ない方がよかったというイノベーションも、過去に数多く経験してきている。フレーム、ブラウザのスクロールバーの色変更、それにスクロールするテキストなどがこれにあたる。

スタイルシートの利用が増えるにつれて、またひとつ有害なウェブ技術が生まれている。それは、ウェブデザイナーが、テキストの大きさをピクセル単位で指定してしまうことだ。残念ながら、この機能を利用するデザイナーは数多く、この結果、ますます多くのウェブサイトが、ますます読みにくくなってきている

フォント制御の実状

私は今ここで、Microsoftに対して、デザイン上で指定された固定フォントサイズよりも、ユーザ設定を優先するよう求めるキャンペーンを開始しようと思う。

ブラウザが、まず始めにデザイナーの指定したテキストサイズでページをレンダリングする分には問題ないかもしれない。だが、スタイルシートの指定がどうあろうと、ユーザが簡単にテキストを拡大できるようにはしておくべきだ。なにしろ、これは私の画面、私のコンピュータ、そして私のソフトウェアなのだから、従うべきは私の指示のはずだ。

もちろん、中には、ユーザが自分自身のスタイルシートを設定できるというオタクっぽい機能を備えたブラウザがあることも承知している。上級者には便利だろう。だが、ユーザの 99 %が望んでいるのは、単に小さすぎて読みづらいテキストを大きくすることだけだ。Mac 専用の iCab というブラウザは、この単純な調節ができるようになっている。Internet Explorer にも、これと同じくらいユーザのニーズに友好的であってもらいたい。

そもそも、どうしてこんなに文字の読みにくいウェブサイトが多いのだろう?理由は2つ考えられる。

  • ウェブデザイナーのほとんどは若く、よって視力にも問題がない。40 の坂を越えた人間ほどには、小さい文字が苦にならない。また、デザイナーは高価で、高品質のモニターを持っていることが多く、これも目の負担の軽減に寄与している。
  • ウェブサイト制作にあたって、デザイナーは、ページ上の情報を実際には読んでいない。見栄えのよさを確認するために、テキストを眺めているに過ぎないのだ。実際、ほとんどのデザインは、ホンモノのコピーのかわりにダミーテキストを仮置きした状態で承認を受けている。中身を読む必要がないのなら、文字がどんなに小さかろうが問題ない。

フォントサイズに関する判断を間違えたサイトがあまりにも多いために、ユーザはこれを変更したいというニーズを持つのが普通である。IE の初期バージョンは、ツールバーに 2 つの標準ボタンを備えることでこのニーズに応えていた。ひとつはテキストを大きくするもの。もうひとつは小さくするもの。これこそ、あるべき姿というものだ。

Gates 氏にお願いしたい。Mac 版 IE4 で実現していたこの優れたデザインを、ぜひとも復活させていただきたい。

ブラウザのフォント設定は簡単に

残念なことに、IE の最近のバージョンでは、IE4 の優れたデザインが破棄されてしまった。代わりに採用されたアプローチは、ユーザビリティ面で大きな問題を 2 つ抱えている。

  • テキストサイズボタンがデフォルトで表示されなくなった。ツールバーをカスタマイズしたごくわずかなユーザだけが、この有用なボタンを手に入れられる。ユーザの大部分が目にするのはデフォルトのツールバーであり、それはぜんぜん使い道の少ないボタンに無駄遣いされている。この機能は表に出ていないため、自分のブラウザでテキストサイズが変更できることに気がつくユーザは、ごくわずかしかいない。
  • テキストを大きくするもの、小さくするもの、それぞれ専用のボタンがなくなった。ボタンを見つけられたとしても、手に入るのは両方向へテキストを変更するためのボタンひとつだけだ。

経験豊富なごくわずかなユーザだけが、ツールバーをカスタマイズして失われたボタンを取り戻すことができる。IE6で、彼らが実際にテキストサイズを変更するには、以下のようなステップが必要となる。

  1. マウスポインタをボタンの上に重ねて指定する。IEのボタンはかなり大きいので、Fitts の法則によれば、このステップはかなり迅速に行える。
  2. マウスボタンを押す。
  3. プルダウンメニューが現われる。そこには選択可能な5種類のフォントサイズが表示されている。このメニューをざっと見て、今選択されているフォントサイズはどれか、心の中にメモをとる。
  4. どのフォントサイズがいいか、頭で計算する。現在選択されているものより、1 サイズ大きめ(小さめ)にするのがふつうだ。
  5. マウスボタンを押し続けながら、メニュー上でポインタを動かして、希望するフォントサイズへ移動する。
  6. マウスボタンを離す。

6 ステップもかかるこの面倒なプロセスと比較して、「テキストを大きく」、「テキストを小さく」、それぞれに専用のボタンを用意した場合のインタラクションテクニックを見てほしい。

  1. 希望のボタンをクリックする。

もちろん、少しズルはしている。まずは、テキストを大きくしたいのか、小さくしたいのかを判断するというステップが、やはり必要だろう。そうして初めて、どちらのボタンを押したらいいのかが決められるのだ。だが、そもそもフォントサイズ変更の手続きは、好ましくないサイズのテキストを読もうとした時の不快感が引き金になっているのだから、サイズを変更しようと思った時点で、自分が大きめの(小さ目の)テキストを望んでいるかどうかは、すでにわかっているはずだ。(平均的ユーザには、希望する変化の方向を引数にとる単一の「サイズ変更」コマンド、などというメンタルモデルはない。ユーザのモデルに含まれているのは、「大きく」「小さく」という2つの行動だ。コードがどう実装されるかは、ユーザに提示される幻想とは無関係である。そして、その幻想は、ユーザのメンタルモデルにマッチしたものであるべきだ。)

2 ボタンアプローチなら、どれくらい大きくすればいいか計算するという認知的負荷は不要になる。ただ大きくすればいいのだ。ユーザは、どれくらい大きくするかを正確に指定したいとは思わない。最初のクリックで足りなければ、「大きく」をさらにクリックし続ければいいことだ。

簡単なステップで一次元の軸にそって移行する単機能ボタンを使えば、ユーザビリティは向上する。もちろん、クリックするごとに、各ステップの結果がすぐにはっきり現われるようになっていればの話だが。これはまた、Back ボタンがユーザにとって非常に有用であり、履歴リストによるナビゲーションよりもはるかに利用頻度が高いことの理由でもある。

今後のブラウザ改善

Mac 版 IE4 のデザインに回帰することは、フォントサイズユーザビリティに関して大きな意義あるステップだ。だが、さらなる改善も可能だ。

ユーザに敵対するデザインに出会うたびに手動でテキストサイズを調整するのではなく、インターネットの利点を生かして、フォントサイズの設定を保持するようにしてみよう。新しいウェブサイトからページを読み込むたびに、まずデータベースを確認して、あなたが好きなフォントサイズの情報を入手する。

  • 過去に訪問したことのあるサイトなら、前回の訪問時に、あなたがテキスト拡大、またはテキスト縮小のボタンをクリックしたかどうかが、ローカルマシン上のデータベースに記録されている。該当する記録があれば、それに従って自動的にテキストを調整する。
  • そのサイトへの訪問が初めてなら、過去に同じサイトを訪問したユーザの中で、あなたに似た人がとった行動の情報を、中央データベースから取得する。ついで、そのサイトの最初の 1 ページに、これらユーザがとった平均的調整値を適用して見せる。さらにあなたがこれに変更を加えた場合、ローカルのデータベースには改変後の設定が記録され、変更点は中央データベースに登録される。

反応時間を短縮するために、今見ているページからリンクしているすべてのウェブサイト用の設定情報を、クリックする前にあらかじめブラウザに読み込んでおくということも可能だ。

中央データベースそれ自体は、まぎれもない協調フィルタリングの一例といえよう。テキストサイズに関して、自分と似たような嗜好を持つユーザを見つけるのは簡単だからだ。どんなウェブページであれ、ユーザはそのままか、1 サイズか 2 サイズ、大きめ、もしくは小さめのテキストを要求する場合が多い。ユーザの大半は合計 5 つの選択肢があればまかなえるので、フォントサイズ設定は、本や映画に関する好みより、ずっとモデル化しやすい。

協調フィルタリングにもとづいたフォントサイズの自動調整は、ネットワーク指向のブラウザから自然に派生するメリットの一例だ。他にも、多数のリンク切れを自動修復したり、迷惑な広告やポップアップを自動的に除去したり、その他、過去のサイト訪問者から集まったフィードバックにもとづいて、ひとりひとりのユーザ体験を向上させるのに役立つだろう。

ブラウザを、単にウェブページ画像を画面に表示するための、取るに足りないフリーソフトと考えるのはやめるべきだ。ナビゲーションを楽にし、ダメなウェブサイトの悪乗りからユーザを守ってくれるような、ユーザ補助的な環境が必要なのだ。

ウェブサイトのリーダビリティガイドライン

Microsoft が優れたブラウザを出荷するまで、じっと待ってはいられない。もちろん、フォントサイズ問題に関する究極的なソリューションは、それしかないのだが。しかし当面は、以下のようなガイドラインを守ることで、リーダビリティ(可読性、読みやすさ)を向上させることができるだろう。

  • スタイルシートにおけるフォントサイズの絶対指定をやめる。フォントサイズは相対値で指定しよう。通常はパーセンテージを使って、大きなテキストは120%、小さなテキストは90%などとする。
  • デフォルトのフォントサイズを大きめにしておく(最低でも10ポイント)。こうすれば、手動で調整しなくてはならないユーザはごくわずかになるだろう。
  • 高齢者をターゲットにしたサイトなら、デフォルトのフォントサイズはさらに大きめ(最低でも12ポイント)にしておこう。
  • 可能であれば、グラフィックの中にテキストを埋め込むのはやめよう。グラフィックには、スタイルシートも、フォントサイズボタンも効果がないからだ。画像化したテキストを使わなくてはならないのなら、特にフォントサイズは大きく(最低でも12ポイント)しておくこと。また、コントラストの高い配色にしておくこと。
  • 代替スタイルシート読み込みボタンの設置を検討しよう。サイト訪問者のほとんどが高齢者や弱視ユーザという場合なら、代替スタイルシートのフォントサイズはそうとう大きめにしておく。現状では、ブラウザ内部に組み込まれたフォントサイズ機能を見つけて、利用できる人はごくわずかしかいない。あなたのページ上に同等のボタンを備えておけば、簡単にテキストサイズを大きくできる。だが、追加機能にはトレードオフがつきものだ。一般的なウェブサイトには、この手のボタンはあまりお薦めできない。
  • テキストと背景の色のコントラストを最大化しておくこと(背景パターンにゴチャゴチャしたものや、透かしのようなものは使わない)。コントラストの低いテキストはリーダビリティを低下させるという事実があるにも関わらず、最近ウェブ上には、テキストをグレーにしたサイトが増えている。

2002年8月19日