From 16a8a594f42f4d1f74dab21656ab98e7f9204fd7 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Mon, 11 Dec 2017 20:50:24 +0100 Subject: Update UX guide --- doc/development/ux_guide/components.md | 18 +++++++++--------- doc/development/ux_guide/copy.md | 12 +++++++----- 2 files changed, 16 insertions(+), 14 deletions(-) (limited to 'doc/development/ux_guide') diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md index 16a811dbc74..d396964e7c1 100644 --- a/doc/development/ux_guide/components.md +++ b/doc/development/ux_guide/components.md @@ -10,7 +10,7 @@ * [Tables](#tables) * [Blocks](#blocks) * [Panels](#panels) -* [Dialog modals](#dialog-modals) +* [Modals](#modals) * [Alerts](#alerts) * [Forms](#forms) * [Search box](#search-box) @@ -255,18 +255,18 @@ Skeleton loading can replace any existing UI elements for the period in which th --- -## Dialog modals +## Modals -Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal. +Modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal. ### Usage -* When the action is irreversible, dialog modals provide the details and confirm with the user before they take an advanced action. -* When the action will affect privacy or authorization, dialog modals provide advanced information and confirm with the user. +* When the action is irreversible, modals provide the details and confirm with the user before they take an advanced action. +* When the action will affect privacy or authorization, modals provide advanced information and confirm with the user. ### Style -* Dialog modals contain the header, body, and actions. +* Modals contain the header, body, and actions. * **Header(1):** The header title is a question instead of a descriptive phrase. * **Body(2):** The content in body should never be ambiguous and unclear. It provides specific information. * **Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from left to right: Dismissive action → Extra action → Affirmative action @@ -277,13 +277,13 @@ Dialog modals are only used for having a conversation and confirmation with the ### Placement -* Dialog modals should always be the center of the screen horizontally and be positioned **72px** from the top. +* Modals should always be the center of the screen horizontally and be positioned **72px** from the top. -| Dialog with 2 actions | Dialog with 3 actions | Special confirmation | +| Modal with 2 actions | Modal with 3 actions | Special confirmation | | --------------------- | --------------------- | -------------------- | | ![two-actions](img/modals-general-confimation-dialog.png) | ![three-actions](img/modals-three-buttons.png) | ![spcial-confirmation](img/modals-special-confimation-dialog.png) | -> TODO: Special case for dialog modal. +> TODO: Special case for modal. --- diff --git a/doc/development/ux_guide/copy.md b/doc/development/ux_guide/copy.md index 12e8d0a31bb..af842da7f62 100644 --- a/doc/development/ux_guide/copy.md +++ b/doc/development/ux_guide/copy.md @@ -46,11 +46,11 @@ Avoid using periods in solitary sentences in these elements: * Labels * Hover text * Bulleted lists -* Dialog body text +* Modal body text Periods should be used for: -* Lists or dialogs with multiple sentences +* Lists or modals with multiple sentences * Any sentence followed by a link | :white_check_mark: **Do** place periods after sentences followed by a link | :no_entry_sign: **Don’t** place periods after a link if it‘s not followed by a sentence | @@ -80,7 +80,7 @@ Omit punctuation after phrases and labels to create a cleaner and more readable | Punctuation mark | Copy and paste | HTML entity | Unicode | Mac shortcut | Windows shortcut | Description | |---|---|---|---|---|---|---| -| Period | **.** | | | | | Omit for single sentences in affordances like labels, hover text, bulleted lists, and dialog body text.

Use in lists or dialogs with multiple sentences, and any sentence followed by a link or inline code.

Place inside quotation marks unless you’re telling the reader what to enter and it’s ambiguous whether to include the period. | +| Period | **.** | | | | | Omit for single sentences in affordances like labels, hover text, bulleted lists, and modal body text.

Use in lists or modals with multiple sentences, and any sentence followed by a link or inline code.

Place inside quotation marks unless you’re telling the reader what to enter and it’s ambiguous whether to include the period. | | Comma | **,** | | | | | Place inside quotation marks.

Use a [serial comma][serial comma] in lists of three or more terms. | | Exclamation point | **!** | | | | | Avoid exclamation points as they tend to come across as shouting. Some exceptions include greetings or congratulatory messages. | | Colon | **:** | `:` | `\u003A` | | | Omit from labels, for example, in the labels for fields in a form. | @@ -88,7 +88,7 @@ Omit punctuation after phrases and labels to create a cleaner and more readable | Quotation marks | **“**

**”**

**‘**

**’** | `“`

`”`

`‘`

`’` | `\u201C`

`\u201D`

`\u2018`

`\u2019` | ⌥ Option+[

⌥ Option+⇧ Shift+[

⌥ Option+]

⌥ Option+⇧ Shift+] | Alt+0 1 4 7

Alt+0 1 4 8

Alt+0 1 4 5

Alt+0 1 4 6 | Use proper quotation marks (also known as smart quotes, curly quotes, or typographer’s quotes) for quotes. Single quotation marks are used for quotes inside of quotes.

The right single quotation mark symbol is also used for apostrophes.

Don’t use primes, straight quotes, or free-standing accents for quotation marks. | | Primes | **′**

**″** | `′`

`″` | `\u2032`

`\u2033` | | Alt+8 2 4 2

Alt+8 2 4 3 | Use prime (′) only in abbreviations for feet, arcminutes, and minutes: 3° 15′

Use double-prime (″) only in abbreviations for inches, arcseconds, and seconds: 3° 15′ 35″

Don’t use quotation marks, straight quotes, or free-standing accents for primes. | | Straight quotes and accents | **"**

**'**

**`**

**´** | `"`

`'`

```

`´` | `\u0022`

`\u0027`

`\u0060`

`\u00B4` | | | Don’t use straight quotes or free-standing accents for primes or quotation marks.

Proper typography never uses straight quotes. They are left over from the age of typewriters and their only modern use is for code. | -| Ellipsis | **…** | `…` | | ⌥ Option+; | Alt+0 1 3 3 | Use to indicate an action in progress (“Downloading…”) or incomplete or truncated text. No space before the ellipsis.

Omit from menu items or buttons that open a dialog or start some other process. | +| Ellipsis | **…** | `…` | | ⌥ Option+; | Alt+0 1 3 3 | Use to indicate an action in progress (“Downloading…”) or incomplete or truncated text. No space before the ellipsis.

Omit from menu items or buttons that open a modal or start some other process. | | Chevrons | **«**

**»**

**‹**

**›**

**<**

**>** | `«`

`»`

`‹`

`›`

`<`

`>` | `\u00AB`

`\u00BB`

`\u2039`

`\u203A`

`\u003C`

`\u003E`

| | | Omit from links or buttons that open another page or move to the next or previous step in a process. Also known as angle brackets, angular quote brackets, or guillemets. | | Em dash | **—** | `—` | `\u2014` | ⌥ Option+⇧ Shift+- | Alt+0 1 5 1 | Avoid using dashes to separate text. If you must use dashes for this purpose — like this — use an em dash surrounded by spaces. | | En dash | **–** | `–` | `\u2013` | ⌥ Option+- | Alt+0 1 5 0 | Use an en dash without spaces instead of a hyphen to indicate a range of values, such as numbers, times, and dates: “3–5 kg”, “8:00 AM–12:30 PM”, “10–17 Jan” | @@ -175,7 +175,7 @@ A **comment** is a written piece of text that users of GitLab can create. Commen #### Discussion A **discussion** is a group of 1 or more comments. A discussion can include subdiscussions. Some discussions have the special capability of being able to be **resolved**. Both the comments in the discussion and the discussion itself can be resolved. -## Confirmation dialogs +## Modals - Destruction buttons should be clear and always say what they are destroying. E.g., `Delete page` instead of just `Delete`. @@ -184,6 +184,8 @@ A **discussion** is a group of 1 or more comments. A discussion can include subd - Avoid the word `cancel` or `canceled` in the descriptive copy. It can be confusing when you then see the `Cancel` button. +see also: guidelines for [modal components](components.md#modals) + --- Portions of this page are modifications based on work created and shared by the [Android Open Source Project][android project] and used according to terms described in the [Creative Commons 2.5 Attribution License][creative commons]. -- cgit v1.2.1