11396822921_HzvQj

2010年09月4日に早稲田大学西早稲田キャンパスで「XP祭り2010~アジャイル学園祭」が開催されました。数あるイベントの中でも主催者、発表者、参加者の垣根が限りなく低いこのイベントの模様を、4名のレポーターの方に振り返っていただきました。

なお、本レポートEM ZERO Vol.6に掲載したものの完全版です。

石丸愛子さんのレポート

「UX のツクリカタ~よりよいユーザー体験構築のために検討するべきこと」((株)セカンドファクトリー 東賢さん)

株式会社セカンドファクトリーの東賢さんによるセッション「UXのツクリカタ~よりよいユーザ体験構築のために検討するべきこと」に参加しました。そのときの様子をお伝えします。

UX

UXって?

まず、「UXって?」というところからセッションは始まりました。UXとは、ユーザーエクスペリエンスのことで、ユーザの体験、経験、それによって得られる満足も含めた言葉とのことです。産業革命以降、他の商品との差別化のためにUXが考えられるようになってきたそうです。また最近では、iPhoneが登場しUXの基準が上がったそうです。ユーザからの要望が“iPhoneのように”と表現されるようになってきたことから「iPhoneは形容詞になった」と仰ってました。

UXというキーワードは少し前に流行し、現在は安定期に入ってきているとのことです。一時的な流行を経た今はノウハウが蓄積され、UXに取り組むにはいい時期のようです。

ガスコンロで知るUX―対応付け

UXというと横文字で難しい印象がありますが、例えばガスコンロでどのツマミを回せば点火・消火できるのか?ここにガスコンロという道具を通じてのUXがあります。次の図をご覧ください。ガスコンロを表しています。

ガスコンロ1

今、右奥のコンロの火を止めたいとして、あなたは何番のツマミを操作するでしょうか?会場でこの質問がされたとき、回答は③番と④番に分かれました。

確かにどちらともとれますよね、つまり半数ほどの人は誤った操作をしてしまうということです。鍋から火が出ているようなときにこの誤操作は命取りです。

では次のように配置されていたならどうでしょうか?

ガスコンロ2

これならすぐに③だとわかります。

このようにコンロとツマミの対応をわかりやすくするUI設計を「対応付け」と呼ぶそうです。

可視性、アフォーダンス、フィードバック

その他にも

  • 可視性(フォントが小さすぎて読めないというようなことがない)
  • アフォーダンス(ボタンはボタンらしい形をしていて、見るからに押せそう)
  • フィードバック(ボタンにマウスを合わせたら、マウスポインタが指の形に変化する)

などUI設計の土台となる概念を説明されていました。火をつけるという機能がしっかり実装されているだけでは、ユーザが満足するとは限らないということです。

UXとユーザの満足度

こうしてお話を伺っていると、UXはユーザの満足度にとても密接に関わっているように思います。しかし、その一方で「開発の現場でUIが軽んじられており、何ページにもわたるデータ設計書が作成される一方でUI設計が半ページしかないこともある」そうです。例えば、DBが正規化されているかどうかなんてユーザには“知ったことじゃない”わけで、ユーザの満足について考えたとき、彼らが直接接するUIというものに開発者ももっと目を向けるべきなのかもしれません。

では、どうすればより良いユーザ体験を届けられるのか?東さんは良いUXの例としてMicrosoft PowerPointを取り上げました。PowerPointには、良いUXに大切な3項目

  • ビルディングブロックセット
  • インタラクションガイド
  • 実行可能なサンプル

が揃っているとのこと。

ドラッグ&ドロップですぐに使える部品(ビルディングブロックセット)があり、マニュアルを見なくてもPowerPoint自身が「クリックしてタイトルを入力」というようにガイドしてくれて(インタラクションガイド)、ネット上などに他者の作成したファイルが存在する(実行可能なサンプル)ので、みんなプレゼンツールにPowerPointを選択するのだと語られていました。

「マニュアルで操作を説明するのはUI開発者には屈辱的…」というようなことも仰られましたが、確かに操作方法が直感的で習わなくともだいたい操作できるというのは、使っていても気持ちがいいですものね。

コンセンサス形成

それから、異なる文化を持つステークホルダ間でのコンセンサス形成についても言及をされていました。ユーザ部門とシステムの開発部門ではそれぞれ思いが異なり、ユーザ部門は直前まで見た目の調整を図りたいのに対し、システム部門は早い段階でフィクスさせて安定稼動させたいと考えているとのこと。

そのギャップがリリース直前でのドタバタに繋がってしまうので、

  • 早く可視化する
  • コンセプトや意図を伝える
  • 見た目の変更を表層部に局所化する

といった点に気をつけて開発するのが大切だそうです。

早い可視化のためには、「紙でもいいので早い段階でユーザに見せる。Adobe Flash Catalystのようなデザインツールも有効」とのことでした。

コンセプトを伝えることが大切な例として、

「こんなコンセプトでこんなことを表現するためにこの線は青いんです、と伝えないといけない。そうでないと部長が赤が好きだからという理由で赤く変えられてしまう」

というお話には思わず笑ってしまいましたが、現実にありそうなことですよね。

また、いざ変更が入った際にテスト済みのロジックにまで手が入ることがないようUI部分を分離しておくなど、アーキテクチャでステークホルダ間の溝を埋めていこうとお話されました。

設計パターンのカタログ

最後に、設計パターンのカタログとしてQuince(http://jp.quince.infragistics.com/)というサイトをご紹介いただきセッションを終えました。

余談ですが、さすがUXを題材とされているだけあって、プレゼン資料の見せ方がとても鮮やかでした。ページのプレビューが並んでいるような画面からスーッと該当箇所にズームしたり、動きが滑らかで見やすかったです。画面上にDocZoomと書いてあり、どこのツールかしら?と思っていたら、東さんの所属されている株式会社セカンドファクトリーから出されている「次世代ドキュメントビューワー」のようです。

なるほど、有言実行ですね。素敵なUXをありがとうございました。