World's Most Powerful UX Laws: 6 Lessons from Spotify, Airbnb, Duolingo, and more
We reviewed the biggest apps in the world - here's what we learnt.
👋 Hello! Welcome to this week’s ADPList’s Newsletter; 🔒 subscriber-only edition 🔒 weekly advice column. Each Tuesday, we tackle design, building products, and accelerating careers. We’re looking for sponsors! If you’re interested to sponsor our newsletter, let’s chat!
Today’s newsletter is brought to you by PixCap
Mix & Match 10,000+ 3D illustrations and use AI to generate amazing outputs in different styles! Create modern graphic designs, ads, and UI elements with Pixcap’s web editor and AI stylist :)
Thanks for being an ADPList’s Newsletter Sponsor! 🙏
World's Most Powerful UX Laws: 6 Lessons from Spotify, Airbnb, Duolingo, and more.
Believe it or not, I acquired my design skills by utilizing the apps I use on a daily basis, without relying on platforms like Dribbble or Behance (surprise surprise 👀). We wanted to share this knowledge with you, so this week’s newsletter is to explain how prominent apps Spotify, YouTube, Medium, Twitter, Pinterest, Netflix, Uber, Instagram and more, adhere to the fundamental principles of UX that you may have overlooked or not yet consolidated.
We will explore the 6 Laws of UX implemented by the apps I personally use. I assure you that you will find them captivating, as it will enhance your design abilities and make you a 1% better designer today, guaranteed.
TLDR;
The Aesthetic-Usability Effect
Law of Prägnanz (Spotify)
The Fitts Law (Airbnb)
Peak-End Rule & Serial Position Effect (Duolingo)
Jacob’s Law (TikTok)
Von Restorff Effect (Spotify, Evernote)
1. The Aesthetic-Usability Effect
Users often perceive aesthetically pleasing design as design that’s more usable.
Humans love beauty, there is no doubt about that and this applies in design where user love to use eye-appealing design, that in design terms we say aesthetically pleasing design. while using an aesthetically great design users forgive minor mistakes and also love to use it (yes, UX = UI 🏴☠️).
By using this UX law you can make your own design much more user-friendly and it also helps in better review of the app which in return helps you to grow.
But, only aesthetics don’t matter in long run, in the short-run users might happily ask for the help but after some time, they’ll get frustrated and stop using your app.
🏴☠️ Key takeaway
An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually work better.
People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing.
Visually pleasing design can mask usability problems and prevent issues from being discovered during usability testing.
2. Law of Prägnanz
People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of user.
Making things simpler is not a new thing, we all love simpler things in real life. People don’t like complex things — we like simple and straight things like the simple interface, simple icons, simple colors, that are usable.
If you put complex things the brain translates those things into the simplest version.
An example from Spotify, the first (right) use little complex icons which can overwhelm users. They updated their tab bar with new icons, made things simpler by adding various options inside one like browse and search option (old) to search (new).
🏴☠️ Key takeaways
The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.
Research confirms that people are better able to visually process and remember simple figures than complex figures.
3. The Fitts Law
The time to acquire a target is a function of the distance to and size of the target.
Did you know? Why the “buy now, book now, shop now, add to cart and, shop now” buttons are bigger than usual buttons in every app? It is Fitts Law.
Fitts Law explains that the time requires to get something is directly relational to the distance and the size of the element. If the target or button is small the user will take time to take action which might change the mood of the user and can result in the loss of the target.
An example, Airbnb uses this law by placing the button too close to the thumb so that the user can easily tap on the button without taking too much time.
Uber uses it, Amazon uses it, Nike uses it, Lyft uses it, and many of them use it in their own way. You can use different colors, sizes, and icons to make the button stand out and let your user tap it as easily as possible.
🏴☠️ Key takeaways
Touch targets should be large enough for users to accurately select them.
Touch targets should have ample spacing between them.
Touch targets should be placed in areas of an interface that allow them to be easily acquired.
4. Peak-End Rule & Serial Position Effect
Peak-End Rule: People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Serial Position Effect: Users have a propensity to best remember the first and last items in a series.
These Laws explain two different things but apps use them together. They explain that the user judges anything according to their peaks and ends not by their averages, user best remember first and last things (quote this)!
Many apps use these laws by adding important stuff inside the first and last screens and adding not so important but useful stuff in middle.
An example: Duolingo uses the cool mascot and illustrations for making the starting and ending awesome. Duolingo also adds illustrations inside the task to make you engaging. You can also use something like that or a thing of your own which your audience would love to see.
🏴☠️ Key takeaways
Pay close attention to the most intense points and the final moments (the “end”) of the user journey.
Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end-user.
Remember that people recall negative experiences more vividly than positive ones
Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory.
Positioning key actions on the far left and right within elements such as navigation can increase memorization.
5. Jacob’s Law
Users spend most of their time on other apps. This means that users prefer your app to work the same way as all the other apps they already know.
All the apps I used or you’re using have many (not one) things common in them. it can be tab bars, icons, styling, typography, etc. these are not coincidences they’re planned. As the user spends most of the time on other apps therefore make your app look similar to it (in terms of basics) would mean ease of use.
(Threads is the ultimate “Jacob’s Law” by Meta if you know 👀).
Pinterest, TikTok, Instagram have their tab bar kind of similar as they are social media platforms and any user who spends most of the time on Instagram can easily use the tab bar on TikTok and Pinterest because the home, search, notification, profile tab are similar.
🏴☠️ Key takeaways
Users will transfer expectations they have built around one familiar product to another that appears similar.
By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.
When making changes, minimize discord by empowering users to continue using a familiar version for a limited time.
6. Von Restorff Effect
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Different things stand out — this law focuses you on the thing that making the important thing different might help you in better results or outcomes.
An example: Spotify, Evernote, Amazong and others, highlight their own signup buttons more than social logins. This makes the user tap on the button which is more highlighted.
You can use this to make the things stand out from the crowd to get the user's attraction or more.
🏴☠️ Key takeaways
Make important information or key actions visually distinctive.
Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads.
Don’t exclude those with a color vision deficiency or low vision by relying exclusively on color to communicate contrast.
Carefully consider users with motion sensitivity when using motion to communicate contrast.
Credits to DevsDay article for this inspiration.
That’s all for this week, fellow subscribers! Share this forward :) Till next week, have a productive week! 🙏 Here’s to building, and designing the best products.
🔔 Learn from 16K+ Expert Mentors this week
If you’re serious about upskilling, start learning from ADPList mentors who are verified world’s best experts in Design, Product Management, Software Dev, Marketing, Leadership, and more. Learn alongside your peers and the community.
ADPList gives every person the freedom to grow together - by opening doors to mentors worldwide. Join over 195K+ learners and meet your mentor today. We’re on a mission to give the world the freedom to grow together.
If you find this post valuable, check out our other posts:
Written with 🖤,
Felix
Awesome article, Felix! Thank you
Does these apply to web too?
I see only mobile here. Thanks for the article. Awesome.