bookslope blog

「ワイヤーフレーム」「プロトタイピング」という言葉は仕事がら慣れ親しんだものではあるのですが、意外と突き詰めて考えると奥が深いことに驚きます。

先日参加してきた「IA Summit 2009」のワークショップセッション「Integrating Effective Prototyping into Your Design Process」でFred Beecher氏が「プロトタイプは2枚以上あって相互に行き来が可能なもの」と話されていました。たしかに「ワイヤーフレーム」と言うと1枚絵のようなものを想像する人も中にはいるかも知れません。
ワイヤーフレームを絵としてとらえるのか試作品としてとらえるのかで解釈の違いが発生します。これもずっとある課題ではあるのですが、Fred Beecher氏のセッションでは「Visual (絵)」と「Functional (機能)」の2軸で整理してありましたので参考に取り上げてみます。

図内の略称は、H: High/L: Low/F: Functional/F: Fidelityです。

左下の「LVF/LFF」が一番抽象度が高くて、右上の「HVF/HFF」が最終形に近いという感じでしょうか。ほとんどのワイヤーフレームは、実はこの左下にある「LVF/LFF」のような気がします (つまりWireframe Sketches)。ただ求められるのは右上の「HVF/HFF」だったりすることもあると思います。ここの認識が関係者により違っていたらマズイので、はじめから認識の擦り合わせのために成果物サンプルは用意しておくほうがいいでしょうな。

右上: HVF/HFF (High VIsual Fidelity/Low Functional Fidelity)

・既存システムに新機能を盛り込む際のユーザーテストに使える
・一般的なユーザーとのテストに使える
・離れた開発チームとのドキュメント共有に使える

左上: HVF/LFF (High VIsual Fidelity/Low Functional Fidelity)

・ビジュアルデザイン上のユーザビリティの課題の発見に使える
・一般的なユーザーとのテストに使える

右上: LVF/HFF (High VIsual Fidelity/Low Functional Fidelity)

・遠隔によるテストに使える
・ステークホルダーとの間でUXデザインやUX開発要件 (方向性) の確認に使える
・離れた開発チームとドキュメントの共有に使える

左下: LVF/LFF (High VIsual Fidelity/Low Functional Fidelity)

・足りない機能の発見に使える
・ワークフローの問題の発見に使える
・いいUXコンセプトと、そうではないUXコンセプトの切り分けに使える

もちろん案件や提出/支給相手にもよるのでしょうけど、ボクのまわりではそれほど見た目としても機能としても求めていないような気がします。その理由は、 その後の工程で結局のところ補完 (というかカバー) していることが言えます。WF単体のクオリティ (?) が高くてもその後の工程でそれをうまく (効率よく) 受け取れないと、プロジェクト全体のクオリティは下がります。
例えば、ワイヤーフレームやプロトタイピングの専用ツールでWebデ ザイナーがクリッカブル情報をせっせとすべて埋め込んだとしても、その後のHTMLコーディングで効率よくそれが拾いだせなければ、とどのつまり二度手間 になります。二度手間である以上に、Webデザイナーが埋め込んでいる工数はかなり無駄になってしまうとも言えます。

そう考えると、そのあたりの折り合いを全体としてどうつけていくのかがポイントになります。

このセッションのスライドがすでにSlideshareにあがっていましたので詳細は下記をご覧ください。

Fred Beecher氏は「Axure」についてもワークショップを開いていたりするようですが、これに関係して「ワイヤーフレーム」や「プロトタイピング」に関するエントリーがあったのでご紹介します。

まず「Get Wireframing」という下記エントリーですが、すごいですね。よくまとめたなと感心してしまいます。

• Get Wireframing: The All-In-One Guide | Hi, I’m Grace Smith

内容は下記のアウトラインになっているので、すべてがいいリファレンスになりますな。
「Article」などは個別に集めてたまに読む程度だったのですが、まとまっているのでいつでも参照できます。

• Techniques
• Tools
• Wireframe Examples
• Wireframing Articles of Interest
• Paper Prototyping
• Useful Wireframing Resources
• Kick Ass Books

次に「16 Design Tools for Prototyping and Wireframing」ですが、これはツールを16個あげてそれぞれをレビューしています。

• 16 Design Tools for Prototyping and Wireframing [Design Practice]

と、この2つのエントリーだけでもリストアップしてみると24ものツールがあることになります。
もちろん「multifunctional applications (多機能なツール)」としてしまえば、世の中のほとんどのツールが含まれてしまうかも知れませんが。

これからツールを検討しようとしていた場合、このリストアップは参考になるのではないでしょうか。ボク自身触ったことがあるのはごくごく一部のような気がしますので時間のあるときにでも試してみたいと思います。

1. Visio – Visualize, explore, and communicate complex information.
2. OmniGraffle Pro – Create diagrams, process charts, quick page layouts and website mockups
3. Axure RP Pro – Rapidly create wireframes, prototypes and specifications for applications and web sites.
4. iRise Pro
5. Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
6. SmartDraw
7. MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
8. Balsamiq Mockups – Easily and quickly created rough mockups with predefined elements
9. Lucid Spec
10. ConceptDraw Pro
11. iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
12. Go Analogue
13. PowerPoint or Keynote
14. Adobe Fireworks
15. HTML
16. Adobe Flash
17. Fluid IA – Agile UI Prototyping
18. OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
19. Justinmind – Design a wireframe and test their web usability
20. EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
21. Gliffy – Create website wireframes and share web mockups with anyone.
22. Jumpchart – Online collaborative wireframe
23. Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
24. Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.

gotomedia : news & events : gotoreport may 2005
http://www.gotomedia.com/gotoreport/may2005/index.html

にPDFでのプロトタイピングの記事がありました。

Interactive Prototyping I: Easy PDF Prototyping
http://www.gotomedia.com/gotoreport/may2005/news_0505_usable1.html

Interactive Prototyping II: Building a PDF Prototype
http://www.gotomedia.com/gotoreport/may2005/news_0505_usable2.html

Boxes and Arrows: What an IA Should Know About Prototypes for User Testing
http://www.boxesandarrows.com/archives/what_an_ia_should_know_about_prototypes_for_user_testing.php

プロトタイプについてはいろいろと記事がありますね。
この記事はそのプロトタイプについてにユーザーテストの記事のようです。

# きちんと読まなければ。

IAwiki: ProtoTypes
http://www.iawiki.net/cgi-bin/wiki.pl?ProtoTypes

久しぶりに「IAwiki」を見たら、プロトタイプに関してのリンク集が更新されていました。

Articles & papers

• Notes on Design Practice: Stories and Prototypes as Catalysts for Communication

• Cooper: The Perils of Prototyping
• The Art of UI Prototyping
• Prototypes within the design process – picking up where scenarios leave off
• OCLC: Overview of prototyping; differences between “low-fi” and “high-fi”
• UIE’s articles on paper prototyping
• InfoDesign: Some useful templates to print on stickers for paper prototypes

Simon Walton’s Page of news, views and other oddments: Prototyping and web interface design
http://kmetp-waltons.blogspot.com/2005/01/prototyping-and-web-interface-design.html

にプロトタイピングとインターフェースにおける有益なリンク集があるのでメモっておこう。

「[書籍] ペーパープロトタイピング――最適なユーザインタフェースを効率よくデザインする」にもプロトタイプのことを書きましたが、ウェブ制作の現場でプロトタイプのツールはどういうのがいいのか日ごろ悩んでたりします。

人机交互論: パワポでプロト

組み込みアプリにピッタリ
パワーポイントがプロトタイプ制作ツールとして優れている点はいくつも挙げられます。

• 誰でも持っていて、誰でも使えます。
• スライドマスタが設定できます。
• マルチメディア機能が豊富です。
• スライドの切り替えのタイミングをコントロールできます。

とパワーポイントでプロトタイプをつくるメリットをご紹介されています。
また、ここからリンクされてある下記サイトではプロトタイプのツールに関してのレポートが公開されています。これは必見。

GUUUI – Results from a survey of web prototyping tools usage
http://www.guuui.com/issues/01_03_02.php

「人机交互論」さんトコの補足を引用しておきます。

2002年6月に行われたプロトタイピングツールに関するオンライン調査の結果です。３大ツールはHTML tool(Dreamveawerなど)が28.3%、Diagramming tool(Visioなど)が24.5%、Graphic design tool(Photoshopなど）が18.9%でした。以下、PowerPointは9.4%、「紙」は7.5%でした。なお、この調査は「ウェブ」のプロトタイピングツールの調査です。

という感じ。

某MLにて黒須先生から書籍の紹介がありましたので引用します。また、この書籍は黒須先生が監訳を担当されたとのことです。

本書は、米国などでは既に一般的な手法になっているにもかかわらず、日本ではまだきちんとした形で紹介されていないペーパープロトタイピングという手法について、それを用いたユーザビリティテストのやり方や、ビジネスの現場での実践的ノウハウを含めて説明したものです。その意味で、監訳を担当しながら、私自身、かなり勉強になりました。

デザイン、ユーザビリティ、ソフトウェアやWEBの開発、心理学、質的アプローチ、生産性などに関心のある方には是非ともおすすめしたいと思います。よろしくお願いいたします。

ということなので、早速購入しました。

「ペーパープロトタイピング」についてはいろいろと記事もあげているとおり以前から興味があります。通常プロトタイピングといえばHTMLやFlashの場合かなり完成形に近いものを想定すると思いますが、このペーパープロトタイピングは思考過程で (というか) 設計過程で簡単にできることが最大のメリットです。

結局、モノづくりはスクラップ&ビルドを繰り返していくことが必然だと思うので、そのスクラップ&ビルドのリピートがどのプロセスから発生するのか、余計なリピートをしていないかが最大の問題になると思います。

ペーパープロトタイピングの手法を導入することで、早い段階から問題点を抽出でき後行程での負荷を軽減するのであれば積極的に導入したいものです。

とりあえず、わたしも実践まではできていませんが、いろいろと試行錯誤してみたいと思います。

「[IA] Paper Prototype Photos From the Training Film」と同じことかも知れないけどペーパープロトタイピングについての書籍を発見。

Carolyn Snyder著『Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces』 です。

これもどっかで翻訳されてたりして……。

「[IA] ペーパー・プロトタイピング」も書いたけど、実際にペーパー・プロトタイピングをわたしはしたことがありません (少なくとも明確にそういったフローがあったことは)。

ただ非常に興味が沸くところではあるので気になっていたりはします。

ということで、実際にペーパー・プロトタイプをテストをしているハウツー・トレーニング・ビデオがあるらしいのでご紹介。ビデオというかDVDで購入できる模様。

Paper Prototyping: How-To Training Video from Nielsen Norman Group
http://www.nngroup.com/reports/prototyping/

Paper Prototype Photos From the Training Film (32 minute DVD)
http://www.nngroup.com/reports/prototyping/video_stills.html

ここはひとつ試しに購入してみよっと。