昨年あたりからWebサイトのユーザビリティが本格的に注目を集めるようになってきましたが、目に見える要素ばかりが注目されがちで、本質を外した議論が多く見受けられます。ユーザビリティ自体の定義自体をここでもて遊んでも始まらないので、Webサイトのユーザビリティとは「ユーザーが必要な情報を迷わずに、最短経路で手に入れられること」ことと定義して、そのために必要な要素や考え方について検討してみましょう。

Webサイトのユーザビリティを構成する要素

Webサイトの構成要素はいろいろありますが、ユーザビリティに直結する要素としては、次の三つの要素に大きく分類できるのではないかと思われます。

  • ビジュアルデザイン:
    ビジュアルデザインにはブランドイメージを的確に伝達するための機能など、様々な機能が求められます。ですが、ユーザービリティと関連した要素ということで考えるならば、形状や色彩などでハイパーリンクのホットスポットが他と区別されていてわかりやすくデザインされているか、などの視覚効果が中心となります。
  • インターフェースデザイン:
    複数ページに渡って展開されている情報ないしコンテンツを閲覧するためのシステムを、どうデザインするかということです。ボタンアイコンやプルダウンなどといった、ナビゲーションシステム自体の形式とは無関係です。
  • 情報構造デザイン:
    情報のグルーピング基準がユーザーの心理モデルと合致しているかどうか、また、リンク先の名称が分かりやすいものになっているかといった、個別ページの内容のわかりやすさ以前にWebサイト内の情報構造をユーザーが簡単に理解できるようにするためのデザインのことです。情報マッピングという用語がありますが、それに近いものと考えていただいても良いかと思います。

つまり、まったく同じ情報(コンテンツ)を持つサイトであっても、

  • さまざまな見栄えを持ちうる(ビジュアルデザイン)
  • さまざまなインターフェースを持ちうる(インターフェースデザイン)
  • さまざまな構造を取りうる(情報構造デザイン)

ということです。もちろんこれら三者が統合されてはじめて機能するのがWebサイトですが、構成要素を分けて考えておかないと、いらぬ誤解につながるおそれがあります。

「見えるもの」だけがユーザビリティを支えるという誤解

さて、Webサイトのユーザビリティという概念が注目されて久しいのですが、どうも前述の要素のうちビジュアルデザインとインターフェースデザインという、目に見える要素だけが注目を集めているように思えます。Webサイト内の情報構造デザインを抜きにしてWebサイトのユーザービリティが語られる現状には大いに問題があるのですが、残念ながらビジュアルデザイン偏重主義の歪みがここにも現れているということでしょう。

確かに、斬新なビジュアルデザインが新たなインターフェースデザインの可能性を切り開くという側面もあることは否定しませんが、そこまでの新機軸はそうそう存在しません。ユーザビリティの問題を指摘したときにこういった言い訳が堂々と通ってしまうようでは、ユーザビリティの実現は遠いと言わざるを得ません。ユーザビリティを確保するには、機能や情報の構造、相互関係といったユーザーの目に見えないWebサイトの骨格部分の設計を先行させてから、それに合わせたビジュアルデザインを採用するべきなのです。

もちろんビジュアルデザインがユーザビリティの向上に大きな役割を果たすことも事実です。ですが「色度/彩度ではなく輝度のコントラストをつけることを重視して、事前にグレースケール表示で確認する」など、これらの領域についての実例は各方面で数多く取り上げられていることもあり、ここでは特に取り上げません。当研究所らしさを主張するためにも(笑)、この後はWebサイトでユーザビリティを向上させるにあたって情報構造デザインに要求される要素に絞って、考えていきたいと思います。基本的には、利用ユーザーの姿とWebサイト上での行動を予測して、それに従って提供する情報のグルーピングや配置、相互関連を規定するのがセオリーとなります。

Webサイトではタスク/動線設計の難易度が高い

しかし、こうした予測がどの程度の精度で可能なのかについては、十分に注意を払う必要があります。一般の家電製品やソフトウェア、マニュアルのユーザビリティを測定(ユーザーテスト)する場合は、ある程度のストーリー(ユーザーが利用するコンテクスト)を設定してテストを行います。どのタスク(操作目的)に対してテストを行うかという問題はありますが、ストーリーの設定自体はそれほど困難なものではありません。ですが、Webサイト上のユーザビリティ測定にあたっては、そうしたストーリーを設定することは意外と困難なのです。

ちょっとわかりにくいので、もう少し説明を加えましょう。ユーザーテストにあたってはタスクの設定が重要になりますが、通常の製品であればタスクの設定は容易です。何故かというと、通常の製品は特定の用途や使用状況を想定して設計されているからであり、ユーザーもそうした期待を持って購入/使用するからです(ライブビデオなどは別として、普通は音楽を聴くためにビデオデッキを購入したりしませんよね?)。実際にユーザーが使用する状況を高い精度で再現してユーザーテストを行うことができる以上、ユーザビリティの測定結果も信頼性の高いものとなります。

これに反して、Web サイトは訪問したユーザーごとに期待するものがまったく異なるのが特徴です。特にポータルサイトなどのように大規模で多目的なWebサイトになると、ユーザーの基本的な行動パターンを想定するだけでも収拾がつかなくなります。検索エンジンから直接コンテンツにやってくるユーザーも存在しますので、トップページからユーザーの行動を予測するだけでは不十分です。それに加えて、Webサイト側も自社ビジネスを有利に展開するために様々な要件を考慮せざるを得ませんので、ユーザーの行動を支援するためだけに情報構造をデザインするわけにはいきません。こうした現実を直視せずに、既存の画一的なユーザーテストの方法論をそのまま持ち込むことは、大きな問題があると言えるでしょう。

もちろんオンラインショッピングの購入操作などのように、特定の操作に関してテストを行うことは可能です。しかし、Webサイトという存在の特性上、特定の操作やユーザー行動に特化した設計を行うことは、Webサイト全体におけるユーザビリティのバランスを崩す可能性が大きくなります。ECサイトでオンラインショッピングの購入操作に特化したような設計をしても、サイト全体のユーザビリティが確保されていなければ、Webサイト全体におけるユーザー・エクスペリエンスの品質低下につながり、所定の目的を達成できない可能性が高まってしまいます。

想定ユーザーを明確にして、実像をつかむことが大切

結局のところ、これらの混乱はWebサイトがどんなユーザーを前提として、ユーザーにコンテンツをどう楽しんで欲しいのかという目的が欠落していることによる問題が大きいのではないでしょうか。変に色気を出して幅広い層に訴求しようとしたために、本来中心になるべき層にそっぽを向かれているようなことはありませんか?

ユーザービリティとは、それ自体の価値が絶対的なものとして存在するわけではなく、利用するユーザーにとって使いやすさが変わるという、相対的な側面も大きいのです。マニアにとっては必要な情報を探しやすいグルーピングを採用したWebサイトで、初心者が必要な情報がどこにあるのか迷ってしまうような場合がよくある例です。細かく見ていくと、ビジュアルデザインやインターフェースデザインなど、人間の視覚特性に依存する分野では絶対的な側面が大きいのですが、情報構造デザインなどの個人的な認知特性に依存する分野では相対的な側面が大きいのではないかと考えられます(インターフェースデザインは認知特性に依存する部分もあるかと思いますが、またの機会に)。

「どうせユーザーに依存するなら、はじめから努力するだけ無駄だろ〜」とお考えのかたもいらっしゃるかもしれませんが、基本的なセオリーは押さえておく必要があるでしょう。以下の方法で情報構造デザインにあたって必要な前提を整理することも、その一例です。

  1. Webサイトでどんな情報を提供したいのか?
    言うまでもありませんが、制作や運営に携わるメンバー間で再確認して、目的の共有をはかりましょう。
  2. どんなユーザーを想定しているのか?
    はじめてのユーザーやリピーター、テレビをザッピングするようにたまたまやってきたユーザー(Information Browser)、必要な情報を意図的に探しにきたユーザー(Information Seeker)など、いろいろな括りが考えられます。無理に特定のユーザー像だけに限定するのではなく、さまざまな可能性を考慮しつつ、サイトの運営目的とすりあわせをすることが重要になります。
  3. 想定ユーザーはどんな目的でWebサイトにやってくるのか?
    会社や商品の情報入手、オンラインショッピングなど、いろいろ考えられますよね。上記の想定ユーザーごとに場合分けして、目的を考えることも重要です。
  4. 想定ユーザーはどんな経路でWebサイトにやってくるのか?
    正直にトップページからやってくるユーザーだけではなく、検索エンジンやら直接リンクから飛んでくるユーザーのことも考えないといけないですよね。
  5. ユーザーが迷わずに、最短経路で目的を達成するために必要な条件は何か?
    積極的な条件だけを考えると理想論に終わってしまいがちなので、逆に「それを阻害するものは何か?」を考えて、あらかじめ「べからず集」を用意しておくのも面白いですね。

もちろんこれは情報構造デザインを中心としたユーザビリティを確保するための思考フレームですので、これに加えて通常の企画構成作業も必要になります。あとは企画構成時に一般的な情報のグルーピング基準や見出しの付けかたなどのノウハウを併用することで、情報構造に関してWebサイトの基本的なユーザビリティは確保できるのではないでしょうか。そのあとで情報構造をどのようにユーザーに見せるのか(ビジュアルデザイン)、利用してもらうのか(インターフェースデザイン)のユーザビリティをしっかり実装すればOKということになります。

いかがでしたか?

一部の制作会社ではインフォメーション・アーキテクトを職種として募集するなど、Webサイトのユーザビリティにおける情報構造デザインの重要性に気付いているのですが、世間的にはまだまだ過小評価されているようです。目に見える部分のユーザビリティは完璧なはずなのに、ユーザーテストであまり良い感触が得られないような場合は、情報構造に原因がある場合が多いのです。当研究所がWebサイトの評価に絡むときはこの分野を中心にチェックしておりますので、機会がありましたらぜひご一報ください。

ところで最近は、タスク達成型の指標であるユーザビリティだけでなく、商品やサービスを利用する過程の品質を重視するユーザー・エクスペリエンスというプロセス重視型の指標も重視されてきています。ユーザー・エクスペリエンスについては以前まとめましたが、また機会がありましたら取り上げる予定ですので、お楽しみに。

The 1140px CSS Grid System · Fluid down to mobile