Laws of Design: How to Display Your Legal Agreements in Your Mobile App

Leah Hamilton
Interfaces & Interactions
6 min readJul 15, 2015

--

When designing a mobile app the legal agreements (and where you put them) may be the last thing on your mind. But getting agreement to these documents is extremely important, and you can easily do this by using design-friendly solutions within your apps.

There are a number of different methods that are commonly used to display legal agreements on mobile, so we’ll go through a few of them and then compare them to best practice. Let’s take a look.

Some Examples

First, let’s look at some examples of different mobile apps (on different platforms) and look at where they place their legal agreements. As you look through the different examples, have a think about which one you think would be the best agreement (from a legal perspective) and why. Then in the next section, I’ll give you the answer and you can check if you were right.

First let’s look at this example from Parking Private, a platform for sharing private parking spaces with other individuals. You can see that they include a link to their terms and conditions at the end of their sign up form, with a “Submit” button to submit the form and agree to the terms. They also include a button labelled “No” that you have to swipe to the right (to “Yes”) so that you can proceed.

Parking Private Sign Up

Our second example is Samsung, which has check boxes with all of their legal agreements listed one after another during the account sign up process. Not only do you have to tick all the boxes, but you also have to click an “Agree” button at the bottom to proceed. All of the different legal agreements are linked within each check box.

Samsung Account Sign Up

Next, here’s an example from the YouTube App. To get to the legal agreements, I had to open the app, click on the menu button in the top left corner, then click on the settings panel. Then I scrolled down, and the link was nearly at the bottom. When I clicked on it it took me to a website external to the app.

YouTube Settings Menu

Finally, here’s an example of a pop-up End User Licence Agreement on the Chase Mobile and J. P. Morgan App. It pops up as soon as you open the app, and will not let the user proceed unless they click “Accept”. The text of the agreement is right there, and can be scrolled through by the user.

Chase Mobile and J. P. Morgan App EULA

What Are the Legal Issues?

There are a number of legal issues that arise when you are setting up your legal agreements in your mobile app, but the most important is making sure that you actually get agreement to your legal documents.

It is vital to get agreement to your Privacy Policy, particularly if you are collecting any amounts of user data. Most jurisdictions around the world now have privacy legislation in place, and a privacy policy can help to cover your obligations under these laws. Your Terms of Use is also important, as this governs the relationship between you and your users; if you don’t have one, you may not be able to legitimately ban accounts that are behaving in ways that harm you, your app, or other users.

It may not seem like it, but where and how you display your legal agreements also has a big impact on whether or not they are enforceable.

In the above examples, Chase Mobile and J. P. Morgan with the pop-up is the best. Parking Private (with the swipe) and Samsung (with the check boxes) are also excellent. The YouTube example with the legal agreements in the settings menu is not very good at all. Let’s take a look at why.

Clickwrap and Browsewrap

There are two ways of displaying your legal agreements on mobile or on the web. These are known as clickwrap and browsewrap.

Browsewrap is a commonly used method, where the user needs to browse or search through the website to find the legal terms. They are assumed to have agreed to those terms. This is called implied agreement. The YouTube menu example above is an example of browsewrap.

Clickwrap is pretty much the opposite — the user has to explicitly click a check box or a button with the words “I agree” on it. This is called express agreement. In law, express agreement is stronger than implied agreement, as the user has clearly agreed. The check box and pop up examples above are examples of clickwrap.

Many courts have found that clickwrap is enforceable, while browsewrap is not. This means that if you set up all your legal agreements using a browsewrap method, if a user ever took you to Court your agreements may not even be enforceable.

Design-Friendly Solutions For Meeting These Legal Requirements

One of the easiest ways to comply is to simply insert a check box into the end of your sign up forms. The check box can be added on Android or iOS apps by adding a check box UI component. These components should come with your app development kit. By making the submit button disabled until the check box is ticked (or switch is flicked if you are using a switch), the form will only be able to be submitted when the user has agreed to your legal documents.

Also make sure that you clearly link to your legal documents within each check box, and make it easy for your user to open and read them.

A pop up is also easy to generate for both iOS and Android apps. For app development purposes you probably know these as dialogs. These should also be able to be added as a UI component, accessible through your app development kit.

Ensure that you do not allow the user to continue to use the app until they have clicked the “I agree” button on your dialog. However, if the user does not accept the agreement, don’t just force close or make the app quit out. Send the user back to the front page or title screen of your app to give them another opportunity to proceed if they wish.

Pop up legal agreements are great in that they clearly place the agreement in front of the user and give them a simple opportunity to agree. They also have the benefit of being able to include the text of your legal agreement inside the pop up box.

But what about your users? Will pop ups turn them away? Users like to have control over their browsing and app usage, and pop ups can interfere with that (as well as their flow). However, there is an excellent case to be made for using a pop up sparingly for important things only, such as your legal agreements. Ensure that any pop up you use is clear, simple, and has an easy way to either click “I Agree” to continue, or “No” to go back. This is a marketing decision that you need to make for your business, but do keep in mind that a pop up Terms of Use or End User Licence Agreement is a far cry from a pop up advertisement or annoying sign up box.

For optimal placement from a legal perspective, the “I Agree” type wording should be as near to the button or check box as possible. As mentioned, a pop-up style agreement is best as the wording is right there and can be scrolled through with easy access to the “I Agree” button.

Conclusion

Complying with the law is easy to do, and you don’t have to sacrifice good looking or well-designed pages to do it. In fact, some of the simplest design and app creation techniques can be used to provide increased legal protection that will stand you in good stead to meet your legal obligations.

With TermsFeed, you can create your Privacy Policy agreement and Terms and Conditions agreement for your mobile app in minutes.

--

--