ユーザーがクリックした後にパネルをぶら下げ
私は、ユーザーが以下を実行できる小さな言語学習アプリに取り組んでいます。
後で読み、聞くためにテキストと音声を保存する
単語をクリックしてメモや例文を追加する
言語ごとの統計とその他の機能を取得する
「Wordのクリック」イベントの処理方法がわかりません。単語をクリックした後、ユーザーは次のことができるはずです：
a）クリックした単語がまだ定義されていない場合は、定義を追加します。
b）例文を追加する（好きなだけ）
どういうわけか、ユーザーは定義と例文も編集できるはずです。
利用可能なスペースは右側のパネルです。ユーザーがテキストに焦点を当てているので、画面を変更したり、メインタスクの邪魔をしたりしたくありません：単語や文章をすばやく定義/編集します
私の現在のデザインはこれです（「文の追加」の部分はまだ実装されていません）：
a）Wordをクリックする前
b）まだ定義されていない単語をクリックした後。 [保存]をクリックすると、以下の項目c）が表示されます。
c）単語を保存した後。 [編集]をクリックすると、上記の項目b）が表示され、テキスト領域が塗りつぶされてフォーカスされます。
「キャンセル」または「閉じる」をクリックすると、指示メッセージが表示されます。テキストパネルでは、現在のWordに黒の下線が引かれていることに注意してください。
編集する
いくつかの回答に基づいて、おそらくクリックで単一のポップアップがこれらすべての問題を解決しますか？このポップアップは、Wordの定義と文を追加するフィールドをもたらします。次に、右側のパネルにすべてをリストして、そこで編集できるようにします。
人々はどう思いますか？他に何か提案はありますか？ありがとうございました！
ノート：
1-Wordを右クリックすることにより、ユーザーはポップアップを使用して、このWordをどれだけ知っているかを評価できます。青い単語は「新しい」です（この言語データベースにはまだ含まれていません）。次に、赤から緑まで、「学習の開始」から「ほとんど知られている」までをカバーしています。緑の下線のない色は「よく知られた言葉」を意味します。赤い下線のない色は「無視された単語」を意味します。
2-テキストはスクロールdiv内にあるため、テキストの位置に関係なく、右側のパネルが常に表示されます。
まず第一に
色の選択おめでとうございます。色覚異常のアクセシビリティテストに合格しています。努力を重ねているようです。
私は本当にあなたのアプローチが悪いとは思わない。実はいいと思います。もっとよくなるはず？はい、しかし、それはこのサイトの目的を超えています。
あなたの意見は主観的であることを忘れないでください。実際のユーザーでテストし、問題がある場合は修正できますが、データでストーリーを伝えてください。
アプローチ
上記の理由により、これはTHEアプローチではなく、正しい答えを意図したものではありません。これは、テストできるアイデアを提供するためのアプローチにすぎません。テストはこれが正しいかどうかを教えてくれます
画面1
要素間にスペースを追加してノイズ（コンテナーの境界など）を削除することから始めました。これにより、よりリラックスした方法で情報を送信するために、デザインが少し呼吸できるようになります。この画面では、右の列はありません。
注：この画面に追加するのを忘れていましたが、右側の領域のコンテンツは、翻訳するコンテンツのすぐ上のメイン列にあるはずです
画面2
ユーザーがWordをクリックすると、モーダルダイアログが開きます。この理由は、ユーザーが対話する必要があるためです。この主題については NN/G's take を参照してください：
- モーダルダイアログを使用して、提供された場合にユーザーの作業または労力を大幅に削減できる情報を要求します。
モーダルは、要求または提示される情報が関連する場合に効果的に機能するか、現在のタスクの完了を合理化できます。
したがって、これを念頭に置いて、次のことを実行できます。
ダイアログとボタンのラベルの両方が一貫しているので、ユーザーは対話とそれらに期待されることを知っていることに注意してください。
画面3
ここでは、ユーザーがいくつかの単語を追加し、右側の列がコンテンツでいっぱいになっていると考えます。このセッションで追加されたすべての単語が一覧表示されます（必要に応じてフィルターを追加できます）。これは、単語をテキストブロックの外から、新しく学習した単語のグループとして表示することで、心理的に単語の習得を強化するために行われます。ユーザーが単語を追加するたびに、以前の単語が意識的または無意識的に表示されます。
アイコンをクリックすると、画面4が開きます
画面4
ユーザーがWordを編集したい場合、タイトルとボタンラベルの両方にアクションを反映して、一貫性を保ちます。今回は[〜＃〜] adding [〜＃〜]ではなく[〜＃〜 ]編集[〜＃〜]、したがって、タイトルとアクションはこのシナリオを反映しています。
OK;ここで私は停止します、それがあなたを助けることを願っています:)
いくつかの点を変更して、すべての端を結び付けます。現在のバージョンでは、ユーザーに明確なフローはありません。
右のパネルに「行動を促すフレーズ」を入力できます。 Wordをクリックしてメモを追加できることをユーザーに伝えます。写真1を参照してください。
また、保存ボタンのラベルを「保存して非表示」に変更します。ユーザーがクリックするとどうなるかをユーザーに伝えます。このようにして、それははるかに理にかなっています。写真2を参照してください。
終了後、ユーザーにはポイント1からの行動を促すフレーズが再び表示されます。
ホバリングポップアップを作成して、ユーザーがメモを追加できるようにすることができます。行動を促すフレーズについては、トップメニューにバナーを表示して、ユーザーがクリックするだけでWordにメモを追加できることを提案できます。また、入力にポップアップを使用している場合は、単純な自動保存オプションを維持することをお勧めします。ユーザーがポップアップウィンドウの外側で誤ってクリックした場合に、情報が失われるのを防ぐ必要があります。
編集：アイデアを与えるには、この回答または質問の共有ボタンをチェックしてください。共有ボタンをクリックすると、そこにポップアップが表示されます。「閉じる」をクリックするか、ポップアップの外側をクリックすると、このポップアップを閉じることができます。
編集：私の以前の提案は、ユーザーがメモオプションをクリックして限られた量（1ページあたり10ワード）をクリックする場合です。それが本当に多い場合は、既存のスタイルを維持してください。
指示については、それを保持することができ、いくつかの追加情報をそのパネルに移動することもできます。このウィンドウの右側のパネルのようなものです。
必要に応じて、翻訳済みのすべての単語をリストに表示できます。ユーザーは翻訳されたWordをクリックして翻訳を再度編集できるため、編集オプションにアクセスするための追加の手段が得られます。**
アイデア1：さて、質問については、上部のナビゲーションバーに右パネルを開くボタンを配置できます。そのため、Wordまたはそのボタンをクリックすると、右側のパネルが開きます。
ユーザーがWordでの作業を終えた瞬間に、右側のパネルを閉じることができます。ショッピングカート番号のように、またはより明確なように、ボタンのアイコンに番号を追加できます。このようにして、翻訳した単語の数を常に確認しながら、パネルを開いてそのリストを確認できます。
アイデア2右側に、[単語の定義]パネルの上にあるセクションがあり、すでに使用した単語の数が表示されます。最初は、単語が0ワードか、その言語についての興味深い事実である可能性があります。「知っていますか...」は、実際にリストに追加する単語があるまでです。