モックアップで相互作用をどのように定義しますか？
私はプログラマーであり、UX/UIデザイナーでもあります。物事をデザインするとき、私は通常、インターフェイスがどのように見えるかの静的な画像を作成します。問題は、ほとんどのUIが静的でないことです。これらはユーザー入力から変更およびサイズ変更されます。もちろん、私はインターフェースがそのような入力にどのように応答するかを正確に知っていますが、大規模なプロジェクトでは、クライアントと他のプログラマーが私のモックアップを取り、相互作用を理解できなければなりません。では、モックアップで、デザインがユーザーにどのように相互作用し、応答するかをどのように示しますか？
相互作用を説明する最良の方法は、インタラクティブなプロトタイプでモデル化することです。
Axureや開発中のツールHandcraftなど、さまざまなプロトタイピングツールがあります。どちらを使用しても、ポイントは、モックアップの要素を操作したときに何が起こるかをクライアントやピアなどに示すことができるということです。ただし、プロトタイプを使用してインタラクティブ性を示すと、クリック可能なモックアップを使用する場合よりもはるかに優れた結果が得られます。基本的な状態の変化をモックアップで表示することは可能であり、設計プロセスにはこれが役立つフェーズがありますが、アニメーション（特定の状況で重要）、応答性（インタラクティブ性の重要な要素）、ネイティブアプリやウェブアプリの場合は、その特定のプラットフォームを使用する「感触」。
7signals は、ワイヤーフレームをスキップしてHTMLに直接進む方法について多くのことを話します。私は ブログ投稿 を数か月前に書いて、彼らが彼らのプロセスについて説明した講演について話しました。
ただし、静的モックアップを充実させたい場合は、UMLのような相互作用を説明するための出発点として Jakub LinowskiのInteractive Sketching Notation が適しています。
同様の議論については PSDとHTMLのモックアップの賛否両論 を参照してください。
Webサイトまたはアプリケーションを構築している場合、できるだけ最終製品に近い形式でモックアップを設計するため、HTMLモックアップははるかに優れています。これにより、期待をはるかに簡単に設定できるようになり、最終製品で可能なことだけに制限され、柔軟性が大幅に向上します。
インタラクティブなモックアップが選択肢にない場合は、テキストを試してください。静止画像またはワイヤーフレームの一部を指す番号を追加し、各番号にinteraction notesを指定できます。
上：ポインティング番号の例。
Axure（または別のインタラクティブなプロトタイピングツール、またはHTMLやFlash）のようなオプションがない場合は、「標準」ビューまたは「デフォルト」ビューをワイヤフレーム化し、追加のワイヤで表示することをお勧めします。特定のモジュールの代替状態。
私の経験では、変更を伝えるためにテキストベースの注釈に依存することは通常不十分です-クライアント/開発者などのために、完全に注釈が付けられたワイヤーフレームが誤解されたり間違って構築されたりするプロジェクトをあまりにも多く行いました。視覚的に捉えられるはずの重要なテキストの詳細を見逃しました。
私はこれが半年前のものであることを知っていますが、まだ誰も言及していないので、私は次のようにします：
Bill Buxtonは "Sketching User Experiences" と呼ばれる本を書きました。これは、インタラクションデザインの「スケッチ」問題を扱います。インタラクションの概念とパターンを探索的に、つまり迅速かつ低コストで伝えるにはどうすればよいですか。抽象的すぎませんか？