Scenario
Joe is a student taking Japanese 2 at MIT. The class uses the Genki 1 textbook, and has studied the grammar, characters, and vocabulary up to Chapter 10. The textbook has taught Joe some useful grammar and vocabulary, but not enough to read most of the Japanese-language content on the web or in books. The textbook contains some example sentences for reading practice, but Joe has already read them and still doesn't feel like he's mastered the material. Joe want to practice reading additional sentences to solidify his understanding of the grammar, characters, and vocabulary that have been taught in Genki 1 up to Chapter 10.
Following his friend's suggestion, Joe heads to the Reading Practice website. Joe specifies to the website that he's studying Japanese from the Genki 1 textbook, and has studied up to Chapter 10. Then, the website provdes Joe with novel sentences in Japanese that use the grammar and vocab that he's learned, and he practices reading them.
After reading a few sentences, Joe encounters the sentence りんごを食べたいです。 He's unfortunately forgotten what the vocabulary word りんご meant, but he doesn't want to look it up in a dictionary, so he uses the interface to determine that it means "apple". Joe then see 食, and while he knows it has something to do with eating, he doesn't know how it should be pronounced in this particular context. He therefore asks the system to romanize the sentence, and seeing "Ringo wo tabetai desu", he now knows that 食 is pronounced "ta" in this context. However, he still doesn't understand what the sentence means, hence he asks the system to show him an English translation. Seeing the translation "I want to eat an apple", it dawns on him that he's forgotten that the -tai verb conjugation is used to indicate want/desire. He wants to practice reading this sentence pattern more, hence he asks the system to show him additional sentences that use the -tai verb conjugation.
After reading a few more sentences that use the -tai verb conjugation from the list, Joe notices a sentence that isn't classified correctly. He had been searching for sentences using the -tai verb conjugation, but this sentence doesn't include it. He therefore removes the "-tai verb conjugation" tag on the sentence, so that it won't be displayed to users searching for that type of sentence.
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
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.
If Joe encounters a sentence whose grammar patterns listed are incorrect, then he can expand the accordian menu, and click the "edit" button. Here, he can remove any categories that are incorrect (or add any that need to be added), and click "done editing" to save changes.
If Joe wants to contribute a sentence, he goes to the home page, and switches to the "contribute" tab. Here, he selects the language of the sentence he'll contribute from a pull-down menu, and enters the sentence itself and its translation in a textbox. Then, he selects any additional grammatical tags that would be used to help users find his sentence, clicks on "add" to add them, then clicks on "contribute sentece" to contribute the sentence. Now, any user who subsequently clicks the "more sentences" option on that type of grammatical tag will have Joe's sentence displayed to them among the list.
Usability Analysis
Learnability
The per-sentence information gathering process makes heavy use of accordian menus. These are becoming fairly common in web apps, and hence learnability with their usage should not be an issue. The usage of the clicking on a part of a sentence to expand out the accordian menu for that vocab item, however, is somewhat inconsistent with the users' experience of how accordian menus work. Namely, users may not expect accordian menus to expand by themselves if the user clicks elsewhere. Additionally, the highlighting of an item in an accordion menu may not be noticed by the user, because it occurs far from where the focus of the user's attention (the mouse) is. However, this is a tradeoff for internal consistency, as it ensures that no separate popup or hover-over information dialog is needed if the user wants information about some particular word in the sentence - all supplemental information is displayed in the accordian menu.
Another learnability issue is that it may be difficult for the user to know what each of the grammatical tags mean, particularly because differing textbooks may describe different sentence patterns using different terminology.
Efficiency
The initial screen, where the user selects a language, textbook and chapter and can start reading right away, is efficient for new users , because they don't need to go through the registration process. However, it may be less efficient for experienced users, especially if what they have studied differs from a particular textbook and chapter, because they would then have to select in the "known grammar"/"known vocab"/"known kanji" the parts of the language they do or don't know, every time they visit the website again. Using client-side storage to keep track of this information, or implementing an optional login system which stores such information server-side, would help alleviate this issue.
Another issue with efficiency on the initial screen is that a selector is used to locate the textbook, which, while necessary if the user is able to recognize but not recall their textbook name, may be less efficient than typing a name with autocompletion for users who already knows the name of their textbook .
The choice of a selector box for adding grammatical tags to sentences, while easily learnable because all of the grammatical tag types are visible, may be inefficient for users who already know the category the word belongs to. While the grammatical could be sorted alphabetically, a user might know the particular grammatical pattern under a different name from the terminology that is used in this website. Hence, it may make sense to also allow a search box with autocomplete to be used for searching for particular tag types. Optimally, users shouldn't even have to input what types of grammatical structures in a sentence, but this would unfortunately involve complex NLP work for detecting grammatical patterns in sentences.
Visibility
This design has very little state - the type of grammatical structures and vocabulary that the user is expected to understand are listed in the left sidebar, and this dictates the sentences that will be displayed to the user. While information about the sentence's vocabulary, grammar, romanization, and translation are hidden in the accordion menu by default, this is by design, because it is meant to be relied on only if the user has trouble reading the sentence without assistance.
Error Prevention
The usage of opening a new tab for displaying additional sentences when the user clicks the "more sentences" button in the Vocab or Grammar accordian menus, instead of modifying the state of the current tab, is chosen so that it is easily undoable - the user can simply close the newly opened tab to return to the original sentences he was looking at prior to clicking the button.
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.
When he picks a book, the page updates with a chapter listing on the left-hand side and a translator on the right (Figure 5). The translator accepts a word as an input and translates the word either ‘From English’ or ‘To English’. The information displayed depends on the language of the textbook. For example, Chinese words might include information on tones, pinyin representation, character representation, traditional and simplified forms, etc. Japanese words might include information on the different text representations (eg. Kanji, Kana, Romaji) of the word.
When the user selects a chapter or section from the outline of chapters, the page loads all the vocabulary words learned in that chapter or section (Figure 6). The vocabulary words are shown in an accordion-style format. The user can sort the words by one of the fields at the top of the accordion listing. When the user expands one of the folds in the accordion, practice sentences using the word are listed. If the user has privileges, there will be text boxes and a button used for adding new sentences.
Other features demonstrated in Figure 6 include the ‘Look Up’ feature that lets the user filter the accordion-style listing of the words in the current chapter. If the user wants to practice the vocabulary in this chapter, he clicks the ‘Practice’ button, and the system will switch to a flashcard like interface (Figure 7). The user can mark a card as correct or wrong to indicate whether he has mastered the sentence. Additional options are ‘Previous’, ‘Show Answer’, ‘More Like This’, and ‘Next’. The ‘Previous’ option lets a user backtrack to the previous word that he practiced.
Usability Analysis
Learnability
Pros:
The user interface has many affordances. A plus sign is used for adding a book (Figure 3 shows this) to your collection, a minus sign for removing (Figure 2), and a ‘return’ arrow for restoring a removed book (Figure 2).
There is an omnipresent ‘My Home’ button at the top of every page that allows a user who is exploring the website to easily return to his ‘home’ view. This enables a user to explore the site knowing that he can easily return ‘home’ if he gets lost.
The Logout button is consistent with most interfaces that support logging in and out. The logout button is located in the common logout link location at the top right of the page.
The ‘Add/Search’ bar has an auto-complete feature to assist users in entering a title. This helps users who cannot remember a title completely.
Cons:
The procedure to add a new sentence is not very obvious to the user. In order to add a sentence, the user must list all the words (Figure 6; he may also use the look up feature) and select the vocabulary word for which he wants to add a sentence. This feature is visible only to users who have privileges, so novices cannot learn this feature until after they have mastered a part of the language and have acquired privileges.
Visibility
Pros:
The state of the system is visible to the user. In Figure 7, the current title is displayed in large text alongside a picture of the book’s cover to remind the user what book he is currently looking in. Along the left hand side of the interface, the selected chapter is highlight and boxed to indicate which chapter is being studied.
Cons:
The visibility of a user’s mastery of each word or section is not displayed unless the user explicitly lists all the words (Figure 6). Thus, an unaware user might feel that he needs to keep practicing sentences from a particular chapter even though he might have a high mastery rating for all the vocabulary in that chapter.
Efficiency
Pros:
The following items are in the same location on every page when logged in: ‘My Home’ button, ‘Add/Search’ bar, Logout button. Thus performing these tasks is easy from every page.
Cons:
Performing a search for a book can take a long time. Although there is a language filter and alphabetical sorting of the books, the user must still linearly scan through the items. If there are many books, the filter and alphabetical sorting are not enough.
Searching for a word in a chapter (Figure 6) can be tedious and time-expensive task if there are many words in the chapter. The interface attempts to counter this negative effect by providing a word look-up search bar to narrow the search.
Error prevention
Pros:
A user may make changes to his collection of textbooks including removal of unused textbooks and addition of new ones. If a user accidentally removes a textbook from his ‘home’ view, he has the option of returning it to his collections. That is, permanent removal is a delayed process (shown in Figure 2 by the ‘Time Until Deletion’).
The ‘Log Out’ button is located in a corner away from other features of the interface. This prevents the user from accidentally logging out.
Cons:
If a user has many textbooks, the removed textbooks are pushed down and out of the user’s locus of attention (Figure 2). A user who is unaware of a removed textbook might never learn of the book’s removal until after its deletion because the removed textbooks are located out of sight.