How Enforceability of Terms of Service Relates to UI

I am unaware of an area of law with more bang for its buck for crypto apps than a website’s terms of service.  Yes, I’m talking about the wall of legalese on websites that we all know basically no one reads.  Terms of service frequently contain clauses—like mandatory arbitration and class action waivers—that can significantly reduce the legal liability exposure of an app.  However, because courts understand how few users read terms of service, a key issue these online contracts must grapple with is whether they are enforceable on the app’s users in the first instance.  The purpose of this article is to highlight tips to increase the likelihood of enforceability of terms of service.  As you’ll see, enforceability of terms of service is this weird area of law that intersects directly with principles of good UI, and courts take an extraordinarily design-centric approach when analyzing terms of service.   A few tweaks in CSS can literally make the difference between binding terms and not. 

I understand you’re probably skeptical of this claim, so let’s look at an example.  Take a look at these two sign-in/sign-up screens from StubHub:  

The first is from StubHub’s website, and the second is from StubHub’s Android app.  Sure, there are differences between the two, but to the average person, I’d expect they both look like vanilla sign-up/sign-in screens that are ubiquitous to our online experience.  Both provide fields to put user information and a button to take action.  Both state that by signing up or signing in, the user agrees to a “user agreement.”  Neither places the actual terms of the user agreement on the page, instead requiring the user to click/tap a hyperlink that provides them on a separate page.

Despite these similarities, according to a court in California, these two screens are very different, at least legally speaking.  Indeed, one of these screens resulted in StubHub users waiving their right to a jury trial, a term contained in the hyperlinked user agreement on each screen, and the other did not.  Can you guess which is which?  

Okay, I won’t hide the answer—the court found that the terms hyperlinked on the website screen were binding on StubHub’s users but not those on the Android screen.  Why the different result?  

As to the website screen, where the user agreement was enforced, the court said:

StubHub's website sign-in screen that these Plaintiffs viewed provided sufficient notice of their agreement to arbitrate any disputes. The sign-in screen contains hyperlinks in offset, bolded, underlined, and bright blue typeface, in close proximity to the sign-in button.  In re Stubhub Refund Litig., No. 22-15879, 2023 WL 5092759, at *2 (9th Cir. Aug. 9, 2023) [emphasis added].

As to the Android screen, where the user agreement was not enforced, the court said:

[T]he mobile registration screen . . . lacked several important features that would adequately provide notice of an arbitration clause. The color of the relevant text is gray and does not stand out against the white background; it is not obvious to the user that the text is hyperlinked; and the bright pink sign-up button obscures the muted colors of the relevant text providing notice. While the hyperlinked text is bolded, it is not underlined, which generally indicates that the text is hyperlinked. This is distinct from the text of the website checkout and sign-in pages, in which the term “User Agreement” is underlined and in bright blue font to emphasize that it is hyperlinked.  In re Stubhub Refund Litig. at *2 [internal citations omitted, emphasis added].

The TLDR?  The UI of the website screen was better than the Android screen in making the terms noticeable to users.  This was the difference between the arbitration clause in the hyperlinked user agreement being enforced and not.

You're probably thinking to yourself:  Surely, this can’t be how the law works.  It can’t be that the color of text and buttons could mean the difference between a user waiving their constitutional right to a jury trial, right?  But I’m here to tell you that it can.

The purpose of this article is to unpack the enforceability of online contracts.  I first discuss why online contracts are so important and explain that the backbone of enforceability of online contracts is to give users notice and obtain user assent.  I then describe how the gold standard for providing notice and assent is generally seen as a “clickwrap”—and why many crypto apps are nonetheless abandoning clickwraps due to clunky UI in favor of what I call a “hyperwrap.”  I then give crypto app developers five tips for increasing the likelihood that their hyperwraps are enforceable. 

We’ve all been presented with those long pages of terms on a website that we probably didn’t read.  They go by different names—terms of service, terms of use, user agreement, etc.  Regardless of their name, they exist to form an online contract between the app and the user.

So, why should crypto app developers care about online contracts?  Because, despite how objectively dull they are, they frequently contain terms that are very “pro” app developers.  Two big-ticket items commonly included in these contracts are (1) an arbitration clause and (2) a class action waiver.  These two terms alone can be the difference between a multimillion-dollar lawsuit and a claim never being brought.  Arbitration is generally seen as more “business-friendly,” cheaper, and more private than litigating in court.  And the waiver of a class action right can be the death knell for claims by users against website operators, which are often uneconomical to bring on an individual basis. 

So, online contracts matter.  The question then becomes:  How does the app bind its users to these contracts?  Courts focus on two key ingredients:  (1) reasonably conspicuous notice and (2) an unambiguous manifestation of assent.  Oberstein v. Live Nation Ent., Inc., 60 F.4th 505, 514 (9th Cir. 2023).

The “gold standard” of providing notice and assent is generally seen as a “clickwrap” or “scrollwrap” agreement.  You’ve almost certainly seen a clickwrap before:  It’s when you must check a box to indicate that you’ve read and agree to a website’s terms, and usually the full terms are presented (instead of hyperlinked).  When the terms are presented and the user physically scrolls to the bottom before you can check the box, that’s usually called a scrollwrap.  Because the user is presented with the terms and must explicitly accept them, courts generally find notice and assent present in these agreements and, therefore, binding.  As one court put it:  “To ensure that an online agreement passes muster, clickwrap is the safest choice.”  Oberstein at 517.  

On the other end of the spectrum is the “browsewrap.”  Here, generally speaking, a hyperlink to the terms is presented at the bottom of the website, and the terms contain language that by using the website the user agrees to be bound by the terms.  Absent evidence the user bringing the suit received actual notice and assented to the browsewrap, courts are often hesitant to enforce them due to notice and assent issues.  

(Note:  Courts are not always consistent in what they call these things, “clickwrap,” “scrollwrap,” “browsewrap,” etc.  For example, some courts may call my term a “hyperwrap” (described below) a “clickwrap,” particularly if the button says “I agree.”)

So, if you want to increase the likelihood your users will be bound by your terms, it’s probably a good idea to go with a clickwrap/scrollwrap.  Feel free to stop reading the article here if you plan to do that.

But this is tech, so I doubt most of you stopped reading.  Because despite how happy using a clickwrap would make the lawyers at your company, you know presenting your users with a wall of legalese in the middle of a critical action point like user sign-up would make your design team very sad.  And when your design teams are very sad, your CEO gets very mad.

Instead, the compromise position many apps opt for can be seen in the StubHub screens above.  There is a hyperlink to the terms of service placed near an action button and a statement that you agree to the terms of service by clicking/tapping the action button.  Courts are particularly confused about what to call this, but “sign-in wrap” is probably the term I’ve seen used the most, named for the fact that the sign-in flow is a standard time to introduce this flow.  I don’t like that name (because it doesn’t encapsulate other flows from signing in), so I am going to use the name “hyperwrap” (to indicate the use of hyperlinked terms) to describe this.  Another term some use is “hybridwrap.”  (Side note:  “hyperwrap” is an admittedly silly term, and I don’t know of anyone else who uses it, but the whole “wrap” terminology is itself silly in the online context; it comes from “shinkwrap” notices that used to be included with physical items like CDs, so let’s go with it?)

At a high level, this is the current state of online contracts—apps that are more risk-averse or “non-tech” that don’t care as much about a good UI will often opt for a clickwrap (e.g., opening a bank account online), apps that optimize for UI will frequently use a hyperwrap (e.g., signing in to a StubHub account), and non-apps will generally use browsewraps (e.g., website where a user doesn’t take action).  Because I believe most crypto apps are interested in hyperwraps, the remainder of this article will focus on hyperwraps.

Let’s return to the StubHub situation from the introduction.  The court engaged in an analysis of fonts, colors, and spatial display that feels more similar to a Web Design 101 class than a legal opinion.  But this case is not a fluke—this is this level of detailed assessment of the design of a website that courts undertake to assess whether the hyperwrap is valid. 

Before diving in, I must warn you that these tips are not a silver bullet to making an enforceable online contract—enforceability depends on the specific facts and circumstances of your app/jurisdiction.  You should discuss your situation with your legal counsel.  It’s also an area of law in flux; I have seen cases where the court refused to enforce an online contract even when the interface arguably was consistent with many of these tips.  As one court noted, “different federal courts have reached ‘seemingly inconsistent results’ . . . about the conspicuousness of ‘essentially the same . . . sign-up webpages.’”  B.D. v. Blizzard Ent., Inc., 76 Cal. App. 5th 931, 947 (2022).  Nor are these tips exhaustive of all actions you can take to increase the likelihood of enforceability or that courts examine when assessing enforceability.

So we’re on the same page, I’ve marked up the StubHub screen with some terminology for the components of a hyperwrap that I’ll be using below:

With this in mind, let’s dive into 5 tips for increasing the likelihood of enforceability based on factors some courts have cited.  

The hyperwrap should be displayed on a clean page without other distracting content.  Picha v. Gemini Tr. Co., LLC, No. 22 CIV. 10922 (NRB), 2024 WL 967182, at *9 (S.D.N.Y. Mar. 5, 2024);  Edmundson v. Klarna, Inc., 85 F.4th 695, 706 (2d Cir. 2023).  The page's purpose should focus on presenting the user with the terms and allowing the user to agree to the terms.  That is, the hyperwrap should be the star of the show, not “hidden or obscured.”  Patrick v. Running Warehouse, LLC, 93 F.4th 468, 477 (9th Cir. 2024).

So, what’s an example of a page that was too cluttered?  Here’s a screenshot from Berman v. Freedom Fin. Network, LLC, 30 F.4th 849 (9th Cir. 2022):

It may be hard to see, but the hyperwrap is below the ZIP code text field.  The court found this hyperwrap was not enforceable.  A core reason was the clutter:

[T]he textual notice is further deemphasized by the overall design of the webpage, in which other visual elements draw the user's attention away from the barely readable critical text. Far from meeting the requirement that a webpage must take steps “to capture the user's attention and secure her assent,” the design and content of these webpages draw the user's attention away from the most important part of the page. Berman at 857.

The font of the hyperwrap notice should be clearly visible, not “printed in a tiny gray font considerably smaller than the font used in the surrounding website elements, and indeed in a font so small that it is barely legible to the naked eye.”  Berman at 856–57; see also Sarcuni v. bZx DAO, 664 F. Supp. 3d 1100, 1119 (S.D. Cal. 2023) (court refused to enforce browsewrap because it “appear[ed] to be visible only if a user scrolls through other material” and was “displayed in small font located below at least eighteen other hyperlinks.”).  The website version of the sign-in/sign-up StubHub screen above is a decent example.

Also, courts pay particular attention to the font of the hyperlink in the hyperwrap notice.  The hyperlink to the terms should look clearly clickable/tappable, and while the designers reading this may hate me, courts often remark that the best way to do that is to make it blue and underlined.  Oberstein at 516 (“[C]rucially, the ‘Terms of Use’ hyperlink is conspicuously distinguished from the surrounding text in bright blue font, making its presence readily apparent.”).  

But if you’re not going to win the battle with your design team on the 1990s hyperlink blue look, the hyperlinked text should at least be a different color from the other text and “contrasted against the surrounding” background.  Patrick at 477.  Underlining the hyperlink is probably better than no underlining,  Edmunson at 706, and putting the hyperlink's text in capital letters can also help.  Sellers v. JustAnswer LLC, 73 Cal. App. 5th 444, 481 (2021).  Finally, consider matching the font of the hyperlink to hyperlinks elsewhere in the app so that the user is consistent in what they understand to be a hyperlink (clickable or tappable text).  Patrick at 477. 

This is an easy one—the notice with the hyperlink should be directly above or below the action button that users click to manifest their assent.  Patrick at 477; Oberstein at 517; Edmunson at 706.  Doing so has two benefits:  (1) It draws the user to the terms because the action button is the star of the page (notice), and (2) it spatially connects the action of clicking the button with the terms (assent).

This one is about when to present the hyperwrap.  The bottom line is that the user should be required to accept the hyperwrap in all the flows needed to take action on the app where the user intends to benefit from the service (i.e., use the app for its purpose).  In practice, this often means presenting the hyperwrap at three critical points:  (1) at sign-in, (2) at sign-up, and (3) at “‘purchase or enrollment.’”  Edmunson at 706–07.

Putting the hyperwrap at these points, particularly on sign-up/sign-in, also provides a more subtle benefit:  It helps encapsulate the context of the transaction as a continuing relationship.  Some courts have been hesitant to enforce terms that do not match the context a user would expect.  For example, in Sellers, the court held that presenting terms in the context of a free trial did not imply a continuing relationship associated with a recurring membership as contained in the terms:

[W]e begin by considering the context of the transaction. As discussed, a consumer on the JustAnswer website is not asked to “sign up” for an account but is instead invited to “Start my trial” and get the answer to a single question for a one-time fee of $5. This is not a situation in which “[t]he registration process clearly contemplated some sort of continuing relationship ... that would require some terms and conditions,” nor is there any evidence the Plaintiffs were familiar with the service being offered. To the contrary, Plaintiffs were attempting to “[s]tart [a] trial” to determine whether they wanted to use the service at all and were not likely expecting that their “trial” would be governed by approximately 26 pages of contractual terms. Thus, just as they would not likely be looking for small print regarding enrollment in an automatically recurring membership, they also would not likely be scrutinizing the page for small text outside the payment box or at the bottom of the screen linking them to 26 pages of contractual terms.  Sellers at 480 [internal citations omitted].

By requiring users to agree to terms as part of a “full registration process” associated with signing up/signing in, the context of the transaction “reflect[s] the contemplation of ‘some sort of continuing relationship’ that would have put users on notice for a link to the terms of that continuing relationship.”  Oberstein at 517; Edmunson at 708.

While the previous four tips were mostly about notice, this one is about assent:  The hyperwrap notice should be explicit that by clicking the action button labeled “X” the user agrees to the terms.  The interface needs to “‘make clear’ to the reasonable internet user that a specific ‘click’ signifies assent,” and explicitly connecting the hyperwrap notice to the action button is a great way to do this.  Edmunson at 708.  If you go back to the screenshot from Berman I put in the first tip (the super cluttered screen), you’ll notice that the hyperwrap notice said, “I understand and agree to the Terms & Conditions which includes mandatory arbitration and Privacy Policy” and the button said “This is correct, Continue!”  But nowhere did these two things explicitly connect such that the user could assent by clicking the action button.  This was a deficiency, according to the court:

[T]he notice must explicitly notify a user of the legal significance of the action she must take to enter into a contractual agreement. The notice did not do so here. Both webpages stated, “I understand and agree to the Terms & Conditions,” but they did not indicate to the user what action would constitute assent to those terms and conditions. Likewise, the text of the button itself gave no indication that it would bind plaintiffs to a set of terms and conditions. This notice defect could easily have been remedied by including language such as, “By clicking the Continue >> button, you agree to the Terms & Conditions.”  Berman at 858.

The enforceability of online contracts is fundamentally about a balance between good UI for your users and good UI for your terms.  Users come to your website to use it, not to read contracts, so there is a fundamental tension between the two over capturing users’ attention.  My hope in writing this article was to provide items to consider with your legal counsel when determining what balance to strike for your crypto app.

This post is provided for informational purposes only, and should not be relied upon as legal, business, investment, or tax advice. Thus, this post should not be construed as legal advice for any particular facts or circumstances and is not meant to replace competent counsel. It is strongly advised for you to contact reputable legal counsel in your jurisdiction for any questions or concerns. None of the opinions or positions provided in this post are intended to be treated as legal advice or to create an attorney-client relationship. No reader, user, or browser of this site should act or refrain from acting on the basis of information on this site. This analysis might not reflect all current updates to applicable laws or interpretive guidance, and the author disclaims any obligation to update this post. All liability with respect to actions taken or not taken based on the contents of this site are hereby expressly disclaimed. The content on this posting is provided "as is;" no representations are made that the content is error-free.