ProttとSketchでプロトタイピングサイクルを実際に回してみた話

こんにちは。
初アドベントカレンダーかつ初Qiita記事投稿のUXデザイナー、@ihara4です。
半年ほどデータサイエンティストとしてScalaを書いていましたが、気がついたらUXデザイナーになっておりました。どうしてこうなった。

アドベントカレンダーのネタとして、Scala.jsのチュートリアルをやってみたものの、「Scala.jsすげえ」以外の感想がなかったので、方向転換しました。

ということで、今回は社内プロダクトのためにプロトタイピングした話です。
プロトタイピングはプロダクトを作る上で重要とはいわれているものの実例を紹介している記事が意外と少なかったので、こちらの記事がその参考になれば幸いです。

前提

• 自社プロダクトのアップデートプロジェクトが進行中
• 新しいバージョンの機能設計・画面の叩き台を作成済み
• ユーザーは社外、社内にいる
  • プロトタイピングに巻き込んだのは社内のビジネス現場メンバー
  • Ex.マーケティング・営業・コンサルタント

この段階まできているとプロトタイピングと呼ぶのかどうかは疑問ではあります。
教えて偉い人。

目的

• 新しいバージョンの世界観をユーザーに伝えたい
• 新しいバージョンの細部をユーザーが使いやすいか確認
• 機能に過不足がないかを確認

使用ツール

• sketch
• Prott

作業手順

以下の手順1～7を1サイクルとしてこれを7回繰り返しました。

手順1. 実際の利用シーンを想定したシナリオを考える

利用シーンとはFacebookを例にすると

• アカウントを新規作成したい
• 親しい友達の近況を確認したい
• 必要のないメール通知をOFFにしたい

以上の3つぐらいがぱっと思いつきます。
実際には上記のような利用シーンをもう少し深掘りして、より具体的なものをシナリオとしていくつか用意しました。

2. シナリオに沿って、sketchで画面を作る

大枠はUX設計のチームメンバーが作成してくれていましたので、そのステータス違いをひたすら作りました。
上記で挙げたFacebookの利用シーンの例「アカウントを新規作成したい」を用いるとこんな感じに画面を作ることになるかと思います。

• Facebookのトップページ
• フォームの姓が入ったトップページ
• フォームの名が入ったトップページ
• フォームの携帯電話番号またはメールアドレスが入ったトップページ
• 誕生日を選ぶときのプルダウンが表示されているトップページ ... etc.

ひたすらトップページです。
プルダウンの選択肢まで作ります。
実際には、すべてのシナリオでここまで作り込んだわけではありませんが、いくつかはこの粒度まで作り込みました。
詳細に作ったほうがリアリティという点で安心できます。

3. Prottにあげて、遷移を設定する

Goodpatchのプロトタイピングツール、Prottを用いました。
Prott Sketch Pluginが用意されているので、これを導入し、ProttのプロジェクトにSketchのアートボードをアップしていきました。
めちゃくちゃ便利なのでプロトタイピングするときは是非、使ってみてください。

Prott側でシナリオ名を入れたプロジェクトを新規作成し、そこに2で作成した画面をあげます。
あげてしまえば、各スクリーンに遷移を設定していくだけです。
シナリオに沿って紙芝居のごとく、1本道の遷移を設定しましょう。

実際には、軽いシナリオで5枚程度のスクリーン数、重いシナリオで35枚程度のスクリーン数でした。

4. prottの画面を触ってもらうための会を行う（通称、シナリオ会）

時間は1時間、メンバーはそのシナリオに関係する社内のビジネスメンバーと開発メンバーを合わせて5,6人を必須で参加をお願いし、それ以外のメンバーは気になる人は参加してもらう自由参加の形を取りました。

冒頭でそのシナリオ会にて取り上げるシナリオについて状況説明をして、3で準備したものをひたすら触ってもらいました。
1回で2,3つのシナリオを取り上げ、参加メンバーは少ないときでも6,7人ほどで多いときには15人ほどでした。

5. シナリオ会にて参加メンバーからフィードバックを募る

シナリオをこなしてもらった後に、各々が疑問に思ったこと・感じたこと・やりたいと思ったができなかったことをGoogleスプレッドシートに書いてもらいます。

1・2で用いたFacebookの利用シーンの例「アカウントを新規作成したい」ではこんなフィードバックになるのではないでしょうか（あくまで例です）

• 姓名がわかれていると入れづらい
• メールアドレス入力の確認欄はコピペできるのか
• パスワードの最低文字列と使用できる文字は何？
• 誕生年のプルダウンの表記は和暦の方がわかりやすいかも
• アカウント登録ボタンがわかりづらい
• フォームが右半分に寄ってる必要ある？ ... etc.

書いてもらったあとに、1つ1つ書いてくれた本人に説明してもらいます。
例えば、「フォームが右半分に寄ってる必要ある？」と書いた人はフォーム入力欄が小さいと思ったのか、見た目として右ではなく左に寄ってる方がきれいだと思ったかによって対応が異なりますので、どちらなのかを聞きます。
また、同じことを参加メンバーのうち、どれぐらいの人数が感じたのかも聞きます。

これを行うことで、上がったフィードバックがその人の個人的な感覚なのか、ユーザーも感じるであろう体験なのかを見定めることができます。

4,5を行うとシナリオ会自体はお終いです。

6. フィードバックに対する対応を決める

シナリオ会で得られたすべてのフィードバックにどう対応するかを下記のように決めていきます。

• 姓名がわかれていると入れづらい　→　わけてみる
• メールアドレス入力の確認欄はコピペできるのか　→　コピペできる
• パスワードの最低文字列と使用できる文字は何？　→　8文字以上半角英数字記号
• 誕生年のプルダウンの表記は和暦の方がわかりやすいかも　→　特に対応なし
• アカウント登録ボタンがわかりづらい ... etc.

7. 開発メンバーにフィードバックに対する対応を共有する

バージョンアップのプロジェクトは進行中で、実装にも着手していた段階でしたので工数見積が出ています。
対応方針を共有し、工数見積の範囲内で実装することができるか、一旦見送るかを開発メンバーに決めてもらいます。
もちろん、開発メンバーもシナリオ会の場に参加しており、出来るだけ実装したいという形で向き合ってくれました。

最終的には、すべての対応のうち、一旦見送りになったものが1割もない程度でした。

プロトタイピングを実践して、よかったこと

• 用意していた画面・機能に対して不足があることに気づいて、ブラッシュアップできた
  • ボタンの配置がわかりづらい
  • 機能への導線がわかりづらい
  • やりたいことができない
  • 機能が足りない ... etc.
• ユーザー側と開発側でプロダクトに対する共通理解が得られる

最後に

sketchとProttを社内で使ってみましたが、非常に良かったです。
Prottは痒いところに手が届く、良いツールでした。

あくまで社内の事例ですので、ここに書いてあることをそのままやるのは難しいですが、
sketchとProttの実際の利用例にはこんなのがあるのかと思って頂けると嬉しいです。

ではでは。