ceros/styleguide-ux-patterns

This defines the current style of Studio, it also describes rules around the behaviour of these elements.

styleguide-ux-patterns's Issues

Style / Typography

Typography in Studio

We've chosen Nunito for our Studio font - we make use of all 3 weights, see examples below

Specification for fonts used in page title and Inspector panel

---

Working file
Illustrator file is here

Components / Progress & Activity (Loading)

Loading

In Studio we mainly make use of an indeterminate indicator, which implies that the user wait while something finishes loading. This does not indicate how long it will take.

It is currently in use in most of the parts of Studio, and the projects page. However, still needs implementing in the entry pages to Admin and Studio, which still has a different spinner.

An indeterminate is recommended when loading all Ceros related content, and a list from below e.g.

---

Working file
This is the .svg to use for the loader
The Illustrator file is here

Pattern / Animation

Animation

Authentic Motion
Natural acceleration and deceleration

Changes in acceleration or deceleration should be smooth across the duration of an animation.
To draw attention to an object for a specific purpose, or to add character to an animation, vary its change in speed when starting and stopping.

In the UX context, easing refers to the transition between states. As a result, “ease in” refers to the motion entering the transition, and “ease out” refers to the motion leaving the transition.

Meaningful Animation
Transitioning between two visual states should be clear, smooth, and effortless. A well-designed transition tells the user where to focus their attention.

Transition types and actions:
Incoming elements: Newly generated or translated items are introduced or re-established.
Outgoing elements: Elements no longer relevant to the context are removed.

Considerations
When designing animations, consider the following:

Direct user attention
How should the user’s attention should be directed? What elements and motions support that goal? How should incoming, outgoing, and shared elements be emphasised or de-emphasised through the transition?

Connect transitions visually
Create visual connections between transition states through colour and persistent elements.

Use movement with precision
Consider how moving a certain element adds clarity and delight to a transition.

---

Working File
Illustrator file is here
Invision
Examples of proposed animation

Style / Imagery

// Check with Jack Dixon

Components / Dividers

Components / Menus

Menus

Menus allow users to take an action by selecting from a list of choices revealed upon opening a dropdown. Menus should not be used as a primary method for navigation within Studio

The label of an emitting button or control concisely and accurately reflects the menu items contained within the menu. Menu bars typically use single words as labels, like the above example - “help” while other contexts may have more verbose labels.

Menus display a consistent set of menu items, each of which may be enabled or disabled based on the current state of the Studio or the selected element.

Dropdowns:

Contextual menus dynamically change their available and enabled menu items based on the current state of the selected object.

Generally, remove menu items/selections that are irrelevant to the current context, and disable menu items which are relevant but need certain conditions to be met (for example, Font Explorer, you have a font in use, so this font is in the list but disabled, so you cant for instance delete it.

---

Working files
Illustrator file here

Patterns / Selection

Selection

There are two types of single-item selections in Studio:

• Object Selection on canvas, to manipulate (like move or transform)
• Text Selection (Edit text, change size, font or colour etc.)

Object Selection
In Studio an object selection is initiated by clicking on an object on the canvas. The selection is indicated with a blue bounding box (Alien in Isolation mode), with 'transform' handles. If the user hovers on the sides or corners, it'll respectively show the relevant cursor to help the user manipulate the object.
To deselect, the user clicks away from the box onto another item or onto canvas.

Text Selection
In Studio this is indicated by highlighting the bounds of the selected text within the text field.
Drag the initial selection to expand it. Double click to select all text within the textfield.
To deselect, click outside the font selection

Selection colour
This is determined by the mode the object or text selections take place.

When on Studio level

• Object selection has a *CerosBlue bounding box.
  
• Text selection is CerosBlue with black text on canvas, but in the Inspector panel it is a Ceros blue selection with white text.
  

When on Isolation mode

• Object selection has an *Alien green bounding box

• Text Selection is *Alien green with black text

Related InVision examples
Pinned Group
Anchors
Isolation Mode

Components / Selection controls

Selection Controls

Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Otherwise, consider a dropdown, which uses less space than displaying all options.

Check Buttons

Checkboxes allow the user to select multiple options from a set.
If you have a single option, avoid using a checkbox and use an on/off switch instead - this is not yet part of Studio, but should be for future consideration

---

Working files
Illustrator file is here

Some InVision examples of use of selection controls
Inspector Panel
Pinned Smart Groups
Interaction panel - Lightbox

Patterns / Messaging

Messaging

*This in one of the most important pieces of UX missing in the Studio. There is no system level dialog in Studio. Currently the Studio makes use of Overlays, Modals and Growls, that don't necessarily follow the same visual language, and there's no standard format to the messaging - this needs attention.

Error messages need to be:
Human
Make sure it’s polite, understandable, friendly and jargon-free.

Helpful
Is it visible?
There’s no point displaying an error message if the user doesn’t even see it. Think about the message size, colour and location of your error messages. Make them prominent.
Your error message needs to explain the problem as clearly as possible.
Does it help the user recover?
What do they need to do next? How can they get back to what they were doing, as fast as possible?

Humorous
Keeping your tone light-hearted can help to keep the user on-side. This depends on the severity of the error.

Humble
It’s always better to assume that your site or app is at fault, not your user. You must never imply that the user made a mistake. Always be humble.

---

User input Errors
Due to the nature, this may be more prevalent in Admin.
But here is an example of it used in the creation of the Projects page

These are typically used in forms, where the user doesn't enter the correct format of a field or it exceeds a character limit etc.

Helper text may be included before, during, or after a user interacts with each field on a form.

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text. Minimize form text to the essentials. Not every text field needs helper and/or error text.

Platform Errors
Incompatible state errors
This occurs when users attempt to run operations that conflict, such as trying to import a unsupported file format into the canvas. Help prevent users from putting themselves into these situations by clearly communicating the formats they are able to select. When these errors are triggered, do not imply that they are the user’s fault. (We currently have a growl when this happens.)

---

Working files
Illustrator file is here
InVision work
Examples of how to show errors here
Related working files
Error messaging is also used in Overlays and Modals. Click here for the working files
This is also touched on in the Dialog/Modals part of this Styleguide
Crappy Messaging

Layout / Page grid

Baseline Grids

Keylines & Spacing

Components / Dialog / Status bar

Status Bar

Description
The Statusbar provide lightweight feedback about the platform operation by showing a brief message at the top of the screen. e.g. 'SAVED' in Studio. Statusbars can contain an action.

Choreography
Upon entrance, the Statusbar animate downwards from the top edge of the screen, like in Font Explorer.
They exit by automatically animating upwards after a timeout or user interaction. However this does not apply to the statusbar in Studio, as its such a frequent update, it may be distracting. So animation does not apply here.

Very short text strings
Statusbar should contain a single line of text directly related to the operation performed. They may contain a text action. They cannot contain icons.

Transient
The statusbar automatically times out from the screen. For usability reasons, statusbars should not contain the only way to access a core use case. They should not be persistent or be stacked.

When an unrelated dialog or overlay occurs while the statusbar is up, the statusbar timeout will reset upon the window focus being regained. This is to ensure that the user will be able to read the statusbar for the full intended duration.

Multiple/Lengthy Status changes with actions - For two or more actions, use a dialog, not the statusbar, even when one of the actions is a dismiss action. If the action described in the statusbar is important enough to block the use of the screen, it should be a dialog.

---

Working files
None - this is part of the 'Messaging' piece

Layout / Principles

Pattern / Search

Search in Studio

The only example currently available on the platform is the search function used in the Font Explorer.

Basic search involves:
Entering and submitting a query in the search field
Displaying a set of search results

Enhance Search experience by providing:
Filtering & sorting based on relevant categories.
Auto-completed search suggestions matching actual results in Studio data.

As the user enters a query in the search field, the search results auto-updates. As the user types, the results are matched. The X action in the search field clears the query.

Search Results
When there are no matching search items, a message is displayed prompting the user to try again.

---

Working files
Illustrator file is here

Components / Dialog / Toasts (Growl Notifications)

Toast / Growl Notifications

Herewith an example of the current toast - A toast notification is a transient message to the user that contains relevant, time-sensitive information and could provide quick access to related content in Studio. Toasts do not contain actions.

Recommendations

• Consider that notifications are an invitation to switch context rather than a strictly informational update.
• Combine multiple related updates that occur within a short period of time into a single toast notification.
• Present information in the simplest possible form. No need for headlines.
• Don't use toast notifications to notify the user of critical information. Instead, to ensure that critical alerts are seen, notify users within Studio using a change in the status bar, modal, or other inline element.
• Don't use toast notifications for anything with a high volume of notifications.

---

Working files
None available - this is definitely a piece of work that needs doing.
Also see 'Messaging'

Style / Color

Colors used in Studio

0E1114 - Midnight

161A1F - Coal

#192024 - CastleRock

282F34 - LavaStone

2E353A - TarnishedSIlver

353D43 - Pebble

414B51 - Pewter

47535B - Riverbed

808B90 - Culumnimbus

#707070 - Dove

ACACAC - Cloud

EDEDED - Ghost

F4F4F4 - Sheet

FFFFFF - White

55DBEF - CerosBlueLight

27CCE5 - ArcticBlue

05C3DE - CerosBlue

04AFCA - CerosBlueDark

4DFFB6 - Alien

94FFD3 - AlienLight

3ABF89 - AlienDark

F6323E - CerosRed

F75D66 - SoftCoral

B92730 - LipstickRed

Accent colour
Use the accent colour - CerosBlue - for your primary action button and 'selected' / 'focus' swtiches, fields and sliders.

Fallback Accent colour
If CerosBlue is too light or too dark for sufficient contrast on the background use a darker or lighter tint.
CerosBlueLight or CerosBlueDark.

Themes
Its important to apply a consistent tone to the app. The theme specifies the darkness of the surfaces, level of shadow. To promote greater consistency between Studio and Admin, light and dark themes should follow a similar structure:

Studio Theme

1. Status bar
2. Toobar / ControlPanel
3. Background

Studio UI Colours

Accent Colour
Ceros Blue is the accent colour throughout the whole of Studio. The one exception is when the user enters Isolation mode - this is when the accent colour changes to *Martian. All UI components associated with changing the SmartGroup content should have Martian applied e.g.

Button Colors
Herewith an example of the Button Style for Studio, these are typically used in dialog e.g Overlay.

---

Working Files
Studio Illustrator file here
Colours Illustrator file here
FUTURE SUGGESTION:
I think its worth considering using opacity for text, icons and dividers to reduce the amount of 'shades of grey' needed. Its easier to convey the states; importance or hierarchy of certain information relative to others.

Components / Text Fields

Patterns / Data formats

Data Formats

Shannon to complete as part of Admin, this doesn't really affect Studio. No UX time has been dedicated to doing this, but it would be important for the Admin side

Date & Time
Current date and time
Date and time events (such as when a project was created, sent, edited, or otherwise acted upon)

Time
If a timestamp is within the current day, display the time using uppercase AM or PM, without periods:
hour:minute AM/PM

Month & Day
If within the current calendar year, display the date without the year.

Month, day, and year
If not within the current calendar year, display the date and year.

Abbreviations

Time & Date ranges

Human & relative language
When space permits - Display date and time information as people normally speak to each other.
Refer to yesterday or tomorrow.

Truncation
Baseline ellipses [...] represent letters, words or phrases that aren’t shown.
Usage
Type the ellipses as three periods in a row (or unicode character U2026) directly following the last letter shown. If space allows its good to accompany with a tooltip displaying the full word(s) or phrase.

Components / Sliders

Components / Studio Anatomy - Specifications

Studio Anatomy

These are the different parts to the Studio - there is some discrepancy in what people call the various areas, but this is what I've been calling things - it may be worth going through this with the team and standardise the naming.

Specification of Studio heights

Inspector Panel
This panel consists of 6 panels, that consists of various UI elements, like dropdowns, fields, double arrow dropdowns, selectors, radio buttons, tick boxes etc. It has a single flyout - the Colour picker, used in Shape and Typography.

Specification of Inspector panel
The spacing applied to this panel needs to be the same in all the other 5 panels within the Inspector panel

Specification of Layers panel

The rest of Studio UI appears as modals overlaid:

---

Working file
The illustrator file for this can be found here

Related Invision files
Google analytics
Inspector Panel
Pinned Smart Groups
Interaction panel - Lightbox
Anchors

Components / Buttons

Buttons

There are three standard types of buttons:

1. Action button
A rectangular button coloured according to its hierarchy (Primary, Secondary)

Action button specification

2. Navigational button
Typically used for navigation, lights up on hover, and has a CerosBlue line displayed below the selection. Predominantly used in Admin

3. Control buttons
This button is only used in the studio and typically contains an icon. e.g the 'edit' and 'delete' icon in example below

Also see spacing and styling on these buttons by viewing the Iconography of this section

Choosing button style
Choosing a button style depends on the primacy of the button.
Function:
We currently have a pattern where Action buttons are used in Dialogue panels with the user, the Navigational button for navigating to other sections of the platform, and Control buttons for the Studio UI. So determine what your function is, and see if it fits into the existing pattern.
Layout:
Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.

---

Working files
Illustrator file is here
Related topic in this styleguide - Iconography of this section

Style / Iconography

Iconography

Studio UI icons, symbolises a command, file, or specification. These icons are also used to represent common actions like create, save, edit, and delete.

The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes. Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different parts of the platform.

Clearance
Adequate space around the icon is needed to allow for legibility. As a rule, always multiply the icon size by 2 to get the clearance size
e.g the toolbar icons: Icon size 15px by 15px, and clearance around it 30px by 30px

Current Icon set for Studio
Here is a set of the existing icons used in Studio. There is much work to be done to get these more consistent in terms of size, shape and style

Icon States
A grid of the different states of icons, again, there are inconsistencies that needs to be addressed, like the blue hover state for 'Publish' this should be white, like the rest of the hovers in Studio

Icon States - on light background
This needs further exploration, as really this should have the same visual language, iconography and colours used as in the Admin side of the platform.

---

Working Files
All the icon SVG's live here
This illustrator file can also be found on GDrive
The Font Explorer icons can be found here.
FUTURE SUGGESTION:
I think its worth considering using opacity for icons to reduce the amount of 'shades of grey' needed. Its easier to convey the states; importance or hierarchy of certain information relative to others.

Components / Dialog / Modals

Modals

Appearance
Modals are separate from the underlying parent window and do not scroll with the parent window.
They appear on top of a 50% opacity (Black) layer.

Some Modal content requires scrolling, such as e.g. embed code. If the content is a scrollable list of options, the Modal title remains pinned to the top. Actions always remain in place when content scrolls.

Modals should never be obscured by other elements and should never appear only partially on screen. Dialogs always retain focus until they have been affirmed or dismissed or a required action has been taken.

Navigation
Modals can be dismissed by clicking outside of the dialog. Modal behaviour can be overridden so that users must explicitly choose one of the actions.
The discard action, an “X” at the top right of the screen, closes the full-screen dialog and discards any changes. If the user has made any changes, they are prompted to confirm the discard action. If no changes have been made, clicking the “X” or “Cancel” immediately closes the dialog and no discard confirmation is required.

Modals include elements such as branded buttons, and can be in two different colours, Ceros Blue (and the variious shades for states) or Red (as per example above) The red is used when an irreversible action is about to take place.

Specification

Modals contain a title, content, and actions.

The title (and associated Iconography) briefly describes the type of choice being made. Titles should be succinct. Titles should always be displayed in their entirety. Titles can wrap to a second line if necessary, and then should be truncated.

Titles can be used to clarify the decision being made. For example, a title may indicate what part of a process the dialog relates to or identify what will be affected by the decision, e.g. 'Publishing Experience.' or 'Delete Project'

---

Working files
Illustrator file, containing all modals can be found here

InVision examples:
Font Explorer
Google Analytics
Embed UX