Registration Flow Updates

Last modified by Lucas Charpentier on 2025/11/27 16:05

 XWiki
 Design
 Completed
 
Yes

Description

Note 15/03/2024: Two details to be considered during development
- Use of icons in place of the labels in the header (vmassol)
- Positioning of the buttons (vertical vs horizontal) at the end of the registration process (pjeanjean)

Identification of Registration Process Issues

In the current XWiki registration process, the following problems have been identified:

1. Lack of immediate visibility for registration on the default distribution.
2. Non-visibility of password rules, necessitating a trial-and-error approach for users to comply with admin-defined requirements.
3. Bland design and messaging for the registration process.

Enhancing Visibility for Registration and Login Options

To address attrition issues for potential contributors and accommodate users with disabled JavaScript (XWIKI-14881), we can relocate the "Log In" and "Register" buttons to the XWiki header. Due to the absence of clearly defined standard icons for these actions, they will be presented as labels with increased spacing from the search and sidebar menu icons.
header.png

Warning

Note that the logout button in the picture above has not been kept in the final version of this update.

spacing.png

Improving Visibility of Password Rules in the Registration Form

- Continuous visibility of password validation rules.
- Maintain real-time password checks with user feedback on success.
- Adherence to the admin-defined password rules configured for the XWiki instance.

password rules.png

Reorganization of Form Inputs

Optimizing the registration form structure involves:

- Prioritizing required fields at the beginning for immediate user attention.
- Categorizing other fields to enhance overall form organization.
- Placing the captcha above the "Register" button to mitigate potential timeout issues associated with reCAPTCHA.

reg form.png

Finalization of Registration Page

Visual enhancements in the registration success page:

- Inclusion of an illustration signaling the successful registration process.
- Display of a bigger sized main message, personalized with the user's name, surname, and username. Name and/or surname take precedence over the username, with the username filling the gap if no name or surname is provided.
- Presentation of two buttons:
    - "Log In" with a primary visual style.
    - "Back to Home" with a secondary visual style.

registration message.png

message buttons.png


 

Get Connected