lo-fi（非インタラクティブ）UIプロトタイプを作成するにはどうすればよいですか？

現在、いくつかの基本的なプロトタイプを一緒に投入する作業に取り組んでおり、一部は要件を収集し、一部は最終的なUIを設計しています。

現時点では、ポストイットノートを使用して画面を構築しようとしています。黄色のノートは情報、ピンクはアクション（ボタンまたはメニュー）です。情報を簡単に移動、削除、追加できるという考えです。しかし、私はもっと効率的な方法があると確信しています。

開発者が非インタラクティブなUIプロトタイプを効率的に作成するための推奨される方法は何ですか？

なぜ？

ペン、紙、付箋紙のバージョンをいくつか試しましたが、それらはリードバルーンのように下がりました（おそらく私の描画スキル）。最終的に私はBalsamiqを使用しましたが、これは今のところほとんどのユーザーに好まれており、プロトタイプであることがわかります。悲しいかな、一部の人々は、最初にいくつかのlo-fiプロトタイプを介してアプリケーションが何をすべきかを理解し、何かにコミットする前に「画面上で何かを見たい」という考えにまだ問題を抱えています。

私はホワイトボードを好む。

全体を再描画することなく、意思決定を行う際に簡単に変更できます。他の（近くの）開発者と簡単に共有できます。付箋や他の色を使用して簡単に注釈を付けることができます。

Balsamiqモックアップは通常、最初の呼び出しポートであり、ペンと紙を使用するのとほぼ同じ速さで再利用できます。

さらに、必要に応じて、たとえばページをリンクするなど、ある程度の対話性を追加できます。

http://balsamiq.com/

Pencil Projectは、Firefoxのアドインで、シンプルでシンプルなモックアップを作成します。

Pencilは、デスクトップからモバイルプラットフォームまでのさまざまなタイプのユーザーインターフェイスを描画するためのさまざまな組み込みシェイプコレクションを提供します。2.0.2以降、PencilにはAndroidおよびiOS UIステンシルがプリインストールされた状態で出荷されます。これにより、簡単なインストールでアプリのプロトタイプ作成がさらに簡単になります。

人気の描画機能も描画操作を簡素化するために鉛筆に実装されています...

MSペイントとVisual Studioを組み合わせて使用​​しています。VSを使用して、必要なすべてのコントロールをフォームにドラッグアンドドロップし、それをMSペイントにスクリーンショットして、見た目が気になるまで再配置します。

このように、シンプルで使い慣れた、無料でいつでもアクセスできるツール（私にとっては）を使用してUIをモックアップできます。アプリケーションが完了すると、クライアントはおそらくUIを確認できます。また、VSには、プロジェクトの開始点が含まれることがよくあります。

編集： Tobyの答えは私をBalsamiqに導きました、そしてそれは今、UIモックアップが他の人々に提示するための私の主要な選択ツールです。

私はまだMSPaintまたはペン/紙を引き抜いていますが、それは通常、自分の参照用に基本的なUIデザインをスケッチしている場合、または完成した画面に対して2つのオプションをクライアントに提示する場合にのみです（例：「ここにボタンを入れたいですか、ここに入れますか？」）

良い方法を使用しているように思えますが、ラピッドプロトタイピングの有用性を人々に受け入れてもらうことに抵抗を感じています。誰もがコードを書くのが大好きですが、30分たってもJScrollBarsと戦っていて、12のモックアップを生成した場合、これらのツールの強さが急速な反復にあると理解するかもしれません。

そうは言っても、さまざまなローファイアプローチには異なる長所があります。

• ホワイトボードのプロトタイピングは、誰でも参加でき、アイデアの根拠になるので便利ですが、それは単なるディスカッションツールです。古いマーカーを消去するのが難しくなるという理由だけで、デザインを反復する場合は、さらに一歩進んだものが必要です。;）

• 紙のプロトタイピングは、それが永続的で変更の可能性があることを人々が理解しており、すばやく繰り返すことができ、それでも非常に良い結果を得ることができるので便利です。一部のユーザーと紙のプロトタイプでユーザビリティテストを行うと、非常に低コストで非常に迅速に設計に関するすばらしいフィードバックを得ることができます。紙の上でインターフェースを見て感じられると、人々は本当に夢中になります。

• Balsamiqは、再利用可能な紙のプロトタイプをすばやく作成するためのショートカットです。スクリーンショットを印刷して、紙のプロトタイプとして使用しています。また、ホワイトボードのプロトタイピングと同様に、会議中にアイデアをモックアップするのにも役立ちます。これにはVisioとOmniGraffleも使用しました。

• プロトタイプのカットアンドペーストは、既存のデザインを反復するのに適しています。スクリーンショットを取り、画像エディターで切り取って、新しいコントロール（Balsamiqなど）と混ぜ合わせます。ここでも、プロトタイプの迅速な反復が目標であり、見栄えが良いものではありません。

ユーザーとプロトタイピングをすることはありません。私たちが持っているユーザーデータに基づいて、設計チームと一緒にそれを行います。ユーザーはデザイナーではありません。それらをデザイナーとして扱うと、水っぽいトマトソース、苦いコーヒー（Malcolm Gladwellに感謝）、そしてホーマーカーができあがります。設計へのユーザー入力を収集し、それを使用して設計チームと設計を調整します。

私の最初のモックアップは常に鉛筆と紙またはホワイトボードですが、基本がくぎ付けになったら、通常はHTMLに移動します。「Header」、「Banner」、「Image」、「Chart」などと単純に言うプレースホルダー画像がたくさんあります。物事をいくぶん正気にレイアウトするための簡単なCSSをいくつか用意すれば完了です。コントロールに追加された小さなJSは、機能のいくつかの類似点を与えることができ、人々は単に「それを理解する」ようです。

これに関する唯一の問題は、私がおそらく世界で最悪のUIデザイナーであり、要件を収集しているだけであって、完成したものがどのようなものであるかを示していないことを人々に思い出させなければならないことです。背景はピンクなどに設定することが多いので、「ピンクにしないといけない？」「これは単なるモックアップであり、実際のものは異なるように見える」（または「デザイナーとそれについて話し合う必要がある」）と対抗できます。

最初にペンと紙を使用し、次にUIを数回すばやく描画した後、PowerPointで2〜3回作成しようとします。実際のエディターに入る前に5回または6回の反復を行うと、実行できないUI（ユーザーがまだXを見ていなかったときにテキストボックスXに基づいてコンテンツYを生成するなど）を削減できます。私はそれをバカをすぐに追い出すチャンスだと思っています。

ペンと紙/ホワイトボード、およびVisioまたは同様のものを使用することもできます（Visioには、共通コントロール用のUIテンプレートが付属しています）。時々、既存の（類似した）UIのショットを取り、Paint.NETのようなペイントプログラムを使用して新しいUIをカットアンドペーストします。

Delphiでラピッドプロトタイピングを何度か行ったことがあります。これにより、PowerPointやVisioよりもはるかに迅速に、画面レイアウトを簡単にまとめることができます。結果のexeは、依存関係を必要とせずに電子メールに添付できます。私はそれをWebアプリのプロトタイプに使用しているので、プロトタイプが途中で完成したバージョンと混同される危険はありません。

Sencha Ext Designerでも同じことを試みましたが、Ext JSのレイアウトシステムは使いづらく、アイデアをすばやく繰り返し処理するのは、利便性よりも負担のように感じられました。

私はいつも同じアプローチを使うわけではありません。私が使用するテクニックのいくつかは（おおよその頻度で）です：

• ホワイトボード（インタラクティブなプロトタイピング/ディスカッション用。後で写真を撮る！）

• RADスタイルのGUIデザイナー（Visual Studio、NetBeans、Delphi）

  • これをうまく使えば、実際に「ウィンドウ、ウィジェット、フォーム」アプリケーションのプロトタイプを作成する最速の方法の1つになる可能性があります。おまけ：プロトタイプは、どれだけ速く一緒に投げるかによっては、結局はかなりプロフェッショナルに見えるかもしれません。プロトタイプが承認されると、本物を作成するための出発点になることさえあります。
    
    

• 紙とペン/鉛筆（通常、自分へのブレーンストーミング用）

• ディスク上の静的HTML / CSS / JSファイル

  • ここではWYSIWYGデザインアプリケーションが問題にならないと思いますが、通常は生のHTMLをハックするだけです。とにかく、私はこれらの多くをしません。
    
    

• ベクター描画ツール-イラストレーター/ Inkscape / Visio / PowerPoint / Impress

• ラスターグラフィックツール-Photoshop / Gimp

• ASCIIアート;-)