That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.
\n
Our values
\n
\n
Fairness
\n
Knowledge
\n
Clarity
\n
Confidence
\n
Possibilities
\n
\n
Our mission
\n
Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.
\n
Our ambition
\n
To be the UK’s leading comparison site for all consumers who wish to make their money go further.
\n
Our vision
\n
We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.
\n
Our benefit
\n
We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.
\n
Our personality
\n
\n
Expert
\n
Frank
\n
Connected
\n
Human
\n
Advisory
\n
\n
Brand positioning
\n
Intuitive and focused
\n
We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.
\n
Authoritative and directional
\n
We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.
\n
Personal and engaging
\n
We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and brought to life, enabling our customers to see how they can save money or get better value for money.
\n
Experimental and bold
\n
We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice
\n Our pattern library comes as an easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.\n
uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.
We use Autoprefixer + Browserlist to decide what vendor prefixes to apply to our Sass files. We have a slightly wider browser support than the default (here). Currently we support all the way to IE9.
\n
Below is what we support. Each line is the minimum version or % use based on CanIUse metrics
\n
\n \n
\n
Browser
\n
Minimum version supported
\n
\n \n \n
\n
Safari, Chrome
\n
Last 5 versions
\n
\n
\n
Firefox
\n
ESR
\n
\n
\n
Opera
\n
18
\n
\n
\n
Internet Explorer
\n
9
\n
\n
\n
Global usage
\n
> 1%
\n
\n \n
\n
\n
\n
Installation
\n
See our GitHub for documentation on installing this across applications.
\n
\n","subNav":[]},{"name":"uSwitch living styleguide","page":"index.html","template":"styleguide/templates/simple.tpl","section":"","content":"
\n The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with ❤ at uSwitch.com\n
\n
\n
\n
\n
Design guidelines
\n
uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.
\n
\n
\n
Automated development
\n
uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.
\n
\n
\n
\n
\n
\n
\n
Pattern library
\n
At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the pattern library section.
\n
\n
\n
Designer + developer happiness
\n
Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.
\n
\n
\n
\n
\n
The logo
\n
\n
\n \n
\n
\n
There is no reason for this logo other than it's funny and unicorns are all the rage just now.
\n\n
Disclaimer: uSwitch is not a unicorn company.\n
\n
\n
\n
\n
We're looking for great talent
\n
Want to help us build more things like uStyle? We're constantly trying to deliver a better experience for customers and developers, and we're looking for passionate people to join our team.
\n
Fire us an email at jobs@uswitch.com with your CV and tell us a bit about yourself.
We use imagery to relate and engage with our customers, to support our message, and to aid in understanding. These guidelines are here to help you chose images that reflect our brand values and personality. If you’re questioning whether an image is suitable, ask a designer – they’ll be happy to help.
\n\n
Principles
\n\n
Focused
\n
Images are more interesting when they have a point of focus.
\n\n
Contextual
\n
People and objects should be properly contextualised. Avoid cropping an image so severely that it’s setting is lost.
\n\n
Local
\n
Make sure clothing, architectural features, light and style have a UK feel.
\n\n
Mood
\n
Relatable, genuine, optimistic, affirmative.
\n\n
Colour
\n
Our preference is for natural light where possible. Colours should be warm, vibrant and saturated where possible – avoid images that are “washed out”. Do not use dramatic filters, colourisation effects, or black and white.
\n\n
People and lifestyle
\n
Lifestyle shots should be reportage in style, documenting people in their day-to-day lives. Subjects should be unposed, and within their natural environment. People should never be cut out or appear over solid backgrounds. Images should be relatable and feature real, everyday people. Avoid fake or forced emotions as it can seem ingenuine. A range of gender, race, and age should be represented.
\n\n
Products and objects
\n
Object focused imagery may be cut out and appear over our brand colours or on white. When cut out, the whole object must be appear – edges must never be cut off.
\n\n
When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulated.
\n\n
Illustrations
\n
Illustrations may be used to add understanding and delight to an experience.
\n\n
Our illustrative style is simple and geometric. Our brand colours should be used predominantly, although variations in shades and saturation may be necessarily. Illustrations should generally appear over solid colour or white backgrounds. Avoid using illustrations that are clichéd or overly metaphor based.
\n\n
Generating new photography
\n
We generally try to avoid commissioning photography unless completely necessary as it can prove to be extremely expensive. Before commissioning new photography, carefully consider:
\n\n \n
Do we already have what’s needed in our image library?
\n
If not, can you find it – in stock, from a press office or other legitimate source?
\n \n\n
Where we do shoot our own (product shots, staff portraits etc being examples of where this may be necessary) we follow these guidelines.
\n
\n\n
\n
Cropping
\n
Images will often need to be cropped to fit various size requirements. When cropped, images should still follow all guidelines.
\n
\n\n
\n
Where to get images
\n
The following sites are our preferred resources as images are royalty-free, reasonably priced, and generally good quality. There are shared uSwitch logins for these sites – get in touch with the Service Desk if you don't have access.
Stock sites often allow you to purchase images in Small, Medium and Large sizes. Purchasing the largest option is recommended as this will cover most of our online use cases and allow for flexibility when it comes to cropping.
\n\n
File types
\n
Photography
\n
Most photography that you purchase from stock sites will be either JPG or TIFF format. Either is fine, but if it’s a TIFF, it will need to be converted to a JPG before using online.
\n\n
Graphics and Illustrations
\n
Graphics and illustrations are usually available in EPS, SVG, or PNG format. When available, EPS or SVG files are preferred as they can be scaled to any size. EPS files will need to be converted to an SVG or PNG before using online.
\n
\n\n\n
\n
Types of licenses
\n\n
1. Rights-managed
\n
Rights-managed images often have limitations in regards to the following:
\n\n
\n
How many times you can use them
\n
Regions you can use them in
\n
Type of media you can use them on
\n
Length of time you can use them for
\n
\n\n
2. Royalty-free
\n
Royalty-free images can generally be used on multiple projects for an unlimited amount of time. They should not be confused with “free”. You must still pay a one-off cost to use them.
\n\n
We prefer royalty-free images as there’s fewer restrictions around using them. However even with this type of licence, there may be some usage restrictions, so it’s important to read the licence agreements and act accordingly.
Creative Commons means the owner of an image has made it available for use under certain restrictions. Restrictions often include that you must attribute the image to the owner, that you may not use it for commercial purposes, or that you may not alter the image.
\n\n
Flickr is a good resource for images that have been made available through Creative Commons, but make sure you understand and comply with any restrictions they’re being offered under.
\n\n
4. Public Domain
\n
Public Domain refers to images that do not have a copyright and therefore free for anyone to use. It can apply to images that are very old or where the creator has given up their copyright.
\n\n
How do you know if you can use an image?
\n
Only use an image if:
\n \n
You’ve purchased it
\n
You’ve taken it yourself or hired a photographer to take it for you
\n
You have written permission from the owner of the image
\n
It’s Creative Commons and you’ve complied with any usage conditions
\n
It’s Public Domain
\n \n\n
Never take images directly from:
\n
\n
Search engines (Google images etc.)
\n
Other people’s or organisation’s social media (embedding a tweet is ok if you ask the owner’s permission)
\n
News outlets
\n
\n\n
Keep in mind that manipulating an image that isn’t yours (adding a filter, cropping etc) doesn’t give you the right to use it.
\n
\n\n
\n
Image Storage
\n
Where to store images
\n
Purchased images should be added to our shared Google Drive storage within the appropriate category. This should be the original, full-sized, uncropped and uncompressed image only. This allows for cross vertical sharing as well as usage in other mediums such as email.
\n\n
While the shared library exists so images can be reused, try not to overuse images to the point that they lose their impact.
\n\n
What to name images
\n
Images should be named with a few descriptive words, with words separated by hyphens. Images that are an illustration should have the prefix of "illustation-".
\n\n
For mobile phones, image names should be formatted as follows:
For searchability, it's important to include descriptive tags for each image you add to Google Drive. You can do this under the "Description" field. The first two tags should be the stock site you got the image from, as well as the image number. Include any other tags that might be useful, separating each tag with commas.
\n
\n\n
\n
About Retina
\n
Retina display refers to monitors and devices that have a very high pixel density, making screen content appear very crisp and sharp.
\n\n
To take advantage of these high-quality displays, we must use Retina images. That simply means that we need to double the intended size of our images.
\n
\n\n
\n
Our image sizes
\n
Below are the minimum required sizes for our images in various materials. If an image does not meet this size, it can’t be used and an alternate image will need to be sourced. An image must not be scaled up in order to meet the minimum required size.
\n\n
Emails
\n\n
Insights
\n\n Hero article\n
\n
Display size: 130w x 147h
\n
Minimum required size: 260w x 294h
\n
\n\n Article\n
\n
Display size: 150w x 170h
\n
Minimum required size: 300w x 340h
\n
\n\n Mobile phones\n
\n
Display size: 75w x 125h
\n
Minimum required size: 150w x 250h
\n
\n\n Provider logos\n
\n
Display size: 100w x 35h
\n
Minimum required size: 200w x 70h
\n
\n\n
Tacticals
\n\n Hero article\n
\n
Display size: 250w x 200h
\n
Minimum required size: 500w x 400h
\n
\n\n
Guides
\n\n Top banner\n
\n
Display size: 1170hw x 168h
\n
Minimum required size: Not currently Retina
\n
\n\n Content\n
\n
Display size: 770w x flexible height
\n
Minimum required size: Not currently Retina
\n
\n\n
News
\n\n Content\n
\n
Display size: 800w x flexible height
\n
Minimum required size: Not currently Retina
\n
\n
\n\n
\n
Alternative (alt) text
\n
Alt text is an important aspect of web accessibility. All images on our site should include meaningful alt text. See here for best practices.
\n
If the image is purely decorative, it should have a blank alternative text\n so something unintended (like the image file name) is not read out by a screenreader.
\n
\n\n
\n
Examples
\n
\n
\n \n \n \n
\n Do \n Images feel natural and authentic.\n
\n
\n
\n \n \n \n
\n Don't \n Images appear staged.\n
\n
\n
\n \n
\n Do \n Subject is contextualised.\n
\n
\n
\n \n
\n Don't \n Image is too closely cropped.\n
\n
\n
\n \n
\n Do \n Houses are a typical UK style.\n
\n
\n
\n \n
\n Don't \n Houses feel american style.\n
\n
\n
\n \n
\n Do \n Image has warm tones.\n
\n
\n
\n \n
\n Don't \n Image is too cool.\n
\n
\n
\n \n
\n Do \n Image does not appear altered.\n
\n
\n
\n \n
\n Don't \n Image is noticeably manipulated.\n
\n
\n
\n \n
\n Do \n Image is realistic and relatable.\n
\n
\n
\n \n
\n Don't \n Image is cliché and metaphor based.\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n Tip \n Images where subjects are placed to the left/right and top/bottom are more interesting than those placed centrally.\n
\n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n Do \n Illustrations are simple, geometric and consist primarily of brand colours (or shade/tones of brand colours).\n
\n
\n
\n
\n
\n","subNav":[{"name":"How to select an image","link":"#how-to-select-an-image"},{"name":"Cropping","link":"#cropping"},{"name":"Where to get images","link":"#where-to-get-images"},{"name":"What to purchase","link":"#what-to-purchase"},{"name":"Types of licenses","link":"#types-of-licenses"},{"name":"Image storage","link":"#image-storage"},{"name":"About Retina","link":"#about-retina"},{"name":"Our image sizes","link":"#our-image-sizes"},{"name":"Alt text","link":"#alt-text"},{"name":"Examples","link":"#examples"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/simple.tpl","section":"design","content":"
Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed Open Sans from our fonts to increase legibility across devices.
\n
We have chosen to use system fonts across the website for multiple reasons:
\n
\n
Improved legibility in operating systems
\n
No performance overhead in loading custom fonts
\n
Users are accustomed to their operating system fonts
\n
\n
Depending on the operating system you are on, you will get one of the following fonts:
\n ","escaped":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />\n </div>\n </a>\n </div>\n </article>"},"path":"vendor/assets/stylesheets/ustyle/articles/_base.scss","file":"_base.scss","link":"base_article"},{"page":"Pattern Library/Articles","name":"Guide article","description":"
Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.
","escaped":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_guide.scss","file":"_guide.scss","link":"guide_article"},{"page":"Pattern Library/Articles","name":"More article","description":"
If the article listing has more in a category, we use this to let a user navigate to that category.
The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <img> tags on mobile hasn't been resolved.
","escaped":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/articles/_related.scss","file":"_related.scss","link":"related_items"}]},{"name":"Utilities","page":"utilities.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Utilities","name":"General","description":"
These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.
"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left.","markup":{"example":"
\n
content
\n
"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right.","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left.","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center.","markup":{"example":"
\n
content
\n
"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right.","markup":{"example":"
\n
content
\n
"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block.","markup":{"example":"
\n
content
\n
"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green.","markup":{"example":"
\n
content
\n
"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style.","markup":{"example":"
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n
"}}],"markup":{"example":"
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n
","escaped":" <p>\n <img src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_images.scss","file":"_images.scss","link":"images"},{"page":"Pattern Library/Utilities","name":"Responsive","description":"
Responsive classes to allow display of elements across devices. You have the option of displaying them as block, inline-block or inline elements.
\n
You can also hide elements by .us-{DEVICE}--hidden and will hide those elements above that breakpoint.
\n","markup":{"example":"
.us-lg-desktop--block Shows on large desktop and up
\n
.us-desktop--block Shows on desktop and up
\n
.us-tablet--block Shows on tablet and up
\n
.us-sm-tablet--block Shows on small tablet and up
\n
.us-mobile--block Shows on mobile only
\n
.us-tablet--hidden Hidden on tablet and up
","escaped":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_responsive.scss","file":"_responsive.scss","link":"responsive"},{"page":"Pattern Library/Utilities","name":"Spacing","description":"
Allow control of spacing around an element. You can set margin or padding for an element without creating an extra class.
\n
An example of this .us-margin-top, .us-margin-top--small, .us-margin-top--large where margin can be replaced by padding and top can be replaced by bottom, left or right.
\n
Default space for margin and padding is 1em, small modifier uses .5em and large modifier uses 1.5em.
\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em).","markup":{"example":"
Sample content
"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em).","markup":{"example":"
Sample content
"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em).","markup":{"example":"
\n","state":[{"name":".us-standfirst","escaped":"us-standfirst","description":"Used for heros and introductory paragraphs.","markup":{"example":"
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n
"}}],"markup":{"example":"
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n
","escaped":" <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"paragraphs"},{"page":"Pattern Library/Typography","name":"Lists","description":"
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n
\n
","escaped":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"blockquote"},{"page":"Pattern Library/Typography","name":"Numbered list","description":"
Our default numbered list styling.
\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":"
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.
\n
"}}],"markup":{"example":"
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.
\n
","escaped":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"numbered_list"},{"page":"Pattern Library/Typography","name":"Ticked list","description":"
Our default ticked list styling.
\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":"
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
\n
"}}],"markup":{"example":"
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
\n
","escaped":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"ticked_list"}]},{"name":"uSwitch tone of voice","page":"tone.html","template":"styleguide/templates/simple.tpl","section":"language","content":"
Here at uSwitch, we offer everyone ‘Supportive Switching’.
\n
That means we’re not just passively comparing prices, we’re actively enabling and supporting the decision to switch.
\n
What we write, the way we speak to customers and every conversation we have must give people clear, timely and relevant information. And we should communicate that information in a simple but attractive way.
\n
With the right tone of voice, our words create a decisive moment: we take people from passively knowing they should switch to actively having the confidence to make the right switch
\n
\n
3 core principles of the uSwitch tone of voice
\n
- Empathetic - Expert - Empowering
\n
To give people the support they need to switch, we need to be able to deliver the right kind of message at the right time. That means our voice needs to be able to flex from simply informative – for example when we’re describing features of a product – to inspirational, when people are at the decisive moment and need extra encouragement to switch.
\n
The trick is to strike the right balance. Our three core principles will help us do this, guiding our communications and making sure that we deliver each message in the most appropriate way.
\n
Everything we say should always carry some elements of our core principles in varying degrees. The following framework is designed to make sure we get the balance right.
\n
\n
Tone framework
\n
Our three principles work together, and we adjust the emphasis and balance depending on who we’re talking to, why and when.
\n
One voice principle doesn’t exclude another; it’s how we mix them that gives uSwitch a rounded and distinctive voice.
\n
And, as with people, we’re not one thing all the time, or everything at once — but we have a consistent basis that’s us. For uSwitch, that means we’re always Empathetic. We dial up and down the Expert and Empowering qualities of our voice as needed.
\n
The key thing is to think about the main reason(s) to communicate – and use the principles accordingly.
\n
\n
\n
Principle 1: Empathetic
\n
Being empathetic means being:
\n
\n
Positive
\n
Encouraging
\n
Relevant
\n
\n
Our experience gives us insight and understanding, so being Empathetic means our writing is practical, good humoured and down to earth.
\n
Being empathetic also means we don’t make assumptions about what people know and don’t know. \nWe shouldn’t assume confidence either. We show people that we understand what’s important to them and talk about topics and issues that are directly relevant to them.
\n
When we write or speak, our language is outgoing and conversational, positive but never over the top.
\n
We want people to know they can rely on us to find the switch that’s right for them - and support them through it.
\n
How we show empathy in our writing
\n\n
Use active, direct and positive language.
\n
Companies don’t show empathy, people do. We should always sound like a person – if you wouldn’t say it like that, don’t write it like that.
\n
Whether verbal or written, we should build a dialogue with customers, using relevant questions and topics of interest to engage people.
\n
Focus on answers not problems (but don’t gloss over issues and concerns).
\n
Make it personal by using ‘you’ as much as ‘we’.
\n
Don’t use the passive voice unless it’s absolutely necessary to make your point. \nUsing slang that’s accepted and understood can help connect. But be careful; we don’t want to alienate audiences by using jargon or patronising language – nor by trying to ‘talk cool’ to younger audiences.
\n
Put yourself in your customer’s shoes (and be honest). Would that headline you’re writing entice you to click on it? Is that error text going to provide support or only create more questions?
\n\n
\n
Principle 2: Expert
\n
Being expert means being:
\n
\n
Trusted
\n
Clear
\n
Accessible
\n
\n
It’s our responsibility to direct people to the information or product that’s relevant for them. So we make information quick and easy to find, and ensure the pros and cons for switching are obvious and understandable.
\n
We don’t blind with science and we don’t dumb down. We give information succinctly and simply — but never rush the conversation.
\n
At all times we are scrupulously balanced, accurate and honest, and this reassures people by clearly showing that we know what we’re talking about.
\n
How we show expertise in our writing
\n\n
Be relevant and accurate with facts and figures, and get the punctuation and spelling right. Even small mistakes undermine what you’re saying.
\n
Write succinctly and use simple sentence structures. Our prime objective is always that our audience understands us. In that way, we make complex topics simple, concise and accessible. Remember: simple isn’t simplistic; it’s just the easiest way to ensure we’re understood.
\n
Too many facts at once can be counterproductive. Don’t overload people with unnecessary detail. Get to the point, avoiding verbal padding and meaningless phrases.
\n
Don’t close down conversations – always have alternative options.
\n
Avoid marketing speak and sales patter.
\n
Don’t hide important facts. Start with what’s most relevant and individually important to your customer or audience.
\n\n
\n
Principle 3: Empowering
\n
Being empowering means being:
\n
\n
Inspiring
\n
Energetic
\n
Credible
\n
\n
We write and speak to inform and change minds, giving people the straightforward facts and, in turn, the confidence they need to switch.
\n
Our explanations and opinions should challenge, involve, entertain, pleasantly surprise and convince – we’re good company.
\n
The facts and figures are important, and we know them inside and out. But we make them more compelling by putting them in context, helping people see what switching could mean for them — whether that’s finally feeling in control of their household bills or that much closer to their dream holiday savings goal.
\n
We know who we are and what we’re about. So we believe wholeheartedly in what we do, knowing that it benefits everyone. So we’re never afraid to show our enthusiasm and commitment in our writing.
\n
How we empower with our writing:
\n\n
Wherever possible, lead with emotional benefits that customers will be able to identify with – particularly at headline level. Look for familiar or universal situations related to our subject matter.
\n
Use real-life examples and stories wherever possible – they’re more convincing than anything you could invent.
\n
Don’t overpromise or over-exaggerate; there’s no need.
\n
Refresh your vocabulary and thinking; don’t keeping saying the same things in the same way\nHave an opinion and be prepared to defend it.
\n
Don’t be afraid to (politely and tactfully) challenge or say no. The customer is not always right but our advice should be.
\n
Be direct and positive but not flippant. Never forget that switching is a big step for many\nBring a sense of humour where it’s appropriate – wit is a great connector.
Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
\n
Best practices
\n
\n
Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.
\n","variable":[{"name":"c-cyan","description":"Hero banners","value":"#99e2ff"},{"name":"c-navy","description":"Text with emphasis","value":"#1c1f4e"},{"name":"c-blue","description":"Logo","value":"#002396"},{"name":"c-typecyan","description":"Text links, icons","value":"#008fe9"},{"name":"c-typegrey","description":"Body text","value":"#2f353a"},{"name":"c-typegrey-2","description":"Text without emphasis","value":"#65717b"},{"name":"c-bggrey","description":"Backgrounds","value":"#f4f5f6"},{"name":"c-red","description":"Primary buttons","value":"#d64226"},{"name":"c-green","description":"Action buttons, USPs","value":"#2aaa5b"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"primary_palette"},{"page":"Brand/Colours","name":"Secondary palette","partial":"colour","variable":[{"name":"c-inputgrey","description":"Dropdowns, icons","value":"#84909a"},{"name":"c-bordergrey","description":"Borders","value":"#b0b8bf"},{"name":"c-keylinegrey","description":"Keylines, separators","value":"#e9ebed"},{"name":"c-blue-light","description":"","value":"#0c72bf"},{"name":"c-typecyan-light","description":"","value":"#4cc0f4"},{"name":"c-cyan-light","description":"","value":"#e4f8ff"},{"name":"c-yellow","description":"USPs","value":"#ffd32f"},{"name":"c-orange","description":"USPs","value":"#f27930"},{"name":"c-purple","description":"USPs","value":"#9c55b8"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"secondary_palette"},{"page":"Brand/Colours","name":"Tertiary palette","partial":"colour","variable":[{"name":"c-red-dark","description":"","value":"#b53820"},{"name":"c-green-dark","description":"","value":"#23904d"},{"name":"c-red-lightest","description":"","value":"#eeb3a8"},{"name":"c-green-lightest","description":"","value":"#adebc5"},{"name":"c-yellow-lightest","description":"","value":"#ffedab"},{"name":"c-orange-lightest","description":"","value":"#f9c9ac"},{"name":"c-purple-lightest","description":"","value":"#d7bbe2"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"tertiary_palette"}]},{"name":"Style","page":"grammar.html","template":"styleguide/templates/simple.tpl","section":"language","content":"
The smallest mistake can undermine the biggest (and most important) of messages. Those writing for uSwitch should ensure they follow these style rules that cover everything from headlines to hyphens, and numbers to names.
\n
\nAbbreviations
\n
For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.
\n
\nAcronyms
\n
Write out in first use, noting the acronym in brackets; then use just the acronym going forward. Familiar acronyms such as WiFi, HTML, HMRC and BT are exempt from this rule.
\n
\n The TaxPayers’ Alliance (TPA) has warned that the campaigns being led by lobbies could lead to higher household bills. Matthew Sinclair, director of the TPA ... \n
\n\n
\nAmpersand
\n
Do not use the “&” symbol unless it is part of a company or product name.
\n
\nApostrophes
\n
Avoid common misuse of apostrophes:
\n
\n
Mixing up it’s (it is) and its (possessive)
\n
Using to denote plural: DVD’s (wrong) vs DVDs (correct)
\n
When writing Dos and Don’ts (not Do’s and Don’ts)
\n
When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)
\n
\n
\nBritish English
\n
Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.
\n
\nBullet points
\n
Bullet points are a good way to make web copy easier to scan for readers. Bullet points should always be round, and limit bullets to six or fewer. Make sure they are grammatically logical.
\n
\nCapital letters
\n
Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.
\n
\nCompany names and references
\n
Follow punctuation and capitalisation of company names and products as they are branded.
\n
\n E.ON, iPhone, iSaver\n
\n\n
When referencing a company in a news or guide, remember to always keep them in the singular.
\n
\n BT is launching a new ... (not BT are launching a new ...)\n
\n\n
\nContractions
\n
Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.
\n
\nDashes and hyphens
\n
If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen (-).\nCompound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).
\n
\nDates
\n
Always write out the date, using day, month, year format in news and guides:
\n
\n 9 December 2013. When using dates in tables, this may be shortened for space reasons to 9/12/13\n
\n\n
In forms when asking for a date we always use the DD/MM/YYYY format.
\n
\nExclamation marks
\n
Use sparingly, never in headers or intro copy, best suited for marketing/promotional material or news/blogs.
\n
\nFull stops
\n
Don’t use full stops at the end of headlines.
\n
\nGovernment
\n
Do not capitalise unless starting a sentence. The abbreviated Gov’t can be used in headlines and desk heads/straplines.
\n
\nLegals, disclaimers and caveats
\n
Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.
\n
\nLess vs. Fewer
\n
Use “less” when the subject is something that cannot be counted
\n
\nShe wants to have less clutter on her desk.\n
\n\n
Use “fewer” when the subject is something that can be counted
\n
\nHe sent fewer texts after getting a £100 phone bill.\n
\n\n
\nNumbers
\n
\n
Numbers nine and below must be written out: one, two, three, etc.
\n
Numbers 10 and higher use numerals: 15, 67, 987, etc.
\n
Spell out any amount when it starts a sentence: Three hundred and twenty customers surveyed said they had been wrongly billed on more than 15 occasions.
\n
Use commas with figures 1,000 and above.
\n
With million and billion, write out in body copy; the abbreviation (£43bn) is acceptable in news headlines for space reasons.
\n
Always use numerals when using the “£” or “%” symbols
\n
\n
\nOK
\n
Not Ok or okay.
\n
\nPercentages
\n
Always use the “%” symbol; only use “per cent” at the start of a sentence. Always use numerals when talking about percentages (54%), unless it starts a sentence. We never use abbreviation “pc” when talking about percentages.
\n
\n Fifty-five per cent of the population own an iPhone.\n
\n\n
\n Of those surveyed, 55% said they had been denied a credit card. \n
\n\n
\nPlans vs tariffs
\n
Plans is the preferred term, only switch to use of tariff when trying to avoid repetition within one email or guide.
\n
\nQuotation marks
\n
Always use double quotation marks (“) when placing a direct quote in body copy.
\n
Use single quote marks (‘) in headlines, standfirsts/dek heads and when quoting within a quote:
\n
\n Super-fast broadband uptake ‘reaches 20% in UK’\n
\n\n
\n “Super-fast broadband will be the engine for growth for the broadband future of Britain," he said. \n
\n\n
\nTitles and Names
\n
Professional titles are not capitalised unless it directly precedes a name:
\n
\n Director of Consumer Policy Jane Smith said that the news was a shock.\n
\n\n
\n Jane Smith, director of consumer policy at the company, said the news came as a shock.\n
\n\n
On first reference, use the person’s first and last name. On subsequent references, last name only is used.
\n
Mr/Mrs/Miss/Ms is never used.
\n
\n Energy Secretary Ed Davey was on-hand to field questions about the news. Davey arrived late, citing a long-running meeting.\n
\n\n
\nWi-Fi
\n
Not wifi, WIFI, WiFi, etc.
\n","subNav":[{"name":"Abbreviations","link":"#Abbreviations"},{"name":" Acronyms","link":"#Acronyms"},{"name":"Ampersand","link":"#Ampersand"},{"name":"Apostrophes","link":"#Apostrophes"},{"name":"British English","link":"#British English"},{"name":"Bullet points","link":"#Bullet points"},{"name":"Capital letters","link":"#Capital letters"},{"name":"Company names and references","link":"#Company names and references"},{"name":"Contractions","link":"#Contractions"},{"name":"Dashes and hyphens","link":"#Dashes and hyphens"},{"name":"Dates","link":"#Dates"},{"name":"Full stops","link":"#Full stops"},{"name":"Government","link":"#Government"},{"name":"Legals, disclaimers and caveats","link":"#Legals, disclaimers and caveats"},{"name":"Less vs. Fewer","link":"#Less vs. Fewer"},{"name":"Numbers","link":"#Numbers"},{"name":"OK","link":"#OK"},{"name":"Percentages","link":"#Percentages"},{"name":"Plans vs tariffs","link":"#Plans vs tariffs"},{"name":"Quotation marks","link":"#Quotation marks"},{"name":"Titles and Names","link":"#Titles and Names"},{"name":"Wi-Fi","link":"#Wi-Fi"}]},{"name":"Usability testing","page":"validating-designs.html","template":"styleguide/templates/simple.tpl","section":"design","content":"\n\n\n\n\n
Usability testing can be used to establish problems that need solving, validate a hypothesis or to test a solution. Depending on what's required, there are different types of testing availability.
\n\n
However, not every change needs to be tested. This page is deisgned to highlight when should and shouldn't use testing, and how we should do it when we do.
\n\n\n
\n \n
When don’t we need validation of our designs?
\n
Plenty of design changes don’t require upfront hypothesis validation. If the design change is due to any of the following it may not need validation from users:
Colour, font, shading, button types, and anything in uStyle is a given. We want to achieve site consistency for brand reasons.
\n
Functionality, UI, hierarchy are not 'look and feel' consistency.
\n
Example
\n
Moving the first two Broadband designs ('Oldest stlye' and 'Old style') to be more ‘in line’ with the third design ('New style') is an on-going project of consistency.
\n
Changing the colours of the first design or moving to a consistent layout would not require testing.
\n
Similarly, changing the row-data presentation in the second example to be more consistent with the third example would not require testing.
\n
\n
\n Oldest style\n New style\n
\n
\n Old style\n
\n
\n\n \n
Design conventions
\n
There are certain web-design standards, and in our aim for a consistent user experience, maintaining web consistency is an important part of that.
\n
The following is a non-exhaustive list of design conventions:
\n
\n
Logos top (left) and links to HP
\n
Navigation is top of the page
\n
Text links are blue (pre-click)
\n
Buttons link to stuff (affordance)
\n
Icons (search)
\n
Visual hierarchy
\n
Search (top right)
\n
Clickable form fields
\n
\n
Example
\n
A basic UI convention is the distinction between active elements and inactive elements, with inactive elements being 'greyed out'.
\n
The below car insurance has an overlay that must be interacted with to continue with the page below, but only part of the page is greyed out.
\n
Five clickable elements on this page aren’t greyed out, despite not being clickable:
\n
\n
\n \n
\n
\n\n \n
Usability conventions
\n
The ten basic usability heurisitcs, like basic design rules, give us a number of usability principles that must be sense-checked against. Designs that do not meet these requirements give us a clear problem to be solved without the requirement of validation.
\n\n
Visibility of system status
\n
Keep users informed about what is going on through appropriate feedback within reasonable time. In the example below the user cannot see what impact selecting a dropdown option has because the overlay covers the results table:
\n
\n
\n \n
\n "Did updating those filters do anything?"\n
\n
\n
\n \n
Match between system and the real world
\n
Speak the users' language with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
\n
\n
\n \n
\n "Large as in size of people or house? Doesn’t it depend what they’re doing? What’s a Plusnet safeguard?"\n
\n
\n
\n \n
User control and freedom
\n
If a user makes a mistake, let them undo, redo, go back, etc...
\n
\n
\n \n
\n "I wanted more details...and now i've left the site....how do I get back?”\n
\n
\n
\n \n
Consistency and standards
\n
Users should not have to wonder whether different words, situations, or actions mean the same thing.
\n
\n
\n \n
\n "Is a plan and a tariff the same thing?”\n
\n
\n
\n \n
Error prevention
\n
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
\n
\n
\n \n
\n "No deals, why did you present it as an option?"\n
\n
\n
\n \n
Recognition rather than recall
\n
Minimise the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part to another.
\n
\n
\n \n
\n "I’ve filtered these results, but by what?"\n
\n
\n
\n \n
Flexibility and efficiency of use
\n
llow users to tailor frequent actions. 1-button checkout via Amazon, or Add to my wishlist via Airbnb.
\n
\n
\n \n
\n "I personalised all these details yesterday, why has it just reverted?"\n
\n
\n
\n \n
Aesthetic and minimalist design
\n
Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
\n
\n
\n \n
\n "What am I supposed to do on this page?"\n
\n
\n
\n \n
Help users recognise, diagnose, and recover from errors
\n
Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.
\n
\n
\n \n
\n "Ahhhh....the ol' requested format..."\n
\n
\n
\n \n
Help and documentation
\n
Any such help information should be easy to find, focused on the user's task, list concrete steps to be carried out, and not be too wordy.
\n\n \n
External requirements
\n
Sometimes design is dictated - commercial or regulatory or business.
\n
If there is flexibility around how these are implemented we can enter the design process. Sometimes there isn’t though, and they have to be implemented.
\n
Example
\n
\n
\n \n
\n "The brand red clashes with this provider's red."\n
\n
\n
\n
\n\n\n\n\n
\n \n
When do we need validation?
\n
If our change isn’t down to one of the above then it’s problem solving, so we need to structure our approach to design differently - we need to understand the problem first.
\n \n
Symptoms not problems
\n
A problem statement is the design brief, but first we need a good problem.
\n
Data tells us about results, not causes. It tells us that it looks like there is a problem, but now what the problem is. Data comes from:
\n
\n
GA
\n
Fullstory
\n
Crazyegg
\n
\n
Similarly business objectives are things we desire to happen. They tell us what we want to the outcome to be. Objectives sound like:
\n
\n
Increase conversion by…
\n
Reduce drop out by…
\n
Stop people bouncing on…
\n
Stop people clicking out on…
\n
Get people to click on…
\n
\n
These tell us there is a problem, but we don’t know what it is.
\n
A real problems is something we’ve observed a significant number of occasions.
\n\n
How to define the problem
\n
Testing designed to steer design, or validate assumptions about what problems users are encountering, is known as ‘formative’ testing. It’s open-ended, and the tasks are simply to run a comparison, or to go through a journey start to finish.
\n
Any type of testing, whether it be face-to-face, guerilla, remote, or interviews, can help define the problem. This allows us to frame the problem with a problem statement. A problem statement is:
\n
A concise description of the issues that need to be addressed - it is specific, measurable and explains what it impacts. There are no assumptions or solutions.
\n\n
Only with a problem can you design a solution
\n
Once the problem is clearly defined, start trying to solve it (one problem at a time), but remember to validate the solutions as soon as possible.
\n
'Summative' usability testing can help validate. Summative testing gives the user a particular task to complete that tests the solution against the problem. Again, any type of testing can perform this function.
\n\n
But wait!
\n
User testing is great to validate flows, designs and interactions, but it's not exhaustive. There might be bugs, or solutions that don't work in certain scenarios. This is where in-house testing and the device lab comes in.
Interviews are designed to understand behaviours, needs and pain-points around a particular task.
\n
They are open-ended and can help define design personas - archetypes that can be used as a reference point for any design changes for that product.
\n
How
\n
See the interview checklist
\n
When
\n
Interviews are most commonly used at the earliest stage of product development to determine the needs/problems that the product will address.
\n\n \n
Face-to-face usability testing
\n
Face-to-face testing can be used in a formative or summative sense, and can be combined with an interview and simple exercises, like card sorting.
\n
This is the highest-fidelity form of validation. The feedback you receive will be of the highest quality, but it will also take you the most time.
\n \n
How
\n
Face-to-face testing consists of preparing a particular task, putting it in front of real users, and seeing how they get on.
\n
As it’s face-to-face, you can also interview users in this format, or ask them to complete exercises such as:
\n
\n
Product Reaction Cards - Used to determine how desirable a product or process is
\n
Unmarked Semantic Differential Scales - Used to understand reactions to particular words and phrases
\n
Card sorting - Used to understand hierarchy of importance, or expected flows
\n
\n
See the testing checklist for a step-by-step guide to setting up and running a test. The most crucial components are:
\n
\n
Goals - What are you trying to achieve?
\n
Tasks - Every task you ask a user to complete should answer a question you need answered. Formative testing on an exisiting product will have open-ended goals, whereas tasks designed to test a solution should be specific.
\n
Test plan - Script, scenario, tasks, participants, questions, anything the moderators needs. Write it all down so you have it to hand during the test.
\n
Test the test - Something will go wrong, promise, so test it first.
\n
Get your team involved - There's nothing like seeing your solution fail first hand.
\n
\n
When
\n
Anytime. For an existing product where the objective is to discover problems, an open-ended test asking users to complete the most common journey. This should be done at least once a year.
\n
For a new product or feature face-to-face testing is always a good idea. The objective here is to test the solution against the problem using particular tasks.
\n\n \n
Guerilla testing
\n
A lower-fidelity version of face-to-face testing, guerilla testing sacrifices quality for speed. The feedback you receive will be of lower quality as the participants may not fit user types, and the testing environment is more ‘ad-hoc’ (think coffee shops, sandwich places).
\n
Just like face-to-face testing, guerilla testing involves preparing a particular task, putting it in front of real users, and seeing how they get on. You can also do interviews and get quant feedback but again, the feedback will be lower quality.
\n
How
\n
See the guerilla testing checklist for a step-by-step guide to setting up and running a test.
\n
The number of participants should be at least 5 for guerilla testing, but you can use your discretion.
\n
When
\n
Guerilla testing is perfect at the early stage of a design, when you want to sense check a particular flow, component, or wording.
\n
Any fidelity of design can be used. Guerilla testing works best when kept relatively informal, and the participant feels at ease.
\n \n \n
In-house testing
\n
Asking your colleagues in the office for feedback. This is the quickest but lowest quality form of validation.
\n
Like guerilla testing this is an informal type of testing, but the quality is considerably lower owing to familiarity with the product, bias based on personal relationships and a mismatch between persona types and testers.
\n
In-house testing is perfect for bug testing, seeing if anyone can ‘break’ your design, and last-minute tweaks. It is not for designed to surface flow or interaction changes.
\n
How
\n
See the bug-testing checklist
\n
When
\n
A few days before release
\n \n
","subNav":[{"name":"When don't we need user validation?","link":"#no-validation"},{"name":"When do we need user validation?","link":"#validation"},{"name":"How to test","link":"#testing"}]},{"name":"Icons","page":"icons.html","template":"styleguide/templates/styleguide.tpl","section":"design","blocks":[{"page":"Design/Icons","name":"Icons","partial":"icons","description":"
Our icons are displayed via xlink:href in the <use> tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.
\n
We use an SVG sprite called icons.svg that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: icons.svg#icon-bookmark
\n
Accessibility: In most cases, icons are purely presentational elements. In this scenario, you want to add: aria-hidden="true" and role="presentation" to your code.
\n
Usage
\n
\n
Suffixing with --{size} where size is one of small, medium or large will change the size of the icon from 16px, 32px and 64px respectively.
\n
\n
.us-icon--{size}--sm-tablet and .us-icon--{size}--mobile will override icon sizes for those screen size
\n
\n
.us-icon--notext allows you to set any element with no content to an icon
\n
\n
blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with .us-icon--{color}
\n
\n
Colors can be changed by adding your own fill: style to the SVG.
This is the basic form field, .us-field wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with .us-faux-label
\n
Best practices
\n
\n
All form inputs must have a corresponding label, linked to the input
\n
\n
The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context
\n
\n
For text inputs that are optional, add "(optional)" to the input label
\n
\n
Add aria-required to any input field that must to be filled in
","escaped":" <div class=\"us-field\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_fields.scss","file":"_fields.scss","link":"fields"},{"page":"Pattern Library/Forms","name":"Input group","description":"
Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.
\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups.","markup":{"example":"
Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.
\n
Best practices
\n
\n
Specifying an appropriate type attribute (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
\n
\n
Where appropriate use the autocomplete attribute to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
\n
\n
\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style.","markup":{"example":""}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style.","markup":{"example":""}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error.","markup":{"example":""}},{"name":".us-form-input--success","escaped":"us-form-input--success","description":"Visual feedback for when success needs to be communicated to the user.","markup":{"example":""}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with.","markup":{"example":""}}],"markup":{"example":"","escaped":"<input class=\"us-form-input\" type=\"text\" placeholder=\"Placeholder\">"},"path":"vendor/assets/stylesheets/ustyle/forms/_input.scss","file":"_input.scss","link":"inputs"},{"page":"Pattern Library/Forms","name":"Radios and checkboxes","description":"
Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.
\n
Best practices
\n
\n
Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.
\n
\n
Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.
\n
\n
Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.
\n
\n
A stand-alone checkbox is good for toggling something on/off or opting in/out.
\n
\n
Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
\n
\n
Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
\n
\n
\n","state":[{"name":"us-form-input--disabled","escaped":"us-form-input--disabled","description":"Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.","markup":{"example":"
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
"}}],"markup":{"example":"
\n \n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss","file":"_radio-checkbox.scss","link":"radios_and_checkboxes"},{"page":"Pattern Library/Forms","name":"Selects","description":"
Select boxes allow users to choose an option or options from a list of options.
\n
Best practices
\n
\n
Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
\n
\n
It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
\n
\n
\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of
![\"Cloudfront](\"/images/cloudfront-logo.png\"){kind=logo}
\n ![\"NPM](\"/images/npm-logo.png\"){kind=logo}
\n ![\"\"](\"/images/natural-1.jpg\")
\n ![\"\"](\"/images/natural-2.jpg\")
\n ![\"\"](\"/images/natural-3.jpg\")
\n ![\"\"](\"/images/unnatural-1.jpg\")
\n ![\"\"](\"/images/unnatural-2.jpg\")
\n ![\"\"](\"/images/unnatural-3.jpg\")
\n ![\"\"](\"/images/good-subject.jpg\")
\n ![\"\"](\"/images/bad-subject.jpg\")
\n ![\"\"](\"/images/accurate-housing.jpg\")
\n ![\"\"](\"/images/innaccurate-housing.jpg\")
\n ![\"\"](\"/images/warm.jpg\")
\n ![\"\"](\"/images/cold.jpg\")
\n ![\"\"](\"/images/unaltered.jpg\")
\n ![\"\"](\"/images/altered.jpg\")
\n ![\"\"](\"/images/realistic.jpg\")
\n ![\"\"](\"/images/cliche.jpg\")
\n ![\"\"](\"/images/not-centered.jpg\")
\n ![\"\"](\"/images/centered.jpg\")
\n ![\"\"](\"/images/illustrations_1.png\")
\n ![\"\"](\"/images/illustrations_2.png\")
\n ![\"\"](\"/images/illustrations_3.png\")
\n ![\"\"](\"/images/illustrations_4.png\")
\n ![\"\"](\"/images/illustrations_5.png\")
\n ![\"\"](\"/images/illustrations_6.png\")
\n 
\n ![\"Ruby](\"/images/ruby-logo.png\")
\n ![\"Bower](\"/images/bower-logo.png\")
\n ![](\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\")
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n ![\"image\"](\"/images/tone-framework.png\")
![\"image\"](\"/images/site-consistency01.png\")
\n New style![\"image\"](\"/images/site-consistency03.png\")
\n ![\"image\"](\"/images/site-consistency02.png\")
\n ![\"image\"](\"/images/design-conventions.png\")
\n ![\"image\"](\"/images/ux-conventions-visibility.png\")
\n ![\"image\"](\"/images/ux-conventions-real-world.png\")
\n ![\"image\"](\"/images/ux-conventions-freedom.png\")
\n ![\"image\"](\"/images/ux-conventions-consistency.png\")
\n ![\"image\"](\"/images/ux-conventions-error.png\")
\n ![\"image\"](\"/images/ux-conventions-recognition.png\")
\n ![\"image\"](\"/images/ux-conventions-flexibility.png\")
\n ![\"image\"](\"/images/ux-conventions-minimalist.png\")
\n ![\"image\"](\"/images/ux-conventions-errors.png\")
\n ![\"image\"](\"/images/external-requirements.png\")
\n