From Like Buttons to Message Bubbles: The UX Designs You Can’t Use

Designing a new user interface in 2019 is harder than you think

Credit: Soloma_Poppystyle/iStock/Getty Images Plus

YYou’re in the business of selling pizza. Everyone loves pizza. It’s fast and easy. The demand is high. It’s the classic American staple. But you’ve got a ton of competitors, marketing is tougher than you thought, rent is getting higher, the app designs are stale, every week is a 52-week low, and it’s getting harder to differentiate—you know, the typical stuff. So, you think to yourself, “I need to do something nobody has ever done before. Something new, something progressive.” You start brainstorming ideas and come up with a brilliant one that sounds something like, “So then you could view the pizza details and swipe right if you like it and swipe left if you don’t. Kind of like Tinder, but for pizza!”

Yeah, no. You cannot design something like that, because Tinder has a patent on the interaction of swiping right to like and left to dislike. “Okay, okay, fine,” you say to yourself. “That is the hallmark of its entire app, so then just get rid of the swipe feature, and we’ll make a minimum viable product (MVP) solution of just having a ‘like’ and ‘dislike’ button at the bottom.” Tough luck, kid. Tinder has a patent on that, too.

Designers are always looking at how other companies solve similar design challenges and use them as inspiration for ideas. It’s a fun (and sometimes not so fun) process that can even cause others to criticize you for not doing enough research if you don’t look at a competitor’s solutions. For designers and non-designers alike, it’s important to understand which designs are off-limits for use as inspiration. Companies take a lot of time to think up product-defining UI elements, so it makes sense that they don’t want others copying something they’ve spent a lot of energy creating. These UI features can be as detailed as Apple’s iPhone X home-button-less navigation, for which it filed a giant patent that’s still in review, or as small as Facebook’s “like” icon.

General patent questions

How long does it take to patent a design?

It can take one to two years for design patents and up to five years for utility patents.

How much does it cost to make a design patent?

The ballpark overall cost for a design patent is $2,000 to $3,000. Unlike other types of patents, yearly maintenance fees are not required. If you’re a big company, this is pretty cheap.

How long do design patents last?

All of the patents listed in this article last about 15 years.

How do I find patents?

Conveniently, you can find them on Google Patents, which indexes them from more than 100 patent offices around the world. You can search by type, keywords, or company, because patents are all public material. If you ever have the time, it’s a good idea to look through patents once in a while.

I’m looking at the patents. How do I read this shit?

According to UpCounsel, “the only section in a patent that is legally enforceable” is written in the claim, which is limited to one sentence. For non-design patents, it makes sense to hit up the claims section first. In design patents, that one sentence is often vague and reads something like, “The ornamental design for a display panel of a programmed computer system with a graphical user interface, as shown and described,” which is not very helpful. Therefore, the parts to pay attention to are the solid lines in the attached drawings. The dotted lines are just supporting details to show you what environment it appears in, like if it’s mobile or desktop. The dotted lines can also be contextual, which helps you know, for example, that something is scrolled or if it specifically appears in a messaging app. The title will also tell you if the patented item is an animation or a graphical interface. Unfortunately, patents usually don’t include a description of how the thing is supposed to work—sometimes a bit of guessing is involved.

TL;DR for patent rules

You can patent:

  • Icons
  • Static screens (a certain UI pattern)
  • Animated interactions (such as a swipe interaction)
  • An existing function that adds your own ornamental twist to make it sufficiently unique
  • Something extremely specific, such as what text goes on what part of the screen and the size of the image. But it’s better practice to make it more fluid so that when you want to update your designs, they will still fall within the patent constraints.
  • Multiple features on the screen separated into multiple patents. In Tinder’s example, the company has a patent for the swipe feature and a separate patent for the placement of the circular “like” and “dislike” buttons, even though they appear on the same screen.

You cannot patent:

  • Something purely for function. For example, you can’t patent a digital thermostat reader, but you can patent a digital thermostat reader taking the shape of a circle with rotating clock controls, such as Nest’s design. This means someone else could still design a digital thermostat reader that takes the shape of a triangle.
  • The use of color

Sometimes you can find a company’s hidden plans while looking at patents. I found a couple of blueprints for designs that are not yet in a product (if it ever does at all). Which makes sense, because the insurance for a patent lasting 15 years costs less than one year of auto insurance. To a company, that’s essentially free insurance—and if it finds an opportunity to sue someone for copying its designs, that’s free money. Samsung is probably well aware of this: In 2018, the company held 61,608 active patent families—34% more than second-place Canon, which held 34,905 patent families. Companies will patent any half-decent idea it legally can, with the full expectation that many of those ideas won’t ever make it to production—but might just pay off in litigation.

Apple

Slide to unlock

Photos: Richard Dellinger (left)

We’re so used to seeing the slide-to-unlock pattern that it might feel surprising that such a ubiquitous pattern is locked in (pun intended) by Apple. Back when slide to unlock launched, this was a pretty new idea, so it makes sense that Apple wanted to mark it as theirs, and rightfully so. I’d imagine that this patent covers most horizontal slide-to-unlock designs. Now, this doesn’t mean you can’t design a pattern where you slide to unlock. It just means that if you do, it needs to look significantly different. There was a big legal case where Samsung had to pay Apple $120 million for having a similar design.

Expanded icons

Image: Imran Chaudhri

When tapping on a folder of icons, icons in the folder get displayed in an expanded state below. The double outline on the selected folder and the arrow on the expanded state are both integral design elements to this patent.

iMessage chat bubble shape

When the message is by itself, it has a tail at the end. When there are multiple messages from the same user in quick succession, only the last message displays a tail. Images: Christopher Foss, Jonathan P. Ive, and Matthew Dean Rohrbach (left)

Chat UIs all tend to follow a similar-enough pattern, which is why this patent is particularly important. It looks like Apple decided its message bubbles were an iconic part of the user experience, so make sure you don’t copy their shape with the little tail on the last message, and find a way to differentiate your chat interface.

Touch ID icon

Photos: Chesnot/Getty; Physicx/iStock/Getty Images Plus

This bad boy is off-limits. You can only use the Touch ID icon in situations such as a mockup with a modal asking for your fingerprint ID that uses Apple’s native features. You can’t use this icon on your version of your eCommerce iOS app in the login field, for example. I actually did that once and got called out by my client who knew better, so I learned this one the hard way. To be honest, it’s a great icon—nice and circular, so you aren’t forced to work with that weird long fingerprint shape. Good job, Apple.

Siri voice visualizer

Photos: Gary Butcher, Imran Chaudhri, Alan C. Dye, Christopher Foss, Aurelio Guzman, Jonathan P. Ive, and Britt Nelson; Apple

As voice UIs become more of a design trend, people will surely look toward existing UIs like Siri, Alexa, and Google Assistant for inspiration. Apple took the initiative to patent the visualization when voice is transcribed from human to machine, which takes the appearance of a colorful array of waves.

Facebook

‘Like’ button

Three different animations that exist when you hit ‘like.’ These show up randomly on the same button. Images: Facebook

This patent covers the styling of the “like” button and any animation that comes with it. Pretty straightforward. The patent does not dictate exactly how the “like” button animates, so Facebook could still change the design in the future.

Floating icons in livestreams (legacy)

Vertical bubbling emojis on livestream. Original video has been edited with a white overlay to block out content. View the patent. Images: Kevin Lin, Ryan Lin, and Alex Douglas Cornell; Facebook
Horizontal bubbling emojis on livestream. View the patent. Images: Alex Douglas Cornell; Facebook

Given all the patents around these floating icons, it’s apparent that Facebook put a lot of attention and resources into its livestreaming services. This was also around the time Twitter’s Periscope and Instagram Live were getting popular. When the user selects an icon/emoji on the horizontal panel during a livestream, their emoji has an animated bubbling effect that’s visible to other viewers. This was an interesting project from Facebook, since you could see other people’s reactions in real time as a timeline rather than the traditional ticking number. Facebook has patents for emojis that float up and for emojis that float horizontally. It seems that none of these patents are being used in production today, but Facebook still created patents for all the different versions for testing purposes. The company created a variation of the floating emoji feature that rises from the center when the tap targets are in the center of the screen, plus another variation of the same concept but with the tap targets at the bottom of the screen.

Growing icons when you hold down

The ‘like’ icon in Facebook Messenger grows in size as you hold it down. Images: Benjamin S. Langholz; Facebook

This is a somewhat hidden, nice-to-have feature that adds a sense of personality to Facebook’s brand.

Hover to reveal other emojis

When you hover over the ‘like’ button on a post, additional emojis appear that have their own hover animation. Images: Brandon Walkin; Facebook

This was a really clever solution on Facebook’s part to consolidate the emojis that were present on the UI. Since reactions are such an integral part of the experience, it was important that Facebook emphasized the ability to react. Putting emojis in an expanded state leaves room for other actions, while the opportunity to show the fun and playful side with additional animations remains.

New post on mobile

Facebook’s UI when creating a new post on mobile. Left: a patent wireframe. Center: the app on Android. Right: the app on iOS. Images: Kristina Varshavskaya, Francis Luu, and Jacob Andrew Brill; Facebook

Facebook has patents on simple screens such as the ones shown here, where the user creates a new post. It also has patents for the desktop version, which looks quite different when the user creates a new post. This is a new patent, granted in August 2018. The specific parts highlighted here are the icons and text at the bottom of the screen.

Interaction when liking a post (future)

Animation of user’s profile spinning into view with a ‘like’ reaction expanding next to the user’s icon. Image: Robin Maxime Clediere

This patent was granted in November 2018 for a feature we have yet to see in production. By my guess, when scrolling through the comments for a specific post, an animation of the user’s profile photo spins into view, and their reaction (in this example, the user hit “like”) also expands in size next to the user’s profile. From these patent wireframes, it’s unclear as to whose profile this belongs to. We don’t know if these are reactions from other users that you can see in real time, or if it’s an animation for an action that you took.

Chat and booking with businesses (future)

Facebook’s idea for a chat and booking feature with businesses. Image: Robert Franklin Daniel, Yoram Talmor, Alexandre Lebrun, Laurent Nicolas Landowski, Deniz Demir, Jeremy Harrison Goldberg, and Willy Blandin

I got really excited when I saw this feature, because, to my knowledge, it’s not yet in production. Facebook has the rights to the layout of this design, in which the user can message restaurants and book a reservation. This patent was assigned back in 2017, so it’s unclear if this is still in the works or if Facebook deprioritized it. Either way, it would be interesting to see this feature create competition with other booking apps like OpenTable, Resy, and Yelp.

Microsoft

Windows startup grid

Left: Microsoft’s display screen with user interface. Center: the startup screen for the Windows operating system. Right: the start menu opens when you click on the window icon. Image: Ethan Nelson Ray, Leslie MacNeil, Jonathan Eric Gleasman, and Denise Michele Trabona; Microsoft

This pattern of rectangles became the hallmark of Microsoft’s core brand and is used on all Windows devices. When you click on the start menu on a desktop, you also get a small grid of options. When designing a dashboard, make sure you don’t design something that is also just a bunch of rectangles resembling the layout in this patented wireframe.

Microsoft covered its butt by also patenting the mobile grid layout featured on Windows Phones. The unique part is the proportion and placement of these grids, which is off to the left, so there is space for a navigational icon on the top right. It seems, however, that this design is legacy. The current design (below, far right) has the grid filling the entire screen and can take up multiple columns. But you still couldn’t do a rolled-back version like the original, because this patent is still active.

Grid layout on mobile. The patent is for the design shown on the left; the current UI is shown on the right. Images: Michael I. Guss and Jeffrey C. Fong; Microsoft
Microsoft’s legacy Xbox 360 dashboard. Images: Eddie Mays and Charlie Stabb; Xbox/Microsoft

I found this while looking through Microsoft’s patents and thought it was a really clean design for a gallery. I’ve used Windows for 25 years now, and I can’t recall a time when I’ve seen this layout used. I searched and asked around—turns out it’s the legacy Xbox 360 dashboard. I still wanted to include this because it’s a cool layout, and someone else might end up designing a more modern version without realizing it’s owned by the giant corporation called Microsoft. Yikes. It’s a pretty old design — the patent was granted in 2010 — but you still can’t do something like this until 2024, when the patent is expected to expire.

Snapchat

Memories (legacy)

Left: The patented design. Right: The current-day Memories design. Images: Jack Brody; Snapchat

Remember this? I always thought this design was kind of wack. But I’m throwing it in here because I’m surprised Snapchat still patented a circle among rectangles, which seems like a bit of overkill for this design. The company has since updated its UI to display a more unified grid.

Story transition

Images: William Wu; Snapchat

The transition is subtle, but when you open a snap, it begins as a circle and fills the rectangle. If you pull the snap down slowly, you can see it go from a rectangle back into a circle and return to the user’s profile area.

Samsung

Slide to unlock (legacy)

Left: A patent idea with the two arrows pointing inward on a mobile device. Right: The current design in production. Images: Freddy Anzures, Imran Chaudhri, Jonathan Dascola, Christopher Foss, Chance Graham, Jonathan P. Ive, Christopher Daryl Soli, and Christopher Wilson (left)

Samsung has its own version of swipe to unlock, which is two arrows pointing inward. I wasn’t able to find a mockup of this idea in play; it seems to have moved on to just the text hint for unlock.

Netflix’s main screen with the hover effect on the carousel. Images: Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix

Netflix has really brought the carousel game to the next level and has done a ton of work to nail down the hover experience. When you hover over a show, the image expands, a video clip starts playing, and the essential details are displayed. The hover state also pushes other carousel items outward to make space for the expanded state. This is a very bold design: Netflix decided to strip out all information to avoid bombarding the user. The consequence of this design is that the title of each film or show has to be present and legible on each card. Netflix as a brand has valued the personality of the content over the unity and consistency of title placement. This is a new patent, granted in February 2018.

Expanded carousel item

Clicking on the arrow on hover state reveals an expanded details state. Images: Anna Mary Blaylock, Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix

Because I don’t use Netflix very often, I didn’t realize this existed until I was doing my research. When you hover over an item, a clickable arrow appears. On click, it gives you a larger preview of the show. There are also more tabs with details of the show. This is a nice system that allows for progressive reveals on multiple levels. This patent was granted in March 2018.

Airbnb

Animated/expanded pinned booking overlay

Airbnb’s booking description page, with booking actions on the right. Images: Shane Allen
When the user scrolls through the page, the booking options pin to the right. Additional information at the bottom expands the card. Screenshot: Airbnb

Designers love Airbnb. It has some of the cleanest designs, and the company’s work is an inspiration to all. Airbnb designers were some of the folks who really took the idea of “design and experience first” to heart and got others to follow suit. The company has been leading the industry with design-first thinking, because it’s hard for existing businesses to change their working models, and, well, you can’t exactly get executives to learn about design in a day.

For this patent, it took me a long time to decipher what exactly Airbnb has patented. Airbnb says that when a floating panel is set in this orientation on the screen (to the right of its grid), the company has rights on the animation that occurs when the user scrolls. If you look closely, there is an expanded area — “Great price” — that appears when you scroll. This is a new patent that was granted in November 2018.

Return home page design? (future)

Image: Derek Elijah Bradley, Stephanie Bain, Jason Reyes Mamaril, Katherine Marisa Dill, David Bradley Haynes, Brian Joseph Chesky, Paul Phillip Stafford, James John Cullen, and Alexandra Lubomirsky

This patent is also new, granted in October 2018. The design seems to be rather generic: tabs at the top and some mosaic orientation of images, with the potential for a price label. It’s unclear from the look of this design if it’s a sneak peek at an upcoming experience, a return home page design, or a different page somewhere in the experience that I can’t find. Be careful when replicating a pattern like this since it’s pretty generic.

Tinder

Swipe right, swipe left

When you swipe right on a profile card, you ‘like’ them; if you swipe left, you ‘nope’ them. Users can be matched with each other when both parties swipe right. Images: Sean Rad, Jonathan Badeen, and Christopher Paul Gulczynsk (left); Tinder (right)

You might be able to get away with a swipe right to dislike and swipe left to like, but in the patent diagram, only the cards are solid lines (the “liked” part is a dotted line), which makes me think that any pattern of swiping left and right would be difficult to justify. Either way, if you try something like this and end up getting fingers pointed at you, you might have to fight the hazy lines of legal.

Tap to “like”

Image: Sean Rad, Jonathan Badeen, and Christopher Paul Gulczynski

Sorry, but Tinder made sure you couldn’t do that MVP (which stands for minimum viable product, also understood as “okay, we don’t have time, so let’s scrap the cool stuff and go with the bare-bones”) version.

Tinder social

Images: Sean Rad and Andrew Rudmann (left); Tinder (right)

The look of having multiple profile circles underneath your own, matched with a list of contacts and a button, is reserved for Tinder. This is a pretty specific layout.

Takeaways

It’s fun to learn which UI elements companies deem part of their core brand and which might not be entirely obvious to the casual consumer. More important, as designers, it’s important for us to be well-read on which patterns are off-limits. Obviously, we aren’t looking to directly copy experiences, but having that knowledge in our back pocket can be handy when talking with nondesigners.

Companies like Uber basically have every screen in their experiences patented, and other companies like Google have way too many to even begin to digest. I encourage you to do some research yourself on companies that you’re taking inspiration from.

After doing this work, I learned that patents can be incredibly small, like the shape or placement of an icon. They can also be generic and vague, like a group of rectangles with a certain proportion and orientation. Patents can also be detailed and descriptive, like Netflix’s progressive reveal on its carousel.

So, if you’re a UI/UX product designer trying to make it big, you have to familiarize yourself with existing patents. Just because you don’t see it doesn’t mean it doesn’t exist!

And if you have something truly unique that is a hallmark of your company’s product, consider creating a patent for your company with the help of the legal team. It’s not that costly for the company, especially since a patent lasts 15 years. And hey, nothing says “don’t fuck with me” more than having your own patent.

Thank you, next.

Continue on to part two, The UI/UX Patterns You Literally Can’t Use, where I examine patents from Lyft, Robinhood, Amazon, Google, ByteDance/TikTok, Spotify, and Paypal/Venmo.

Product Designer. Jury at Awwwards. eSports enthusiast. Bonafide nerd. Ketogenic foodie. Sarcastic and crass INTJ.

Sign up for Pattern Matching

A newsletter that puts the week's most compelling tech stories in context, by OneZero senior writer Will Oremus. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The undercurrents of the future. A publication from Medium about technology and people.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store