数分で忠実度の高いインタラクティブなプロトタイプを開発する方法_html/css_WEB-ITnose

製品開発、体験第一。ソフトウェア製品の開発コストは比較的高いため、製品アイデアの価値は開発前に対象ユーザーによって検証されることが多く、最も効率的な方法は、忠実度の高いインタラクティブなプロトタイプを通じてテストすることです。

世界で負けない唯一の格闘技はスピードです。急速に変化するインターネット市場では、プロダクト マネージャーはアイデアを迅速に評価し、可能性のあるものを選択する必要があります。従来のアプローチでは、各ページの静的レンダリングがレビューされて渡された後、すぐに開発者に引き渡され、高忠実度のインタラクティブ プロトタイプの開発ワークロードが評価されます。評価結果には 2 ～ 3 日、場合によっては 2 日かかることもあります。開発期間は3週間。

この記事では、各ページの静的レンダリングが準備されていることを前提として、高忠実度のインタラクティブ プロトタイプを開発するのに 2 ～ 3 時間もかかりません。 2～3分で簡単に完成します！

4 つのヒント

フロントエンド コード (HTML、CSS、JS など) を理解していなくても問題ありません。ビジュアル ツール (Axure など) を使用できます。開発するには、これら 4 つのヒントが普遍的です。

(1) ホットスポット ジャンプ

「Web ページ」に高忠実度のレンダリング全体を貼り付け、クリック可能な領域 (おそらく画像、リンクなど) を透明な領域でカバーします。 「ホット エリア」の場合、テスト ユーザーは「ホット エリア」をクリックするだけで、新しい「Web ページ」に直接ジャンプできます。

開発に Axure (Axure RP Pro 7.0 を例にします) を使用している場合は、「ホット スポット」ホット スポット コントロール (以下を参照) を使用して、画像のインタラクティブなホット エリアを直接オーバーレイします。 。もちろん、ホットスポット コントロールに加えて、「Rectangle」長方形コントロールも使用できます (境界線と塗りつぶしの色を透明に設定するだけです)。

図 1 Axure のホットスポット コントロール

フロントエンド コードを使用して開発している場合、透明な div を直接配置することも非常に簡単です (position:absolute)。 )をクリック可能な領域に移動します。

このようにして、非常にシンプルかつ高速に、忠実度の高いインタラクティブなプロトタイプが開発されます。

(2) インタラクションが発生する領域のみを開発します

一方で、インタラクティブな効果を必要としないページもあります。最も一般的なのは、「タスク フロー」の最後のページです。たとえば、ユーザーのタスクはコレクション リスト ページを開くだけで完了します。インタラクティブな効果は必要なく、ページ全体の画像を直接投稿できます。

一方、ユーザビリティテストのタスクフローに関係のない領域には、インタラクティブな効果を持たせる必要はありません。以下の図 (図 2) に示すように、ユーザーのテスト タスクが 3D メガネの購入であると仮定すると、Web ページの下部にあるフッターや 3D メガネに関係のない他の製品はホット リンクである必要はありません。

図 2 インタラクションが発生する領域のみを開発する

フロントエンド コードを使用して開発している場合は、レンダリング全体をバックグラウンドでポストすることをお勧めします。次に、開発した div を絶対位置でオーバーレイし、背景のレンダリングとまったく同じになるように調整します。最後に、大きな背景を覆うように div に背景を追加します。これで完璧です。

(3) フルページ切り替え

プロトタイプの開発プロセスでは、作成が非常に面倒で、多数の動的パネル (または JS) の使用が必要なローカル エフェクトに遭遇することがよくあります。 ) このとき、考え方を変えて部分的なインタラクションをページ全体の切り替えに変えると、問題は簡単に解決されることがよくあります。

例えば、商品一覧の操作エリアで「取引高順に並べ替え」ボタンをクリックして「部分更新」を行うと大変面倒になります。新しいページに直接移動します (ページ全体が取引量ごとに並べ替えられています)。

もちろん、「ページ全体の更新」の効果は「部分更新」の効果ほど現実的ではありませんが、結局のところ、「大まかな」を許可することで大幅に節約できます。開発時間のこと。

(4) ページ内のデータまたはリンクを「コード化」する

プロトタイプの開発プロセス中に、「実際の」データを使用したい場合は、非常に面倒なので、データベースの運用と開発は難しくて時間がかかります。したがって、通常はプロトタイプのページ内のデータまたはリンクを「ハードコーディング」します。

たとえば、どのリスト項目をクリックしても、同じ固有の詳細ページにジャンプします。別の例として、どのアカウントとパスワードを入力してもログインできます (ジャンプ)。

コアタスクに影響しない場合は、複雑なデータベースやバックグラウンドを使用せず、ページにジャンプするだけにしてください。

注意すべき点

(1) ビジュアル ツールを使用して開発している場合

ビジュアル ツールは WYSIWYG アプローチを使用します。これは非常に便利ですが、理解する必要もありますこれらのソフトウェアの制限事項。その欠点を受け入れられない場合は、時間を無駄にしないために、最初から開発に選択しないことが最善です。

Axure を例に挙げてみましょう。結局のところ、Axure は忠実度の低いプロトタイプ (ワイヤーフレーム) を開発するために使用されるツールです。これを使用して忠実度の高いプロトタイプを開発する場合の主な欠点は、出力される Web ページです。効果が十分に洗練されていません。たとえば、一部のコントロール (テキスト ボックスなど) のデフォルト スタイルを変更することは困難であり、「高さの調整」を実現することも不可能です (つまり、上のコンテンツの高さが変更されても、下のコンテンツは自動的に変更されません)。下に移動します); さらに、要素の位置が少しずれる可能性があります (特に境界線のある要素の場合)。

さらに、フロントエンド コードについて少し知っていれば、Axure によって生成された HTML ファイルと CSS スタイル ファイルを微調整して、完璧なプレゼンテーションを保証することもできます。

(2) コードで開発する場合

コードで開発すると、理論上はレンダリングと全く同じにできますが、可視化ツールに比べて時間がかかり、エネルギー。

実際の開発では、上記の 4 つのヒントに従って開発速度を大幅に加速できますが、一方で、ページ全体のフレームワーク (コア タスク フロー) を完全に完成させることをお勧めします。最初に開発してから、時間 (エネルギー、予算など) に応じて可能な限り細部をゆっくりと調整します。

最後に、デザイナーやプロダクト マネージャーはフロントエンド開発者と明確にコミュニケーションを取る必要があることを言及する価値があります。私たちが開発している高忠実度のインタラクティブ プロトタイプは、ユーザー テストが完了すると破棄されます。小さなことでも完璧を追求する必要がある。

つまり、一般的なインタラクティブなプロトタイプ開発は、ある程度のスキルを習得すれば、開発工数を大幅に削減でき、数分で完了することができます。

著者: Very Good Luck

WeChat 公式アカウント: ユーザー エクスペリエンス ストーリー