LO-FI（非対話型）UIプロトタイプを作成するにはどうすればよいですか？

https://softwareengineering.stackexchange.com/questions/8560

prototyping

16-10-2019
|

質問

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

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

開発者が非対話的なUIプロトタイプを効率的に作成するための推奨方法は何ですか？

なぜ？

私はいくつかのペン、紙、ポストイットのノートバージョンを試しましたが、それらはリードバルーンのようにダウンしました（おそらく私の描画スキル）。最終的に私は使用しましたバルサミク, 、これまでのところ、ほとんどのユーザーに好まれており、プロトタイプです。残念ながら、一部の人々は、最初の人は、いくつかのLO-FIプロトタイプを介してアプリケーションが何をすべきかについてのアイデアを得る必要があり、何かにコミットする前に「画面上で何かを見たい」という考えにまだ問題を抱えています。

解決

私はホワイトボードが好きです。

全体を再描画せずに決定を下すにつれて、変更が容易になります。他の（近くの）開発者と簡単に共有できます。 Sticky-Notesまたは他の色を使用して注釈を付けるのは簡単です。

他のヒント

バルサミクモックアップは通常、最初の呼び出しポートであり、ペンと紙を使用して再利用可能なのとほぼ同じくらい速いです。

さらに、必要に応じて、ある程度のインタラクティブ性を追加して、たとえばページをリンクすることができます。

http://balsamiq.com/

鉛筆プロジェクト素敵でシンプルなモックアップを行うFirefox Addinです。

Pencilは、デスクトップからモバイルプラットフォームに至るまで、さまざまな種類のユーザーインターフェイスを描くためのさまざまな内蔵シェイプコレクションを提供しています。 2.0.2から、鉛筆はAndroidとiOS UIステンシルがプリインストールされたもので出荷されます。これにより、簡単なインストールでアプリのプロトタイプを開始することがさらに簡単になります。

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

MSペイントとビジュアルスタジオの組み合わせを使用しています。 VSを使用して、必要なすべてのコントロールをフォームにドラッグ/ドロップし、MSペイントにスクリーンショットして、見た目が好きになるまで再配置します。

これにより、シンプルで馴染みのある、無料で、常にアクセス可能なツール（私にとって）を使用してUIをモックアップできます。クライアントは、アプリケーションが終了するとおそらくUIを見ることができます。さらに、多くの場合、VSは私のために私のプロジェクトの始まりを含むことになります。

編集： トビーの答え私を導いてくださいバルサミク, 、そしてそれが今では、UIモックアップが他の人に提示するための私の主要なツールです。

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

あなたは良い方法を使用しているように聞こえますが、あなたは人々が迅速なプロトタイピングの有用性を受け入れることを抵抗にぶつかります。誰もがコーディングが大好きですが、30分で、彼らがまだJScrollbarsと戦っていて、あなたが12のモックアップを生成した場合、彼らはこれらのツールの強さがあることを理解するかもしれません 迅速な反復.

そうは言っても、さまざまな低FIアプローチには強みが異なります。

ホワイトボードプロトタイピング 誰でも参加できるので便利ですが、それはアイデアを根付かせるのに役立ちますが、それは単なるディスカッションツールです。古いマーカーを消去するのが難しくなっているという理由だけで、デザインを反復する場合は、さらに一歩をさらに一歩踏み出します。 ;）
ペーパープロトタイピング 人々はそれが非永続的であり、変化を受け入れていることを理解しているため有用です。そして、あなたは迅速に反復することができますが、それでも非常に良い結果を得ることができます。ペーパープロトタイプで一部のユーザーとユーザビリティテストを行うと、非常に迅速にデザインに関する優れたフィードバックを得ることができます。紙の上でインターフェイスを見て感じることができるとき、人々は本当に婚約します。
バルサミク 再利用可能な紙のプロトタイプを迅速に作成するためのショートカットです。スクリーンショットを印刷して、ペーパープロトタイプとして使用します。私もそれを使用します その間 ホワイトボードのプロトタイピングと類似しているように、アイデアをモックアップするのに役立つ会議。また、このためにVisioとOmnigraffleを使用しました。
プロトタイプをカットして貼り付けます 既存のデザインを繰り返すのに適しています - スクリーンショットを獲得し、画像エディターで切り刻み、新しいコントロール（Balsamiqまたは他の場所から）と混ぜて一致させます。もう一度、あなたの目標は、プロトタイプの迅速な反復であり、見た目が良くないものではありません。

私はユーザーとプロトタイピングをしたことはありません。私たちが持っているユーザーデータに基づいて、設計チームでそれを行います。 ユーザーはデザイナーではありません;それらをデザイナーとして扱うと、水っぽいトマトソース、苦いコーヒー（マルコムグラッドウェルに感謝）、ホーマーカーが扱われます。デザインにユーザーの入力を収集し、それを使用してデザインチームでデザインを改良します。

私の最初のモックアップは常に鉛筆と紙またはホワイトボードですが、基本が釘付けにされると、通常はHTMLに移動します。「ヘッダー」、「バナー」、「イメージ」、「チャート」などと単純に言うプレースホルダー画像がたくさんあります。物事をいくらかsy然とするためのいくつかの簡単なCSSと私は終わりました。コントロールに少しJSを使用すると、機能の類似性が得られる可能性があり、人々は「それをより良くする」ようです。

これに関する唯一の問題は、私がおそらく世界最悪の生きているUIデザイナーであり、時には私が単に要件を収集していることを人々に思い出させなければならないことです。私はしばしば背景をピンクか何かに設定するので、誰かが「ピンクでなければならないのか」と尋ねるたびに「これは単なるモックアップ、本物は違うように見える」（または「デザイナーと話し合う必要がある」）でカウンターすることができます。

最初にペンと紙を使用し、次にUIを数回描いた後、PowerPointで2回または3回作成しようとします。実際のエディターに入る前に5つまたは6つの反復があると、実行不可能なUI（ユーザーがまだXを見ていない場合にテキストボックスXに基づいてコンテンツYを生成するなど）を削減するのに役立ちます。私はそれをすぐに愚かなものを取り出すチャンスだと思っています。

Pen＆Paper / Whiteboard、およびVisioなどを使用することもできます（Visioには、一般的なコントロール用のUIテンプレートが付属しています）。時々、私たちが持っている既存の（類似の）UIのショットを撮り、Paint.netなどのペイントプログラムを使用して新しいUIをカットして貼り付けます。

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

私はSencha Ext Designerで同じことをしようとしましたが、Ext JSのレイアウトシステムは使用が困難であり、アイデアを迅速に反復するための利便性というよりも負担のように感じました。

私はいつも同じアプローチを使用しているわけではありません。私が使用する手法のいくつかは（周波数の大まかな順序で）です：

ホワイトボード（インタラクティブ/ディスカッションのプロトタイプ用。その後写真を撮ってください！）
ラドスタイルのGUIデザイナー（Visual Studio、NetBeans、Delphi）
- これが上手くなり、実際に「Windows、Widgets、Forms」アプリケーションのプロトタイプを作成する最速の方法の1つになります。ボーナス：プロトタイプは、どれだけ早く一緒に投げるかによって、本当にかなりプロフェッショナルに見えることがあります。プロトタイプが承認されると、彼らは時々、本物を作成するための起動点として役立つことさえあります。
紙とペン/鉛筆（通常は自分にブレーンストーミングするため）
ディスク上の静的HTML/CSS/JSファイル
- WysiWygの設計アプリケーションはここでは痛くないと思いますが、私は通常、生のHTMLをハックするだけです。とにかく、私はこれらの多くをしません。
ベクトル描画ツール - イラストレーター / Inkscape / Visio / PowerPoint / Impress
ラスターグラフィックツール - Photoshop / Gimp
ASCIIアート;-)

ライセンス： CC-BY-SA と帰属

所属していません softwareengineering.stackexchange