ゼロ円でもできる!? 省コストユーザビリティ向上術
ペーパープロトタイプ - Webデザイン図工の時間

工事が始まってから根本的な問題が見つかったのでは手遅れなのだ。
ゼロ円でもできる!? 省コストユーザビリティ向上術 ~ディスカウント・ユーザビリティ入門 発想転換、“ディスカウント・ユーザビリティ”のススメ

ミニチュア模型の効用

プロトタイプは「試作品」と訳されることが多い。しかし私は「試用品」といった方が適切ではないかと考えている。試作品と言うと「制作者が試しに作ってみる」という意味に捉えられがちだが、本当はプロトタイプとは「ユーザーに試しに使ってもらう」ために作るものだからだ。

ここで、たとえ話として、家を建てる場面を考えてみよう。レンガ・木材・コクリートといった素材が、大工などの建築技術者の手によって加工されて組み上げられ、まず家の骨組みができ上がる。さらに屋根や壁が施工され、最後に内装や電気工事を施して家は完成する。しかし、実際には、工事を始める前に建築家が設計図を描いている。その際に建築家は厚紙やスチレンボードを使ってさまざまなミニチュア模型を作ることがある。このような建築模型は、設計の妥当性を検証するとともに、クライアントに見せて、さらに具体的な要望を引き出すために利用される。

模型を作るメリットは、設計の間違いや、クライアントのあらたな要望に柔軟に対応できることだ。もし、工事を始めてから設計ミスがあきらかになったり、クライアントが1部屋を増やしてほしいと言い出したりしたら、建設費用も工事期間も予定を大幅に超過してしまうだろう。そんなことが何度も繰り返されれば、その家は完成しないかもしれない。

プロトタイプとは、建築の例で言えば「骨組みの家」ではなく「ミニチュア模型」に相当するものだ。プロトタイプは、製品を完成させる過程の中間成果物ではなく、設計者が試行錯誤するためのテスト材料なのだ。家であってもWebサイトであっても、本格的に工事が始まってから根本的な問題が見つかったのでは、もはや手遅れなのだ。

ユーザビリティ人名図鑑(その5)
ジャレッド・スプール
図1 ジャレッド・スプール

ジャレッド・スプール

ヤコブ・ニールセンに並ぶユーザビリティ界の西の横綱。ユーザビリティテストやプロトタイピングのオーソリティとして講演や執筆を活発に行っている。User Interface Engineeringの創業者で、現在もCEOを務めている。

紙製のWebサイト

建築家がミニチュア模型を作るときのように、Webサイトのプロトタイプも手近なツールで制作できる。たとえば、PhotoshopなどのグラフィックソフトやDreamweaverなどのオーサリングツール、また、ExcelやPowerPointのようなビジネスソフトを使ってもかまわない。

ただ、もっと手軽な方法がある。それはを使うことだ。そもそもソフトウェアで作業を始める前に、ラフなスケッチを紙に描くデザイナは多い。また、紙ならば、ソフトウェアの操作に習熟していないメンバーでもプロトタイプ制作に参加できる。さらに、Photoshopで作った見た目が立派なものよりも、一見すると大雑把な感じのプロトタイプの方が、ユーザーが気軽に問題点を指摘する傾向があることも知られている。

このような「ペーパープロトタイプ」はフリーハンドで描けばよい。色は白黒で、画像やアイコンは省略して構わないし、サイトロゴは「ロゴ」と書いた四角形を描くだけだ。もし、同じような絵を何度も描くのが嫌ならば、既存の画面ショットをプリントアウトして切り貼りしたり、ラジオボタンやドロップダウンリストなど画面要素のシールを作成したりするという手もある。

ペーパープロトタイプ制作にそれほど難しいテクニックはないので、ここでは小技をいくつか紹介しておこう。

ブラウザ

Webサイトはブラウザ上で動作する。すべての画面にいちいちブラウザの絵を描くのが面倒ならば、まず紙のブラウザを作ろう。

ブラウザを作ると言っても、難しく考えることはない。画面をA4サイズの紙で作成するなら、一回り大きいB4サイズの紙をブラウザにすればよい。ブラウザも手書きで構わない。メニューバーやアドレスバーなどは不要だし、ツールバー上のボタンも、通常は「戻る」と「進む」だけ用意すればよい。

ラジオボタン、チェックボックス

ユーザーがオプションを自由に選択できるようにするには、貼って剥がせるテープを使うと便利だ。小さく切ったテープに黒丸やバツ印を描いて、それを貼り付けたり、剥がしたりすれば、オプションの選択状態を「オン」や「オフ」にすぐさま変更できるのだ。

ドロップダウンリスト

ドロップダウンリストは下向き矢印をクリックすると選択リストが開く。こういった状態変化を、別々の画面として書き起こしていくと枚数が膨大になってしまう。そこで、選択リストは別の用紙(ポストイットなど)に書くようにしよう。ユーザーがドロップダウンリストを操作したときは、ポストイットで作ったリストを貼り付ければよい。

同様の理由から、エラーなどを表示するダイアログボックスも別の用紙に書いて、必要な場面で画面に貼り付けるようにしよう。また「詳細」ボタンなどでダイアログボックスの下部がさらに展開する場合は、事前に用紙を折りたたんでおいて、ユーザーが操作したときに開けばよい。

指でクリック、鉛筆でインプット

ユーザーにペーパープロトタイプを使ってもらうには、ちょっとした芝居心が必要だ。まず、進行役とコンピュータ役のスタッフを用意しよう。

進行役がトップページをユーザーに見せて、特定の作業を行うよう要請しよう。そして、ユーザーには紙面上の任意のリンクやボタンを指でクリックしてもらう。すると、コンピュータ役がその操作に合わせて、ただちに次の画面を提示したり、画面の状態を変更したりする。これを繰り返せば、ユーザーは紙のWebサイトでも一とおりの作業を体験できるのだ。

ペーパープロトタイプを使ったテスト風景その1。ユーザーはマウスの代わりに“指”でクリックする。
図2 ペーパープロトタイプを使ったテスト風景その1。ユーザーはマウスの代わりに“指”でクリックする。
ペーパープロトタイプを使ったテスト風景その2。コンピュータ役が次の画面を提示する。
図3 ペーパープロトタイプを使ったテスト風景その2。コンピュータ役が次の画面を提示する。

なお、テキストフィールドならば鉛筆で入力してもらおう(当然ながら、入力データは消しゴムでデリートできる)。ショッピングカートに追加した商品の合計額が必要になれば、コンピュータ役がその場で電卓で計算すればよい。もし、警告音が発生する場面ならば、口頭で「ブー」などとユーザーに教えてあげよう。

最初は、こんな子供だましのようなことをやって、これで妥当な評価ができるのかと不安を感じるかもしれない。しかし、実際にテストを実施すれば、ユーザーが真剣に紙製のWebサイトを使用して、メニューの選択に迷ったり、操作を失敗したり、必要な機能がないと不満を表明したりすることがわかるだろう。

Webサイトと言うと、デジタルなユーザー体験の代表のように思われがちだが、意外にも「少し想像力を働かせれば、ほとんど何でもシミュレーションできる」ものなのだ。

◇◇◇
連載内容
この記事が役に立ったらシェア!
tweet13このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

NAP
「NAP」とは、 Name(店舗や会社の名前) Address(所在地) ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore