認知工学ラボブログ

2022.04.15

高速プロトタイピング手法を用いたオンラインショッピングサイトのUIデザイン

#プロジェクト事例#プロトタイピング

お客様の課題

  • オンラインショッピングサイト(ギフトサイト)の新規構築にあたり、ショッピングサイトとしては一般的ではない操作フローを採用しようと考えているため、ユーザーがその操作方法を容易に理解・学習できるようなデザインにしたい
  • ユーザー視点を取り入れながらデザインを行いたいと考えているが、プロジェクト全体のスケジュールを考えると、通常のデザインに要する日数を大幅に超えるようなデザインプロセスを取り入れることは難しい

実施したプロジェクト

  • ユーザビリティテストを行いながら素早くデザイン改善を行っていく高速プロトタイピング手法「RITEメソッド」を採用することで、従来のプロトタイピング手法と比べて1カ月程度スケジュールを短縮しました
  • RITEメソッドによって、多くのユーザビリティ問題の発見とデザインのブラッシュアップを行うことができ、最終的にはユーザビリティの高いWebサイトを構築できました

プロジェクト詳細

プロトタイピングは複数回繰り返すほどよいが、時間がかかる

プロトタイピングとは、Webサイトやアプリなどの実装・システム開発に入る前に試作品(プロトタイプ)を制作し、実際にユーザーに操作してもらう「テスト・評価(Test and Evaluation)」を実施することにより、情報設計やUIデザインを改善しながらユーザビリティを高めるデザインプロセスです。プロトタイピングは、1回のテスト・修正だけでも実施する価値は十分にありますが、一般的に、「テストと改善を何度か繰り返す(Iterative)」ことにより、より多くのユーザビリティ問題を発見でき、結果として高いユーザビリティ改善効果が得られると言われています。当社で実践した別の研究プロジェクトにおいても、複数回のテスト・改善によって、より大きな改善効果が得られることが確認されています。

プロトタイピングの中で行うユーザビリティテスト自体は1~2日もあれば終えられます。しかしながら、複数回のテストを行う場合は当然、1回目のテストを実施した後に、テストで発見されたユーザビリティ問題を解消するためのデザイン検討、そして、2回目のテストで用いる改善版のプロトタイプを制作する必要があります。また、テスト後に改善すべきUIデザインのボリュームや、プロトタイプの開発工数は、1回目のテストを終えてみないとわからないため、多くのプロジェクトでは、2回目のテストを行うまでの準備期間に2週間~を事前に確保してくことが一般的です。

STEP 作業内容 所要期間
プロトタイプ制作 テストに使用するプロトタイプの制作 1週間~
テスト1回目 テスト実施(3名) 1日
プロトタイプ修正
(テスト2回目の準備)
ユーザビリティ問題の分析
修正箇所の決定
改善版プロトタイプ制作
2週間~1カ月
テスト2回目 テスト実施(3名) 1日
最終仕様の確定 ユーザビリティ問題の分析
修正箇所の決定
最終仕様の確定~実装へ
-

プロトタイピングを複数回行うことが「理想的」「効果的」であることは前述の通りですが、プロトタイピングにおけるテスト回数を増やせば増やすほど、当然、このプロセスの実行に要する所要期間は長くなってしまうため、「現実的」には複数回を実施できる余裕がないプロジェクトが多いのが実情です。

高速プロトタイピング手法「RITEメソッド」

複数回繰り返すプロトタイピングに長い所要期間が掛かってしまうという課題に対して、より高速・短期間でプロトタイピングを実施する手法として「RITEメソッド」と呼ばれているものがあります。「RITE」とは、「Rapid Iterative Test and Evaluation」の頭文字を取っています。この「Rapid」以外の部分の「Iterative(Test and Evaluation)」は、前述した「繰り返す(Iterative)、テスト(Test and Evaluation)」、つまり、複数回繰り返すプロトタイピングを意味していますが、それを「高速(Rapid)」で実行する方法がこのRITEメソッドになります。どのように高速化するかというと、端的に説明するならば「テストで見つかった問題点を、その場ですぐに・何度でも改善してしまう」というものです。

このオンラインショッピングサイト構築プロジェクトでは、実際にRITEメソッドを採用してUIデザイン・ユーザビリティ改善を行いました。下表は、このプロジェクトにおいて、計6名のユーザーでテスト・改善を実施したときのタイムテーブルです。

スケジュール 内容
1日目 午前 テスト実施×2名
午後 改善案の検討
プロトタイプ改修(小規模改修)
2日目 午前 テスト実施×2名
午後 改善案の検討
プロトタイプ改修(大規模改修)
3日目 午前 テスト実施×2名
午後 改善案の検討
最終デザイン案の確定

つまり、「テスト実施×2名」と「改善案の検討+プロトタイプの改修」という少人数のプロトタイピングを3日間の中で3回繰り返していることになります。

RITEメソッドのユーザビリティ改善効果とメリット

RITEメソッドを実践してみた結果、下表のように、最終的にはユーザビリティ問題の少ない状態へと収束していく様子が見て取れました。

STEP 発見された主な問題点
テスト1回目 - 購入フローの操作方法が正しく理解されない
- いくつかの主要なUIが見落とされてしまう
プロトタイプ修正
(1回目)
レイアウトや表現を修正
テスト2回目 - 1回目のテストで見られた見た目上の問題は解消された
- 一方で、操作フローはレイアウトや表現の修正だけでは相変わらず問題あり
プロトタイプ修正
(2回目)
操作フローを抜本的に変更
テスト3回目 操作フローについても、ほぼ問題は見られなくなった

本プロジェクトにおけるRITEメソッドの採用にあたっては、1~2名のテスト結果のみで何度も改善を行っていくため、「毎回、1~2名の個人の意見に左右されてしまい、どんどん改悪されてしまうこともあるのでは?」といった懸念もありました。しかし、プロジェクトメンバー全員がユーザー行動・発言に対して毎回ディスカッションを行いながら改善方針を決めていくことで、「毎回、結果が変わる」のではなく「毎回、知見が蓄積されていく」という方向に向かい、結果としては最適なデザイン案につながっていったように思います。以下は、今回のプロトタイピングの実行にあたり、テストへの同席、問題点や改善案の検討を一緒に行ったプロジェクトメンバーです。

  • お客様(ビジネスオーナー): 数名
  • システム会社様(ECバックエンドの構築): 数名
  • 当社スタッフ
    • Webディレクター(全体統括): 2名
    • UIデザイナー(画面設計、プロトタイプ制作): 2名
    • UXリサーチャー(テスト計画・実施): 2名

プロジェクトメンバー全員で多くのディスカッション機会があったことの副産物として、サイトのデザイン上の課題点やユーザーの行動傾向について、プロジェクトメンバー間で共有している知見や意識の統一が促進され、その後のプロジェクトがよりスムーズに進行できるようになったという側面もありました。

本プロジェクト事例に関連するサービス

「プロジェクトスケジュールにそれほど余裕はないが、ユーザー視点を取り入れたユーザビリティの高いWebサイトを構築したい」というニーズがある方は、是非一度当社にご相談ください。

プロジェクト事例の記事一覧
UXリサーチャー潮田Ushioda

UXリサーチャー歴10年以上。大学院で専攻していた認知心理学の知見や実験手法をUX/UIデザインに応用しながら、日々実践や研究を行っている。博士(情報科学)。

関連記事