...
Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).
Login and Account Creation
The user begins by arriving at the login screen. We aimed for simplicity in this screen: there is a login and create account tab, each of which contain labeled fields. The create account tab has some features designed towards fast error detection, namely that a message will be displayed if the username is already taken, immediately as the user is typing; likewise if the repeated password doesn't match the original, a message appears when then user finishes typing (as opposed to only making these errors visible once the user clicks the create account button). During user testing, User 2 noticed the immediate detection of the mistyped password, and commented that it was a useful feature. Additionally, the login and create account allow for the keyboard to be used for efficiency; namely the user can tab through the input fields, and the user can press the Enter button as opposed to needing to click on the widget. During testing, Users 1 and 2 both created their accounts by pressing the Enter key instead of clicking the widget, so this feature turned out to be useful.
Main Page
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.
...