The latest articles on DEV Community by Yassine Gharsalli (@yassine_gharsalli_04e8563). https://dev.to/yassine_gharsalli_04e8563 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4172116%2Ff7c3e5ba-96e4-4187-b95e-d07111ea2d0c.png https://dev.to/yassine_gharsalli_04e8563 en Yassine Gharsalli Thu, 08 Oct 2026 20:54:50 +0000 https://dev.to/yassine_gharsalli_04e8563/designing-a-german-reading-helper-word-meaning-versus-word-form-49jf https://dev.to/yassine_gharsalli_04e8563/designing-a-german-reading-helper-word-meaning-versus-word-form-49jf <p><em>Disclosure: German Lens is my Chrome extension. This article was drafted with AI assistance and checked against the published Chrome Web Store description.</em></p> <p>When designing a reading helper, there are two different questions to answer: <strong>What does this word mean?</strong> and <strong>Which word form am I looking at?</strong></p> <p>For German, the second question matters. A reader may recognise the infinitive <code>gehen</code> but encounter <code>ging</code> in an article. A noun translation can also leave them wondering about its gender or plural. A lookup interface that only returns a translated string leaves that work to the reader.</p> <p>German Lens brings translations and grammar details into a card on the webpage. I recently published it and would welcome feedback from developers who also read or learn German. Below is the interface problem behind it, plus a small test plan you can use for any similar browser tool.</p> <h2> A word lookup has more than one output </h2> <p>A useful way to think about the card is as three layers:</p> <ol> <li> <strong>Meaning:</strong> a translation helps the reader understand the sentence.</li> <li> <strong>Form:</strong> an infinitive, noun gender or plural helps connect the encountered word with a dictionary entry.</li> <li> <strong>Usage:</strong> pronunciation and examples help the reader revisit the word later.</li> </ol> <p>The design challenge is deciding what to show first. Displaying every available detail can turn a quick lookup into another reading task. Hiding everything except the translation can remove the information that makes the tool useful for learners.</p> <p>The right ordering is a usability question: can a reader find the meaning quickly, then find the relevant grammar without searching through unrelated information? That is a more useful feedback target than simply asking whether a card looks nice.</p> <h2> Two interactions to evaluate </h2> <p>German Lens supports selecting a word and using <strong>Alt+hover</strong>. Selection gives the reader an explicit target. A modifier-key hover interaction offers another way to move through unfamiliar words.</p> <p>For a browser interface, I would evaluate these separately:</p> <ul> <li>Does the target match the word the reader intended, especially around punctuation?</li> <li>Does the card remain usable near the edge of the viewport?</li> <li>Can the reader move between the source sentence and the card without losing their place?</li> <li>Is the interaction discoverable from the first use?</li> </ul> <p>These are evaluation questions, not claims that every edge case is already solved. If you try German Lens and encounter a problem, the word, surrounding sentence and interaction used would make the report much more useful.</p> <h2> A small test plan for a language lookup tool </h2> <p>Choose a short German webpage and try a few different cases:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Case</th> <th>What to check</th> </tr> </thead> <tbody> <tr> <td>Inflected verb, such as <code>ging</code> </td> <td>Is the connection to <code>gehen</code> clear?</td> </tr> <tr> <td>Singular and plural noun</td> <td>Are gender and plural information easy to distinguish?</td> </tr> <tr> <td>Adjective in a comparative form</td> <td>Can the reader connect the form to its base adjective?</td> </tr> <tr> <td>Word next to punctuation</td> <td>Does selection or hover target the intended word?</td> </tr> <tr> <td>Word with multiple meanings</td> <td>Does the reader have enough context to judge the lookup?</td> </tr> </tbody> </table></div> <p>A dictionary result is an aid; the sentence still matters. When a result seems wrong, compare it with the context and another trusted reference.</p> <p>After the lookup, return to the paragraph and read it again. This checks whether the interface supports the reading task, rather than just whether it successfully displays information.</p> <h2> Try German Lens </h2> <p>The published extension includes translations, German grammar details, pronunciation, examples and lookup history with text export. No extension account is required. <strong>Each installation includes 300 free translations; unlimited use afterwards requires a one-time Premium license purchase.</strong></p> <p><a href="https://chromewebstore.google.com/detail/gejjjehbbgmlfggjmhdldjlldjlkldcp" rel="noopener noreferrer">German Lens in the Chrome Web Store</a></p> <p>If you try it, I'd welcome feedback on the card's information order, the Alt+hover interaction and German forms that produce confusing results. A concrete example is especially helpful.</p> showdev