From 11510bf729e04ea6f4a713820582b490266505d2 Mon Sep 17 00:00:00 2001 From: awhildy Date: Fri, 21 Oct 2016 14:25:09 -0700 Subject: [ci skip] Establish basic structure for ux_guide README.md Block out pages needed for ux_guide Add resources stub to ux_guide home Fill out principles and basics Add TOC to basics Move all of UI guide to new UX guide structure Add first level structure on ux-guide pages Add more details to buttons Add button images. Update link on development Renamed surfaces to templates. Add tooltip details Update typography and icons on Basics page Add images for color. First draft of voice and tone Delete findings page Refine pages. Fill out Surfaces pages Clean up layout on basics, surfaces, features. Add anchorlinks and counts to components Fill out components page Add item title and system info block Fill out Features page Switch tooltip placement image --- doc/development/ux_guide/features.md | 63 ++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 doc/development/ux_guide/features.md (limited to 'doc/development/ux_guide/features.md') diff --git a/doc/development/ux_guide/features.md b/doc/development/ux_guide/features.md new file mode 100644 index 00000000000..00700af72aa --- /dev/null +++ b/doc/development/ux_guide/features.md @@ -0,0 +1,63 @@ +# Features + +## Contents +* [Navigation](#navigation) +* [Filtering](#filtering) +* [Search results](#search-results) +* [Conversations](#conversations) +* [Empty states](#empty-states) + +--- + +## Navigation + +### Global navigation + +The global navigation is accessible via the menu button on the top left of the screen, and can be pinned to keep it open. It contains a consistent list of pages that allow you to view content that is across GitLab. For example, you can view your todos, issues and merge requests across projects and groups. + +![Global nav](img/features-globalnav.png) + + +### Contextual navigation + +The navigation in the header is contextual to each page. These options change depending on if you are looking at a project, group, or settings page. There should be no more than 10 items on a level in the contextual navigation, allowing it to comfortably fit on a typical laptop screen. There can be up to too levels of navigation. Each sub nav group should be a self-contained group of functionality. For example, everything related to the issue tracker should be under the 'Issue' tab, while everything relating to the wiki will be grouped under the 'Wiki' tab. The names used for each section should be short and easy to remember, ideally 1-2 words in length. + +![Contextual nav](img/features-contextualnav.png) + +### Information architecture + +The [GitLab Product Map](https://gitlab.com/gitlab-org/gitlab-design/raw/master/production/resources/gitlab-map.png) shows a visual representation of the information architecture for GitLab. + +--- + +
+ +## Filtering + +Today, lists are filtered by a series of dropdowns. Some of these dropdowns allow multiselect (labels), while others allow you to filter to one option (milestones). However, we are currently implementing a [new model](https://gitlab.com/gitlab-org/gitlab-ce/issues/21747) for this, and will update the guide when it is ready. + +![Filters](img/features-filters.png) + +--- + +
+ +## Search results + +### Global search + +[Global search](https://gitlab.com/search?group_id=&project_id=13083&repository_ref=&scope=issues&search=mobile) allows you to search across items in a project, or even across multiple projects. You can switch tabs to filter on type of object, or filter by group. + +### List search + +There are several core lists in the GitLab experience, such as the Issue list and the Merge Request list. You are also able to [filter and search these lists](https://gitlab.com/gitlab-org/gitlab-ce/issues?utf8=%E2%9C%93&search=mobile). This UI will be updated with the [new filtering model](https://gitlab.com/gitlab-org/gitlab-ce/issues/21747). + +--- + +
+ +## Empty states + +Empty states need to be considered in the design of features. They are vital to helping onboard new users, making the experience feel more approachable and understandable. Empty states should feel inviting and provide just enough information to get people started. There should be a single call to action and a clear explanation of what to use the feature for. + +![Empty states](img/features-emptystates.png) -- cgit v1.2.1 From 406eda17d444e534bfa429d8c72a90c8f91a6f00 Mon Sep 17 00:00:00 2001 From: Achilleas Pipinellis Date: Fri, 11 Nov 2016 18:20:56 +0100 Subject: Remove
and replace GFM blockquote with the Markdown general [ci skip] --- doc/development/ux_guide/features.md | 6 ------ 1 file changed, 6 deletions(-) (limited to 'doc/development/ux_guide/features.md') diff --git a/doc/development/ux_guide/features.md b/doc/development/ux_guide/features.md index 00700af72aa..9472995c68c 100644 --- a/doc/development/ux_guide/features.md +++ b/doc/development/ux_guide/features.md @@ -30,8 +30,6 @@ The [GitLab Product Map](https://gitlab.com/gitlab-org/gitlab-design/raw/master/ --- -
- ## Filtering Today, lists are filtered by a series of dropdowns. Some of these dropdowns allow multiselect (labels), while others allow you to filter to one option (milestones). However, we are currently implementing a [new model](https://gitlab.com/gitlab-org/gitlab-ce/issues/21747) for this, and will update the guide when it is ready. @@ -40,8 +38,6 @@ Today, lists are filtered by a series of dropdowns. Some of these dropdowns allo --- -
- ## Search results ### Global search @@ -54,8 +50,6 @@ There are several core lists in the GitLab experience, such as the Issue list an --- -
- ## Empty states Empty states need to be considered in the design of features. They are vital to helping onboard new users, making the experience feel more approachable and understandable. Empty states should feel inviting and provide just enough information to get people started. There should be a single call to action and a clear explanation of what to use the feature for. -- cgit v1.2.1