ペーパープロトタイピングの実践

昨日、今日は、顧客や想定ユーザを交えて、ペーパープロトタイピングと、それによるユーザビリティテストを実践していました。風邪で倒れていたので、実際の作業はほとんどクライアントにやっていただいたのですが...それも却って良かったかもしれません。

ペーパープロトタイピングは、厚紙とフェルトペンなどを使って、ユーザインタフェースのプロトタイプを作成する手法です。簡単に作成・変更することができ、また人間がコンピュータ役となって操作することで、実際の操作を柔軟に再現することができるのが特徴です。詳しくはこちらの書籍を読んでいただくのが良いでしょう。

今回は私たちが実際に行ったテストの手順などをお話します。

結果としては、プロトタイプ作成は設計手法として非常に有意義であり、さらにユーザビリティテストからも多くの知見を得ることができました。シンプルなサイトであるため、1日くらいの作業でプロトタイプを作成できました。テストにかかった時間は、一人あたり20分から30分くらいです。私はもうペーパープロトタイプ無しで仕事をしたくない、とおもいました。

非エンジニアである顧客が中心となって作業をしましたが、全く問題なく作成できました。イメージを形にするためには、エンジニアが作成するよりも、企画立案者が作成するほうが良いかもしれません。

概要:
*いくつかの機能を持つ動的なウェブサイト
*ページ数は17ページくらい
*プロトタイプ作成期間は1日
*テスト被験者は4人

使った道具のうち重要だったもの:
*A3サイズのスケッチブック(背景兼キャンバスとして使用)
*A4サイズの厚紙
*インデックスカード(こぶりの厚紙)
*太字サインペン(黒3本、青1本)
*蛍光マーカー(緑)
*はさみ
*貼ってはがせるのり

あればあったほうがよさそうなもの:
*付箋紙(ユーザの入力用)
*シャープペンシル(下書き用)
*貼ってはがせるセロハンテープ(部品の組み合わせ用)

といった道具を使用して作成しました。

まずスケッチブックに背景を書き、それぞれのページはA4厚紙に記載しました。厚紙でないと扱いにくいので、必ず厚紙を買いましょう。共通要素は、はさみで切り出してテープやノリでとめることで再利用することができます。

画面は黒の太字サインペンで書きました。リンクなどクリックできる要素は青色で表現しました。強調したい部分やデザイン要素は緑色のマーカーで書き加えました。三色くらいは持っていないと表現力が不足するかもしれません。

貼ってはがせるノリは必須です。状況によって変わる部分などは、インデックスカードを小さく切り、貼ってはかせるノリをくっつけて作ります。それを上から貼り付けることで、内容を自在に変化させることができます。

作業開始当初は戸惑いますが、慣れてくるとだんだんとのってきます。やはり紙に書く作業は、PCでやる作業よりも圧倒的に効率がよく、自由な発想が行えます。全くあやふやだったデザインが、1日でかなりしっかりしたものになったのは驚きです。そして、チームの全員が設計内容を確実に理解することができました。

ユーザビリティテストの被験者は友人などに頼みました。顧客が説明と課題提示をして、私がコンピュータ役を担当しました。被験者はペーパープロトタイプという概念を初めて知りましたが、みなスムースに理解し、操作を行うことができました。

シンプルなサイトであり、まだ作りこみも複雑になっていないため、一回のテストは20分くらいで終了しました。にも関わらず、多くのベターなUIや表現を発見することができました。ユーザーにコンセプトを伝える方法も改善でき、大変なプラスとなりました。

いやあ、風邪で倒れながらも、本当に楽しくテストを行うことができ、多くの発見ができました。ペーパープロトタイピングを皆さんも是非やってみてください。とくに非エンジニアの方が、エンジニアにイメージを伝えたいときには、一緒にプロトタイプ作成をやってみてはいかがでしょうか? パワーポイントで資料を作るよりもずっと実感がわきますよ！