インタラクティブなプロトタイプ。 現在のユーザーインターフェイスモデル、パート3。プロセス機能

私はすでに分類インタラクティブプロトタイプを作成する2つの主な方法について書きました。 ほとんどの場合、カラープロトタイプを作成します。 実際、これは、JavaScriptの相互作用を含む視覚的なデザインに基づいたHTMLベースのページテンプレートの通常のレイアウトです。 違いは、これらのテンプレートが何度も変更および補足されることです。





作成プロセス



ページスキームに基づく自動プロトタイピングツール-同じAxure RP ProIntuitect-私は使用しないようにしています。 それらは典型的なタスクのために研ぎ澄まされているので、非標準的なことをする必要がある場合、それらの利点はすべて失われます。 しかし、xからcookingを調理する複雑さが追加されます。 したがって、標準のHTMLレイアウトプログラムを使用して手動でプロトタイプを作成しようとします。



プロセスは非常に簡単です。 タイプセッターは、入力、出力、つまりHTMLファイルのセットで一連のデザインレイアウトを受け取ります。 ここでペイントすることはあまりありません。HTMLレイアウトに関する記事を参照した方が良いでしょう。 ただし、プロトタイプを作成する際に重要な点がいくつかあります。

  1. ファイル名をよく考えました 。 作業を開始する前に、インタラクティブプロトタイプファイルとその名前のリストを最もよく説明します。 パンくずリストの原則(「catalog.html」、「catalog-category.html」、「catalog-category-item.html」など)に従うようにします。 また、ファイルリストでは操作が簡単です。多くの場合、特定のプロトタイプページを表示する必要があります。 また、インターフェースの接続性が確認に役立ちます。
  2. レイアウト中のページのリンク 。 プロトタイプは、使いやすさのテストの利便性のために相互接続され、それで動作する必要があります。 ページが構成され、リンクがそのページにつながる場合、ページのURLが含まれている必要があります。 ささいなことですが、すぐにやらないと、レイアウトの終了後、多くの時間を費やす必要があります。 プロトタイプ自体は通常レイアウト設計者が行いますが、設計者がページをバインドする方が優れています-彼はインターフェースの相互作用について多くを知っています。
  3. 実際のコンテンツ 。 顧客とユーザーの両方がプロトタイプをよりよく認識できるようにするには、lorem ipsumや代替画像ではなく、テストデータを使用することをお勧めします。 最近、私はデザインの開始前でもそれらを調理しようとします。 これは、システムの使用のコンテキスト、その個々の機能をよりよく理解するのに役立ちます。 はい、はるかによく知覚されます。 さらに、同じニュースタイトルの性質により、開発チームとデザイナー自身の両方にとってプロジェクトの本質を理解するのは簡単です。
  4. コードの妥当性と美しさにあまり夢中にならないでください 。 プロトタイプは頻繁かつ迅速に変更されるため、明確なコードに時間を費やす必要はありません-これはプロセスを遅くするだけです。 プロトタイプでの積極的な実験が終了したらすぐに、HTMLをきれいに覆すことをお勧めします。




プロトタイプ使用



プロトタイプの準備が整うと、その議論とユーザビリティテストが開始されます。 そして、それは変更がパックで来ることを意味します。 さらに、インターフェイスの1つの要素を正確に修正する必要があるかどうかは、常に明確ではありません。 多くの議論と一連のドラフトの後でも、少なくともいくつかの代替ソリューションがあります。 議論の余地のあるすべての代替案を実装するのが最善です-ディスカッション用のアイテムがあるプロトタイプページのいくつかのバージョンを準備します。



夢中になるオプションがあります。 もちろん、すべての変更を加えて、ドキュメントパッケージ全体(ページレイアウト(ワイヤフレーム)、デザインレイアウト、HTMLテンプレート、ユーザビリティテストスクリプト)を更新する必要があります。 ただし、各編集->設計->レイアウト->ユーザビリティテストごとに設計サイクル全体を実行すると、多くの時間を費やすことができます。 その場合、より重要な決定を下すには十分ではありません。 したがって、これが長期プロジェクトではなく、デザイナーやデザイナーの軍隊がいない場合、より良いインターフェースを優先してドキュメントの整合性を危険にさらす必要があります。 どこかで、サイクルの段階をどこかで単純化し、どこかで-投げます。 より正確には、次のサイクルに向けて出発します。 主なことは、少なくとも変更のジャーナルを保持することです-そのため、実験の終了後に、ドキュメントにそれらを加えます。



ユーザビリティテストプロセス自体については、別の記事で説明するのが最適です。 さらに良いことに、 Vlad Golovachの優れたマニュアルを参照してください 。 仕事の途中で、同僚や知り合いに中間結果を表示する方が便利であることに注意してください。 たとえば、優れたピアレビュープラクティスがあります。 ただし、テストは、最後またはいくつかの重要な中間点ですでに行われている必要があります。



もう1つの重要なポイントは、プロトタイプのサポートです。 最初のパート説明したように、ドキュメントのソースの1つとしてその使用を計画している場合は、常に最新バージョンのインターフェイスを反映する必要があります。 開発者はしばしば最後の手段としてそれを参照します。 そして、そこに何か古いものがある場合、すでに動作しているバージョンでは時代遅れになる可能性が非常に高くなります。 これは、すべての変更を修正して、永久レイアウトデザイナーをプロトタイプに割り当てる必要があることを意味します。



プロジェクトのインターフェイスの標準であるページレイアウト(ワイヤフレーム)、デザインレイアウト、またはインタラクティブプロトタイプを最初に決定する必要があります。 3つのレイヤーすべてを維持するのは費用がかかり、マネージャーは3つのプロセスすべての適切な品質管理に十分な時間を持ちません。 ただし、結果として、多くの場合、「プロトタイプのヘッダーとフッター、ページの本文をワイヤフレームで見る」ことが判明しています。 これは、デザイナーが常に存在することによって大部分が解決されます。




主なことは、なぜ誰のためにインタラクティブなプロトタイプが作られているかを忘れないことです。 そうすれば、プロセスの参加者にとっては高価なおもちゃではありませんが、プロジェクトの作業の多くの段階で大いに役立ちます。 そして、紙に約束するだけでなく、具体的なものを手元に置いて、アイデアを投資家やパートナーに販売する方がはるかに簡単です。



インタラクティブプロトタイプの分類に関する資料の最初の部分と、 作成のプロセスへのアプローチの説明を含む2番目の 部分を読んでください。



オリジナル: インタラクティブプロトタイプ。 現在のユーザーインターフェイスモデル、パート3。プロセス機能




All Articles