ブログの世界では、ユーザー体験のデザインに関する項目を１つだけ扱う記事にあふれていて、その多くは細かい部分に着目しています。そこでCodalのUXケーススタディでは、包括的な視点からUXを検証することを目指して、体験全体がどのように機能しているのかを俯瞰的にとらえることにしました。
以前、私たちは人気のモバイルアプリBumbleをUXの視点から検証しました。そしてそのプラットフォームの欠点を特定し、デザインの優れた点を確認しました。今回のUXケーススタディでは、マッチングアプリを離れて教育分野を掘り下げたいと思います。
編注：上記のBumbleのケーススタディの翻訳はこちら「ケーススタディ：出会い系アプリbumbleのUXデザイン」
Duolingoは、現在もっとも有名な言語学習用のアプリの１つで、世界で１億５千万人がユーザー登録しています。Duolingoはゲーミフィケーションのアプローチを教育分野に応用し、勉強をゲームアプリのキャンディクラッシュよりもずっと夢中になれるものにしようと試みています。
この時点ですでに難しい課題ですが、DuolingoのUXチームはさらに骨の折れる課題を抱えています。Duolingoは23言語のコースを提供していますが、アプリのデザイン自体では共通の言語を使う必要があります。また文化や言語の障壁を乗り越える体験が提供されなければいけません。
これらすべての点を踏まえれば、ユーザー体験を全体を通して途切れのないように機能させる方法を追及するに当たって、Duolingoは完璧な候補者だと言えます。私は自分のiOSにDuolingoの最新バージョンをダウンロードして、検証をスタートしました。
アイコン
アプリを開く前に、Duolingoのロゴについて簡単に解説させてください。アプリのアイコン自体は、鮮やかなグリーンの羽をもつ鳥の絵をズームしたものです。これによって楽しそうな見た目のアプリになり、夢中になれるモバイルゲームにさえ感じられます。
他愛ないことのように見えますが、私たちは、このアイコンをDuolingoのビジネスモデルにとって重要なものだととらえています。彼らのビジネスモデルは、アプリをできる限りたくさん、定期的に使用してもらうことです。この戦略は、遊び心があって楽しく、FacebookやTwitterのような時間をとられるだけのアプリよりも思わずクリックしたくなるアイコンデザインから始まります。
最初の画面
Duolingoの最初の画面でも、楽しそうで、たわいのないビデオゲームのようにさえ感じられるアプリの外観が維持されていて、アニメ調の青い背景に雲が流れています。私はDuolingoの開始画面が、スクリーン１枚分だけであるところがとても好きです。一方、ほかの多くのアプリは複数画面をスワイプするという一般的なトレンドを採用しています。
「言語をずっと無料で学びましょう」というメッセージには、アプリの目的が集約されています。このメッセージが強調しているのはアプリの２つのインセンティブです。
- 無料であること
- 実用的であること
ここで学べる言語スキルは、大学２年生で習うスペイン語と同じ様に一生涯使えるものとなるでしょう。
見た目をより魅力的にするために、開始画面とアプリそのもののデザインはフラットデザインにならい、またGoogleのマテリアルデザイン言語にもヒントを得ています。
最後に、画面下の大きなCTAに触れれば開始画面は終了です。シンプルで装飾のない２つのボタンがあり、「始める」と「アカウントを作成済み」と書いてあります。Duolingoのアプリとして特筆すべきことは何もないので、上の「始める」ボタンを押して、検証を開始します。
オンボーディング？
さて、面白いものが出てきました。
私は「始める」を押したら、Duolingoのアカウントかプロフィールの作成をうながす画面が出ると思っていました。ほとんどのアプリは、名前やメールアドレス、パスワードなどをフォームに入力するつまらないタスクをユーザーに課すものです。しかし、Duolingoは違います。
代わりに出てきたのは、画面の上部に「コースを選ぶ」と書かれたシンプルなヘッダーがあり、言語のリストが必要最小限に表示された画面でした。画面自体に、興味深い見た目のものは１つもありません。単なる２色のカラースキームで塗られた基本的なリストです。少なくとも、操作をする上ではわかりやすいです。
こじ付け程度の不満を言えば、検索バーが不足しています。Duolingoが提供する言語数から言って、このリストは長すぎます。最終的に学びたい言語を見つめるのに、何度もスクロールを強いるべきではありません。ここでは単純に、私は１番上の選択肢であるスペイン語を選択します。
すると即座に、私たちの長年の敵である「通知を送りたいと思います」というポップアップ画面に妨害されました。通知リクエストは大抵の場合、必要悪であり、上手にデザインするためには以下のことを説明することが重要です。
- なぜ通知をリクエストしたのか
- 「はい」を押すことで、ユーザーにどのような利点があるのか
Duolingoはこの２点をほとんど達成していて、「設定した目標を達成できない恐れがあるときに、アプリは通知をします」と答えています。私はスペイン語を学習したいと言っただけなので、自分の目標とは何なのかわかりませんでしたが、灰色で隠れた背景に、「目標を選択する」という記述が見えます。そのため、私のこの疑問にも答えてくれているのだと推測します。
とは言え、より直感的にユーザーの心を掴むためには、ゴールを選択する前ではなく、選択したあとにポップアップを表示したほうが良いでしょう。Duolingoのフクロウがこの選択が永続的ではないことを示しているので、私は安心して「普通」の目標を選択し、次に進みます。
学習
次に、Duolingoのホーム画面だと思われるスクリーンに来ました。アプリのインターフェスの中心です。しかしすぐにはその全容を見ることはできません。風変わりなマスコットが戻ってきて、最後の質問がされます。私が初心者だと回答すると、すぐに最初のレッスンが開始されました。
Duolingoが採用する教育戦略が効果的かどうか私には判断できませんが、学習コースのスクリーンはすっきりと良くデザインされており、きわめて使いやすいです。またイラストがGoogleのマテリアルデザインを反映しているのこともわかります。
それぞれの選択肢を選ぶと、ヘッドフォンを通じてスペイン語の発音が流れてきます。もし音がオフになっていたりヘッドフォンを持っていなかったりしたら、Duolingoはそのことを教えてくれたのか疑問に感じました。
答えを選んで「チェックする」ボタンを押すと、明るい効果音と「正解です」というバナーが褒めてくれます。また、画面トップの灰色の線がプログレスバーで、緑色の線が左から現れることに気づきます。右上のハートマークはまだ何なのかわかりません。タップしても、何も反応はありません。
レッスンは同じように続き、スペイン語の文法と語彙を教えてくれます。私は前の質問に戻って見直すという選択肢がないことに気づきました。この基本的なレッスンでは問題になりませんが、より上級のトピックでは不満を生んでしまうかもしれません。
最初のレッスンが終わると、「レッスン完了」の画面が出現します。ゲーミフィケーションの戦略を忠実に守っていて、私は「XP」を獲得し、円がオレンジの線で覆われました。これは１日の目標の半分を完了したことを意味するものです。
続けるボタンを押すと、私がスペイン語を７％流暢に話せるようになったと伝える画面になりました。それを信じるかどうかは別として、これはユーザーに与えるべき魅力的な数値です。アプリのすべてが、Duolingoを使い続けてもらうようにデザインされています。
ようやく、プロフィールの作成が求められました。やや直感に反していますが、「プレイファースト、プロフィールセカンド」というこのUX戦略こそが、Duolingoのもっとも賢い行動の１つだと私は思います。なぜプロフィールを作成すべきかという問いに対して、Duolingoはゆるぎない答えを作っているからです。私は既にレッスンを完了してXPを獲得し、10％近く流暢になることがどんなに簡単なのかを知ってしまいました。ここまでの所要時間は15分以内です。短い時間内でこれだけのことを達成したので、私はプロフィールを作りこのまま学習を続けることにやぶさかではありませんでした。
プロフィール
質問が表示されるまでしばらく待ったあと、Duolingoは私がこれまで経験した中でもっとも負担のかからないアカウント作成画面を表示しました。画面は名前、メールアドレス、パスワードの３つだけです。装飾は一切ありません。白い背景に入力フィールドがあり、進捗状況のマーカー（２／３）が右上にあるだけです。
これはとても基本に忠実なデザインと言えます。Duolingoはできるだけ早くプロフィールを作成させて、学習プロセスに戻そうとしています。アカウント作成を楽しくできないのなら、作成のプロセスをできる限り最小限にしようと試みたのです。彼らのモデルは、「学ぶことが多いほど、見返りも多い」という信念に基いています。
まとめ
Duolingoにおけるユーザー体験はとても幅広いものなので、すべての機能を見ることはできませんでした。たとえば、ほかにもDuolingoにはアプリ内ストアや「クラブ」の機能などがあります。ただ、膨大なユーザー体験を整理して、いくつかの要点を特定しました。
最初に優れている点として、Duolingoのユーザー体験には、一貫性があり、完璧にゲーミフィケーションを用いた教育の戦略に沿っています。App Storeのロゴから実際のレッスン画面まで、アプリには楽しさと遊び心のあるデザインがたくさん詰まっています。プロフィール作成のような「単に事務的なアクション」の割合は最小限に抑えて、できる限り強調しないようにしています。
一方で、Duolingoにはペインポイントもあります。ナビゲーションに細かなほころびがありました。また、いくつかのデザイン要素は単純すぎて、目立たなかったり印象に残らないと指摘される可能性があります。
しかし全体として、Duolingoのユーザー体験は、一貫性があり、誰に対しても直感的でユーザーフレンドリーなデザイン戦略がきちんと実行されている実例でしょう。
CodalのUXケーススタディでは、２つのまったく異なるアプリを分析してきました。それぞれに欠点はあるものの、最終的にはどちらも及第点を超えています。次回は見方を正反対変えて、（ほとんど）すべてが間違った事例を検証したいと思います。
