ShareButton
The share components contain a button or a list of buttons. The most common buttons we can find in a share component are links to social media platforms. Messaging apps could also be included. Additionally, it is possible to share content through more traditional channels like sending it by e-mail or printing.
Usage guidelines
Using a share component on all pages isn't mandatory, sometimes there's nothing to share!
Even though share components are sometimes ignored, it is essential to give the users the chance to share content effortlessly through different channels. This improves the user experience and gives more visibility not only to that content but to the whole website.
- Number of Buttons: A share component should contain at least 2 buttons or icons but should not be excessively long. Consider the target of your content and use only the social icons that resonate with it.
- Order of the buttons: By studying users and their activity on the website, you can discover which are the most common platforms they use and, therefore, which might be the most clicked icons inside a share bar. Always place these ones first.
- Visibility and placement: The purpose of a share component is to make it easy for users to share content they like. This element should be placed near the content it refers to and be immediately visible.
When to use
- To give the user the chance to share Zurich content.
When not to use
- If you have less than 2 buttons or icons.
- It is not recommended to add more than 5 icons.
Writing guidelines
The share text on the share bar explains what the share bar is about or what the user can do like “share this...”
Language
Use simple and clear language.
Text length
Don't write more than 3-4 words.
Specifications
Anatomy
Inactive state:
- Background: its color is predefined
- Share icon
Active state:
- Background shape 1: its color is predefined
- Close icon
- Background outline
- Background shape 2: its color is predefined
- Icon: a series of up to five icons is possible
Types/Sizes
When you want to offer many share icons to the users or even the chance to copy and share a link, we suggest you use Modals with a list of icons divided by type. Otherwise:
Two share component types are available. They can hold up to 5 buttons, icons.
Share button Button with a general share icon which becomes a horizontal or vertical bar.
Size: the Share button has the same dimensions for all screen resolutions.
Styling
The Share button and Share bar are available in a dark and a light mode.
- The Light version uses Zurich Blue with Gray/white icons.
- The Dark version uses Zurich White with Zurich Blue icons.
Behavior
Positioning
When designing a share component, it is very important to consider the placement of that element on the page.
Top of the post: challenging because the users would have to share something yet unknown but still useful since it is immediately visible.
Bottom: practical (when the users scans the content, they can decide if they want to share it) but many won't read the whole content so they might never reach the share element.
In-line: another option is to pin it to the screen so it is always visible.
Left: better than on the right (the users normally read the content from left to right).
Alignment
Share button
Choose between 4 orientations: left to right, right to left, top to bottom and bottom to top.
The share/button should be placed near the content it refers to and be immediately visible.
Interaction
Share button
By clicking on the closed share button, a horizontal or vertical bar shows up so the users can select an icon or close the bar by clicking on the close button to come back to the share button.
Accessibility guidelines
Design considerations
- The share component must have appropriate contrast against the surrounding background.