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
You’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:
- 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.
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.
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.
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.
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.
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.
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)
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.
This is a somewhat hidden, nice-to-have feature that adds a sense of personality to Facebook’s brand.
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.
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.
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.
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.
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.
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.
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.
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 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 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.
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.
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.
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.
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.
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.
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.
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.