User experience (UX)
We see the user experience of the RNLI’s Sitecore properties as the comprehensive view of how any user feels when interacting with them: from how the user navigates a website, right through to how fast that website loads for them, or how well they’re able to access content on different devices without frustration. Specific tasks that fall under the banner of user experience (UX) include defining a website’s information architecture (structural design, including the sitemap, and how we classify elements), the layout of content within pages, and the processes by which people achieve their goals.
Our approach to user experience
We have developed the following key principles to maintain a consistent user experience across the RNLI’s Sitecore properties, while allowing for flexibility and creativity across sub-directories (like RNLI.org/RNLI-College) and sub-domains (like summerjobs.RNLI.org).
Architecture: flat and global
- All sub-directories of RNLI.org should employ either the standard header with mega menu (as seen at RNLI.org), or the universal navigation ‘ribbon’ with sub-section menu (as seen at RNLI.org/fish-supper).
- RNLI web content should be placed on a sub-directory of RNLI.org where technically feasible. Sites with partners may require own domain.
- On all sub-domains, RNLI.org (homepage) should be accessible through a link in the footer.
- All properties should use the same grid as RNLI.org (gutters, columns etc). You can read more about this on the Layout and structure page.
- All properties should be no more than four levels deep (homepage, then three levels below it), with the exception of forms and thank-you pages, which may be additional.
User interface: consistent and intuitive
Navigation and interaction
Navigation should be intuitive and predictable, using logical titles to lead users to the specified and intended destination or goal.
- All components should perform the same function across properties and should be reused wherever possible.
- Key navigational elements such as headers, menus, accordions, tabs, text links, breadcrumbs and call-to-action buttons should be positioned, shaped and interact in the same way as the standard theme of RNLI.org.
- Navigational links should describe where they go, using language that is easy to understand.
- Titles, summary text and subheads of varying but consistently applied sizes, colours and weights should be used across pages, sections and properties to help users quickly understand any page’s structure and purpose.
- Hover states should be used for all clickable elements. But hover states should never contain vital information that may be lost across device types or impact users with accessibility requirements.
- Interactions that are not unique to the RNLI should be signalled by widely used icons and terminology. For example, ‘play video’ should be indicated by a triangle pointing right. These interactions should be supported with captions or alt text as appropriate.
Icons are a visual interpretation of our products, tools and services. When using iconography it is important that a user can see the icon clearly and has relevant visual context for its intended purpose (as above).
- Icons should match the same styling used on RNLI.org (colours may vary to suit sub-themes).
- New icons should follow the design rules of those already in use.
- Where possible, icons should be created as SVG files. If this is not possible, icons should be created at double size to ensure crisp presentation across all screen resolutions.
Typographic styles help to balance content density and reading comfort under typical usage conditions (while being mindful that some users may modify the size, colours, or fonts displayed by their browser). The use of consistent fonts and common sizing helps different site sections and properties feel familiar to users
- The primary type font for the RNLI’s Sitecore properties should be Din Text Pro.
- The fallback font option should be ‘Arial, sans-serif’.
- Main headings should use the font Din Text Pro Medium (except in some circumstances where a sub-theme is employed).
- Heading summary text should use the font Din Text Pro Thin.
- The type style of paragraph copy should be the same as RNLI.org (currently Arial, sans serif, normal, 16px, #293238), except where the primary user group may benefit from a change (for example content specifically written for young children).
- Sub-themes should employ no more than one custom font family in addition to the standard theme of RNLI.org.
- Textual content should always be rendered as machine-readable, and never be embedded within images for purely stylistic purposes.
- Photography and images
Compelling images have a unique ability to inspire and engage an audience, and photography plays a significant role in communicating the RNLI’s messages.
- Images should be immediately and obviously relevant to page content.
- High-resolution versions of images should be used wherever possible to best exploit Retina displays or similar.
- Photos and graphics should always be displayed in their original aspect ratio (it’s OK to crop an image, but not to stretch or squeeze to fit).
- Colour and contrast
The intelligent use of colour supports users by structuring content, highlighting key areas of interest and making user journeys clear.
- There should always be sufficient colour contrast between typography and background colours to ensure users with low vision can read content, understand actions and interact with the right elements.
- Use lighter colours when placing typography on a dark background, and always use darker colours on light backgrounds.
- All colours should be drawn from the RNLI’s main brand, sub-brands or campaign creative.