web-dev-qa-db-ja.com

実際のテキスト入力でプロトタイプを作成する方法は?

一連のフォームをテストする必要があります。クラシックなインビジョンクリックアンドフィルイン方式では、テスト結果に本当に偏りがあります。ユーザーは、製品がどのように機能するかを実感するために、情報を入力する行為を実際に経験する必要があります。テキスト入力操作を可能にするプロトタイピングツールは何ですか? figma対応の場合ボーナスポイント。

1
Casey Robinson

迅速なユーザーフィードバックのために、私はコードペンを使用し、デザインを使用可能なデモにモックアップします。これにより、誰かにリンクを送信し、実際のやり取りからフィードバックを得ることができます。もちろん、コードは本番品質である必要はありません。それは私が何かが機能しているのを見る方法を伝える必要があるだけであり、それは機能などを洗練するための素晴らしい出発点です。

1
dannybhoy67

つまり、Axureのようなより複雑なプロトタイピングツールを使用する必要があるということです。

基本的には、そこに画面イメージをインポートして テキストフィールド を上に配置するだけです(モバイルでも機能します)。

Axure screenshot

唯一の欠点は、Invisionのように画像を大量にインポートできないため、画面を作成するのに余分な労力がかかることです。しかし、画面が少なく、代わりにインタラクションに重点が置かれている場合は、Axureが最適なツールです。


編集:ボタンをクリックした後、またはそれぞれの後にコンテンツをチェックするなど、これとの複雑な相互作用を作成する可能性があると私は付け加えるべきだと感じましたonTextChanged付きの手紙:

enter image description here

0
Big_Chair

私はプレーンHTML/CSSを使用して、そのようなパターンの動作テストの基本的なプロトタイプを作成します。単なる形であれば、それほど時間はかかりません。

それ以外の場合、Axureはそれを行うことができます。

0
Ren