間違いとは?/ マイワン
[ 341] Alertbox: 2005年 ウェブ・デザインの間違いトップ10(2005年10月3日)
[引用サイト] http://www.usability.gr.jp/alertbox/20051003.html
2005年、ユーザをうんざりさせてきたウェブ・デザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 ウェブ・デザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティ・ガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ!”と思われる方がいたら、それはその通りなのだ。 以前からわかっていた問題点を再確認し、修正候補の上位に持ってくることには大きな意味がある。間違いがいまだに修正されていない以上、人々が、不満をもらし続けているのは当然である。 フォントに関する問題点が、2位に約2倍の差をつけて圧倒的勝利となった。投票してくれた人の約2/3は、フォントサイズが小さいことやフォントサイズが固定になっていることに不満を漏らした。約1/3は、テキストと背景とのコントラストが弱い点を不満とした。 フォントサイズを変更できるようにすることや、読みやすさに関しては、2002年に書いたコラム“フォントサイズはユーザにまかせよう”を参照いただきたい。 クリックできる部分はどこなのかを明確に示すこと。テキストリンクであれば、色を変え、下線を引いておくことだ。(テキストリンクではない部分には下線を引かないこと。) リンクの先に何があるかを前もってユーザに知らせること。アンカーテキストには、リンク先に何があるのかを一言で伝えられるような表現を用いてユーザが情報を読みとりやすくすると同時に、検索エンジン最適化(SEO)を図る。“click here(ここをクリック)”のような、ありきたりで意味を持たない表現は使わないこと。 ユーザがリンクを行き来するときの標準的なインタラクションを受け付けなくするJavaScriptに代表されるテクニックは使わないようにすること。 リンク先のページを新しいウィンドウで開かないようにすること(PDFのようなドキュメントの場合は除く)。 リンクは、ウェブ上のインタラクション・エレメントとして首位の座を誇る。誰もが考えるリンクの仕方が少しでも崩されると、間違いなくユーザは困惑し、余分な時間を費やすことになる。あなたのウェブサイトが使ってもらえなくなる恐れもある。 ユーザを苛立たせるという意味でFlashが銅メダルをとってしまうのは、個人的には非常に残念である。Flashに起因する問題をなんとかなくそうと、Flashを正しく使うためのガイドラインを出版するなどして世間に訴え始めてから3年が過ぎた。Flashの開発者達が集うカンファレンスで話をしたとき、そこに居合わせたほぼ全員が同意してくれたのは、これまでのような過剰なFlashの利用はあるべき姿ではないということ、そして、将来的にはFalshが有用なユーザ・インターフェイスを提供するようになること、などだった。 この素晴らしい決意にもかかわらず、ユーザが目にするものの多くは、イライラさせる以外になんの目的も持たず作られている出来の悪いFlashなのである。スプラッシュページやFlashを使ったイントロがほぼ絶滅したという点は、一つ喜ばしいことである。これらはあまりにも良くないので、事情をきちんと理解していないウェブ・デザイナーでさえ、今ではほとんどお薦めしないはずだ。(もっと事情に疎い)クライアントの中には未だにそのようなデザインをリクエストする人もいるようだが。 Flashは、一つのプログラミング手法であり、動きを持たないページでは実現できない付加価値や機能をユーザに提供するために使われるべきものである。単にページを華やかに演出するために使われるべきではない。退屈なページになってしまっているなら、まずはテキストを書き直して、ユーザの関心を引いてみよう。プロのカメラマンを雇ってもっと良い写真を載せることもできるはずだ。ページに動きを盛り込んではいけない。ユーザの関心を引くどころか、追い出すことになりかねない。多くのユーザが、アニメーションは見る価値のないものと考えている。 ナビゲーションにFlashを使うのも好ましくない。ユーザは、ありきたりのナビゲーションと動きのないメニューを好むのである。 独自の言葉ではなく、ユーザの言葉を使って書かれているべきである。(そうすれば、検索エンジンのヒット率もあがるだろう。なぜなら、ユーザは作り手の言葉ではなく、自分の言葉で検索をするのだから。) 他の問題点は、比較的容易に改善が可能である。しかし、残念ながら、検索性能をあげるには相当の労力とソフトウェアへの投資が求められる。そうは言っても、やってみる価値はある。検索は、ウェブを使ったときのユーザ・エクスペリエンスを決定づけるとも言える重要な構成要素であり、年々、その重要度は増してきていると考えられるからだ。 多くのユーザが、フォームに関係するたくさんの問題点を指摘している。どんな問題点かって? ウェブ上には、フォームがごく頻繁に登場し、さほど必要とは思われない質問や選択肢のおかげで巨大なフォームと化している場合が多い。長い目で見れば、インターネット上のインタラクション・デザインにはもっとアプリケーションのメタファが求められるようになるだろう。しかし、おびただしい数のフォームに出くわすのが現状であり、時間をかけずに処理できるようにしてあげなければならない。このためのガイドラインには、主に以下の5つがある: 特異な項目名は使わないようにして(氏名、住所などを使えば良い)、自動入力を最大限活用できるようにしてあげること。 フォームを開くと、最初の入力欄に自動的にカーソルが置かれているようにすること。そうすれば、クリック1回分を節約してあげられる。 電話番号、カード番号などは、どのように入力しても受け付けるようにしてあげること。括弧や余分なスペースなどを自動削除するようにプログラムすることはさほど難しいことではない。見慣れないフォーマットにデータの入力を求めるウェブサイトに苦労しがちな高齢者ユーザにとって、これは特に重要である。16桁のカード番号をそのまま何の区切りもなく、間違えて入力してしまう危険をあえて冒すようなことはせず、4桁ずつに区切りをつけて間違えないように入力しようとしてくれるユーザからの注文を受け付けない理由がどこにあるというのだ? 国際化のガイドラインを守っていないフォームは、海外の大勢のユーザを泣かせている。カナダの郵便番号にエラーメッセージを返しているようなら、カナダとのビジネスがほとんどなかったとしても驚くには値しない。 電話番号とメールアドレスの掲載が求められる場合が多いが、あわせて企業の所在地情報をウェブサイトに載せておくことは、実はもっと重要である。なぜなら、それが信頼して良い企業かどうかを判断するための指標の一つとなるからだ。住所のない企業に、いったい誰がお金を支払いたいと思うだろう? 問合せ方法はどのように掲載するのが望ましいか、“About Us”ページ、ウェブ上での所在地検索に関して実施したユーザビリティ調査の結果をご覧いただきたい。 大きなサイズのモニターを使っている場合、ウィンドウのサイズを調整しないと、ウェブサイトは非常に読みにくい。逆に、ユーザが小さなウィンドウでウェブページを見るとき、そのページがリキッドレイアウトを採用していなければ、あの厄介な水平方向のスクロールをしなければならなくなる。 幅が固定になっているウェブページを印刷すると、右端まできちんと印刷されない場合がある。アメリカのレターサイズよりも幅の狭い用紙(A4サイズ)を使うヨーロッパのユーザには特に厄介な問題である。 フォントサイズの問題も関連する。1位の間違いはおかしておらず、フォントサイズが固定になっていないウェブサイトを考えてみよう。高解像度のモニターを使っているユーザは、ほぼ間違いなくフォントサイズをあげる。さらに、テキストをもっと大きく、読みやすく表示したいと考え、ウィンドウサイズも大きくした場合、レイアウトが固定になっているとその努力は報われずに終わることとなる。 一番の反則は、ポップアップ・ウィンドウで何らかの情報を表示するときに、そのウィンドウの幅と高さを両方固定してしまっているウェブサイトである。ポップアップ・ウィンドウはそもそも問題の代物だ。どうしても使わなければならないのならば、せめて、小さな穴をのぞくようにコンテンツを読ませるのはやめよう。最低でも、新しく開かれたウィンドウのサイズを、ユーザが自由に変えられるようにしてあげるのだ。 投票結果によれば、10位はポップアップ・ウィンドウとなるべきところだが、これについてはすでに随分と書いてきた(特に最近、ポップアップ・ウィンドウが最も嫌われる広告テクニックの1位に選ばれた際にも述べた)。そこで今回は、得票数は若干落ちるが、かなり重要なポイントに繋がる問題点を取り上げたい。 eコマースのユーザビリティに関してまとめてきたガイドラインの一つに、製品の写真を拡大して近影を見られるようにしてあげること、というのがある。細部を見たり、素材を確認したりできれば、お客様は、安心してオンラインで注文を出すことができるようになる。 大変喜ばしいことに、多くのウェブサイトがこのガイドラインに従い、ズーム機能を提供している。虫眼鏡のアイコンでそれを示すという工夫も多々見られる。しかし、多くのサイトが、実は、この機能を誤って実装している。 もっともひどいのは、“画像を拡大”ボタンをクリックしたユーザに、まったく同じ画像を表示してしまっているウェブサイトだ。クリックして表示されるものが、元のものとまったく変わらないのは、どんな場合でも間違っている。クリックしても何も変わらないリンクやボタンは邪魔なだけで、時間の無駄遣いにつながる。何が起こったんだろう? 何かマズイことをしてしまっただろうか? と、ユーザは困惑するばかりだ。(もっとよくみられる同様の間違いとして、ホームページ上に、ホームページへのリンクを置くことが挙げられる。これは、守られていないホームページ・ガイドラインの10位だった。) もう一つ、同じくらい厄介な間違いは、ユーザに画像を拡大するというオプションを提供してはいるものの、ほんの少ししか拡大をしてあげないような場合だ。ユーザが、大きな写真を見たいと言ったときは、大きな写真を見せるのだ。ウェブサイトを利用してくれているユーザの大多数が利用しているスクリーンサイズ(本コラム執筆時点で、B2Cのウェブサイトを利用するユーザであれば1024×768のディスプレイが一番人気である)いっぱいに拡大した写真を見せてあげるのが望ましい。それ以外の場合に、画面いっぱいの大きさの画像を呈示するのは不適当である。スクロールせずに見られる程度の大きさで、細部までしっかり見てもらえる接写の画像を提供するのが良いだろう。 最初のページには、見た目が煩雑になってしまわないように小さな画像を使うべきである。確かに、ダウンロードに要する時間に配慮して、ページの容量を小さくしておきたいというのもわかる。いくらブロードバンドの時代と言っても、反応時間が遅いのは問題で、これはウェブサイト・デザインにみられる問題の15位である。しかし、ユーザが拡大写真を見たいと明らかに言っている場合、ダウンロードが完了するまでは喜んで待ってくれるはずだ。待った結果、購入するかどうかの決め手になる細部までをしっかりと見せてくれる十分な大きさの画像が表示されるのだとしたら。 今年度のウェブ・デザインの間違いトップ10は、基本に忠実なウェブ・デザインに立ち返る必要性を明らかにするものとなった。メーリングリストやウェブサイト、カンファレンスに至るまで、インターネット業界では、新しく、魅力的な“Web2.0”機能に関する話題が尽きない。しかし、ユーザはテクノロジーなど気にしておらず、新しい機能など望んでもいない。彼らはただ、基本的な部分での質の向上を求めているのだ。 自分のウェブサイトに新しい機能や最新のテクノロジーを導入したいという欲求にかられたときは常に、現状のウェブサイトからさらに質を上げるためにリソースを費やしても、高いROI(費用対効果)を得られるかどうかをまず考えよう。企業、eコマースサイト、行政機関、非営利団体、いずれも例外なく、新しいテクノロジーを使わなくとも(検索エンジンの性能を上げるのは、もちろん別の話だ)、コンテンツに磨きをかけることでウェブサイト・ビジネスのゴールに確実に近づくことができるはずだ。 翻訳:奥泉 直子負けず嫌いのユーザビリティエンジニア。フリーランス。通訳・翻訳の修行経験も活かして、国内外のユーザビリティ評価業務を中心に活動中。 |
マイワンのサイトです。