Improved group lists UI
This is the implementation issue for ~"product discovery" covered in https://gitlab.com/gitlab-org/gitlab-ce/issues/52365.
Problem to solve
Our project lists and group lists share a similar design approach. Both of these are used throughout GitLab in different contexts, e. g. dashboards, groups, users.
The current shown information is rather generic and text-heavy. There is an opportunity to improve the information architecture and structure of the project and activity representation individually, to show the relevant information in a more readable, efficient and delightful way.
Group list |
---|
Proposal
In ~Discussion, we are working on improving the display of issue and merge request lists, see meta issue gitlab-design#83 (closed) and
Let's explore improvements for displaying projects and groups as well!
As these are core elements in the GitLab UI, the initial approach should be UX research driven to learn which information are most relevant, less important, missing, in the different contexts.
To prepare this, we have to list where projects and groups are shown within GitLab, ideally, define how important they are (usage) and consider planned redesigns. The designs should be consistent with the issue/MR list and activity feed redesign, where applicable.
Further details
- Groups
- Dashboard
- Group page
- User profile
What does success look like, and how can we measure that?
Feedback and output of related UX research ux-research#76 (closed) is implemented.
Results of UX Research: https://drive.google.com/open?id=1RqxVv_9_3pRWVHw8Ad7vSiMQ9JoQrSLd.
Links / references
Existing issues regarding improvements:
- https://gitlab.com/gitlab-org/gitlab-ce/issues/48321
- https://gitlab.com/gitlab-org/gitlab-ce/issues/28153
- …
Solution
Mobile/tablet designs
320px | 375px | 600px | 768px |
---|---|---|---|
Don't show on 320px:
- avatar,
- update timestamp
- meta info (subgroups, members, projects)
Don't show on 375px:
- update timestamp
- meta info (subgroups, members, projects)
Don't show on 600px:
- update timestamp
- meta info (subgroups)
Don't show on 768px:
- meta info (subgroups)
Desktop designs
992px | 1200px |
---|---|
Show all info from 1024px onward.