文法学習アプリ DuolingoのUIトレーシング
おはようございます。ダイゼン（@daizennnn）です。
UIだけでなく、UXにも広げて既存サービスの研究とトレーシングをしていくことにしていくこの企画。今関わっているプロジェクトのサービスでUXライティングをしているため、類似の既存サービスがどのようになっているかを調査すべく始めました。
第1回目のカテゴリーは「言語学習サービス」。
このジャンルのアプリやサービスはあまりにも言語を学習することが当たり前になっている世の中だからこそ、使用したことのある人は多いかと思います。
このマーケットの規模やそれぞれのポジショニングについてはこのお題のトレーシング企画の最後に行うとして、今回はその中でもポピュラーなサービス「Duolingo（ドゥオリンゴ）」をトレースしていきます。
Duolingoについて（超ざっくり）
まずはDuolingoとは一体？と言うところから。（皆さんご存知だと思うので、かなりざっくりといきます）
一言で言うと語学学習サポートアプリです。
特徴はゲーム感覚で語学が学べるということ、言語の幅が広いこと（59言語に対応 wikipedia調べ）、最近だと教育機関と連携してDuolingo独自のプログラムを提供していること、翻訳も行っていることです。
単なる個人ベースの教育アプリと思いきや、教育機関や企業と連携して、翻訳プログラムを提供しているとは。収益構造もアプリだけじゃなさそうです。
UIUX的な学び
今回はビジネス的に…というところではなく、単にユーザーとして直感的に使ってみて、デザイン的に良いなと思う点と自分ならこう改善するなという点を挙げていきます。（大体1回目はこんなもんで中途半端です。次回以降はビジネス構造も分析視点に入れていきます。）
・ユーザーを飽きさせないゲーム性
・自分の成長がゲームを通してわかる
・モチベーションが上がるバロメーターがある
・無料でできる範囲が広い
・アカウントを作らなくても遊べる
｜ユーザーを飽きさせないゲーム性
皆さんは何回語学学習に挫折をしましたか？スペイン語通訳している私でも、英語勉強は何度も挫折しています。検索エンジンでも同じような悩みの人がたくさんいました。
しかし数多とある語学学習サービスの中でも、Duolingoが伸び続けていることの一つには中毒になってしまいそうになる、ゲーミフィケーション。
どれだけユーザーを虜にしているのか、まずはアクティブユーザー数を見てみましょう。2012年から本格的にローンチ開始しています。
以下はダウンロード数。2018年時点ではアクティブユーザー数の10倍に増えています。
参考：Duolingo Revenue and Usage Statistics (2020)
これだけ成長を続けられているのも、テック×教育×ゲームにあります。
｜自分の成長がゲームを通してわかる
成長はゲームの中と、実際の英語能力の二つで測ることができます。
Duolingo内で自分のバロメーターが表示されることによって、「これだけ達成してたんだ」と数値で実感できます。
また、単語だけじゃなく、文法も学ぶことができるので、実践で使うことができると本来の目的達成にもつながります。（本来の目的は「英語を話す」ですよね）
｜モチベーションが上がるバロメーターがある
これも上記と同様、日々の積み重ねが目に見えると、明日はもうちょっと頑張ろう、となるわけです。
｜無料でできる範囲が広い
Duolingoには無料と有料とあります。中身については広告がなくなる、間違えても永遠に回答し続けられる、という点です。
要は逆にそれだけしかないので、有料でなくても、無料で十分に楽しむことができます。途中で「ここからは有料会員のコンテンツです」って嫌ですよね。せっかくやる気が出ていたのに。
有料と無料の違いについては以下の記事を参考にしました。
duolingoの使い方や効果、有料版plusのメリット、◯◯でライフ制限なしで学ぶ方法
｜アカウントを作らなくても遊べる
最初の導入としては良い点だなと思いました。
新規登録画面での離脱ってけっこうあると思うので、最初の導入としてアプリをダウンロードしたらすぐに遊べて試せるのは、ユーザーにとってもストレスフリーです。
気に入れば新規登録すれば良いのですから。
これは今後自分がサービスやら作っていく時に取り入れたい視点だなと思いました。新規登録しないと使えないって、無料であってもユーザー側からすると結構ハードルが高いものです。
改善・リデザインしたいところ
しかし、使っていく中で若干の障害、使いづらさを感じた部分がありました。
わたしはヘビーユーザーではありませんが、久しぶりに1日使ってみて感じた不便な点を書き出してみました。
・ボタンを押したら次に何が起こるかわからない
・間違った単語や問題が何かわかりづらい
・単語帳がない
・導線が分かりにくい
・言語やレベル設定がしづらい
｜ボタンを押したら次に何が起こるかわからない
メニューバーのアイコンが可愛い！のはさておき、正直なところ、押してみるまでそのアイコン自体が何かわからない、と言う疑問が湧きました。「押して発見」はありますが、ユーザーがどんな目的を持ってDuolingoを使用しているのか、と言うことを考えると、「言語の勉強をしたい」ということであるため、せめて学習の導線もしっかり明示しておくことが大事なのかなと思います。
｜間違った単語や問題が何かわかりづらい
正解例と見比べれば間違いはわかります。
しかし、上の自分の回答だけを見ても、どこの部分を間違えたのか、一眼ではわかりません。要は自分の間違いが分かるまでに数秒要するということ。
｜単語帳がない
機能として欲しいものが単語帳。
自分が間違った問題を後で復習して反復して学習をしないと新しい単語などは身につきません。（と筆者論です）
｜導線が分かりにくい
「ボタンを押したら何が起こるかわかりづらい」と同じですが、例えば目的を持ってこのアプリを使用したい場合に、どこに何があるかは初心者のうちだとわかりにくいなと思いました。
例えば言語を設定する場合。「？」で恐る恐るアメリカの国旗部分をタップすると思います。
はい、ここで言語設定をします。
正解があっているからいいと思う人がいても、少しでもユーザーに考えさせてしまうつくりになっているので（あくまでワタシは）ここをリデザインしたいと思います。
｜言語やレベル設定がしづらい
これは上記と重複しています。
感覚的なものではありますが、例えば英語の勉強をしたい！と思っても、ある程度英語がわかる人であれば、このアプリはとても物足りません。自分のTOEICレベルやTOEFLレベルを入力して自分にあったレベルで学べたらいいなと思いました。
Duolingoのトレーシングとリデザイン
以上の点を踏まえて、Duolingoのリデザインをしていきます。
【ワタシ的リデザインルール】
・デザインやそのサービスらしさは残す
・機能面や情報設計の観点でリデザインする
・自分の出した課題を克服できているか
｜レッスン選択画面
大きく変更した点はレッスンの配置を変えました。
こうすることで下に進める感と未達成のレッスンについては透明にすることで、まだ進めない感を出しました。
〇〇できそう感は以下のnoteを参考にさせていただきました。
その他、以下をリデザインしています。
・ボタンを押したら次に何が起こるかわからない
→メニューバーに機能を記載
・導線が分かりにくい
→言語設定や個人ページを丸にしてボタンっぽく
・言語やレベル設定がしづらい
→ヘッダーに自分が進んでいる語学レベルを記載
｜問題画面
デザインは変えておらず、UXライティング的に疑問だったので、より人間らしい、先生みたいな言葉遣いに変更しました。
｜問題正解画面
問題の回答を確認する画面ではオリジナル版では「コメント」と「フラッグ」（機能としてはDuolingoに意見を送ったり、問題に関することをDuolingo側に質問できます）だったのですが、いまいち機能としてこのアイコンじゃわかりにくいことと、ユーザーとして欲しい機能が「ブックマーク」や「単語帳」機能だったので、「ブックマークアイコン」を入れました。
ボタンを押すドキドキ感がこれでなくなったのかなと思います。
｜問題不正解画面
ここのリデザインは、一体どこを間違えたのかがわかりにくい、という自分の疑問からリデザインしていくことにしました。
オリジナル版だと目の動きが上から下へ、さらに間違えた文と見直しをする際ももう一度上へ目線を動かすはずです。
リデザイン版ではその目線の動きを減らすことに注目し、上でどこを間違えたのかを表示し、下で回答を見せる、ということにしています。
以上、既存サービスのトレーシング・リデザインでした。
引き続き語学アプリを次回もやっていきます。
UIUXデザインのまとめはこちら。
インスタアカウントはこちら。
この記事が気に入ったらサポートをしてみませんか？