UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies
Have you ever been in a situation where a product manager comes up to you with a seemingly new and fantastic product idea, that sounds something like, “…so then you could view the details, and swipe right if you like it, and swipe left if you don’t, kind of like Tinder but for [your product]!” Yeah, no. You literally cannot design something like that, because Tinder has a patent on the interaction of swiping right to like and left to dislike. Okok fine, it is the hallmark of their entire app, so then just get rid of the swipe feature and we’ll make an MVP solution of just having a like and dislike button at the bottom. Tough luck kid, they have a patent on that too.
As designers we always go looking at how others companies solve similar design challenges and use them as inspiration for ideas. It’s a fun (or sometimes not so fun) process that will even heed others to criticize you for not doing enough research if you don’t look at competitor solutions. It is then also important to understand which designs are off limits for you to take inspiration from. Companies take a lot of time to create and think of product defining UI elements, which makes sense that they don’t want others copying something they spent a lot of energy to create. These UI features can be as detailed as Apple’s iPhone X home-less button navigation, which they filed for a giant patent and it’s still in review, or as small as Facebook’s like icon. The top UI/UX patents out there are owned by Microsoft, Samsung, and Apple.
1–2 years for UIs, it’s like 3–5 years for other things.
The overall cost to obtain a design patent can range between $2000 and $3000. Maintenance fees are not required for design patents. So if you’re a big company, this is pretty cheap.
Seems to be about 15 years.
You can conveniently find them on Google Patents. They include everything and not just UI/UX stuff. You can search by type, keywords, or company since patents are all public material. If you ever have the time it’s a good idea to look through and familiarize yourself on all the different patents there are in the world.
Look specifically at the solid lines. Those are the parts that are actually patented. The dotted lines are just supporting details to let you know what environment it appears in, like if it’s mobile or desktop. They can also be contextual which helps you know that something is scrolled, or if it specifically appears in a messaging app. In the title, it will also tell you if it’s an animation or a graphical interface, but unfortunately, most of it the time it doesn’t have any description of how the thing is supposed to work. So sometimes there is a bit of guessing involved.
Sometimes you can find hidden plans for companies while looking at patents. I found a couple of blueprints for designs that are not yet in the product (if they ever make it at all).
We’re so used to seeing the slide to unlock pattern now that it might feel surprising that such a ubiquitous pattern is locked-in (pun intended) by Apple. Back then this was a pretty new idea, so it makes sense that they wanted to mark it theirs, rightfully so. I’d imagine that this patent covers most horizontal slide to unlock designs. Now, this doesn’t mean that you can’t design a pattern where you slide to unlock. It just means that if you do, it can’t look similar to Apple’s. There was a big case where Samsung lost $120 million to Apple 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 as well as the arrow on the expanded state are both integral design elements to this patent.
Chat UIs tend to all follow a similar enough pattern which is why this one is particularly important. Looks like Apple decided that their message bubbles were an iconic part of their 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 messages.
Yup. This bad boy is off limits. Which means that you can only use it in situations like a mockup with a modal asking for your fingerprint ID which still uses Apple’s native features. You could not use this icon on your version of your eCommerce iOS app in the login field, for example. Great icon tbh, nice and circular so you weren’t forced to work with that weird long fingerprint shape. Good job Apple.
In the patent itself it wasn’t descriptive of where these lines were being used, but from a quick guess I’d hypothesize it’s referencing the voice visualizations.
The styling of the like button and any animation that comes with it. Pretty straight forward. The patent does not dictate exactly how the like button animates, so in the future, they could still change the design.
Looks like Facebook has been putting a lot of attention into their live streaming services. When the user selects an icon/emoji on the horizontal panel during a live stream, their emoji will have an animated bubbling effect that can be seen by other viewers. This was an interesting project from Facebook, since you could visually see other people’s reaction in real time as a timeline compared to the traditional number. I found a lot of patents around the UI for those, but these two were the most noteworthy. They have a patent for one where the emojis float up, and another for emojis that float horizontally. It seems that none of these are being used in production today but they still created patents for all the different versions for testing. Other variations they created with the floating emoji idea came from the center.
Somewhat of a hidden, nice-to-have feature which adds a sense of personality to the 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 they emphasize the ability to react. By putting them in an expanded state, there’s room for other actions, with still the opportunity to show the fun and playful side with additional animations.
Facebook has patents on simple screens such as this where the user creates a new post. They also have patents for the desktop version which looks quite different when the user creates a new post. This is a very new patent as of August 2018. The specific parts that are highlighted here are the icons and text at the bottom of the screen.
This patent was granted at the end of last year 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, there is an animation where the user’s profile spins into view, and the reaction that they gave (in this example the user hit like), will also expand in size next to the user’s profile. From these patent wireframes, it’s unclear as to who’s 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 because to my knowledge this is a feature that is not yet in production. They have the rights to the layout of the design here, where the user could message restaurants and place reservation/bookings. This patent was assigned back in 2017, so it’s unclear if this is still in the works or if they deprioritized it. Either way, it would be interesting to see it create competition with other booking apps like Opentable, Resy, and Yelp.
It’s pretty insane to think that Microsoft holds the most number of patents when it comes to interfaces. This pattern of just a bunch of rectangles became the hallmark to Microsoft’s core brand, and this pattern is used on all 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 that resembles the layout in their patent wireframe.
Just in case you weren’t sure, they also covered their butts by patenting the mobile grid layout. The unique part is the proportion and placement of these grids, where it’s off to the left so that there is space for a navigational icon on the top right. It seems though that this design is legacy. The current design (on right) is where the grid fills the entire screen and can take up multiple columns. But you still couldn’t do a rolled back version like this 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 still can’t seem to recall a time when I’ve actually seen this layout used. I searched and asked around and people weren’t able to find anything either. I wanted to still include this because I think it’s a cool layout that someone else might end up designing for and not realize it’s owned by the corporation with the most number of patents. Yikes. It’s a pretty old design issued in 2008, but you still can’t do something like this until 2024 which is when the patent is expected to expire.
Remember this? Yeah I always thought this design was kind of whack. But I’m throwing it in here because I’m surprised they still patented a circle among rectangles, which seems a bit overkill for this design. They have since updated their UI to display more of a unified grid.
The transition is subtle, but when you open up a snap it goes from 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 their own version of the swipe to unlock, which are two arrows pointing inward. I wasn’t able to find a mockup of this idea in play. It seems that they’ve moved on to just the text hint for unlock.
Netflix has really brought back the carousel game to the next level, and they’ve done a ton of work to nail down their hover experience. When you hover over a show it expands, a video clip starts playing, and you can see essential details. The hover state also pushes other carousel items out to make space for the expanded state. This is a very bold design in that they decided to strip out all information to not bombard the user. The consequence of this design is that the title of each film has to be present and legible on each card. The interesting thing is Netflix as a brand has valued the personality of the film over the unity and consistency of title placement. This was a very new patent granted only a year ago in March of 2018.
So because I don’t use a ton of Netflix, I didn’t actually realize this existed until I was doing my research. When you hover over an item there is actually an arrow that you can click on below. On click, it gives you a larger preview of the show. There’s also more tabs for you to view details of the show. This is a really nice system they have of progressive reveal on multiple levels. This patent was also granted in March 2018.
The patent in this graphic is actually the play button and how it shows the duration of the clip before moving to the next clip. The clip duration moves in a clockwise direction and corresponds to the selected tab, shown underneath the text. This is a newly assigned patent but the current state has a different view for me, or I wasn’t able to find where this appears.
Everyone loooooooooves airbnb, they have some of the cleanest designs and is an inspiration to all. I mean how can you not? They were some of the folks who really put the “design and experience first” to heart, and got others to follow suit. The reason why they’ve been leading the industry with design first thinking is 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 :^).
I’m not going to lie, this one took me a long time to decipher what it was exactly they have a patent on. So they’re saying when a floating panel set in this orientation on the screen (to the right of their grid), they have 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 an extremely new patent that was granted just a couple of months ago in November, 2018.
This one is also very new, granted in October of 2018. The design seems to be pretty generic with 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 for 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.
I’m not sure if I’ve seen this yet either, but they an idea where a room listing would be represented in a card layout, and there would be a price label on the left and the host’s profile image on the right.
So this got me thinking, 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 lets me think that any pattern of swiping left and right would be difficult to justify. Either way, if you try something like this you might have to fight the hazy lines of legal.
Sorry, but they made sure you couldn’t do that MVP 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 pretty fun to learn about what UI elements companies deem as their part of their core brand, which sometimes may not be entirely obvious to the casual consumer. More importantly though, 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 back pocket knowledge can be handy too when talking with other non-designers.
Companies like Uber basically has every screen in their experience 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 are taking inspiration from.
After doing this research I learned that patents can be super small, like the shape of an icon or the placement of it. It can also be very generic and vague, like just a group of rectangles with a certain proportion and orientation. It can also be really detailed and descript, like Netflix’s progressive reveal on its carousel. Most of the time companies will try to write the patent in a loose way so that it can accommodate future designs. It seems that they will try to create rights for the design before they actually use it in production to prevent others from stealing the designs. At the same time, even if a pattern isn’t currently being used, that doesn’t mean that you can still design something like it if the patent is active. Sometimes companies will patent for the sake of patenting, without ever using the design. So if you’re a UI/UX/Product designer trying to make it big, you gotta familiarize yourself with existing patents. Just because you don’t see it doesn’t mean it doesn’t exist!
And lastly, if you have something really unique, consider creating a patent for your company with the help of the legal team. It’s not that costly for the company especially since it lasts 15 years, and hey, nothing says “don’t fuck with me” more than having your own patent.
UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies
Research & References of UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies|A&C Accounting And Tax Services
Source
0 Comments