The web designer’s guide to presenting legal stuff

With the recent developments in online privacy it is just about the right time to suggest small tweaks to improve your terms & conditions and privacy policy documents on your own websites. As the examples below show, there are various ways to make these documents (in addition to its legal validity) more than just text in a way that will benefit your visitors.

But wait, before we start, you might want to know why this is even relevant? Why do websites (and apps) need a privacy policy and terms of service? And what do you usually include in those documents?

For one, privacy policies are relevant (and legally required) in most countries—they are a way to disclose your data collection practices. (Did you know that you are required to have a privacy policy when you use Google Analytics?) It is also the right thing to do according to your visitors/customers: MEF’s Global Privacy Report from early 2013 revealed that 70% of consumers say it’s important to know exactly what personal information is being collected and shared.

Terms of Service can mainly help you to avoid responsibility for the actions of your users. They are therefore an important way of helping you stay out of trouble.

Here’s what’s usually is covered by a Terms & Conditions document:

• Disambiguation/definition of key words and phrases
• User rights and responsibilities
• Proper or expected usage; potential misuse
• Accountability for online actions, behavior, and conduct
• Privacy: pointing to the privacy policy and defining as part of the contract
• Privacy policy outlining the use of personal data
• Payment details such as membership or subscription fees, etc.
• Opt-out policy describing procedure for account termination, if available
• Disclaimer/Limitation of Liability clarifying the site’s legal liability for damages incurred by users
• User notification upon modification of terms, if offered

Here’s what usually needs to be included in a Privacy Policy:

• What kind of personal data is being collected
• Describe how this information will be used by the company
• Describe how this information will be transferred to third party companies
• Provide instructions on how users can modify or delete their personal information
• Provide instructions on how users can opt-out of future communications
• Identify its effective date and outline how you notify people of material changes to your privacy policy

Case Studies

Sprout Social — summary on top

I couldn’t find this User Agreement at Sprout Social anymore (taken from my archives), but the screenshot is self-explanatory. Above the actual user agreement, the most important points were summarized in an easily digestible manner.

FullContact — summarize/hide

Here’s a similar approach by FullContact, they summarize the actual content and hide it. If you want to learn more, the full text appears.

Mite — summary by paragraph

Mite’s terms of service and privacy policy summarize every paragraph by saying stated briefly what the legal speak means in plain English.

MailChimp — helpful definitions

MailChimp adds helpful definitions next to their paragraphs. They add information to the reading flow when something isn’t necessarily understandable for an average user.

The example below is MailChimp’s paragraph requiring you to comply with local and international laws like spam and privacy regulation. They explain the abbreviation EEA to clarify what their terms mean to you: “This applies to people who are sending to or from the European Economic Area. The EEA includes countries that are part of the European Union, plus Iceland, Liechtenstein, and Norway.”

Fragmentation

Moving on, but staying with Mailchimp. When doing your docs online, try to avoid putting everything in one document and group them by topic. Most importantly a privacy policy shouldn’t be buried in something like the terms or legal information regarding your company (required in a lot of European countries. In Spain they call it aviso legal, in Germany impressum).

Mailchimp’s way of grouping the legal documents, making it easy for you to understand where to look and what to expect.

Here’s a similar grouping implementation by Dropbox:

iubenda — icons/simplified and full legal text view

iubenda has a full system for their privacy policies. They combine an easily digestible view for visitors where the focus is on quick understanding and text is accompanied by icons with a page that shows actual legally relevant text. (Full disclosure: I have recently joined iubenda which is why I have insights into how they work. A lot of emphasis is put on ease of use for both web designers using the service and the visitors reading the policies).

Upworthy — use an infographic image

Use an infographic style image to explain what your users are to expect from you. This one has no real legal validity, but they additionally have one that may have below that image:

DuckDuckGo — tell a story

DuckDuckGo’s example is far away from being an actual privacy policy. What they did here is set themselves apart from the competition by telling a story and therefore outline what their privacy policy is all about. Again, they also have an actual policy on their site that complies with actual legal regulations. To make this stand out even more as a story, this policy sits on a separate site called donttrack.us.

CloudFlare — track changes on Github

CloudFlare tracks their changes on Github, so you can always see how the policies may have changed. Often a policy just shows the date of its latest startup. This is a great way of improving transparency and therefore trust.

What makes great legal documentation on the web isn’t just legally compliant text for your particular audience. It’s also easily understandable language and helps the user comprehend what it’s all about in a visual fashion. Hopefully this post will give you some ideas about how to design your documents in the future.

Featured image/thumbnail, legal checks image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.