ユーザビリティ雑考

MoogaOneを作成する中でウェブユーザビリティに関して学んだ事・感じた事をいくつか述べさせていただきます。

文字こそ大切

ウェブページは視覚的要素の強いメディアです。そのため多くのデザイナは画像を多用します。それも背景や装飾にとどまらず、タイトルやリンクボタンにもバナー画像やアイコン画像を多用します。リンクを文字ではなくアイコン画像にすれば、一目見ただけでそのリンクの意味が分かる。本当にそうでしょうか?

それは普段私たちが「非常口」「男女トイレ」「道路標識」などをアイコンで認識しているため、なんでもアイコンの方が分かりやすいと錯覚しているだけではないでしょうか? 非常口やトイレのアイコンは一つの国または世界中で統一使用を前提に作られ、実際そのように利用されるものです。その結果、多くの人が繰り返し目にするため、分かりやすく「なる」のです。

あなたが作っているホームページはどのくらいの人が見ますか? あなたが作っているホームページにしか使われていない、あなたの思いついたデザインのアイコンが本当にユーザに分かりやすいと思いますか? マイクロソフト社のエクセルの[表示]-[ツールバー]-[ユーザー設定]で、全てのツールバーにチェックをして表示してみてください。あなたがしようとしていることは、ここで確認できます。

リンクを文字ではなく画像にしてしまうことは、「リンクの文字は青」「既読リンクの文字は紫」というウェブページの常識に従わないことを意味します。「それがリンクであるかどうか」「そのリンクを既にクリックしたかどうか」が分からなくなることを意味します。せっかく万人に受け入れられている最も分かりやすいルールがそこにあるのに、使わない手はないでしょう。

またボタンのように見えるバナーほかの画像も問題です。クリックできるものとそうでないものは、その違いが「露骨に」分かるようにしておかなければなりません。

文字は画像に比べての解釈の幅が狭い。つまり、適切な表現さえすれば、意味伝達の誤差が画像よりも少ないのです。ウェブページユーザビリティにおいては、文字こそが大切です。

伝えたい vs. 知りたい

ウェブページはポスターではありません。また、パンフレットほか印刷物でもありません。ポスターの出来栄えはポスター自体を見て評価すれば事足ります。では、ウェブページのトップページの画像をプリントしたものを見て、ウェブページの評価が出来るでしょうか? できませんね。なぜなら、ウェブページはユーザが完全に主導権を持って操作する過程で評価されるものだからです。

このことは、ウェブページの構成・デザインはおろか、内容も規定してしまいます。つまり、すぐれたウェブページは、「作成者が伝えたい情報ではなく、ユーザが知りたい情報を載せている」のです。ウェブページ作成者は、往々にして組織の上部から「これこれの点をウェブ上でアピールしたい」旨の要求を受けるケースがあります。これらのプレッシャーと闘いながら、本当にユーザが知りたいものとそうでないものを厳しく吟味しながら、構築していかねばなりません。

そうやって、戦っているあなた自身、トップページ上のあるメニューが他のメニューより重要と思いこんでいませんか? 各メニューの重要性はユーザが決めるものであり、同じユーザであってもアクセスのたびに異なるニーズを持っている事を考えれば、必然性がない限り、あるメニューを他より大きくしたり、目立たせる事は控えたほうが良いといえます。その事によって、他のメニューが目立たなくなることは、特定のユーザの欲しがる情報へのアクセスが遅れることを意味します。

長いものには巻かれた方がいいか

ウェブページは構成やデザインの自由度が非常に高い表現メディアです。ビジネス文書のように日付の位置や書き方、時候の挨拶、ほか決められた様式があるわけではありません。新聞のテレビ欄のように横にテレビ局、縦に時間軸のように決められたレイアウトもありません。そのため、訪れるウェブサイトによって、含まれている内容はほとんど同じであるのにもかかわらず、それらがどこに置かれているか、どういうタイトルがつけられているか、どういう順番で並んでいるかは、バラバラの状態です。新しいサイトを訪れたユーザは、いわば初めて目にする機械をマニュアルなしで操作することを強要されているのです。

この事は、われわれに「できるだけ奇抜な表現・特殊な技術は使わないほうがよい」という教訓を与えてくれます。2.-4. 「トップページのメニュー名を決める」でも述べたように、ごく普通の日本語を使い、内容が想像できないような造語は避ける事、アニメーションほか動く画像や文字は極力使わない事、他のサイトで一般的に使われている表現・構成に従う事が、万人に使いやすいサイトを作るコツです。

ただ、一般に使われている表現が必ずしもベストと思えないケースもあります。 MoogaOne マニュアルの 2.-4.の中で、×「企業情報」「ニュースリリース」「おしらせ」というのは、一般的な企業のメニューのタイトルですが、内容が想像しにくいように思い、あえて ○「経営情報」「報道発表」「お知らせ」のようにしてみました。

しかし、基本的にはウェブページのユーザビリティを上げるためには、「多くのサイトがそうしているようにする」のが正解と言えます。

ここはどこ? 私は誰?(…って、それくらいは分かってるけどさ

ウェブサイトを見るときに、ユーザが必ずトップページから見てくれるとは限りません。Google などのサーチエンジンの検索結果から1階層、2階層下のページにいきなり飛んでくる事が、ままあります。そんな時、ユーザが「ここはなんと言う団体の誰が作ったページで、今どこにいて、どこをクリックすればどこにいけるのか」を分かりやすく提示してあげる必要があります。

MoogaOneにも採用されているパンくずリンク(おそらく『ヘンゼルとグレーテル』からの命名)は、表示されているページのトップページからの相対的関係を示すとともに、上の階層へ戻る筋道を与えてくれます。

ウェブサイト全体の階層を少なくすることも有効です。MoogaOneではトップページに、メニューに加えそれらに含まれるサブメニューをも表示させたことで、全体として1階層分少なくて済むように設計されています。(例えば、いくつかの異なるレストランのメニューを同時に比較検討するときは、全ての店のメニューを開いておいたほうが、1回1回開けたり閉めたりするよりやりやすいですよね?) これによりユーザのホッピング(階層を行ったりきたりする)回数が減少することになります。

各ページに適切なタイトルをつける事も重要です。タイトルはブラウザのタイトルバーだけではなく、お気に入りや編集時のタイトル一覧表示などさまざまな場所で表示されます。タイトルをつけないと、全ての表示が「無題」「NewPage」などになり、作成者にも不便、ユーザにも不親切です。タイトルはスペースの問題で最初の数文字しか表示されないケースが多いのでMoogaOneでは「組織名 ページの内容」ではなく「ページの内容 組織名」の順にしてあります。

最終的には人間が頼りです

不思議なことに多くのウェブサイトでは、そのサイトを運営する団体・企業の連絡先を見つけるのに苦労をします。また、いくら探しても分からない事がままあります。「ウェブサイトはそれ自身で完結すればよいので、電話番号や住所は不要」という考えなのでしょうか? もしそうであれば、明らかな間違いです。

どんなにユーザビリティに富んだウェブページを作ったとしても、それがハイパーテキストである限り、ユーザは、階層を行ったり来たりのホッピングを繰り返さないと、目的の情報にたどり着けないのが常です。そんな時、「組織の人間に聞けたらどんなに楽か」と誰もが思うのではないでしょうか? 組織名、代表電話番号、住所、ほか連絡先は、最も分かりやすい形で提示されるべきです。もしそのことによって電話が殺到するのであれば、それは「ウェブページではユーザのニーズが満たされていない」つまり「ウェブページ作りに失敗している」事を意味しているのではないでしょうか?

お問い合わせメールはmoogaone@gmail.com(@は小文字にして)まで

Design Concept by MoogaOne