World Usability Day 2010 Japan　[予告] | HCD-Net

■日時：11月10日（水）午後2時～5時半（懇親会 午後6時～8時）
■会場：東京　日立インターメディックス社（予定）
■テーマ： 「コミュニケーションを支援する製品・サービスのユーザビリティ（仮）」

2007,2008と参加していましたが、昨年は参加しそびれてしまいましたので、今年は参加したいと思っています。

とりあえず予告ということで、詳しくは詳細発表され次第展開します。

2009年7月に内閣官房により電子政府ユーザビリティ・ガイドラインが公開され，ユーザビリティに関する理解と実践が以前にも増して重要になっています．HCD-Netでは，この電子政府ユーザビリティ・ガイドライン中にも記載されているNEM（Novice Expert ratio Method）について，ワークショップを企画いたしました．
講師として，NEMを業務でも実践し，この分野の専門家である株式会社U’eyes Designの伊藤泰久氏をお招きいたします．実習形式でNEMの基礎を学び，業務への応用を考える良い機会です．多数のご参加をお待ちしています．
by NEMワークショップ : HCD-Net

ワークショップは13:15～17:15の4時間で行われ、講師の伊藤氏による「NEMや電子政府ユーザビリティガイドラインの説明」と、「UI改善前後のNEMの測定と検証の実習」の大きく2つの内容でした。
以下、内容やそのとき思ったことなどを挙げていきます。

■電子政府ユーザビリティガイドラインについて

・電子政府ユーザビリティガイドラインの背景として、2004年から2007年まで提供されていたオンラインパスポート発給システムが紹介された
・なんとこのパスポート発給システムは開発・運用費から発給コストを算出すると一冊あたりの3000万円などになってしまうらしい
・このような事例や結局オンライン化しても使われないという背景があり、重点項目を絞り込んだりガイドラインを策定している
・ガイドラインは「企画」「設計開発」「運用」「評価」の4フェーズのサイクルが定義されている
・その中でも、府庁の担当者が参照することを前提に「企画」段階に重点が置かれている
・ユーザビリティ向上のための手法の一つとしてNEMも挙げられている
・具体的な目標として「有効さ」であれば達成率、「効率」であれば所要時間やNE比を指標とする例が挙げられている
・目標は漠然と決めるのではなく、現状のシステムの測定結果から算出する

■NEMについて

・NEMの説明は「NEM(Novice Expart ratio Method)」を参照
・過去の事例からNE比が4.5以上の場合に問題があるといわれている
・ただし、年々サイト全体の質の向上や、ユーザーのリテラシーの向上などにより数値も変わってきており、最近では4とか3.5を目安にしてもよい
・NEMを見るときには、併せて達成率も見る必要がある
・NEMを計測するツールとして、GapFinderやオンライン版のGapFinder on LINEがある
・タグ埋め込み型等のオンライン計測ツールを利用すれば、全ユーザーの操作情報からNE比を求めることができる
・ただし、ユーザーを特定する情報とともに、その人が初心者に該当するか熟練者に該当するか判断しなければいけない

■実習
・市役所等にある証明書発行機をテーマとしたシミュレータ(ELギア)を利用
・特定条件で住民票を出力するシナリオを前提とした
・改善前のUIに対して、タスク時間を計測(ワークショップ参加者は初心者として。)
・その結果からNE比を算出し、現状の問題点をチームで相談し、改善
・改善後のUIに対して、再度別の人を被験者としてタスク時間を測定
・改善前後でのNE比を比べると改善の効果が一目瞭然となる
・たとえばボタンを左右のどちらに置くかなどでも明らかな違いが出ていて面白かった

以上、参加できなかった方も参考にして頂ければと思います。

このNE比の数値が大きいほど、設計者の操作時間と初心者の操作時間の乖離が大きいことになり、何らかの問題がある可能性が高くなります。

各ステップごとにNE比を計算することで、目的の達成の障害となり得るステップを洗い出すとともに、
NE比が高いステップ数を測ることで、タスク全体の操作性能を数値化することもできます。

NEMの何が良いかというと

・ユーザビリティの問題を定量的に測ることができる
漠然とした使いやすい、使いづらいという感覚だけでなく、
達成率や所要時間などと同様に数値として定量的な評価・表現ができるため、
問題箇所を明確にしやすかったり、ステークホルダへの説明の際に説得力を持たせることができます。

・タスクの持つ複雑性を考慮したうえで判断できる
所要時間の長短は、そのタスクの難しさや、考える必要があるかなどによって変わるため、
それだけではユーザビリティの良し悪しを判断することはできません。
設計者のタスクと比較することにより、取り去ることができる複雑性(「テスラーの複雑性保存の法則」を参照)
の部分のみを洗い出すことができます。

という点が挙げられます。

被験者の数やタスクの内容、与える事前知識、設計者のさじ加減など、
厳密に行おうとすると考えなければいけない点もありますが、
手法自体はシンプルで分かりやすいため、まずは試してみるというのもアリだと思います。

ですが、サイトの開発における複雑性の持たせ方については、
別の見方もできるなと思ったのでメモ。

画面の設計においては、多かれ少なかれビジネス上・デザイン上の制約がある場合もありますが、
それ以外の部分については一般論や経験則・利用状況の考慮などによって、
画面の設計を進めていくことになると思います。

その中で、きちんと作りこむか、少々手間でも運用でカバーするかという判断を行う場合は多いのではないでしょうか？
費用やスケジュールを考慮すると、この機能は簡易的なものにして、毎回入力する際になど…。

これは人-機械という面で見ると、人に複雑性を持たせているといえますが、
運用-開発という面でみると、運用に複雑性を持たせているともいえます。
また、一般的に複雑性が大きくなればコストも大きくなります。

人-機械と運用-開発。結局は同じことを言っているのですが、コスト＝費用という比較において
どちらを選択すべきなのか、より分かりやすくなるかなと思いました。

ユーザビリティ関連の活動に深く触れられていなかったためしばらく放置してしまいました。

まずは、ふと考えたことから少しずつ更新していけたらと思います。改めてよろしくお願いします。

本日2009/11/11は2009年のWorld Usability Dayです。

worldusabilityday2009

今年のテーマは「Designing for a Sustainable World」で、日本ではHCD-Net主催でイベントが開催されます。

World Usability Day 2009 Japan (HCD-Net)

私は今年は参加できないので残念ですが、参加した方のレポートお待ちしてます。

参考までに、過去のWorld Usability Dayに関するエントリーはこちら。

World Usability Day 2008報告

World Usability Day 2007 Japan

デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計 長谷川 敦士 (監訳) 浅野 紀予 (監訳) 児島 修 オライリージャパン 2009-05-25 売り上げランキング : 2788 Amazonで詳しく見る by G-Tools

この本は、タイトルの通り、ウェブナビゲーションについてメカニズムと表現の両面から取り扱っており、以前からある白熊本とあわせて読むと情報アーキテクチャについて網羅できるとのことです。

私はまだ手に取れていませんが、興味があるので紹介してみました。

デザイニング系で「デザイニング・インターフェース」も是非。

site-it!はウェブサイトの典型的なページを付箋のような小さな紙に印刷したもので、サイトの構成を検討する際などに使えるツールとなっています。

以前、画面遷移図について「画面遷移図の書き方」で、画面名だけ書いた箱ではイメージしづらいということを書きましたが、site-it!はまさにそ問題を解決するツールです。

上部に画面名を書き込んで並べれば画面遷移図・サイトマップになりますし、模造紙を下に敷いて、線をつなげても良いと思います。もちろん紙なので並べ替えや移動も簡単です。

また、紙ベースであるため、打ち合わせの場でクライアントを巻き込んで検討するのに便利ですし、典型的なページから選ぶというやり方をすることによって、おおまかなサイト構成を検討する段階で、各画面内の細かい部分に話が及んで議論が発散することを防げます。

※最初は、中身が空のバージョンも作っておいて、好きに書けるようにしようと思ったのですが、あくまで「選ぶ」ことに意義があるということで止めました。

また、ご紹介している写真のsite-it!は画面名を書くエリアの左下に、T(トップページテンプレート)やF(フォームテンプレート)などのIDを付けて、呼びやすくしたり、画面遷移図として資料に清書する際に、「問い合わせフォーム(F)」と書くことによって、どのパターンなのかの紐付けができるようにしてみました。

ですが、ID付与による問題として、トップページはTを選ばなければいけない、サービス紹介ページはSを選ばなければいけないというような固定観念が出てきてしまって、他のものを選べないというようなことが発生してしまいました。Tと言うとすぐに「あぁ、あのトップページテンプレートだな」というイメージがわくのは便利なのですが、そのことが逆にイメージの幅を狭めてしまっているため、もう少し分かりづらいID付けのほうが良いのかもしれません･･･。

site-it!のテンプレートや使い方については今後もプロジェクトで色々試してみたいと思います。

皆さんも是非自分だけのsite-it!を作って試してみてください！

都道府県選択であれば、北海道から沖縄までの地域順、国名選択であればアルファベット順など、ルールに従ってソートされていることがほとんどですので、そのルールさえ分かっていれば、ある程度簡単に探すことができます。また、optgroupタグを利用するなど、標準の仕組みでできる改善策もあります。

とはいえ、いくら分かりやすくなるような工夫をしても、セレクトボックス自体がそもそも一覧性が低いため、ユーザビリティの改善にも限度があります。

そんなとき、セレクトボックスを分かりやすいパネル表示に拡張してくれる、selectable.jsはいかがでしょうか？

このスクリプトを適用すると、通常のセレクトボックスの見た目が変わり、一覧性の高いパネル表示に変更されます。仕組み自体はセレクトボックスを利用して、見た目だけ変えるしくみですので、サーバーサイトのプログラムの変更は不要で、導入も比較的容易です。

■リンク

公式サイト

selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js

デモ

あり

ダウンロード

こちら 

■情報

ライセンス

MITライセンス

関連言語

JavaScript

関連ライブラリ

jQuery

（小さい画像ですみません。興味ある方個別に連絡ください。）

概要は以下の通り。

サイト戦略は顧客側で管理されていることが多く、画面設計を行う開発チームまで全ての情報が伝わることは稀である。

しかし、根拠のある画面設計を行うには、サイトの目的・想定ユーザー像などの情報が必要となる。

したがって、間を埋める資料としてサイトコンセプトを定義しておく。
サイトコンセプトには、サイト運営者の目的と利用者の目的、及び利用者の特性などの情報を記述しておく。

サイトコンセプトからユーザーセグメント及びペルソナの検討を行い、シナリオを記述する。

一方、一般的なガイドラインを記述した共通UIガイドラインに、サイトコンセプトによる判断基準を適用した、プロジェクトUIガイドラインを作成し、画面設計の足がかりとする。

シナリオやUIガイドラインを元にサイトマップや画面レイアウト(①)を検討し、画面設計(②)、ビジュアルデザイン(③)と作業を進めていく。

①②③の各段階でユーザビリティテストを実施し、問題点を解決していく。

ペルソナ、シナリオの作成や、ユーザビリティテストなどをどこまでしっかりやるかはプロジェクトによりけりだと思いますが、以前「サイトコンセプトの重要性」という記事で書いたように、サイトコンセプトの定義だけはしっかりやっておいた方が良いです。