menu

11.08.04

category

comments

0

trackbacks

0

permalink

第3回 HCD-Net サロン「ペーパープロトタイピング ワークショップ」

IMG_1499.JPGのサムネール画像

初の参加でどきどきでしたが行ってきました。
(ほとんど写真とるの忘れていたので、文字多めですがご容赦を)

◆ 課題
居酒屋のセルフオーダリングシステム

コンセプト
・各テーブルからタッチパネル式オーダリング端末を使って、料理を注文できるシステム

基本要件
・料理の注文から会計(おあいそ)まで端末で出来ること
・選んだ料理の変更や取り消しができること
・複数の料理を一度に注文できること
・端末画面の操作ですべての注文ができること(紙のメニューとの併用は不可)

端末仕様
・11インチタッチパネル式液晶モニター
・フルカラーXGA(1024 x 768 ドット)
その他条件等
・店舗側は各テーブルの端末から入力されたオーダーを厨房で確認しながら調理を行う

◆ シナリオ記述ノート
居酒屋に入店〜会計までの想定される状況を記述していく。「Aさんは、いつもの野球仲間とテーブルに着き、雑談をしながらメニューを眺めていた」という例が示されていたのだけど、僕たちのテーブルは

・5名それぞれがポストイットにシナリオを記述する
・シナリオを記述する際に読み上げすることで即座に共有する
・記述されたポストイットを入店〜支払のながれでざっくりわけた台紙に貼っていく

という感じで行った。

scenario.png

個人的には

・第三者的ではなく、自分がお客さんに「チャネリング」して居酒屋を脳内体験をしながら完結に状況を書き出す

ようにした。
脳内体験は業務でもよくやる手法で、第三者的ではないユーザの視点で考えることがしやすい。

作業は1畳ほどのテーブルを囲む形で行ったのだけど、このシナリオを列挙するだけでテーブルがいっぱいになってしまった。
続くタスクフローの作成はこのシナリオを見ながらやれると効率的なはずだから、壁を使ったほうがよかった(許可が降りたかはわかんないけど)。広い場所 or 壁必須だな。

◆ タスクフロー記入
シナリオで記述した内容を、各要素に分けて関係性を図式化する
各要素とは
・だれが(人物名)
・何をするのか(行動)
・そのときに何を考えているのか(思考)
・そのとき使う道具は何か

flow1.png

タスクフローの記述はシナリオで列挙したポストイットをまとめていくことで行った。
類似内容のポストイットをまとめていき、時系列に並ベなおす。
実際のところ、お客側の行動をまとめるのが精一杯で(つまり人物名は全てお客)、厳密に各要素を持ったフロー図は作れなかった。

◆ タスクフローシート作成
前項で記述したタスクフロー記入シートをもとに、基本フローを書き出して必要な画面要素を記述する。

flow.png

このフローに関しては僕のテーブルでは正直ほとんどできていなかったように思う。
シナリオをまとめた時点で実際の画面をつくり始めてしまったので、画面作成と画面要素の抽出が同時進行で行われることになったためだ。

時間的にもこのシートに全てのシナリオを網羅したフローを書き上げるのは無理だったと思うけど、特にこのあとのタスクフローシート作成ができなかったことで、タスクを全員で共有・把握できず、プロトタイピング作業中に画面要素の検討作業がかぶったりと、作業があっちにいったりこっちにいったりすることになってしまった。

よかったのは、大事な機能とか、時系列によらない機能(例:トイレの案内表示、現在の勘定総計)などをプロトタイプ上に早い段階でプロットできたので、それを骨にして画面作りを進めることができたこと。
インタラクティブなUIを提案できたのも、このあたりの作業が寄与しているんじゃないかと思う。

◆ ペーパープロトタイピング
えーと、作業フローに従うとここで始めてプロトタイピング開始なのだけど、僕らのテーブルにはもういくつかの画面のラフがころがっていた。

IMG_1500.JPG

ここでタスクフローシートがしっかり出来ていると、もっとスムーズに設計作業ができた気がするのだけど、なにしろ最初のシナリオを時系列にまとめたものが唯一の頼り。

画面の構成要素を検討したりする一方、新しい機能要件がでてきたりと、みんな楽しみながら作業はできていたものの、進行はだいぶ混沌とした感じだったと思う。よく例えればより現場っぽいって感じ。

途中でコンセントの長谷川さんにスクロールエリアのちょいテクを教えてもらって取り入れたり。実はこのテク以前に業務でやったことがあって、iPadで画面上のスクロールの範囲をどうするかってケースだったのだけど、そのときは正式なテクだと思ってなかったんでちょっと嬉しかったり。

hcd.png

あーだこーだやっているうちにタイムアップとなった。
...やばい、戻る系とかやり直し系とかちゃんと検証できていないぞ。

◆ ユーザテスト
各テーブルから1名を他のテーブルへテスターとして送り込む。
僕のテーブルには新横浜ユーザビリティ研究会で何度かお会いしたことがあった@hokorinさんが刺客wとしてやってきた。やばい。

テスターは与えられたタスクを実際にペーパープロトタイプを使って行っていく。
テスターの操作に対する反応をホストが行う。ホストは操作説明を示唆したりヒントを与えたりしてはいけない。要はデバイス役。

ここで早々に問題発生。勢いで最後につけた「いらっしゃいませ画面」が仇となって、メインのメニュー画面へたどり着けずにタスク未達成。

「もういっかい!」とゴリ押しで、メインメニューの画面からタスクをもう一度やってもらう。全員必死だから、このときはホストは全員でフォローしあう状態w
ある程度は達成できたものの修正系がちゃんと検証できていなかったりインタラクションのホスティングがうまくできてなかったこともあって、結構いろいろ指摘をうけた。

テスターさんを変えてもう1つのタスク。
こんどは清算と清算後の割り勘ができるか。やった、うちらの案、割り勘機能ありますYO! というわけでスムーズにタスク達成。高評価をいただいた。...と思う。
時間があまったので、同じテスターさんに1つめの注文のタスクをやってもらったのだけど、さきほどのテスト後に修正を加えていたおかげで、こちらもスムーズにタスク達成。パチパチパチ!

テスターさんの指摘は本当にためになるし、この時間を通して全員が画面のフローを把握したり、即座に問題点を修正することができたのは、ペーパープロトタイピングならではだと思う。ペーパープロトタイピング強力。

◆ 講評会
それぞれのテーブルの代表1名ができあがったプロトタイプを発表。
やたら機能が充実しているテーブル、質実剛健なテーブル、優等生なテーブル、いろいろありました。あー、目から鱗だわという機能実装をしているテーブルもあって勉強になる。
僕のテーブルはDeNAから参加の床鍋さんがプレゼン。ユーモアたっぷりのプレゼンでいいところが伝わったと思う。個人的に付け加えとして、文字や画面構成要素が他のチームよりでかめなのは、酔っぱらい対策+テーブルで席が離れた人が見えるようにという配慮からなのですよん。

◆ 終了
そんなわけで、あっという間でしたがめちゃめちゃ楽しい時間を過ごすことができました。業務でもこのぐらいフランクに和気あいあいできたら素晴らしいのに。

個人的に悔いがあるとしたら、タスクフローのまとめがもう少しキチンとやりたかったのと、時間ぎれでできなかったユーザテスト前の操作フローの検証をできていればなあと。
特にタスクフローのまとめ方は勉強不足で有効なメソッドも手持ちにないので、スキルとして強化していかないといけないと。

以上ワークショップの報告でした。
おつかれさまでした!

関連:隣り合わせの灰と青春(@hokorinさんのレポート)

add your comment

Name
Mail
URL

comments

up down

comments


up down