インタラクションフローをどのように文書化しますか？
長年、私は情報アーキテクチャと相互作用設計の概念を文書化するために、Jesse James Garrettの進化したバージョン Visvocabダイアグラムスタイル を使用してきました。
今日は、個々のページに移動する代わりに、ページ内変換をより多く行っていますが、アコーディオンビュー、ライトボックス、オーバーレイ、AJAX包含オンデマンドなど）などです。JJGのVisvocabは10歳になりつつあります。したがって、今日のすべての新しい対話モードに対応するようには設計されていません。
インタラクションフローをマッピングするために、どの図のスタイルまたは表記を使用しますか？
手始めに、t X Mattersからの彼の優れた記事 を見ることをお勧めします==これは、対話を同期として強調表示することを推奨するリッチなインタラクティブアプリケーションを反映するようにJesse James Garretのビジュアルボキャブラリを拡張する方法について説明しています（ページの読み込みが必要です）非同期（ページ内で発生）。記事を引用するには
ページの再読み込みを必要としないユーザーインタラクションの場合、非同期のインタラクション（JavaScript、CSS、Ajax、または別のRIAテクノロジーで実装されているかどうか）は、図3に示すような点線の矢印を使用します。
図3-非同期の状態変化を表す矢印
同期状態の変更図4に示すように、ページ全体をリロードする必要があるユーザーインタラクション、同期インタラクションの場合は、単線矢印を使用します。これはジェシージェームスギャレットが視覚的な語彙で使用する標準的な矢印。
この記事では、ビジュアルボキャブラリを拡張し、サイトのログインプロセスを示すために使用する方法の例も示しています。
そうは言っても、ユーザーがさまざまなインタラクションをウォークスルーできるようにするaxureを使用してインタラクティブなプロトタイプを作成すると便利です。また、インタラクションフロー図を使用して、開発チームが関心を持つページの主要なインタラクションを強調表示します。私たちが探求した他のオプションは
- さまざまな機能をクライアントに示すための対話のウォークスルービデオを作成する
- さまざまな使用例を示すためのライブ製品デモを行い、重要なワークフローを文書化する
- 重要なユーザーフローのストーリーボードを作成して、さまざまなやり取りを示す
- フローチャートを使用してフローをマッピングするフロー設計のように扱います。
ここにあなたが面白いと思うかもしれないいくつかの記事があります
これは良い質問です。私は1年以上にわたって相互作用を文書化するより良い方法があるかどうか迷い続けており、いくつかの異なることを試行錯誤しています。私はさまざまな場所からインスピレーションを得てきました。以下は、過去に私が作成/試行錯誤して成功したさまざまなタイプのメソッドです。以下の画像は、小売タブレットアプリの画像ギャラリーとのやり取りを示しています。
抽象図
灰色のパネルは状態を表します（ページの再読み込みと非同期の読み込みを区別していません）。この相互作用に関係する要素のみが示され、各相互作用は、どの入力が使用されるか、この場合はジェスチャーを説明する記号で示されています。
状態図
別の試みは、状態図からいくつかのインスピレーションを使用することでした。
この方法の方が系統的で作成が速いため、この方法が好きですが、問題は消化に時間がかかることです。私はまだ多くの要素で試してはいないが、現時点では1つの要素との相互作用にのみ集中している。
このことから、受け入れ基準がアジャイルチーム内でどのように記述されているかから、いくつかのインスピレーションを引き出すことが可能かどうか疑問に思ってきました。画像ズームと同じ例を使用すると、次のようになります。
与えられた、いつ、それから
Scenario 1: Opening image gallery
GIVEN that product page is open
WHEN user taps on product image
THEN resize image to viewport
AND show thumbnails and close button
Scenario 2: Swiping between images
GIVEN that the image gallery is open
AND zoomed out
WHEN the user swipes left or right
THEN the next image slide into the viewport
AND the selected thumbnail will update to the image in view
Scenario 3: Zooming in and out of an image
GIVEN that the image gallery is open
AND zoomed out
WHEN the user double taps on an image
OR pinches out
THEN the image zooms in
AND the thumbnails disappear
WHEN the user pinches in
THEN the image zooms out
AND the thumbnails reappear
私はこのように書くことは読み書きしやすいと思いますが、すべての相互作用をカバーするために多くのシナリオを作成する必要があり、すぐに繰り返し始めます。
どちらの方法でも、これらの方法のいずれかが、チーム内の人々と話したり、プロトタイプや特定のやり取りのビデオを添付したりする代わりになるとは思いません。
それはプロジェクトに依存しますが、私はユーザーフローを現在の設計段階とマージする傾向があります。たとえば、ユースケースを取得する場合は、それらをフローに入れます。画面のシーケンスを把握している場合は、それらを使用してフローを表現します。ワイヤーフレームを使用している場合は、ワイヤーフレームを組み立ててフローにします。このアプローチでは通常、チームにフローを1度付き添う必要がありますが、その後、ドキュメントを作成して、何を構築し、どのように組み合わせるかを理解することができます。
2年後、私はあなたがあなたのシステムを見つけたと確信しています。しかし、私はまだ数週間前に私がトリップしたこのリンクについて言及したいと思います。
著者は、ワイヤーフレームとワークフローを統合した広々としたテンプレートを使用しています。すべてのトランジションには、フレーム間のトランジションを詳細に説明するビデオへのリンクが付いています。
BalsamiqとAxureには、ajaxの相互作用を図式化するためのツールがあります。しかし、私は単に機能仕様を記述し、静的な状態を図にしています。
インタラクションのデザインが変わるとは思いません。それが実装されている方法。 Ajaxは、新しいページを必要としないものを設計するのに役立ちますが、それでもユーザーが行っていることのコンテキストを理解する必要があります。
さて、これはあなたの仕事を簡単にしませんが、相互作用の必要性を実装する方法に関するより多くのオプション、ソリューションを提供するより多くの方法があります。
単純なワイヤーフレームのBalsamiq。
高度なUIフローについては、実際のデザイン/スクリーンショットから作成されたUIフローを使用することをお勧めします（添付を参照）。アプリのコーディング方法が明確であるため、開発者とのコミュニケーションのミスを大幅に減らすことができます。
この手法は、次のようなユーザーインターフェイスフロードキュメントを作成するのに役立ちました。
作成が速く、読み取りが速く、完全な忠実度。
これは、PDFページ番号によって画面を正確に参照できる競合他社のUIをすばやく分析するのに役立ちます。
PowerPointを使用してこれを拡張すると、UIフロードキュメントで相互リンクが可能になりますが、これをすばやく行うためのビデオはまだ作成していません。
特定のプロジェクトに依存すると思います。
最近、私はUXチームとDevのフローをスケッチし、構築プロセスを繰り返す傾向があります。ソリューションに満足したら、Q＆Aチームのテストケースとして文書化します。