語学学習アプリのデザイン:ホーム画面リデザインのビフォーアフター
統計を9pxの一文で綴り、ユニットを同じ大きさの12行で並べた語学学習アプリのホーム画面と、それを直した同じ画面。シンプルなカウンター、ベタ塗りのユニットバナー、ノードの道、そしてStartバブル1つ。変更点をすべて並べて比較し、無料のFigmaファイルも付けました。
語学アプリのホーム画面の仕事はひとつ。学習者を今日のレッスンに連れていくことです。下の初稿には学習者に必要なものがすべて揃っていますが、読み味は学校の成績表です。統計はグレーの一文、ユニットは割合つきの同じ大きさの12行、派手なバナーはサブスクを売り込み、次の一歩は下にある小さなCONTINUEだけ。
修正版は機能をひとつも減らさず、見た目と置き場所だけを変えます。統計は4つのシンプルなカウンターに、ユニットはベタ塗りのバナーに、リストはノードの道に変わり、バブルがひとつ「Start」と言います。
画面全体のビフォーアフター
初級者の初稿
修正版
左の画面では、すべてが同じ重みです。9pxの統計行、派手な黄色いバナー、12の行、CONTINUEボタンが一斉に注目を求め、どれも「まず私をタップして」とは言っていません。
右の画面は、学習者が考える順に上から下へ読めます。調子はどうか、これはどのユニットか、そのどこにいるのか、何をタップするのか。道がひとつ、バブルがひとつ、アクションがひとつです。
変更点を数字で見る
| 初級者の初稿 | 修正版 | |
|---|---|---|
| 統計 | 一文、9 px | 国旗、ストリーク、ジェム、ハートを16 pxボールドで、小さなPLUSタグ |
| ユニット | 「Unit 3 Ordering Food」というテキスト1行とGuideリンク | 350 x 76の紫のバナー、20 pxのタイトル、下端に4 pxの濃い縁 |
| レッスン | 42 pxの行が12本、11 pxの名前、9 pxのXPとパーセント | 64 pxのノードの道、名前は1つだけ表示 |
| 次の一歩 | 下部に91 x 30の大文字CONTINUE | 現在のノード上のStartバブル |
| マージン | 左14、右12 | 両側20 |
| タブ | 5つ、塗りとアウトラインのアイコンが混在 | 4つ、アイコンのみ、スタイルは1種類 |
修正1:統計はシンプルな1行にまとめる
Before
After
初稿のヘッダー:Hola、My Courseとスペイン語コース、その下に41日ストリーク、スペイン語のドロップダウン。続いて「Level A2 62.5%、XP 1240、Hearts 4/5、Gems 320、League Silver」と書かれたグレーのバー、そして「GO PLUS NOW」と初月50%オフ、UPGRADEボタンのある黄色いバナー。対する修正版は1行:スペインの国旗、41の炎、320のジェム、4のハート、小さな黄色のPLUSタグ。
初稿は統計を文章で綴っています。「Level A2 62.5% | XP 1240 | Hearts 4/5 | Gems 320 | League Silver」。9 pxでグレーで、文章として読まなければなりません。毎日アプリを開く学習者は、自分の数字を読みたいのではなく、ちらっと見たいのです。
修正版では、各数字にアイコンと色を与えます。41日ストリークには炎、320にはジェム、4にはハート。16 pxボールドで1行に並ぶので、目は一度でそれらを拾えます。スペイン語のドロップダウンは国旗になり、タップで言語リストが開きます。50%オフとUPGRADEボタン付きの「GO PLUS NOW!!!」バナーは、行の端にある小さなPLUSタグに縮み、オファーはそこから開きます。
レベル、XP、League Silverはプロフィールタブへ移しました。大事な情報ですが、アプリを開くたびに必要なものではありません。
使い回せるルール:学習者が毎日確認する数字はアイコンで見せ、残りは1タップ先に移す。
修正2:ユニットにベタ塗りのバナーを与える
Before
After
太字の「Unit 3」とグレーの「Ordering Food」のテキスト1行、右側には下線付きのGuideリンク。対する修正版は、小さな大文字の「SECTION 1, UNIT 3」、20 pxの白い「Ordering Food」、細い区切り線、本のアイコンが入ったベタ塗りの紫のバナーで、下端に濃い縁があります。
初稿では、ユニットはただのラベルです。「Unit 3」と「Ordering Food」がテキストリンクと同じ行に並び、これが下のすべてを束ねる見出しだとはどこにも示されていません。
修正版ではバナーにします。350 x 76、角丸12、ブランドの紫、20 pxのタイトル、押せそうに見せる4 pxの濃い下端。画面で唯一の大きな色のかたまりなので、学習者は読まなくてもどのユニットにいるか分かります。Guideリンクは、細い区切り線の奥、右側の本のアイコンになり、1タップで行けるままです。
使い回せるルール:下のすべてが属する見出しには、テキスト1行ではなく色のかたまりを与える。
修正3:リストを道に変える
Before
After
リストに並ぶ12行。それぞれアイコンと名前があり、右にXPとパーセント。紫のチェックと100%が3つ、再生アイコンと0%の「Ordering Drinks」、そしてMain CoursesからUnit Reviewまでのグレーのロックと0%が8つ。対する修正版は、5つの太い円がうねる道:チェック済みの紫のノードが2つ、黄色いリング付きの紫の星のノードが1つ、グレーのロック中ノードが2つ。
画面全体を支えるのがこの修正です。初稿では、どのレッスンも42 pxの1行で、名前は11 px、数字は9 pxが2つ。同じ大きさの行が12本あれば、12個が等しく重要だと言っているようなもので、学習者は未完了のひとつを自分で探さなければなりません。
道は、形と色だけで伝えます。終わったノードはチェック付きの紫、現在のノードは星と進捗リング付きの紫、ロック中のものは鍵付きのグレー。各ノードは64 pxで下端に5 pxの濃い縁があり、現在のノードを囲むリングは92 px、12レッスン中3つ分が黄色で埋まっています。ユニットの状態は、文字がなくても部屋の反対側から読み取れます。
失われるものはありません。名前はノードから開き、XPは現在のレッスンのバブルに表示され、100%はチェックに、0%は鍵になりました。他のレッスンは道の先にあります。Duolingoはこの道を学習アプリの標準にしましたが、ここでも同じ理由で効きます。進捗は読むものではなく、歩くものだからです。
使い回せるルール:項目に状態と順序があるなら、状態は形と色で、順序は位置で見せる。
修正4:現在のノードにStartバブルをひとつ置く
Before
After
リストの下、右下にある大文字の「CONTINUE」と書かれた小さな紫のボタン。対する修正版は、細い枠線のある白いバブルに「Ordering Drinks」と「Start, 12 XP」と書かれ、黄色いリングの中の紫の星のノードへ向けて下向きの矢印が伸びています。
初稿では、次の一歩は12行の下にある91 x 30のCONTINUEボタンです。始めるレッスンから遠く、学習者は両者を自分で結びつけなければなりません。しかも大文字で、上のUPGRADEボタンと同じ書式なので、主要なアクションに見えません。
修正版は、アクションを対象の上に置きます。現在のノードの上のバブルがレッスン名「Ordering Drinks」を示し、「Start · 12 XP」と言います。2 pxの細い線で影はないので、道の一部として読めます。名前が出るのは現在のレッスンだけなので、タップするものはひとつです。
使い回せるルール:主要なアクションは対象のすぐ隣に置き、アクションの中に対象の名前を入れる。
その他の小さな修正
- 機能はすべて残る。 スペイン語のドロップダウンは国旗に。My CourseのタイトルはLearnタブに。League SilverとLeagueタブはプロフィールタブへ。オファーはPLUSタグから開く。
- マージンはひとつ。 初稿は左14 px、右12 px。修正版は両側20、ブロック間は16。
- アクセントは1組。 紫(#7C3AED)はバナーとノードのアクションカラー。サン(#FFC53D)は進捗リングとPLUSタグだけ。
- 文字サイズのスケール。 初稿は9〜15 px。修正版は大きめで、カウンターは16 px、ユニットタイトルは20 px。
- フラットなタブバー。 塗りとアウトラインが混在した5つのタブは、同じスタイルの4つのアイコンになり、ラベルはなし。
- 影なし。 奥行きはドロップシャドウではなく、4 pxと5 pxの濃い下端から生まれる。
自分の学習画面を点検する
| 質問 | なぜ重要か |
|---|---|
| 戻ってきた学習者はストリークをひと目で読めるか? | 毎日の数字は文ではなくアイコンにすべき |
| ユニットの見出しは色のかたまりか? | 学習者に今いる場所を伝える |
| レッスンリストは文字なしで状態を示せているか? | 形と色はパーセントより速く読める |
| 主要なアクションはきっかり1つか? | メインボタンが2つあれば、メインはゼロ |
| アクションは始めるレッスンの隣にあるか? | 距離があると学習者が結びつける手間を負う |
| アップグレードのオファーはレッスンより小さいか? | 学習の上で売り込むと人は離れる |
Figmaファイルを入手する
無料ファイルには、初級者の初稿、修正版の画面、そしてすべてのパーツがコンポーネントとして入っています。
無料のFigmaファイル
語学学習画面のリデザイン、ビフォーアフター
両方の画面とすべてのパーツをFigmaコンポーネントで。無料、閲覧専用、複製して自分の下書きに入れてください。
FAQ
語学学習アプリのホーム画面はどうデザインすべきですか?
上部に少数のシンプルなカウンター、ベタ塗りのユニットバナー、色と形で状態を示すレッスンノードの道、そして現在のレッスンにStartバブルをひとつ。学習者は、読まなくても自分の居場所とタップするものが分かるべきです。
なぜ語学アプリはリストではなく道を使うのですか?
道は状態と順序をひと目で見せます。完了、現在、ロック中のレッスンは見た目が違うので、学習者は12行を読んで次のレッスンを探す必要がありません。
語学アプリはホーム画面にどんな統計を出すべきですか?
学習者が毎日確認するもの、つまりストリーク、ジェムやポイント、ハートです。レベル、XP、リーグはプロフィールタブに置けます。
学習アプリでアップグレードのオファーはどこに置くべきですか?
統計の行にある、オファーを開く小さなタグとして。レッスンの上に大きなバナーを置くと、レッスンと注目を奪い合います。
レッスンのノードはどれくらいの大きさにすべきですか?
約64 pxで、親指で押しやすい大きさです。修正版の画面では、下端に5 pxの濃い縁がある64 pxのノードと、現在のノードを囲む92 pxのリングを使っています。
出典
- 両方の画面は私たち自身のもので、Figmaで設計し計測しました。アプリのHolaとそのデータはすべて架空です。数字は両方の画面で一致しています。41日ストリーク、320ジェム、4ハート、12レッスン中4番目の「Ordering Drinks」(12 XP)。
- 研究したパターン:Duolingoの学習パスとBabbel。
- アイコンはPhosphor(MIT)。ワードマークはBaloo 2 ExtraBold。写真は使っていません。
- 最初はApp Brainyでカルーセルとして公開しました。
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
