...
Eventually, while reading, the user might find a sentence that he has trouble understanding, either because it contains some vocabulary he doesn't remember, or uses some grammatical construction he doesn't understand. In the event that it's some particular word that the user doesn't understand (in our scenario with Joe, りんご), he can expand out the "vocabulary" accordian menu, where he will find all vocab words used in the sentence, their romanizations (ringo), and their definitions . There are also "prioritize" and "deprioritize" buttons for each vocab word, which will be explained later. Alternatively, Joe can hover over the word りんご, at which point the mouse cursor will change shape to indicate a clickability affordance, and then Joe will click the word. This will cause the Vocab accordion menu to be expanded, and りんご and the romanization (ringo) and definition (apple) will become highlighted. There is also a Grammar accordian menu, which can be expanded and will list the grammatical constructs that this sentence uses, and again, there are "prioritize" and "deprioritize" buttons next to these.
Storyboard
Upon visiting the website, Joe will encounter a screen that prompts him for the language he's studying, the textbook he's using, and the chapter he's studied up to. There will be no registration or login required in this model prior to being able to read sentences. Because the options presented depend on the previous selections (ie the textbooks displayed in the textbook list depend on the language selected), then the steps are numbered to ensure that users will choose options in that order. The below image shows the textbook selection screen.
After selecting his language, textbook, and chapter, Joe will now be presented with a listing of sentences that use the vocabulary and grammar in that chapter. In the initial state, Joe will be shown sentences that must contain either grammar or vocabulary from the current chapter he is studying, and must not contain vocabulary or grammar that have not been taught in the textbook up to that point. If Joe happens to have skipped some part of the material for certain chapters, he can deselect them in the grammar/vocab/kanji known sidebars on the left side. The sentences will each have below them initially-collapsed accordion menus which can be expanded to show the romanization, English translation, and list of grammatical patterns and vocabulary that the sentence uses. The below image shows the initial sentence reading screen, and the sidebar.
When Joe reads the sentence, and fails to understand some particular word (in the scenario, りんご), he will likely hover over the word, at which point the mouse cursor will change shape to indicate clickability, and then Joe will click the word. This will cause the Vocab accordion menu to be expanded, and りんご will become highlighted. There, the romanization "ringo" and English translation "apple" of that vocab word will be displayed. Should Joe wish to practice reading additional sentences that use that vocabulary word, he can click the "more sentences" link next to the word in the Vocab accordion menu, which will open a new tab displaying only sentences that have that vocab item (which also use only grammar and vocab that have been covered in the textbook that Joe indicated).
If Joe wants to see the entire sentence romanized, he can expand the "Show romanization" accordian menu. Likewise, if Joe wants to have the English translation of a sentence displayed, he can expand the "Show English translation" accordian menu. If Joe does not understand some grammatical aspect of the sentence, or simply wants more practice with a grammatical form (in the scenario, the -tai verb conjugation), he can expand the Grammar accordian menu. Here, he will find the listing of grammatical aspects that are used in this sentence. Similarly to the Vocab accordian menu, there is a "more sentences" link that, if clicked, will open a new tab displaying only sentences that use that grammatical pattern.
...
The editing functions - namely, adding and removing grammatical tags from sentences, and changing translations for sentences, are unfortunately not undoable. For this reason, because this model functions much like a wiki - in that any user is able to edit or contribute any sentence - it may be necessary to introduce some form of history into the interface should accidental editing or vandalism become a problem.
Design 2
Storyboard
This design provides the student user with a ‘home’ view (Figure 2) of all the textbooks that he is learning from. A user can add and search textbooks from any page by using the ‘Add/Search’ bar labeled in Figure 2. The user can either search for a title (Figure 4), or see an alphabetical sorting of all the textbooks in the system (Figure 3). Also, there are language filters along the right to allow the user to narrow his search. After the student has added the book to his textbooks, he can return to his ‘home’ via the ‘My Home’ link that is located at the top of every page and then pick a book from his selections.
...