レシピ管理アプリのUIデザイン改善案を考えてみた
こんにちは。Yuiです。デザインコミュニティBONOにてデザインを学習しています。
今回は、その一環としてとある既存のレシピ管理アプリの改善案を考えてみました。
きっかけ
日頃、プライベートにてレシピについて以下のような課題を感じていました。
以前にネットで調べて作ってみたら美味しかったレシピをもう一度検索から探すのが手間。見つからないこともある
献立が思い浮かばないことがある
そのため、あらゆるレシピを1箇所にまとめて管理できるアプリを見つけ、これはまさに私が求めていたものだと感じました。
実際に使ってみたところ、レシピを一箇所に集約できるだけでなく、自分用に編集もできる点がとても便利でした。しかし、一部ですが、もっと便利になりそうだなと思う箇所もありました。デザインコミュニティBONOに”FAILURE POINT”という既存サービスの課題を見つける方法を解説したコンテンツ（↓）がありましたので、今回はそれを使って課題発見をして、改善案まで考えてみることにしました。
レシピ管理アプリの概要
スクショでわかるかもしれませんが、一応名前は伏せさせていただきます。
レシピアプリやレシピサイト、レシピ本、自分のオリジナルレシピなどあらゆるレシピを1箇所に保存・管理することができるアプリです。レシピサイトのURLを連携するだけでなく、レシピそのものを保存でき、自分用に編集もできる点が特長です。
また、保存したレシピで献立や買い物リストを作ることができます。
事前調査
自分の行動のみに基づくとバイアスがかかると考え、まず自炊にまつわる普段の行動を母（50代・専業主婦）にヒアリングし、フローにまとめました。
母は「安くていい食材を買っておく→食材から発想して献立を決める→献立に足りない食材を買う」のフローを辿っています。また、週末にぼんやり一週間分の献立をイメージし、献立の詳細は当日に決めるそうです。以降はこのフローに基づいて分析します。
行動フローを書いてみる
1 .調べたいこと＋ゴールを設定する
今回のゴールを、「アプリ内に今日の夕飯の献立を登録する」に設定しました。いざ作るときにすぐにレシピを見れるようにしたいからです。
2 .思考と行動の流れをできるだけ細かく書く
母と同じフローで献立を立てている場合、このアプリを使うと下記の流れになると考えました。
3 .各フローの具体（UI）を貼る
このアプリでは、「献立をたてる」ボタンから登録する方法と、「マイレシピ」という保存したレシピの詳細ページから献立に追加する方法の2パターンがあります。どちらも使用しうるため、両方のUIを貼りました。
4 .各フローで運営的にはやってほしいことを書く
課題を出す
使う人が実際に感じそうなことを書く
→なぜそう感じるのかを書く
→負の感情=現状とのギャップがある場合は課題として書き出す
を行いました。このアプリのユーザーを見つけられなかったため、アプリ初見の家族にも操作をしてもらい、家族がつまづいたところや感じたことも追加しました。
課題ポイントに基づき、今回は4つのポイントから改善案を作成することにしました。
食材名でも検索できることが伝わるようにする
レシピの絞り込み検索ができるようにする
「献立をたてる」からのフローを見直す
レシピの詳細ページから献立を追加できることが伝わるようにする
改善案を作成する
改善案のプロトタイプはこちらです。
1.食材名でも検索できることが伝わるようにする
冷蔵庫の食材から献立を考える際に、食材名での検索をすることが想定されます。食材名で検索できることがすぐに伝わるように、検索バーのプレースホルダーの文言を変更しました。
before:「すべてのレシピから検索する」
After:「料理名・食材でレシピを検索する」
2.レシピの絞り込み検索が簡単にできるようにする
献立を決める際の「メインディッシュは何にしよう」「もう一品何にしよう」と考える行動フローに対応するには、レシピの絞り込み検索も楽にできる必要があります。
別画面に遷移することなく複数条件で絞り込みができるように、フォルダからハッシュタグのフィルターに変更しました。ハッシュタグの編集・追加はレシピの詳細ページからできます（後述）
変更前
変更後
3.「献立をたてる」からのフローを見直す
諸々の課題をまとめてしまいました。具体的には以下のような課題です。
毎回必ず「日付選択」のステップを踏む必要があり、当日の献立を立てるときに煩わしい
朝昼晩（＋おやつ、おつまみ）どの献立かの選択ができない
一日の中のどの献立なのかは大事なのに選べないんだね〜 by家族
献立にあとからもう一品追加する方法がわかりづらい（日付の横の3点アイコンをタップし、レシピの変更を選択するのが正解）
変更前
変更後
ポイント
使用時の日付と時間帯から「日付」と「カテゴリー」をデフォルトで選択させておくことで、当日、条件が揃えばレシピ選択のみで完了できるようにした
「レシピを追加」のボタンを見つけやすい位置に配置した
複数のサイト（下記など）で調査したところ、献立を考えるのは長くても1週間分であったため、1週間が画面に収まるようにした（スクロールすれば先々まで見ることもできる）
ちなみにボツ案はこちらです。「献立」のフォルダにレシピを格納したことで、却ってレシピを開くまでのタップ数が増えてしまいました。
4.レシピの詳細ページから献立を追加できることが伝わるようにする
レシピの詳細を見て「これを今日の夕飯に作ろう」と考えたとき、レシピの詳細から献立に追加できる必要があります。
家族に操作してもらったところ、ボトムナビにある献立アイコンと献立アイコンの一致に気づかず、「レシピの詳細から献立には追加できない」と誤って認識してしまったため、変更しました。
変更前
変更後
レシピ詳細ページについて、献立の追加以外も併せて変更しました。
レシピの編集をペンのアイコンから文字での説明に変更
「外部サイトから取り込んだレシピを自由に編集できる」ことはこのアプリの特長なのですが、家族に操作してもらったところ「ペンのアイコンを押して何ができるのか全く分からない」とのことでした。そのため「レシピの編集」と明記しました。
ボトムナビを削除
詳細ページなのにボトムナビが表示されていたため削除しました。
「このレシピを削除する」の位置を移動
ページ最下部にありましたが、「レシピの編集」と離れていると探しづらく、また表層にあるため誤って削除するリスクがあると考えました。そのため編集の横の3点アイコンの中に収めました。
タグの欄を追加
「2.レシピの絞り込み検索が簡単にできるようにする」にてフォルダからタグに変更したため、タグの欄を追加しました。
一連の改善後のプロトタイプを家族に操作してもらったところ「格段に良くなったと思う」といってもらうことができました。
終わりに
今回初めて既存アプリの改善にチャレンジしてみました。「使っていてなんとなく違和感があるけれど、これは標準的な挙動なのか？そうではないのか？」と悩むことが多々ありました。今後私自身がさらに成長していくためには、既存アプリをさらに研究して知識を増やしていくことが必要だと感じました。
また、このアプリのユーザーにはインタビューすることができなかったので、主観が多分に入ってしまっていると思います。業務で改善する際には、難しいのですが主観を極力排除して、ユーザーの本音を掬い取れたらと考えています。
以上になります。
この記事が気に入ったらサポートをしてみませんか？