Lingoshelf Logo

お気に入りの本を読みながら言語を学ぶ

A variety of mockup screens of the Lingoshelf App

プロジェクトの概要

役割

UIデザイン、UXデザイン

プロジェクトの範囲

ユーザーフロー、低忠実度ワイヤーフレーム、高忠実度ワイヤーフレーム、プロトタイプ、ユーザビリティテスト

ツール

Figma, Adobe Photoshop, Adobe Illustrator

背景

私自身が情熱的な言語学習者であり、言語学習の旅で数多くの挑戦と挫折に直面してきました。 そして、ネイティブ向けの資料へ移行する際の大変さも身をもって理解しています。 多くの学習者が教科書などを長く使い続け、そして、言語の新しい単語と文法を学び、だんだん自分の言語能力に自信を持ち始めます。 しかし、ネイティブ向けの小説などに取り組んでみると、学ぶべきことがまだいかに多いことを実感します。 これはしばしば威圧感や不安などのネガティブな感情につながり、ネイティブ向けのコンテンツを完全に避けるおそれがあります。 それらのネガティブな感情を防ぐためには、言語学習と読書の楽しみをシームレスに融合させ、学習者がネイティブ向けの読み物にスムーズに慣れるように支援することが必要です。

課題

  • 本を読みながら外部の辞書を使うことで、読書の流れが途切れがちになります。
  • - 本の難易度を表紙やあらすじだけで判断すると、そのレベルが学習者の現在の言語スキルと合わない場合があり、 フラストレーションの原因となる可能性があります。
  • 読書は受動的に語彙を増やすために効果的な方法ですが、 それをさらに能動的な学習体験に変換することは困難で疲れることがあり、 しばしば読書の楽しさを損ないます。

解決策

  • 読みながら直接単語を調べるために、組み込み辞書を実装する。
  • 各本の難易度を表示し、学習者が自分のスキルレベルに合っているかどうかをより良く評価できるようにする。
  • ユーザーが本の中で読んだ文章をもとに学習機能を提供し、 文脈で学べるようにする。

方向性の定義

適切な質問をする

デザイン要件のより良い理解を得るために、私はまず5WHの質問に回答しました。 これらの質問は、当初の対象者を特定し、アプリに実装すべき主要な機能を明らかにするのに役立ちました。

ユーザーは誰ですか?

  • 中級および上級の言語学習者

ユーザーが達成するタスクと目標はどのようなものですか?

  • ユーザーは、小説などを読むことでネイティブのコンテンツに没入し、 言語スキルを向上させます。
  • ユーザーは、新しく習得した単語を積極的に練習します。

ユーザーはどのようにして彼らの目標を達成しますか?

  • ユーザーは、自分の言語能力と興味に合う本にアクセスできます。
  • ユーザーは、読みながら単語の意味を調べて保存できます。
  • ユーザーは、練習問題やフラッシュカードを使って新しい語彙を練習できます。

ユーザーフローの理解

5WHの質問で定義した機能を活用して、ユーザーが目標を達成するための必要なステップを代表する4つの異なるユーザーフローを作成しました。 オンボーディングプロセスに加えて、本の検索、読書中の単語の保存、また語彙フラッシュカードのユーザーフローを作成しました。

その後、これらのユーザーフローをもとに低忠実度のワイヤーフレームを設計し、 アプリ全体にスムーズでユーザーフレンドリーな体験を保証するための重要な要素を強調しました。

オンボーディングフロー

迅速かつ簡単なオンボーディングのために、ユーザーは自分のSNSアカウントを使って登録でき、 学びたい言語を選択した後で、すぐに最初の本を読み始めることができます。

Mid Fidelity Wireframes and User Flow from the Onboarding Process

本の検索フロー

本を探すことは簡単で直感的であるべきです。本は探索ページを通じて検索でき、 簡単に本の詳細にアクセスできます。

Mid Fidelity Wireframes and User Flow from the Book Search Flow

単語保存フロー

読書中に単語を調べるのは簡単で直感的であるべきです。 ユーザーは新しい単語を簡単にフラッシュカードとして保存できるために、 翻訳が小さなポップアップ画面で表示されます。

Mid Fidelity Wireframes and User Flow from the Reading Flow

フラッシュカードフロー

ユーザーは、自分の語彙リストからスムーズにフラッシュカードにアクセスできるべきです。

Mid Fidelity Wireframes and User Flow from the Flashcard Flow
A variety of mockup screens of the Lingoshelf App

計画からビジュアルデザインへ

ワイヤーフレームの洗練 - 低忠実度から高忠実度へ

ユーザーフローを基づいて最初に作成したワイヤーフレームは最小限で、 重要なフローと機能にのみ焦点を当てていました。 さらなるブレインストーミングを通じて、画面レイアウトを洗練し、 アプリのビジュアルスタイルを創造しました。 このアプリは、言語学習者がスキル向上に集中できる没入型の環境を作り出すことを目指しているため、 ビジュアルデザインは意図的に最小限で目立たないようにデザインしました。

使い勝手の問題を明らかにする

高忠実度のワイヤーフレームを用いて、ユーザーとのテストのためのプロトタイプを作成し、さらなる改善のためのフィードバックを収集しました。 ユーザーテストにより、ユーザーがフラッシュカードの使い方を正しく理解するのに困難を抱えていることが明らかになりました。 彼らは、入力方法、フィードバックの受け取り方、またはカラーボタンの意味が不明瞭でした。 これは重要な使い勝手の問題を示しており、不快なユーザー体験につながる可能性があるため、 ユーザーに何が起こっているのかをよりよく理解させるためのアイデアについて考え始めました。

Screens of Usability Problems and Solution Screens of Usability Problems and Solution

没入型学習体験の創造

お気に入りの本を読むことで言語を学ぶ

Lingoshelfは、様々な言語の文学作品を豊富に取り揃えています。 ユーザーは自分の言語スキルや興味に合う本を探して、楽しい学習体験を得ることができます。

Screen Mockups of the final Search Flow

読書中に単語の意味を調べ、新しい語彙を保存する

ユーザーは外部の辞書を使わず、読書中に直接単語の意味を調べることができます。 また、後で参照するために単語を保存したり、異なるフラッシュカードセットに追加したりすることもできます。

Screen Mockups of the final Reading Flow

SRSベースのフラッシュカードで新しい単語を練習する

Lingoshelfは、より受動的で没入型の読書アプローチに加えて、保存した単語を能動的に練習できる機能も提供します。 単語を効果的に復習できるために間隔反復を活用しているフラッシュカードを利用しています。 フラッシュカードは、ユーザーが読書中に遭遇した文章を基に単語を文章の中に表示し、文脈を提供することで記憶を強化します。

Screen Mockups of the final Flashcard Flow

学んだこと

自分自身の偏見を意識する

自分が言語学習者として製品の対象者の一部だということは、ユーザーの視点により共感しやすくなるという利点があります。 しかし、一方で自身の好みに基づく偏見により影響を受けやすくなるという欠点もあります。 そのため、これらの偏見を意識し続け、ユーザーリサーチやテストが異なるニーズや好みを明らかにした場合、 個人の好みを脇に置いて研究に基づくデザインを作ることは重量です。

一見対象者でないと思われるユーザーも考慮する

言語学習の経験が少ない人など、一見対象者に見えない人々を排除することを避けるためには、 研究とデザインの両段階で多様な背景を持つ人々を巻き込むことが不可欠です。このアプローチは貴重な洞察をもたらし、 特定のグループだけに排他的に設計する落とし穴を防ぎます。