How to optimize navigation and user-experience into a login form?

Question

I have developed an Universal app that uses a login form, that allowing users to connect or to create an account.

It is a simple page that looks like this:

This XAML code is also very simple:

    <ScrollViewer>
        <StackPanel>
            <TextBlock x:Uid="loginRegisterTextblockMessage" 
                       Style="{StaticResource TitleTextBlockStyle}" 
                       Text="Remplissez vos informations d'inscription" />
            <TextBox x:Uid="loginRegisterTextboxOrganizationURL"
                     Header="Organisation ou URL"
                     IsSpellCheckEnabled="False"
                     IsHitTestVisible="True"
                     IsTextPredictionEnabled="False"
                     Text="{Binding OrganizationURL, Mode=TwoWay}" />
            <TextBox x:Uid="loginRegisterTextboxLastName"  
                     Header="Nom"
                     Text="{Binding LastName, Mode=TwoWay}" />
            <TextBox x:Uid="loginRegisterTextboxFirstName" 
                     Header="Prénom"
                     Text="{Binding FirstName, Mode=TwoWay}" />
            <TextBox x:Uid="loginRegisterTextboxEmail" 
                     Header="Email"
                     InputScope="EmailSmtpAddress"
                     Text="{Binding Email, Mode=TwoWay}"/>
            <PasswordBox x:Uid="loginRegisterPasswordboxPassword" 
                         Header="Mot de passe"
                         Password="{Binding Password, Mode=TwoWay}" />
            <PasswordBox x:Uid="loginRegisterPasswordboxConfirmPassword" 
                         Header="Confirmez le mot de passe"
                         Password="{Binding PasswordConfirmation, Mode=TwoWay}" />
            <CheckBox x:Uid="loginRegisterCheckboxTermsOfUse" 
                      IsChecked="{Binding TermsOfUse, Mode=TwoWay}" >
                <TextBlock Style="{StaticResource BaseTextBlockStyle}">
                    <Run x:Uid="loginRegisterTextblockTermsOfUse1" 
                         Text="J'accepte les " />
                    <Underline>
                        <Hyperlink x:Uid="loginRegisterHyperlinkTermsOfUse" 
                                   NavigateUri="http://termsofuse.html" >
                            <Run x:Uid="loginRegisterTextblockTermsOfUse2" 
                                 Text="conditions générales d'utilisation" />
                        </Hyperlink>
                    </Underline>
                </TextBlock>
            </CheckBox>
            <Button x:Uid="loginRegisterButtonRegister"
                    Content="S'inscrire" 
                    Command="{Binding RegisterCommand}" />
        </StackPanel>
    </ScrollViewer>

But I meet a "problem" for navigating between each fields of this page:

=> The user must click outside of a TextBlock to hide the keyboard and select the next field: this is not very user-friendly

I took a look at a similar "system" form: the page used to create an account to access to the Windows Store.

The page looks very similar to my own page:

But it is there possible to activate the next field by clicking on its header:

The focus moved on the field and the keyboard is also automatically displayed:

If I click on the the next header "Nom d'utilisateur", I can see that the next field is now "Domaine", by moving automatically into the displayed content:

=> Is there an easy way to reproduce this comportment? Is it based on the "Header" of the "TextBox", or by using seperated "TextBlock" to show the header?

score 0 · Answer 1 · edited May 23 '17 at 11:58

I always looking for a good solution but I didn't find it. I've added events in the XAML for the TextBox and PasswordBox on GetFocus and KeyDown. In the Code-Behind, I can now manage the "Enter" Key, that gives the focus to the next TextBox:

        private void RegisterTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
    {
        TextBox currentTextBox = (TextBox)sender;
        if (currentTextBox != null)
        {
            if (e.Key == Windows.System.VirtualKey.Enter)
            {
                FocusManager.TryMoveFocus(FocusNavigationDirection.Next);
            }
        }
    }

But I haven't yet managed the ScrollViewer autoscroll like I hope. I tried to inspire me from this link, but to no avail: Keyboard-Overlaps-Textbox

=> Is there really a way to reproduce the autoscroll that is used on the registration form for the Windows Store?

How to optimize navigation and user-experience into a login form?

1 Answers1