レシピのUX／UIを改善する

普段、何気なく利用している身の回りのもので、使いづらかったり分かりにくいものはありませんか？このブログをご覧いただいている皆さんであれば、必ず一度はそういった経験をされたことがあるのではと思います。今回は「料理レシピ」にフォーカスしてUX／UIを改善してみましたので、そのプロセスをプロジェクト風にまとめてご紹介します。

改善の経緯

私は現在、Goodpatch社内のCookingサークルに所属しているのですが、先日みんなでフォカッチャを作ろうとしたところ教材に使用したレシピがとても分かりにくく、作るのが久々だった私自身も含め大混乱を招いたため、勝手にレシピを改善することにしました。

プロジェクトの目的・要件

既存レシピの改善。
レシピ利用者の背景や思考、調理時の行動などに合わせ、理解しやすく実際に調理する際にも迷うことのないレシピのフォーマットを作成する。

実施計画

• 利用者の背景を踏まえた思考と調理時の行動を調査
  
• 課題分析・改善方向性の定義
  
• 1～2に基づいた情報設計とプロトタイプの作成
  
• プロトタイプを用いたユーザーテストによる仮説検証
  
• 検証結果に基づき修正、最終型デザインの作成
  
• 最終型デザインを用いたユーザーテストによる検証
  

既存レシピに対するユーザー調査

既存レシピを用いてフォカッチャを調理する形でユーザー調査を行った。その際、フォーカスグループインタビューの形で実施することと、実際の調理時の行動を観察した。
※ 今回はCookingサークルのフォカッチャ会をユーザー調査としてまとめました。

実施方法

「フォーカスグループインタビュー＆行動観察」

• モデレーター　1名（本人）
• 対象者　3名（Goodpatch Cooking部メンバー）

対象者に既存レシピを見てもらいながら実際に調理を行う様子を観察。状況に応じてモデレーターが質問をするなどして対象者同士で自由に会話してもらい、インタビューを行った。

実施結果

＜調理スタート時＞

• 調理がスタートしてから必要な道具が揃っていないことが判明し、材料を正しく量ることができない。
  
• 調理全体の流れが把握できていない。
  
• そのつど手順を見ているので、前後の流れが把握できていない。
  
• 結果的にレシピに書かれていることとは違う行動を取ってしまう。（致命的なミス）
  
• 似たような料理を作った経験があるため、その経験から先入観で調理してしまう。
  

＜調理途中＞

• 調理時間がどのくらいかかるか把握できていない。
  
• 2回の発酵時間とベンチタイム（生地を寝かせる時間）があり、空き時間があることを把握できていない。
  
• それぞれの工程が何のためにあるものなのか理解できない。（結果的に端折ってしまう）
  

＜レシピ＞

• 読んではいるが斜め読みしており、頭に入っていない。
  
• 添えられたイラストが何を指しているか理解できない。
  
• レシピが2ページに分かれているが両方に材料リストがあるので混乱する。
  
• 文字が小さいので調理中に読みづらい。
  

手順を間違えた結果、一次発酵で十分に膨らまなかった生地

ユーザーニーズと課題の把握

調査した情報を元に、ユーザーニーズと既存レシピの課題を分析し把握することで、改善の方向性を決定する。

ユーザーニーズ

ユーザーニーズとしては、とにかく間違わないことと、効率よく調理を行いたいことが中心であった。

• 分量や手順を間違わずに調理したい
  
• 調理方法のイメージを掴むために写真などを見たい
  
• 間違ってはいけない大事なポイントを事前に知りたい
  
• 調理時間がどのくらいかかるのか事前に知りたい
  
• 調理中に空き時間があるのであれば事前に知りたい
  
  

既存レシピの課題

既存レシピの課題としては、ニーズに沿った情報が不足していることと、情報が整理されていないことが大きな課題であった。

• 事前に知るべき情報と調理中に見る情報が混在している
  
• 事前に知るべき情報が2ページ目に記載されており見落としてしまう
  
• イラストが何をしているのか把握しづらい（写真がない）
  
• 調理手順の文字が小さい
  
• 大事なポイントが明確になっていない

改善の方向性定義

具体的な対応内容は「ユーザーニーズ」と「既存レシピの課題」を元とし、改善する際のポイントとして以下の点を定義。

• その料理を作った経験のない利用者でも理解しやすいこと
  
• 調理中に迷うことなくスムーズに進行できること
  
• 致命的な間違いが起きることを防げること
  

情報設計

ここではまず必要な情報を洗い出し、「ユーザーニーズと課題の把握」を元にレイアウト構成を検討したのち、ワイヤーフレームを作成した。
※ 今回は掲載を割愛していますが、各項目ごとに詳細データを作成しプロトタイプにデータを流し込めるよう準備しました。

必要な情報項目

• 料理名
  
• 完成イメージ画像
  
• 材料
  
• 道具
  
• 手順（大まかに全体を把握するためのもの）
  
• 手順（詳細な内容）
  
• 手順に添える調理方法のイメージ写真
  
• 調理時間
  
• 大事なポイント
  
  

ワイヤーフレーム

手書きでおおよそのレイアウトを考えながら簡単なワイヤーフレームを作成。

作成したワイヤーフレーム

プロトタイプ

情報設計とワイヤーフレームを元に、レシピのプロトタイプを作成。今回は紙のレシピであるため、イラストレーターで作成した。

作成途中のプロトタイプ

ユーザーテスト1回目

プロトタイプのレシピを用いて、ユーザー調査時と同じくフォカッチャを調理する形でユーザーテストを行った。

検証項目

事前のユーザー調査を元に、このレシピでユーザーが得られる体験を仮説として抽出し、それを検証項目とした。
※ 今回は課題が少量であるため簡略化しています。

• 記載されている内容が直感的に理解できるか
  
• 必要な材料／道具を理解し準備できるか
  
• 調理にかかる時間や隙間時間を把握できるか
  
• 調理の全体の流れをあらかじめイメージできるか
  
• 調理工程や方法がイメージできるか
  
• 大事なポイントを事前に把握できるか
  
• 手順を大幅に間違わずに調理できるか
  
• 調理中でも難なく読むことができるか
  
• 必要な情報をすぐに探し出すことができるか
  
  

実施方法

「プロトタイプを用いたグループ形式でのユーザーテスト」

• モデレーター　1名（本人）
• 対象者　4名（Goodpatch Cooking部メンバー／事前調査とは異なるメンバー）

約3時間掛けて、対象者にプロトタイプのレシピを見てもらいながら実際に調理を行う様子を観察。

実施結果

検証項目はおおよそクリアしていたが、プロトタイプの課題と新たな課題がいくつか見つかったので、これらを改善した上で最終型のレシピデザインを作成し、再度ユーザーテストを行なうこととした。

新たな課題

• 調理方法が分からない箇所が予想よりも多い
  
• 調理方法を理解するためには手順を細かく切り分けた写真が必要
  
• 手順を間違えたり端折ったりしてしまう大事なポイントが予想よりも多い
  

デザイン制作

まず今までの調査結果を元に、情報設計やレイアウトの見直しを行った。また、ユーザーのつまずくポイントを改めて確認することや、より簡単に調理できるよう分量や工程自体の改善を行なうために、自分自身でも調理を行いその過程を記録。手順に使用する写真素材も撮影した。
これらを材料にデザインを作成。

作成したデザイン

ユーザーテスト2回目

作成したデザインを用いて、ユーザーテスト1と同じくフォカッチャを調理する形で再度ユーザーテストを行った。

検証項目

ユーザーテスト1での新たな課題を検証項目とし、デザイン作成の段階で行った調整がきちんと機能しているか、また課題がクリアされているかどうかを検証。

• 調理方法が分からない箇所がないか
  
• 手順の写真によって調理方法が理解できるか
  
• 大事なポイントを間違えずに調理できるか
  
  

実施結果／改善点

検証項目についてはおおよそクリアしており、問題なく調理を進めることができた。新たな課題として、調理手順への理解を深めるための情報が不足している箇所があったので、以下の点を改善することにした。

• 粉を2つに分けて混ぜることの理由を追加
  
• 調理手順と方法を改善し、説明文章を追加
  

最終版デザイン

最終版のデザイン

最後に

レシピ改善のプロセスを繰り返しながら、Cookingサークルでのフォカッチャ会も計4回開催したことにより、各メンバーが手間取ることなく調理でき、今ではふっかふかのフォカッチャを作れるようになりました！
元々ひとりで始めた改善でしたが、このようにプロセスをまとめることで、良いところや足りなかったところが見えやすくなります。皆さんもぜひ日々のアウトプット練習として、まとめてみるのはいかがでしょうか。