...
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.
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 moving the vocabulary management into a separate tab, 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 complained about the efficiency of having to frequently switch between the two tabs.
Implementation
Our user interface runs in-browser using Silverlight, and is implemented using C#. It uses Silverlight's layout system to organize the widgets, and is therefore resizable.
...