Do Website Policy Disclosure Pages Always Have To Be So Ugly?

About The Author

Suzanne Scacca is a freelance writer who specializes in web design, WordPress, and SEO. In her free time, she builds new websites, experiments with popular … More about Suzanne ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

In some instances, privacy policy, terms of use, and cookie consent pages do have to be ugly. But that doesn’t mean you can’t improve upon how easy they are to read or navigate (which visitors will definitely appreciate). Today, we’re going to look at four ways that web designers can contribute to getting more policy disclosure pages read and terms actually agreed to.

It’s not like consumers aren’t interested in the information provided on terms of use or privacy policy pages. But these pages… Talk about a painful design.

As a web designer, you know that data privacy and security concerns affect how visitors interact with the websites you build. That’s why you build trustmarks into your websites in the first place.

But the sheer presence of “Terms of Use” or “Privacy Policy” links isn’t enough to put visitors at ease. These pages need to be easy to read or, at the very least, easy enough to pull out pertinent details from.

If you’re not in the habit of doing so already, you need to start designing your policy pages in a way that website visitors don’t feel so discouraged that they blindly accept the terms and put themselves at risk.

Designing Policy Disclosure Pages That Visitors Will Read

Tell me the truth: When was the last time you visited a terms of service, privacy policy or other policy disclosure page that was easy to read? Heck, when was the last time you even bothered visiting a terms page?

A recent experiment conducted by ProPrivacy (which you can read about in this ebook) found that of 100 people that encountered a terms and conditions page:

  • 70 claimed to have clicked the policy page link to read it (when only 19 actually did).
  • 33 claimed to have read the page all the way through (in actuality, only 1 did!).

Why is this a problem? In the case of this experiment, it’s because the users relinquished some pretty crazy rights by unknowingly accepting the terms:

ProPrivacy ran a social experiment on how many people visit and read policy pages. This is the list of unusual conditions the page had visitors agreeing to
ProPrivacy’s social experiment included some unusual conditions of use on its terms page. (Image source: ProPrivacy) (Large preview)

It’s not like your clients would ever hide ridiculous “terms” like these on their policy pages. But that’s not the point. There are other things — like how cookies are used, what happens with email addresses entered into a form, how to license content from the site, etc. — that do matter and can end up buried on a terms page because no one dared to try and read it.

So, here’s what web designers can do to turn this trend around and give visitors more reason to trust a website:

Tip #1: Format the Pages the Way You Do the Rest of the Site

I’m not asking you to spend a lot of time on this since Terms of Use and Privacy Policy pages aren’t as important as the pages that sell whatever the brand is offering. But…

If a business owner, writer or legal representative gives you copy for policy pages that looks like this one on the Zappos site, you really should do something about it:

Zappos Conditions of Use page with extensive use of all-caps text ad lengthy paragraphs
The Zappos Conditions of Use page is a wall of impossible-to-read text. (Image source: Zappos) (Large preview)

This looks like something you’d receive from a law firm and dread opening it. Extra-long paragraphs. All-caps text. Headers with nonsensical legal terminology all over them. No wonder most consumers don’t bother clicking through to these pages, let alone read them.

Depending on what you’re given, you’ll have to work with your writer or legal rep to edit the content so it’s more user-friendly. As far as design goes, though, that’s all you.

Here are some ways you can improve the formatting of your policy disclosure pages:

Increase the font size and decrease the amount of text like the Fishtank Agency does:

The Fishtank Agency Privacy Policy page
The Fishtank Agency’s Privacy Policy is formatted with big text, bold headers and short sections. (Image source: Fishtank Agency) (Large preview)

It’s not just the 18-pixel body text or 24-pixel header tags that make this page so easy to read. The sections are short and you can see where they end. Also, the sections are numbered, which makes it easier to find what you’re looking for.

Another thing to do is to format the text like a normal page as H&M does:

H&M’s privacy page — formatted like corporate services page
H&M’s privacy page looks like any other page that would appear on a corporate website. (Image source: H&M) (Large preview)

This is where you’d need your writer’s or legal rep’s help since you can’t go rewriting any of this legalese yourself. That said, if you’re given more user-friendly copy for a policy page, break it up whenever possible into:

  • Smaller sections,
  • Shorter sentences and paragraphs,
  • Bulleted lists,
  • Bolded questions or headers.

And if you have a lot of information that can be organized into a table, do as Smashing Magazine does with this section on cookies from its privacy policy page:

Smashing Magazine privacy policy page with table listing out cookies used
Smashing Magazine uses a table to organize the list of cookies used on its website. (Image source: Smashing Magazine) (Large preview)

This table makes all of that information that would otherwise be difficult to read in paragraph form much easier to consume and understand.

Or you can follow Bank of America’s lead and use an accordion to make a lot of content easier to consume:

Bank of America privacy notice page with accordions that contain each section of the policy
Bank of America neatly organizes its privacy notice sections under accordions. (Image source: Bank of America) (Large preview)

This way, visitors can take a moment to read through each header without being overwhelmed by the policy information. When they find what they’re looking for, they click the accordion to open it and can focus strictly on that section.

Tip #2: Add Navigation to the Page

In some cases, there isn’t a whole lot that can be done to condense the amount of information on a policy disclosure page. And even well-formatted pages can still be challenging for visitors if they’re too long.

Having a navigation specific to these pages will help. There are different ways to handle this.

The New York Times, for instance, includes the following navigational tools on its Terms of Service page:

  • Breadcrumbs to backtrack to other legal or help pages,
  • A search bar to find something specific in the Terms of Service,
  • A table of contents with links to each section.
The New York Times Terms of service page has breadcrumbs, a search bar and table of contents for better navigation
The New York Times’s Terms of service page is easy to navigate. (Image source: The New York Times) (Large preview)

Even if it’s an otherwise generic terms page, these navigational tools will ease the pain of visitors trying to find the answers to their privacy concerns and questions.

Here’s another option for you:

Google uses a sticky sidebar navigation to show people where they are on the lengthy Terms of Service page:

Google Terms of Service page with sticky sidebar navigation
Google’s Terms of Service page comes with its own sticky sidebar navigation. (Image source: Google) (Large preview)

Users can either select the section to navigate to or use the sidebar to orient themselves as they read through the page. Anytime you can give your visitors an idea of the progress they’re making is a good idea.

One other navigation example I’d like to show you is from Indeed:

Indeed Legal page with info on cookies, privacy, California user rights and terms of service
Indeed consolidates all its legal policies onto one Legal page. (Image source: Indeed) (Large preview)

This is the Legal page for Indeed. It contains every single one of its policies:

  • Cookie policy,
  • Privacy policy,
  • California privacy rights,
  • Terms of service.

It uses a sticky sidebar navigation similar to how Google does. However, I want you to take a gander at how it handles this on mobile:

Indeed legal page on mobile with sticky top navigation
Indeed attaches its legal page navigation to the top of the mobile site. (Image source: Indeed) (Large preview)

Rather than ditch the sticky navigation altogether (which some sites do), Indeed affixes the legal page’s navigation to the top of the mobile screen:

Indeed mobile website with drop-down navigation for legal page
Indeed users can interact with the sticky mobile navigation on the legal page. (Image source: Indeed) (Large preview)

Again, this sticky navigation serves a dual purpose: expediting how Indeed visitors get to the information they need while also orienting them to what they’re reading.

Tip #3: Let Visitors Personalize Their Terms

When building websites for large corporations, popular social media platforms and mega e-commerce sites, you have to remember that it’s not just English speakers in the United States reading the policy disclosure pages. As such, the terms should change from language to language and country to country.

How do you deal with this on top of everything else? Easy. Let’s look at some examples.

Apple asks visitors to choose a topic, a location and a language:

Apple Legal page: Choose a Topic, Choose a Location, Choose a Language
Apple enables users to select the legal document for their specific location and language to view. (Image source: Apple) (Large preview)

BuzzFeed is another website that enables global users to adjust its legal pages based on where they live and which language or English dialect they speak:

BuzzFeed Legal page: Privacy Policy, User Agreement, DMCA (for users in Mexico)
BuzzFeed’s Legal page includes options to view the privacy policy, user agreement and DMCA for the user’s region. (Image source: BuzzFeed) (Large preview)

First, users select which document they want to view. It then populates the corresponding terms down below in an easy to read format. They can then select “Read Legal Terms For” if it’s not in their preferred region or language.

This is ideal for website performance, too. Some websites just link out to PDFs that contain the various translations of regional policies. The more files you add to your server, though, the slower it’s going to load. This way, the content dynamically changes on the site based on who’s viewing it.

Tip #4: Provide Eye-catching Summaries

Let’s say the company you’re building a site for has very strict legal terms. Their legal team has advised them not to change any of the policy disclosure content because they need it to hold up in a court of law in case anything should happen.

That doesn’t give you much flexibility in terms of how you design the page then. Sure, you can make the headers extra big and bold and you can use H2, H3 and H4 to create a hierarchy. That’ll help with readability a little bit, but not much.

When there’s no way to manipulate the legal content itself, summaries are the way to go.

LinkedIn is one website that does this:

LinkedIn user agreement - translation of legalese into plain speak
LinkedIn provides brief explanations of each of its user agreement terms in plain speak. (Image source: LinkedIn) (Large preview)

The User Agreement contract is provided in full on the left side of the screen. On the right side are snippets of text in a much larger font.

These are the summaries for each section, written out in layman’s terms, which keeps LinkedIn users from having to slog through lengthy explanations of complexly worded conditions or terms.

On mobile, these eye-catching summaries appear before all the boring legalese:

LinkedIn user agreement - translation of legalese into plain speak for mobile users
LinkedIn includes summaries for each of its user agreement sections on the mobile site. (Image source: LinkedIn) (Large preview)

Sephora is another website that includes concise, user-friendly summaries on its terms pages. Here’s how it looks on the Terms of Use page:

Sephora Terms of Use page includes “The short and sweet version” in red to summarize its complex legalese
Sephora provides “The short and sweet version” for each of its website’s terms. (Image source: Sephora) (Large preview)

I’d argue that the way this is designed, with “The short and sweet version” called out in red, encourages visitors to focus only on the summaries.

So long as nothing important is lost in translation or missed in these summaries, I think that’s a brilliant idea. The red is much easier to locate when you’re quickly scrolling through a page than a black header tag.

Wrapping Up

I know these pages are often saved until the very end of a design project because… who cares? But as consumers become more savvy when it comes to their data and privacy online, you can’t afford to have a blasé attitude when it comes to creating policy disclosure pages on a website.

By taking extra time to improve their readability and navigability of them, you’ll encourage visitors to actually read these pages and make sure they’re comfortable with the terms they would otherwise blindly or unknowingly agree to. In doing so, you’ll help the website capture more satisfied customers or users in the end.

Smashing Editorial (ra, il)