見出し画像

Daily Cocoda! 2周目に取り組んでみた 016

現在、UX/UIデザイナーとして就職を目指している仲田 光佑です!

今日もDaily Cocoda!のお題に取り組んでいきたいと思います。

今日のお題はニュースアプリのカテゴリ選択画面です。

016 ニュースアプリのカテゴリ選択画面

まずはお題の確認をしていきたいと思います!

誰向け
これからITの知識をつけたい女性新卒社員
コンセプト
好みのカテゴリを選ぶと、適した記事をオススメするAIニュースアプリ
雰囲気
難しいニュースを読むのが、ちょっと前向きになるPOPでおしゃれな空気
参考アプリ
・Gunosy

今日はGunosyのカテゴリ選択画面をトレースし、リデザインしていきたいと思います

Gunosyのカテゴリ選択画面のトレースと分析

Gunosyは株式会社Gunosyが運営するキュレーションアプリで、無料でユーザーの好みに合わせた情報を収集できるサービスです。

まず、Gunosyのカテゴリ選択画面をトレースしたものがこちらです。

016 トレース

スクリーンショット 2020-04-20 17.56.51

※このトレースは2020年5月時点のものです。
※トレースはスクショの数値を参考にしているので、実際のUIのサイズと異なる場合がございます。

Gunosyのカテゴリ選択画面ではモーダルで展開されていて、この画面では

・カテゴリの検索
・フォロー中のカテゴリの選択
・カテゴリの編集

の動作をすることができます。

様々な情報をキュレーションするアプリなので、カテゴリ数も多く、ユーザーは豊富な選択肢の中から好きなカテゴリを選択できます。

また、カテゴリが多すぎた場合、「編集する」ボタンを押せば、カテゴリを減らすこともでき、ユーザーの情報収集のスピードを上げることも可能です。

画像5

※上記の画面はスクショです。

リデザインの方向性

Gunosyのトレースと分析を終え、ターゲットに合わせたリデザインの方向性を決めました。

・カテゴリ選択方法を一元化
・カテゴリ表示方法を変更

この2つを意識してカテゴリ選択画面をリデザインしました。

Gunosyの撮影画面のリデザイン

完成したリデザインがこちらになります。

016 リデザイン

016 比較

カテゴリ選択を一元化

トレース時ではカテゴリが多く、トピックを探すのに時間がかかる印象がありました。カテゴリを減らそうとしても、一旦、「編集する」ボタンを通してから必要ないカテゴリを消さないといけないので手間がかかります。

リデザインではチェックボタンでカテゴリ選択を行い、興味のないカテゴリはボタン一つで消去が完了できるようにしました。

また、今回のターゲットは「これからITの知識をつけたい女性新卒社員」なので、できるだけ、知的なカテゴリにすべく、エンタメやスポーツなどの関係のないカテゴリはなくしました。

カテゴリ表示方法を変更

当初のカテゴリ選択画面ではどのカテゴリにもシャドウがかけられていて、重要なカテゴリや人気のカテゴリがわかりづらいと感じました。また、これから知識を身に付けたいターゲットにとって多すぎる選択肢はかえって困惑し、どの情報を追いかければいいのかわからない状態に陥る可能性があります。

リデザインではカテゴリと内容を左側に寄せ、右側にチェックボタンという表示方法に変更しました。

こうすることで前述のようにカテゴリ選択を一元化しつつ、画面情報をスッキリさせました。

おわりに

次回は017 家計簿アプリの支出記入画面のトレースとリデザインをこのnoteに書いていければと思います!

いよいよ明日!!!

頼むよ...ビックカメラ...

スイッチをお願いします🥺

noteを読んでいただき、ありがとうございます!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
Cocoda!のポートフォリオ→https://cocoda-design.com/KN619
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。