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

General patent questions

How long does it take to patent a design?

How much does it cost to make a design patent?

How long do design patents last?

How do I find patents?

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

TL;DR for patent rules

Apple

Slide to unlock

Photos: Richard Dellinger (left)

Expanded icons

Image: Imran Chaudhri

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)

Touch ID icon

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

Siri voice visualizer

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

Facebook

‘Like’ button

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

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

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

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

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

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

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

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
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

Snapchat

Memories (legacy)

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

Story transition

Images: William Wu; Snapchat

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)
Netflix’s main screen with the hover effect on the carousel. Images: Navin Prasad, Paul Anastasopoulos, and Cameron Johnson; Netflix

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

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

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

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)

Tap to “like”

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

Tinder social

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

Takeaways

Thank you, next.

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

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