post

Footer About

Footer Contribute

Footer Get Involved

Footer Links

Mind the Product

Guest Post

How to build a companion product and win user trust

mission statement

Deep dive: Crafting your product vision and mission

B2B product management

Artificial Intelligence (AI) & Machine Learning (ML)

Building Product Teams

Business Strategy

Data Driven Product Management

Digital Transformation

Diversity and Inclusion

Minimum Viable Product

OKRs

Prioritisation

Product Design

Product Research

Product Development Process

Product Ethics

Product Discovery

Product Leadership

Product Management Career

Product Strategy

Stakeholder Management

🌎 <a href="https://www.mindtheproduct.com/world-product-day/" style="color:#FFFFFF;text-decoration:underline;">Happy World Product Day!</a> Be sure to celebrate product, yourself, and your peers today! 🎉

Join us at #mtpcon London in 2025 – mark your calendars

Connecting fans to creators at Spotify (Dariusz Dziuk, Product Lead, Spotify)

Why teams often struggle with OKRs: A conversation with Jeff Gothelf

5 ways to invent and simplify as an AI/ML product manager

Erik Episcopo is a product manager and small business expert at <a href="http://www.termly.io">Termly.io</a>, a company that helps other websites and apps create compliant legal policies. Erik works with a team of lawyers and online legal specialists to ensure that online business owners create policies that are up to date with all state, federal, and international laws.

Erik Episcopo

<p>When it comes to designing or improving the UX of a website, how often do you consider your terms and conditions page? My guess: <strong>hardly ever</strong>. I know what you’re thinking, “why spend time improving a page that 99% of people don’t read when I should be working on my home page, pricing page, or check-out page?”</p>
<p>While, you should definitely pay the greatest  attention to the design of these pages, but <strong>there is a case to be made for giving some tender love and care to your terms page.</strong> This article outlines three reasons why you should, and offers six no-hassle ways to enhance your terms of service page.</p>
<h3>What Exactly Is a Terms and Conditions Agreement?</h3>
<p>First things first, let&#8217;s quickly review what a terms and conditions agreement is. A terms and conditions agreement (also known as a terms of service or terms of use) is essentially a legal contract that outlines the rules that visitors must abide by when using a website or app.</p>
<p>Its purpose is to protect both owners and visitors and ensure the website or app offers the intended experience. Without a terms of service page, <strong>a website is legally naked </strong>in terms of protecting its ownership rights over its content (designs, articles, and so on).</p>
<h3>3 Reasons To Improve Your Terms and Conditions Page</h3>
<p>If you haven’t paid much attention to your terms page here are three arguments that should convince you to it fix up:</p>
<h4>1. Build Trust in Your Brand</h4>
<p>When a visitor is able easily to understand your terms and conditions, they feel reassured that they can explore your site without fear of being taken advantage of or scammed. It’s a breath of fresh air to be able read through and understand a website’s terms at the first go. It shows that the company cares about its users.</p>
<p>On the flip side, if visitors have a hard time just getting through the first paragraph, they begin to question whether the company has even thought about their users’ understanding of the terms. Moreover, if they can’t understand the rules that guide the operation of the business, they are more likely to demonstrate caution about using the site.</p>
<p>While a terms and conditions page gives you credibility with your users, it also builds trust with Google. Along with a website privacy policy and About Us page, a terms and conditions page helps send trust signals to Google. This is important because the <a href="http://backlinko.com/google-trustrank">more Google trusts your website, the less susceptible you are to negative SEO attacks and penalization by the algorithm.</a></p>
<h4>2. Avoid Consumer Backlash</h4>
<p>As surprising as it may sound, <strong>people DO pay attention to these “boring” legal agreements,</strong> and when they see something that is unclear or confusing, they speak up. For instance, in 2012, Instagram faced an uproar from its users when they noticed that there <a href="http://www.bbc.com/news/technology-20810344">was an attempt to change the terms and conditions to allow the company to sell uploaded pictures to advertisers</a><a href="http://www.bbc.com/news/technology-20810344">. </a></p>
<p>The company received a barrage of angry tweets and emails with hashtags like #Instascam, Instafraud, #leavinginstagram, and #f*ckyouinstagram. Instagram CEO Kevin Systrom chalked it up to a <a href="http://www.huffingtonpost.com/2012/12/20/instagram-terms-of-service-change_n_2333284.html">misunderstanding and apologized for the “confusing” language in the company’s terms,</a> which he promised would be replaced with precise wording.</p>
<p>Although Instagram survived the backlash, a small- to mid-sized business would not fare nearly as well under all the negative pressure.</p>
<h4>3. Protect Yourself From a Lawsuit</h4>
<p>In extreme cases, major inconsistencies in a terms and conditions can result in legal penalties.</p>
<p>For example, in 2015, US grocery store chain <a href="https://topclassactions.com/lawsuit-settlements/lawsuit-news/146395-safeway-pay-30m-delivery-overpricing-class-action-lawsuit/">Safeway was ordered to pay $30 million to all of its class members</a>. Customers were angry when they noticed that prices on the online store were higher than the prices in Safeway’s physical locations. The lawsuit stemmed from <a href="http://blog.ericgoldman.org/archives/2015/01/safeway-cant-unilaterally-modify-online-terms-without-notice.htm">confusion about whether the word “store” in the their terms and conditions referred to Safeway’s physical or online store</a>.</p>
<p>Safeway is just one example of the <a href="http://www.inhouseops.com/2017/08/litigation-terms-service/">wave of cases that are beginning to arise</a> as consumers continue to get savvier and more conscious of internet laws.</p>
<h3>6 Ways To Enhance Your Terms and Conditions Agreement</h3>
<p>This article wouldn’t be much use if it didn’t offer actionable tips on how to actually improve your terms and conditions page. Below are six easy ways inspired from examples around the web:</p>
<h4>1. Add a Table of Contents</h4>
<p>Including a table of contents may sound simple, but it makes a huge difference when it comes to improving the readability of your terms of service agreement. <strong>A table of contents (ToC) makes it much easier for visitors to navigate your terms</strong> and find exactly what they are looking for.</p>
<p><a href="https://www.spotify.com/us/legal/end-user-agreement/">Spotify’s Terms and Conditions</a> offers a straightforward table of contents:</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/ac669235-85d6-43cf-aa31-e12f07aa1b1c_Spotify-Terms-and-Conditions.png" alt="Spotify-Terms-and-Conditions.png" /></p>
<p>While there might not be any flair to this table of contents, <strong>users don’t have to scroll through page after page</strong> to learn about the guidelines on payments and cancellations. It’s puzzling why sites wouldn’t just spend a few minutes on their terms to help their visitors save hours.</p>
<h4>2. Include TL;DRs With Each Section</h4>
<p>The number one reason people have trouble reading through terms and conditions agreements is they are often written with legalese that only a lawyer would understand.</p>
<p>Companies are beginning to address this problem by <strong>including a “Too Long; Didn’t Read” (TL;DR), or “short”’ version, that cuts through the legal jargon and gives visitors a layman’s version. </strong></p>
<p><a href="https://tldrlegal.com/license/tldrlegal-terms-of-service#terms">TLDRLegal’s terms of service</a> does it best by organizing their page with the legalese version on the right and the layman’s version on the left. Which one would you rather read?</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-12288" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/TLDR-Terms-of-use-300x116.png" alt="" width="838" height="324" srcset="https://www.mindtheproduct.com/wp-content/uploads/2017/10/TLDR-Terms-of-use-300x116.png 300w, https://www.mindtheproduct.com/wp-content/uploads/2017/10/TLDR-Terms-of-use-768x297.png 768w, https://www.mindtheproduct.com/wp-content/uploads/2017/10/TLDR-Terms-of-use-1024x397.png 1024w, https://www.mindtheproduct.com/wp-content/uploads/2017/10/TLDR-Terms-of-use.png 1446w" sizes="(max-width: 838px) 100vw, 838px" /></p>
<p><a href="https://help.github.com/articles/github-terms-of-service/">Github’s terms of service</a> does something similar by including a “short version” at the start of every section that gives a brief overview of what is covered and allows users to skim through the page faster.</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/fafb55ca-44c8-4473-8ee3-259d2c5da1c4_Github-Terms-of-Service.png" alt="Github-Terms-of-Service.png" /></p>
<h4>3. Use Question Mark Pop-ups</h4>
<p>Another way to help people maneuver through the complicated legal jargon is to include FAQ-style pop-ups like you see below:</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/fdf16c8c-ea24-447d-98ce-a5eba8fe92c2_Screen20Shot202017-08-3020at201.00.2520PM.png" alt="Screen Shot 2017-08-30 at 1.00.25 PM.png" /></p>
<p>With these pop-ups, people can hover over the terms or phrases they don’t quite understand and get a quick explanation which clarifies the definition.</p>
<h4>4. Sprinkle in Icons and Images</h4>
<p>Plain walls of put a strain on the eyes and can get dull very quickly. Icons and images can not only make your terms and conditions agreement more visually appealing, but also help to navigate the document.</p>
<p><a href="https://mailchimp.com/legal/terms/">Mailchimp</a> uses icons to make it easier to discern the six different legal policies on its site:</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/7168249a-5606-41b4-8f50-e56893814ca7_mailchip-terms-of-use.png" alt="mailchip-terms-of-use.png" /></p>
<p>Since Imperial College London is an educational institution, <a href="https://www.imperial.ac.uk/students/terms-and-conditions/">its terms and conditions</a> are far more robust than the average website. Instead of one long web page, Imperial College breaks its terms into separate category pages using a menu of easily identifiable images:</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/01ea6b83-038c-45ca-bcf4-9451d56ac899_imperial-term-and-conditions.png" alt="imperial-term-and-conditions.png" /></p>
<p>While most websites’ terms and conditions appear daunting and uninteresting, the <strong>images on Imperial’s page make the terms feel more friendly and welcoming.</strong> Prospective students can find the specific policies they need without any hassle.</p>
<h4>5. Don’t Overlook Fonts and Spacing</h4>
<p>The very least you can do to improve the readability of your terms is use a clear font style and size. The screenshot below of <a href="http://legal.kinja.com/kinja-terms-of-use-1793094100">Kinja’s Terms of Use</a> and <a href="http://www.huffingtonpost.com/terms.html">Huffington Post’s</a><a href="http://www.huffingtonpost.com/terms.html"> terms and conditions</a> demonstrate just how big a difference the font can make.</p>
<p>Which one is easier to read?</p>
<p><img decoding="async" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/2c36c926-c4e0-4310-86c0-0bda21247890_Kinja-Terms-vs-Huffpost-Terms.png" alt="Kinja-Terms-vs-Huffpost-Terms.png" /></p>
<p>Kinja’s terms of agreement is the obvious winner. It uses a large font and there is enough space between lines to <strong>avoid making paragraphs look like an overcrowded block of text.</strong> On the other hand, Huffington Post’s font is small, and it doesn’t use a space between paragraphs, which makes its terms a nightmare to read (I had to use my finger to make sure I didn’t lose my place).</p>
<p>If you’re looking for the ideal font, <a href="https://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/">most recommend sans serifs fonts for online reading</a>.</p>
<h4>6. FAQ Format</h4>
<p>When most people visit a terms and conditions page, they come with questions. So instead of having them sift through paragraphs in search of an answer, <strong>why not have your terms address their questions upfront</strong>?</p>
<p><a href="http://www.bbc.com/terms/">The BBC’s terms of use</a> breaks each section into questions:</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-12289" src="https://www.mindtheproduct.com/wp-content/uploads/2017/10/BBC-Terms-of-use-300x273.png" alt="" width="756" height="688" srcset="https://www.mindtheproduct.com/wp-content/uploads/2017/10/BBC-Terms-of-use-300x273.png 300w, https://www.mindtheproduct.com/wp-content/uploads/2017/10/BBC-Terms-of-use-768x698.png 768w, https://www.mindtheproduct.com/wp-content/uploads/2017/10/BBC-Terms-of-use.png 948w" sizes="(max-width: 756px) 100vw, 756px" /></p>
<p>So instead of simply labeling a sub-section “Content Ownership,” the BBC rephrases it as a question, “Who owns the content I post or upload?”, which is a common question users have. <strong>Formatting your terms this way makes the page more user friendly. </strong></p>
<h3>Final Words</h3>
<p>No one would ever recommend that you spend more time on your terms of use page than on your pillar pages. However, designers and webmasters should set aside some time to give their terms and conditions pages the attention that they need. Most of the changes listed above can be done in less than a day, but can make a world of difference to how visitors perceive your website.</p>
<p>Have any other cool ideas on how to improve the UX of a terms and conditions page? Comment below!</p>
<p>&nbsp;</p>

core/freeform

What good product design looks like – Miguel Fernandez (VP of Product Design, Slack)

Improving the UX of Your Terms and Conditions Page (and 6 Easy Ways To Do It)

Erik Episcopo

Read more

Comments