見出し画像

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

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

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

今日のお題は読書アプリのチャート/グラフ画面です。

014 読書アプリのチャート/グラフ画面

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

誰向け
積ん読しがちな20代の会社員
コンセプト
記録するほど楽しい気分になれる読書アプリ
雰囲気
知的な感じで、どんどん知識が溜まっていくような雰囲気
参考アプリ
・読書メーター
・ビブリア

今日はの読書メーターのチャート/グラフ画面をトレースし、リデザインしていきたいと思います

読書メーターのチャート/グラフ画面のトレースと分析

読書メーターは株式会社トリスタが運営する読書アプリで、アプリ1つで読んでいる本の記録、管理、シェアができるサービスです。

読書メーターのチャート/グラフ画面をトレースしたのがこちらになります。

014 読書メーター トレース

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

※このトレースは2020年5月時点のものです。
※トレースはスクショの数値を参考にしているので、実際のUIのサイズと異なる場合がございます。
※ナビゲーションバーのテキストは時間省略のため、アイコン扱いにしています。

読書メーターのチャート/グラフ画面では主に

・最近読んでいる本のページ数確認
・最近読んだ本の冊数確認
・先月読んだ本のページ数、冊数、ナイス数

の確認ができます。

読書メーターの問題点

読書が習慣になっている人はグラフが増え、既に読んだ本は「先月のまとめ」に反映されるので、充実感が得やすいと思います。

しかし、今回のターゲットの「積ん読しがちな20代の会社員」は言い換えれば、「まだ本を読めていない」ということです。

読書が習慣となっていないユーザーを最初から「冊数」を意識させてしまうと、プレッシャーに感じ、継続して本を読むのが難しくなる恐れがあります。

そのため、リデザインではグラフの基準を変え、積読しがちなユーザーでも充実感を得やすい体験設計を組み立ていきたいと思います。

リデザインの方向性

読書メーターの分析を終えたところで、リデザインの方向性を考えました。

・グラフの基準の変更
・リストに丸みを持たせてiOSのデザインに寄せる

上記の点を意識して読書メーターアプリのリデザインを行いました。

読書メーターのチャート/グラフ画面のリデザイン

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

014 読書メーター リデザイン

014 比較

グラフの基準の変更

従来の読書メーターの画面では「ページ数」と「冊数」を一緒に表示していました。しかし、積ん読しがちなユーザーにとって最初から「冊数」を意識させてしまうのはハードルが高いです。

そのため、リデザインではグラフの項目をページ数と冊数の2パターン用意して、最初はページ数で充実感を得やすいようにし、慣れてきたら冊数でグラフを変更し、より充実感を得ることができる構成にしました。

また、リデザインでは一週間ごとにグラフを表示し、一日単位でページ数が棒グラフで表示でしました。毎日コツコツ本を読めば、結果にすぐに反映されるので、徐々に記録をつけるのが楽しみになります。

リストに丸みを持たせてiOSのデザインに寄せる

リデザインではリスト型の画面に丸みを持たせ、iOSのデザインに寄せました。参考にしたのはAppleのヘルスケアアプリで、グラフの作り方もこのアプリを意識してデザインしました。

おわりに

次回は015 カメラアプリの撮影画面のトレースとリデザインをこのnoteに書いていければと思います!

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

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