Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
masa_139
Product and Topic Expert
Product and Topic Expert
2,649
デザイン思考ワークショップでラフなスケッチをした画面からプロトタイプに移ります。

プロトタイプ作成ツール自体に興味が向いてしまいますが、重要な機能はこの ”Study” です。

ユーザかのフィードバックを収集して、プロトタイプに反映させ、何サイクルか繰り返します。


参照 YouTube ビデオ:

 

1.  プロジェクトの作成


準備: SAP Document Center からサンプルファイルをダウンロードしてください。ダウンロードできない場合は、Send a Direct Mesage で関原宛に連絡してください。

SAP HANA Cloud Platform にログイン: https://hcp.sap.com/try.html この例では無料のトライアルアカウントを使用しています。

コックピットからServices -> BUILD を選択。サービスが有効になっていない場合は有効にします。



Open BUILD から BUILD を起動します。https://www.build.me/splashapp/

SIGN UP からユーザ登録でして、最初のプロジェクトを登録してください。

WORKSPACE -> Projects -> New Project -> CREATE NEW PROJECT

プロジェクト名の入力: この例では ToyShop





2.  ファイルのアップロード


デザイン・シンキングで使用したペルソナ(対象のエンドユーザ情報)の定義や、画面のスケッチ画像などをアップロードします。

このドキュメントの最後に画面スケッチの画像が添付されていますので、ダウンロードしてプロジェクトにアップロードしてください。


デザイン思考ワークショップの最後に書いた、画面の手書きモックアップを撮影してあります。そのイメージファイルをアップロードします。





3.  プロトタイプの作成


まずはエンドユーザにアプリ全体を把握してもらうために、簡単なプロトタイプを作成してみましょう。





Image Page として Page 1 を追加。
2つ目からは + アイコンから追加。



イメージ上にクリック用のホットスポットを作成します。ドラッグ&リリース。

ホットスポットが選択されたら、画面の遷移先を指定します。

同様に画面遷移を完成させます。


 

 

 

完了したら、右上の目のアイコン、Preview でテストします。



テストがOKであれば、PREVIEW ボタンの左側のアイコンで Publish します。





4.  Studyの作成


Publishした左のアイコンから、Study を作成していきます。

1つ目は、オペレーションがスムーズにできるか、ボタンの位置がわかりやすいか調べます。



FEEDBACK のメイン画面に自動的に移ります。


Question を登録します。回答の方法には何種類かありますが、ここでは Respond by performing action で画面遷移をチェックします。
最後にAction の最終ページを Target で指定します。



質問は何件でも登録できます。
Preview でテストしてOKであれば Publish します。



 

Study をユーザに送り、ユーザのフィードバックを収集します。



タスクのURLはFEEDBACK 画面からでも確認できます。





5.  Studyの実行 (エンドユーザ)


 

メールを受け取ったエンドユーザは、指示に従ってStudyを実行します。匿名でのテスト参加も可能です。

タイマーで時間測定していますので、Studyを完了したら、DONE ボタンを押してください。
 

指示に従って、アヒル隊長のコメントを探します。
ページ1 -> ページ2 -> ページ 3

なんどかコメントが XXXXXXX というのを見つけましたが、2ページ目から3ページ目への選択がわかりづらかったと仮定します。そのポイントをフィードバックします。


画面上の問題個所をクリックしてコメントを入力します。



Feedback を Done にして、Study を Done にする。


 



6.  フィードバックの収集


 

何件かフィードバックが集まっています。確認してみましょう。



参加人数、要した時間、コメントなどを確認して、プロトタイプに反映させます。

 

ここのコメント、クリックのヒートマップも確認できます。

Tasks&Questions -> 評価コメント参照。





追加演習:

新規に Study を登録して、他の質問タイプを試してみてください。