web-dev-qa-db-ja.com

学習のためにインタラクティブな真/偽の質問を表示する方法は?

健康関連のWebサイトに表示され、健康関連の真/偽の質問を提示するウィジェットを設計しています。目標は、訪問者を引きつけ、潜在的に役立ついくつかのことを彼らが学ぶのを助けることです。 「True」と「False」の2つのボタンとともに、簡単な説明が表示されます。

学習が目的なので、

  1. 選択した答えが正しいかどうかをユーザーに知らせます。
  2. 元のステートメントがfalseの場合、正しいステートメントを表示する

私は4つの可能性のいくつかを伝える良い方法を見つけ出そうとしています:

正しい説明:例:「母乳で育てられた赤ちゃんは、大人ほど肥満になる可能性が低い」

  1. ステートメントが真であり、ユーザーが真を選択した場合:正しいステートメントの上に重ねられた大きな緑色のチェックマーク
  2. ステートメントはtrueで、ユーザーはfalseを選択します。選択が間違っていたことを示す方法はありますが、ステートメントはtrueですか?誤って選択された[False]ボタンの上に赤いXが表示され、正しいステートメントの上に緑のチェックが表示されることを考えています。

虚偽の陳述:「母乳で育てられた赤ん坊は彼らの食事を補うために粉乳か砂糖水を必要とします。」本当の声明を伴う:「母乳で育てると、乳児が生後6か月間必要とするすべての栄養が提供されます。」

  1. ステートメントがfalseで、ユーザーがfalseを選択した場合:falseステートメントの上に赤いXが表示され、正しいステートメントが下に表示されます。ユーザーが正しい選択をしたことを明確に示していない。選択したボタンにチェックマークを付けているのでしょうか?
  2. ステートメントはfalseであり、ユーザーはtrueを選択します。ここで何をするかわからない。間違いのあるステートメントを間違いなくXアウトし、正しいステートメントを表示します。多分間違って選択されたボタンの上にXがあり、正しい「False」ボタンをチェックしますか? Xとチェックが多すぎますか?
4
Mike Kantor

現在、eラーニングアプリの「True/False」レイアウトと「複数選択」レイアウトに取り組んでおり、この問題にも遭遇しました。

「チェック」と「X」の使用に関する問題は、ユーザーが選択したものの「正しさ」と選択したステートメントの「真実性」を混同するリスクがあるということとまったく同じです。

3つの概念を個別に表示する必要があります。

  1. ユーザーが選択したオプション
  2. その選択の正しさ(おそらくオプション/暗黙)
  3. ステートメント自体が真か偽か(理想的には理由の説明付き)

複数質問のT/Fテーブルレイアウトでは、どの列にあるかに関係なく、青色のチェックを使用してユーザーの選択を示します。「アウトライン」チェックは「選択されていない」ことを示します。これは、「ユーザーの選択」を「選択の正確さ」と「ステートメントの有効性」の両方から客観的に分離します。それは彼らの選択を示しているだけで、それ以上のものはありません。

enter image description here

このレイアウトの2番と3番に対処するためのフィードバックは、「正しい」または「正しくない」と書かれたモーダルポップアップに表示され、「ステートメントは何とか何とかだから」と説明されています。

あなたの場合、一度に1つの質問しか表示しない場合は、フィードバックが却下されるか、ユーザーが次の質問に移動するまで、選択したボタンを強調表示したままユーザーの選択を示すことができます。これで#1が処理されます。

#2と#3を組み合わせるには、「ステートメントの有効性」を確認することから始まるステートメントの上または下にフィードバックテキストを表示し、それがtrueまたはfalseである理由の説明を提供します。

ユーザーの選択が強調表示されたままになっているため、正しいか正しくないかは、この時点では明らかです。これをさらに明確にするために、「正しい」答えの上に表示される「チェック」が1つだけ必要です。 「チェック」はポジティブであり、これにより、ユーザーの誤った選択が過度にネガティブ/クリティカルであるという印象を回避できます。

enter image description here

1
mc01

Webページがインタラクティブな場合、ユーザーをそのページにドラッグします。ユーザーとやり取りする言葉を使用することをお勧めします。

enter image description here

1