Navigation

The web designer’s guide to presenting legal stuff

By Simon Schmid | Web Design | Apr 2, 2014

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.

sproutsocial 

 

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.

 fullcontact

 

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.

mite 

 

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.”

mailchimp 

 

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.

mailchimp2

Here’s a similar grouping implementation by Dropbox:

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).

iubenda 

 

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:

upworthy 

 

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.

duckduck 

 

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.

cloudflare 

 

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.

Share this post
Comments (no login required)
  • voltagenewmedia

    I love how fullcontact did theirs. Never thought of doing it that way. Thanks for this.

  • http://www.isadoradesign.com/ Isadora Design

    I’m surprised that Upworthy can have an infographic…but I like it. This is a really helpful guide, and I appreciate not only the research that went into gathering the information but also the featured Privacy Policies. Thanks.

    Cassandra
    Isadora Design – Handcrafted Web Design Company

  • http://www.miraclegroup.com/ Jasonsmith21

    Defining terms and conditions and other legal stuff on the website is almost necessary in countries worldwide and the remaining countries are also working to make it mandatory. I really liked how the way Mail chimp does it.They really make it simpler for the end user to understand it.

  • simonschmid

    Thanks for the comments @voltagenewmedia:disqus, @isadora_design:disqus & @Jasonsmith21:disqus. Happy that the examples were picked up with appreciation :)

  • http://asiwebsolutions.com/ ASI Web Solutions

    A valuable in-depth view about the importance of the terms and conditions facets on a website. It is vital that these terms and conditions do take into consideration and address all relevant/involved stakeholders of a website/organization.

    http://asiwebsolutions.com/

  • Shane P

    This is fantastic, a great compilation of examples. I love the simplicity of them and how easy it is to digest the information. That infographic is great! Like you said, probably not legally binding, but a great idea to get the initial point across. Thanks and cheers!

  • http://www.proweb365.com/ Minneapolis Web Design

    Thanks for nice guide. infographic seem to be a great trench at this time.