UIデザインの学習記録（その３）

こちらの作品はcocoda!+という有料サービスに参加した際に、作品を提出しFBしていただきました。🙇‍♀️

04_料理アプリの検索画面

お題内容🗒
ターゲット：食べ盛りの子供を持つ夫婦・家庭・共働き
コンセプト：冷蔵庫にある食材で手軽にできる料理アプリ
デザインの雰囲気：あたたかい・優しい→暖色カラー食材に使用されているオーガニックカラー
(dailycocoda!のお題より引用→https://cocoda-design.com/contents?category_id=16)

■分析したアプリについて

検索機能のメモ✍️
・クックパット→含まない食材が初めの段階で入力できる。
・クラシル→シンプルでわかりやすい、直感的。
・レシピオ→食材管理がそもそもの目的（？）のため、他のアプリより料理検索の仕方が特殊。ユーザーの好みや状況に合わせて料理を提案してくれるという新しい検索方法。
・DELISH KITCHEN→動画多めのデザイン。カテゴリー検索が一番わかりやすい。

■カラー参考（https://colorhunt.co/palette/135565）

今回は分析したアプリをそれぞれ参考に作成してみました。普段、クラシルを使うことが多いので、ティストはクラシルのデザインを参考にしてます。

トップ画面

初めはアプリの広告画面スペース（バナー部分）も含めてデザインをしてました😓
デザインする際は、広告部分のデザインスペースは想定してデザインする必要がないことと、もし入れるのであれば、きちんとデザインしたバナーを入れた方がいいというアドバイスを頂き、修正しました。

＜修正前＞

＜修正後＞

検索画面

食材を検索するので、アレルギーとかの「含まない食材」については初めから表示するのがいいのか、あとで入力して絞り込めた方がいいのか悩みました。

検索は、一気に検索できたら楽かなと思い、検索記入欄の下に絞り込み入力も並列させるデザインにしました。（こちらについてはクックパッドを参考にしました。クックパッドは検索の際含まないボタンを押すと含まない食材が記入できるようになる設計でした）

また、がテゴリー検索も一気にできたらいいなと、機能盛りだくさんの検索画面にしてしまいました。

＜修正前＞

＜修正後＞

●「含まない食材」を検索機能に入れることについて

かえって検索機能の優先順位をややこしくしているので、検索するという機能を優先し、シンプルな検索UIに修正しました。

含まない食材については、優先度を下げDELISH KITCHENのようにマイページから設定できるようにするやり方が一番いいという結果に落ち着きました👍

●カテゴリー検索について

このような検索画面は複数の選択肢があり、ユーザに混乱を生じさせるため、なるべくしない方がいいことや、ユーザーがカテゴリー部分を押すとどのような挙動になるのか、わかりにくいため、「＞」などの画面移行を示すアイコンを入れたほうがいいというアドバイスをいただき修正しました。

検索結果画面

検索結果の画面です。

絞り込み画面

検索結果後、もっと詳細に料理を絞り込みをするときの画面も作ってみました。

まとめ

「検索画面」は一見簡単そうに見えるのですが、情報の設計の仕方とか、ユーザーにとって一番優先すべきことは何かなど検索しやすいよう、載せる情報や機能を必要最低限のもの絞り込むことなどを学びました。

また、なんでも（便利だからといって）いろんな情報を機能に詰め込みすぎるのはかえって混乱を招いてしまうので気をつけていこうと思いました😅