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.
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.
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:
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:
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:
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:
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:
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:
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:
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:
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.
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:
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:
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:
This is the Legal page for Indeed. It contains every single one of its policies:
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:
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:
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.
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:
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:
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.
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:
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:
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.
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.