...
Once the user logs in, he is greeted with the main page, which is split into a left sidebar for displaying and managing the study focus and vocabulary, as well as a right half which displays sentences. We chose to have both of these displayed at once, as opposed to haivng the vocabulary management and sentence viewing components in separate tabs, based on the results of the first paper prototyping iteration, where users encountered visibility issues due to having the vocabulary hidden away in a tab, and were generally dissatisfied about having to frequently switch between the two tabs.
Left
...
Side Page
Study Focus
The purpose of the study focus is to highlight the user-selected vocab word that will be used in each new example sentence generated. The design originally had the study focus as a text-display of the word currently being the focus of all the example sentences. However, due to user complaints about both visibility and navigation control, the study focus display was changed to a drop-down selection, which keeps a history of all the previous study focuses. Additionally, the popped-out drop-down selection also improves information scent. Finally, the study focus word is color coated as light blue, which extends to the color coating of the study focus word in the example sentences.
...
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. In addition to assigning a vocab as a study focus, users can also check "May appear in sentences" option for familiar vocab words, changing their color coding in sentences to red (see Sentence Viewing).
Right Side Page
Sentence Viewing
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 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. Notice how in all the sentence blocks, the study focus word is highlighted in blue, the "checked" vocabs (see Vocabulary Search) are displayed in red, and non-selected words are in grey.
...