# Context The settings consistently comes up in customer feedback and ~SUS results as being challenging to use. In https://gitlab.com/gitlab-org/gitlab/-/issues/275969, it was proposed to side-by-side the layout. This issue proposes changing package group and project settings to a two column layout:  ## Benefits of this layout * The new layout reduces the amount of scrolling by moving the description to the left column, shortening page height * The new layout eliminates the accordion pattern, which helps with the discoverability as all options visible on the page (note: this layout must use progressive disclosure, see notes below). ## Implementation * Package will be adding many settings in the coming milestones. The package settings page has been worked on over time in pieces and is messy, this will be a good opportunity to clean things up. Package could lead on this pattern * Socialize this pattern throughout the UX team, as a thing to consider when adding new settings * Eventually, this pattern could be adopted one page at a time when there is resource to do so ## [Figma](https://www.figma.com/file/OCEP1esclZnGKZ26fC0PjJ/Package-settings?node-id=543%3A147200) ## UX justification <details> <summary>UX justification</summary> The settings consistently comes up in customer feedback and ~SUS results as being challenging to use. Challenges include: * Discoverability * Consistency * Overwhelming amount of information See a deeper explanation of pain points in research in [this epic](https://gitlab.com/groups/gitlab-org/-/epics/3535) ## Validation to date The proposal went through [unmoderated usability testing](https://gitlab.com/gitlab-org/ux-research/-/issues/1215) and performed positively. gitlab~4116714 has adopted this pattern and is currently going through solution validation: * https://gitlab.com/gitlab-org/gitlab/-/issues/351476+ * https://gitlab.com/gitlab-org/gitlab/-/issues/348203+ * [SV Dovetail project](https://dovetailapp.com/projects/7Mcg4vwhxzT3M0tg6vgAVM/data/b/7wcAOR75pwLKrRoeEHcMvu) ## Will this pattern work for other areas of settings? tl;dr: Yes, but not as simply as moving the title and description to the left column. See many pages of settings using this pattern in [Figma](https://www.figma.com/file/hTSMqAxICp2qmdT3l7wQK7/Standardized-patterns-used-for-Settings-UI-%23275969?node-id=1231%3A76512) concept. When taking away the accordion pattern, we have to make sure that the page length is not long and overwhelming. **In order for this pattern to be successful, teams will need to simplify their UI by using progressive disclosure.** Teams need to understand which are the most frequent actions in their area of settings and moving other settings to a secondary screen, e.g. moving forms into modals or new pages, moving complex settings onto [new pages](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1244) ([MR](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/2774) to design system on this topic). Example: | Now | Proposal | | ------ | ------ | |  |  | While the change is not a simple one, utilizing progressive disclosure more will have the added benefit of improving UX. "Progressive disclosure thus improves 3 of usability's 5 components: learnability, efficiency of use, and error rate." - [nngroup](https://www.nngroup.com/articles/progressive-disclosure/) </details>