ライブデータ プロトタイプとは？

デザインツールを使ったプロトタイピングの課題のひとつとして、忠実度と機能性の不足で、デザイナーが包括的で正確なユーザーテストを完了することができないという点があります。 ​​

 ライブデータ プロトタイプは、ユーザー入力のデータでコードの動的な体験を複製することで、このプロトタイプの問題を解決しようとするものです。デザイナーは、ライブデータ機能を実行できるコードベースのプロトタイプを構築するのに、フロントエンドデベロッパーやUXエンジニアとの共同作業が必要になります。

 ライブデータ プロトタイプとは

 ライブデータ プロトタイプは、例えばサインアップフォームからユーザーの名前を取得してカスタムウェルカムメッセージを作成するといったように、ユーザー入力、データベース、APIからの情報を使用して、最終製品のようなダイナミックでカスタマイズされたエクスペリエンスを作成します。

 ライブデータ プロトタイプは通常、API、OTPのメール/テキスト、その他の複雑なユーザーインタラクションなど、ユーザーによって引き起こされる単一のタスクまたはシーケンスのテストをしますが、プロトタイプは、おそらく1つまたは2つのスクリーン、あるいは1つのコンポーネントになります。

リソースを大量に消費するプロセスであるため、デザイナーは、ユーザビリティの問題を伴う可能性や製品の障害を引き起こす可能性のある機能のために、このようなライブデータプロトタイプを準備します。そのため、構築のための時間とリソースを正当化することができるのです。

あいにく、デザイナーは画像ベースのツールを使ってライブデータプロトタイプを作ることができず、ベクターデザインのツールを使う場合は、エンジニアにコードで開発してもらうのが一般的ですが、これはかなり時間とコストがかかる作業です。

とはいえ、代替手段はあります。UXPinのようなコードベースのデザインツールやその革新的なMergeの技術で、チームがデザインとコードで同じUI要素を使用できるようになり、それにより同じ信頼できる情報源を使用することができます。UXPinがどのように機能するかは、これから見ていくことにしましょう。

 ライブデータ プロトタイプの構築法

製品デザインチームには、ライブデータプロトタイプを構築する際に選択肢がいくつかあります：

• コード： HTML、CSS、Javascriptは、正確で実用的なフィードバックをもたらす最終製品と同じ機能性と忠実性を提供するが、デザイナーにはそれらを構築するエンジニアが必要。
• ローコードビルダー：エンジニアを介さず、プラットフォームの制約の中でプロトタイプを構築できるが、デザイナーがテストできる内容は限定される。
• デザインツール：UXPinのようなコードベースのデザインツールで、デザイナーが実際のデータ、API、コードコンポーネントなどを使って構築、プロトタイプ、テストを完全にコントロール可能。

ライブデータ vs. リアルデータ

ライブデータとリアルデータのプロトタイプの識別は重要です。 ​​ライブデータプロトタイプは、ライブで動的なデータを提供し、情報はソースと同期して動的に変化します。以下のように、名前とメールアドレスを入力する基本的なサインアップフォームを見てみましょう：

• 名前 ジョー・キング
• メール： joeking@uxpin.com

ライブデータプロトタイプでは、ジョーが自身の名前とメールを入力することができ、気分次第で別のメールアドレスに変えたり、スペル違いもできます。つまりライブデータプロトタイプは、ジョーが入力したデータをそのまま捉えるのです。

一方、リアルデータプロトタイプは静的なものです。フォームフィールドが機能せず、データを取得できないため、デザイナーはジョーの情報を使ってリアルデータプロトタイプへの事前入力が必要です。プロトタイプはジョーの本当の名前とメールを使用しますが、情報は静的で、変更やインタラクションへの反応はできません。

 ライブデータ プロトタイプの例

デザイナーは、UXPinのコードベースのデザインツールを使って、ライブデータプロトタイプを構築することができます。UXPinの無料サインアップフォームテンプレートは、ステート、変数、条件付きインタラクションを使って、メールとパスワードの有効化と個別化されたメール確認をシミュレーションするいい例です。

  このプロトタイプは，ユーザーの入力に反応し、メールとパスワードのフィールドにエラーメッセージを表示します。パスワードは8文字以上で、メールは正しくフォーマットされていなければいけません。もし、ユーザーが何も入力せずに「SIGN UP」ボタンをクリックすると、該当する入力欄の下には「空白にできません」というエラーメッセージが表示されます。

UXPinの無料サインアップフォームのテンプレートは、このような手順で編集することができます。

 ライブデータ プロトタイピングを使うタイミング

このリストは決して完全なものではないですが、以下はライブデータプロトタイプの最も一般的な使用例です。

1. ユーザートリガー機能

ライブデータプロトタイピングは、ユーザーデータやインタラクションに依存する通知やAPIをテストするのに有益であり、例えば、テキストやGoogle Authenticatorを使用した2段階認証を設計している場合、ライブデータプロトタイプでのこの機能のテストは非常に重要です。

2. MVPテスト

ライブデータプロトタイプは、MVP（Minimum Viable Product：ユーザーに必要最小限の価値を提供できる製品）をテストしたいスタートアップ企業にとって最適です。このMVPで、アイデアの望ましさ、実行可能性、実現可能性をテストし、製品開発プロセスにコミットする前に、テストと反復を行うことができます。

このようなライブデータプロトタイプは、概念実証のための正確な結果を得るのに十分包括的なものですが、無駄がないので、構築や変更に時間がかかりません。

3. A/Bテスト

マーティ・ケーガン氏は、SVPG社（Silicon Valley Product Group）が製品発見時のA/Bテストにライブデータプロトタイプを使用する方法について説明しています。製品チームは、開発に着手する前に、同じ画面やフローの軽量な2つのオプションを作成して、最適なオプションをテストすることができます。

画像ベースのツールによるライブデータプロトタイピングの長所と短所

長所1 – 有意義なステークホルダーのフィードバック

画像ベースのプロトタイプの課題の一つは、デザイナーがステークホルダーにリアルな製品体験を提供できず、賛同が得られにくいことです。 画像ベースのプロトタイプでは、ステークホルダーやユーザビリティの関係者は、自らが情報を入力するか、アプリが複雑なタスクを実行したことを「イメージ」しなければいけません。

ライブデータプロトタイプだと、ステークホルダーの入力へ反応し、動的で個別化されたユーザーエクスペリエンスを実現することで、彼らにに製品の正確な表現が提供されるのです。

長所2 – ユーザビリティテストの改善

UXデザイナーは、デザインを引き渡す前にユーザビリティの問題をテストして解決することを目標としています。ライブデータプロトタイプで、忠実度と機能性が大幅に向上され、デザインチームにユーザーテストからの実用的なフィードバックがもたらされます。

たとえば、フォームのエラーがユーザーの問題解決に役立っているかどうかを、デザイナーはどのようにテストすればよいのでしょうか。ライブデータプロトタイプの動的な性質により、デザイナーはスペルミス、パスワード認証、メールフォーマットなど、複数のシナリオをテストすることができます。

長所3：エラーの減少

ライブデータのテストにより、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決することができます。エラーが少ないということは、手直しが少ないということであり、企業の人件費の削減に繋がります。

短所1：プロトタイピングに時間がかかる

ライブデータプロトタイピングは、プロトタイプを開発するのにエンジニアに依存しています。ドラッグ＆ドロップ式のデザインツールとは違って、コーディングには時間がかかり、また、プロトタイプの構築には多くのチームメンバーも必要であり、結果としてコスト増と市場投入までの時間の遅れを招きます。

短所2：賛同の獲得

コーディングスキルを持つデザイナーやUXエンジニアでない限り、ライブデータプロトタイプの構築は、デベロッパー抜きには不可能です。つまり、エンジニアリングチームやステークホルダーの賛同が不可欠なのです。

短所3：限られた範囲

ライブデータのプロトタイプを作るには時間とリソースが必要なため、デザイナーが作成やテストできることは限られています。そのため、デザイナーは通常、正確な結果を必要とする大きな問題に対して、このプロトタイプを準備します。

UXPinでエンジニアいらずのライブデータプロトタイピング

UXPinのようなコードベースのツールを使えば、デザイナーは高度なライブデータプロトタイプを、エンジニアにそれほど頼らずに構築することができます。 UXPinプロトタイプは、デザイナーがテストをする際に有益なだけでなく、エンジニアが最小限の文書と説明ですべてがどのように機能するかを正確に確認できるため、デザインハンドオフのプロセスも効率化されます。

機能的なユーザー入力

大抵のプロトタイピングツールはフォーム入力が機能しないため、ユーザーデータに依存する機能をテストすることができませんが、UXPinのコードベースのプロトタイプには、デザイナーがコードを模倣するようにプログラムできる機能的な入力が備わっています。

UXPinのサインアップフォームの例には、一般的にコードプロトタイプを必要とするよくあるエラーや認証を、デザイナーがどのようにテストできるかが示されています。

UXPinでAPIを使用する

デザイナーは、会議予約アプリにGoogleカレンダーの招待状を送るなど、UXPinのプロトタイプをwebhooks経由で他の製品やサービスに接続するのにIFTTTを使うことができます。

IFTTTには、メール、SMS、プロジェクト管理、IoT製品、チャット、SNSなど、UXPinアプリに接続できるサービスが700以上あります。

IFTTTを通じて外部サービスを統合することで、デザイナーはエンジニアの手を借りずに数クリックでライブデータのプロトタイプを接続することができ、UXPinには、デザイナーがAPIデータの送受信ができるように、GETまたはPOST HTTPリクエストのアクションがあります。

リアルデータの取り込み

デザイナーは、JSON、Google Sheets、またはCSVを使用してリアルデータをUXPinプロトタイプに取り込むこともできます。UXPinでは、レイヤー名でコンテンツを一致させる機能や、画像用のUnsplashを使用して、ダミーデータをフィールドに入力することもできます。

このようなコンテンツやデータ機能により、デザイナーは、ライブデータ、リアルデータ、ダミーデータなど、ソースに関係なく、あらゆるフィールドにデータを入力することができます。

UXPin Mergeによる完全に機能するプロトタイプ

デザイナーはUXPin Mergeを使用して、ライブデータプロトタイプを次のレベルに引き上げることができます。デザイナーがコードコンポーネントを使用して完全に機能するプロトタイプを構築できるように、デザインシステムやコンポーネントライブラリをUXPinに同期させましょう。

Merge を使用すると、デザイナーはコードを使用するエンジニアと同じ機能を備えた忠実度の高いプロトタイプを作成できます。コードを書く代わりに、デザイナーはコンポーネントをドラッグ＆ドロップするだけで、ライブデータ プロトタイプの構築ができるのです。

以下は、デザイナーが Merge を使用して作成できるライブ データ プロトタイプの例です：

• 完全な機能を持つ日付ピッカー
• ユーザーの入力に応じて変化するグラフとチャート
• ユーザーがフィルタリング、仕分け、編集できるデータグリッド
• ページネーションと検索フィールドの機能
• サインアップ、メール購読などの各種フォーム
• eコマースと注文フロー

Merge のライブデータプロトタイピングは、デザイナーがプロトタイプを作成するのにエンジニアに頼る必要がないということです。また、追加リソースを正当化するために、毎回ステークホルダーから賛同を得る必要もありません。

また、Merge はコードベースのプロトタイピングを組織の他のメンバーにとってもより身近なものにします。ちなみに、デザイン ツールの経験がほとんどない PayPal の製品チームは、従来のデザイン ツールを使用する経験豊富な UX デザイナーよりも Merge を使用した方が 8 倍も速くプロトタイプを作成することができます。

UXPin Mergeを使用すると、すべてのプロトタイプを没入型ライブデータプロトタイプにすることができ、また、デザイナーはこれらの完全に機能するプロトタイプを、従来の画像ベースのデザインツールよりも速やかに構築することができます。

世界最先端のデザインツールでプロトタイプとテストを始めてみませんか？無料トライアルにサインアップして、UXPinで、顧客により良いユーザー体験の提供、デザイナーとデベロッパーの連携の強化、エラーの削減、エンドツーエンドのデザインプロセスの効率化をぜひご体験ください。