The web designer’s guide to presenting legal stuff
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
- 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
- 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
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
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’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
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.