...
The purpose of the vocab selection screen is to group each vocabulary into a "vocabulary block," which provides all the properties of each vocabulary. Several improvements were made to this design due to user complaints about visibility and efficiency. First, an alternating color scheme of white and light blue was chosen to mark contrast and boundaries among the different vocab blocks. This makes the overall design "less busy" because of clear chunking of information by colors and separations. Additionally, the three elements of vocab (PinYin, English, and Displayed) are clickable buttons that sort the vocabulary according to alphabetical order for the selected element. In this picture, the vocabulary is being sorted by alphabetical order according to PinYin, as marked by the downward black arrow.
Sentence Viewing
. We We chose buttons for displaying the vocab words, as opposed to underlines, because this appeared to indicate the clickability affordance the best during user testing. Because some users had difficulty going back to previously viewed sentences during paper prototyping (where we initially displayed only one sentence at a time), we instead made it such that all previously fetched sentences would be displayed in a scrollable list. However, during computer testing, users complained about how once they had fetched a sentence, it wasn't possible to remove it from the list of displayed sentences, hence we introduced a Close button to remove it from the list. However, as users in our own independent testing during GR5 were confused as to whether closing a sentence simply removed it from immediate view or prevented it from ever being ever being fetched again, and because the error of accidentally closing a sentence was not easily recoverable, then we introduced a "Closed Sentences" tab where closed sentences could be found and restored.
The currently reading tab gives users the option of fetching new sentences for the current study focus vocab (highlighted in blue both in the study focus category and in the current sentences). The yellow highlight greatly increases the locus of attention to certain warnings or instructions under the "fetch next sentence" button. Note that each sentence block is separated by alternating blue/white colors and the "closeClose" button for each sentence block. Clicking on the "Close" button will move the corresponding sentence block to the "Closed Sentences" tab, in a stack-like fashion (chose for better feedback).
Sentence Contribution
The Sentence Contribution tab allows the user to enter a sentence, and once submitted, the contributed sentence can be viewed below (and deleted). The reason we have contributed sentences displayed below is that during our paper prototyping, where contributing a sentence was simply modal popup dialog, the users were unsure where the sentence they had contributed had gone, or how they could delete it from the database if they had accidentally typed the wrong thing.
...