初期のユーザビリティテストのための迅速なインタラクティブモックアップ
私はモバイルWebアプリのアイデアを完全に具体化しました。私は Sketch でモックアップを作成し、このアプリを機能させるために必要なすべてのモデルとコントローラーアクションのドキュメントを用意しています。
UXに重点的に集中したいので、完全なインタラクションを備えたHTML/CSSプロトタイプをすばやく作成して、ユーザビリティテストを行うことができます。美学、UI、データ構造、およびモバイルWebアプリの作成に関連するその他すべての詳細に入る前に繰り返します。
D3.js をしばらく使用して、 この記事 に従ってインタラクティブなモックアップを作成してみました。ただし、すべての対話をセットアップすることはますます複雑になりました。
モデル、コントローラー、その他すべての作成の詳細にあまり夢中になりたくない（Railsアプリで使用するため））だから、どのツールが最適でしょうインタラクティブなモックアップをすばやく作成して、ユーザビリティテストにほとんどの時間を集中できるようにするにはどうすればよいですか。
簡単なモックアップを作成する場合は、まだ開発とビジュアルデザインに焦点を当てるべきではありません。
1.紙のプロトタイプ
ペンと紙でアイデアを描くと、あらゆる種類のレイアウトを短時間で試すことができます。迅速で、設計の構造に集中するのに役立ちます。
[〜＃〜] pop [〜＃〜] を使用すると、スケッチしたワイヤーフレームを作業用のプロトタイプにすばやく変換できます。
ワイヤーフレームをテストします。
ターゲットオーディエンスに移動して、ワイヤーフレームをナビゲートさせます。この段階で不明な点があれば、開発時間を無駄にすることなく、最初からやり直すことができます。
2.デザイン
完璧なワイヤーフレームを作成したら、ユーザーエクスペリエンスを改善する必要があるキラーなビジュアルデザインの作成を開始できます。この段階では、最終的に Sketch 、 Photoshop またはその他のデザインツール（モーションデザインの場合はAfter Effects）を使用して、色、フォント、アニメーション、画像、コンテンツに集中できます。
デザインをテストします。
ターゲットユーザーに再度アクセスし、ビジュアルデザインをテストして、気に入っているかどうかを確認します
3.開発
これは反復の最後の段階です。これで、構造とデザインがユーザーフレンドリーでユーザーを幸せにすることがわかったので、指を伸ばして開発を開始できます。
結論：
いくつかのアイデアをすばやくテストする場合は、ワイヤーフレームをインタラクティブにするアプリ（ [〜＃〜] pop [〜＃〜] など）を使用します。ただし、テストは常にすべての手順の最後に行う必要があることを忘れないでください。