Group/project user management improvements to fix usability problems
Figma file
Proposals
Recommendations for these improvements came from gitlab-design#1035 (closed) where we analysed the experience of inviting members to a group/project. The Growth team will work on most of the improvements that came from that analysis but there are some basic usability problems that we won't look into. We wanted to document them here and let the product team that owns this part of the product decide whether to prioritise them or not.
Here are the problems we uncovered and the proposed solutions. All of them were found on the /settings/members page.
Separate filtering users from sorting users
At the moment, filtering and sorting options are grouped in one dropdown. Additionally, the filtering options are hard to discover because the user needs to scroll further down but there are no indicators that there's content below.
Besides, filtering and sorting options generally don't belong together, it's not a commonly used pattern on the web to group them like this. Reordering some of the UI in the header row of the table could solve this problem with very simple UI changes:
In the proposed solution, the filtering options are outside of the sorting dropdown and clearly labelled.
Add labels for Role and Expiration input fields in the table
At the moment, once the role and expiration date have been set, it's hard to find out what these dropdowns are for because they don't have labels. They only use placeholder text for labelling which is against our form guidelines.
Input fields with placeholder text
Input fields filled in
Solution proposed:
Add system notifications when updating user's role and expiration date
At the moment, there are no indicators and no notifications that would notify the user that a user's role or expiration date was updated. There is no "Save changes" button as the changes are saved automatically after they're made. We need to notify the user about these changes, I propose toasts:
| Role updated toast | Expiration date updated toast |
|---|---|
 |
 |
Show the list of direct members by default
I was confused by this for a long time (until someone told me how it works) and I heard that our users are generally confused about this as well. At the moment, we show "All" members on this page by default. This gets confusing when users use subgroups and projects. Instead of seeing only the users that are actually members of that subgroup/project, they see all members of the main group. This includes all the inherited members who may or may not actually be a direct member of the group. Combine this with the problem of the filtering options not being easy to discover and we get a big usability problem.
Proposed solution: show direct members by default. With the filtering options being clearer (if recommendations from this issue will be implemented) the user can then easily change that as required.
Add form validation
At the moment, a user can invite an existing member of the group/project. This creates a lot of noise for the invitee as they receive an email invitation urging them to either accept or decline. If they accept, they're eventually shown an error that says something along the lines of "you already are a member of this group/project". All this could be prevented with basic form validation where we check if the user being invited is already a member of the group/project.
Proposed solution: add form validation that shows an alert when a user tries to invite an existing member.
Use correct date picker input fields
A date picker input field should have a calendar icon in the right corner which triggers the date picker dropdown. When a date is filled in, we don't show a clear button but continue to show the calendar one.