...

A few years later, Joe is now fairly fluent in Japanese. He'd like to contribute back to the website that helped him practice reading Japanese back when he was starting to study Japanese. Hence, he logs in and enters a new sentence. He types in, ビールを飲みませんか。 and the English translation, "Would you like to drink beer?". The system helpfully uses some heuristics to suggest that the sentence be tagged as having a "-masen verb conjugation", and Joe additionally adds the "making an offer" tag. Thereafter, students looking for these types of sentences, either because they're explicitly searching for sentences with that type of tag, or the textbook chapter they're studying has covered the usage of a sentence type using that tag, will see Joe's newly added sentence.

Designs

Design 1

The This design focuses on minimizing the amount of time needed from when the user enters the website, and is asked to selects a language - Joe would select Japanese. Now, he is presented with a list of all sentences in the database for that language (which can be scrolled through with dynamic loading, a la Google Images). At first, sentences using all grammatical structures are shown. If the user is studying from a textbook, he can optionally select the textbook and chapter he is studying from - Joe would thus select Genki I, and chapter 10. Once the textbook and chapter is selected, the list of sentences is filtered to those that use the grammar and vocabulary that has been covered up to that point in the textbook. The sentences are initially ordered such that the vocab and grammar that has been covered most recently in the textbook (which is likely of the most interest to the reader) is displayed first  using a metric that attempts to , and can start reading sentences. For this reason, it lacks registration, and requires the user to select only a language before getting to the main interface where sentences are displayed. The interface is a single list of sentences, each of which have an associated accordian menu for displaying romanization, English translation, and information about the individual vocabulary words and grammatical patterns used in the sentence. The user doesn't ever leave this list of sentences; finding additional examples of sentences using certain vocabulary words or grammatical patterns is accomplished by having the list re-order itself such that the sentences of interest are injected below the reader's current position. Likewise, if the user doesn't want to see sentences that use a certain grammatical pattern, they are moved down to the end of the list.

Storyboard

The user enters the website, and is asked to select a language. In Joe's case, he selects Japanese from the drop-down menu, and clicks the "go" button. Now the user is brought to a page with a list of all sentences in the database for that language (which can be scrolled through and will be dynamically loaded as needed, a la Google Images). At first, sentences using all grammatical structures are shown. If the user is studying from a textbook, he can optionally select the textbook and chapter he is studying from - Joe would thus select Genki I, and chapter 10. Once the textbook and chapter is selected, the list of sentences is filtered to those that use the grammar and vocabulary that has been covered up to that point in the textbook. The user can now start reading the sentences, scrolling down to find new sentences. The sentences are initially ordered such that those sentences that use the vocab and grammar that has been covered most recently in the textbook (which is likely of the most interest to the reader) is displayed first. In the event that the user didn't select a textbook, sentences are ordered randomly.

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.This design is has a single main screen, which displays a complete list of all sentences that are appr. The user scrolls through the sentences 

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.

...

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.

...