【海外記事】人気英語学習アプリDuolingoのUIがどのように作られたか（デザイン編）
海外記事（主にデザイン関連）を英語学習がてら読んでまとめているのですが、数日に渡ってDuolingoのケーススタディについて読んできました。
今回は最終回で、これまでの情報を整理して具体的なデザインへ落とし込んでいったプロセスの部分を読んでいきたいと思います。ちょっとこれ以降記事の中では図が添付されているだけで文章による説明が少なく、適宜自分なりに読み解いてまとめていますので間違いなどあるかもしれませんが予めご了承下さい。
なお、内容については以下の記事を参照し、図なども引用させていただいています。
本日もよろしくお願いいたします。
アイディア出し
ユーザーリサーチ編にて出てきたユーザーの一人で日本語を学んでいるAmanから得た情報とアイディアを整理しているようです。
特にここについての解説は記事になかったので私の認識ですが、上半分の赤いシートがインタビュー後に得られた課題で、下半分の黄色いシートがブレスト的にアイディアをメモしたもののように思います。
上半分の赤シートでは主に、以下のような課題が挙げられています。
課題（赤シート）
・Duolingoの学習は初歩的なため大人の学習には不向き
・同じ学習を繰り返し継続させることが難しい
・学習フローが一方向的で、ユーザーが自由に学習を選択できない
（Lesson6の前には必ずLesson5を完了させなければならない）
下の黄色シートには以下のようなアイディアがメモされています。
アイディア（黄シート）
・より高度な学習をするユーザーのため、実際の講師との学習を提供する別のコースを立ち上げる
・同じ言語を同レベル程度学習しているユーザー同士のチャットグループを作成し、そこで一緒に進捗報告をしたりアイディアを共有したりできるようにする
・グループ内で異なる言語を使う人同士のコミュニケーションを手助けしてくれるボットを作る
・ゲームのような楽しさを提供する
タスクフロー
これはアプリインストール後のタスクフローをまとめたもののようです。
前述のアイディア出しの部分を読み解く限り、恐らく中央下の「Community」という部分らへん以降が新機能でしょうか。（Bot Chatなどの文字もあります）
色とフォント
このあたりは今回の新デザインに対してと言うよりはDuolingoとしてずっと使ってきたもののように思います。
デザインはやはり初心者でも入りやすく、楽しく設計されているDuolingoのアプリとしての特性を醸し出しています。
NUNITOフォントはカワイイですね。Andoroidで使われるROBOTOと同じで、Google Fontsから無料でダウンロードできるのでありがたいです。
ワイヤーフレーム
Community機能のワイヤーフレームと思われます。
ユーザー画面はちょっとTwitterっぽい雰囲気もあります。チャットのUIもTwitterのDMに近いですね。
右上の画面の「ASK THE DUO」がチャットボット機能の呼び出しでしょうか。画面の最上位に配置している分かなりの利用頻度を想定してデザインしているような設計思想も見えます。
最終デザイン
※以下からは記事で解説があったので、英文をまた読んでまとめていきたいと思います。
スプラッシュ画面
アプリを立ち上げた最初の画面で、今回新たに加わった2つの機能についての説明を見ることができます。
まず２つの新たなボタンが追加されたホーム画面が表示されます。その1つが画面左上隅の黄色いアイコンである「ワードスワッパー」だそうです。
ボタンを押すとスワッパー画面が表示され、レベルやユーザーが登録した単語や文章を選択し、英語の再生と停止をすることができます。
この機能で使用される単語はレッスンで新しく単語を学ぶたびに更新されていくので、無意識的に日々の学習習慣に取り入れることができます。
そして2つ目の機能がコミュニティです。この機能は同じ言語を学ぶ者同士が交流することができるそうです。
ここではユーザーと似た属性の人同士でディスカッションをしたり、学習の進捗状況をシェアしたり、疑問点を質問したりできます。
またさらに、よくある問い合わせについて回答してくれるボットも搭載しているようです。
また、本物の翻訳者のようにネット上の動画音声やテキストかを翻訳してくれるアシスタント機能も搭載したそうです。これらはまた、語彙や会話のスキルを向上させるための提案もしてくれるようです。
また、”ワードスナッパー”はGoogle ChromeやFirefoxの拡張機能としても使うことができるようです。ここでは文脈を変えることなく単語を変更し（？？すみません、ちょっとうまく訳せませんでした）発音のデモを聞くことができるようです。
これは実生活の中で習慣的に学習を行う手助けをしてくれるものになっています。
まとめと感想
３回にわたってDUOLINGOのケーススタディを読んでみました。ところどころ訳しきれず無理やり前後をつなげたり、どうしてもわかない部分はそのまま直訳してしまったりしながら頑張って読みすすめました。
始まりはDUOLINGOが初心者向けなため、実践的な英語学習への対応ができていないというものでしたが、ユーザーリサーチを経て「コミュニティ機能」と「日常の生活の中に出てくる単語を学習に結びつける機能（ブラウザへのアドインも含む）」を実装させたようです。
自分も似た業種のプロジェクトを行っているため非常に内容は興味深かったのですが、この機能実装後のユーザーの反応がどうだったのかも合わせて知りたくなりました。
語学学習は今後も確実にアツいマーケットと思うため、色々情報をキャッチアップしていけたらと思います。
_________________________________________________________
＠やました
Twitter : https://twitter.com/yamashita_3
ポートフォリオ : https://www.saito-t-design.com/
__________________________________________________________
いいなと思ったら応援しよう！
