10 UI Tips From Real Life Landing Pages π
A visual thread
A visual thread
1. Iterspace by @ikoichi
Place your CTA button near your social proof.
According to Fitts's law, acquire a target (aka hitting CTA) is a function of the distance (place it at the correct point during the user flow) to and size of the target (make it big & prominent enough).
Place your CTA button near your social proof.
According to Fitts's law, acquire a target (aka hitting CTA) is a function of the distance (place it at the correct point during the user flow) to and size of the target (make it big & prominent enough).
2. InMyBio by @cchana
Don't overdo it with gradients & colors.
Keep it simple and highlight + keep accessible your important elements (CTA, text) not your background.
Before using a gradient (or color) make sure your texts are readable and your CTA stands out.
Don't overdo it with gradients & colors.
Keep it simple and highlight + keep accessible your important elements (CTA, text) not your background.
Before using a gradient (or color) make sure your texts are readable and your CTA stands out.
3. GrowSurf by @ctwtn
The hero section is the most important part of your landing page.
Grab user attention and put visitors into context by showcasing your product with visuals.
Especially when you have a great product like GrowSurf!
The hero section is the most important part of your landing page.
Grab user attention and put visitors into context by showcasing your product with visuals.
Especially when you have a great product like GrowSurf!
4. Hyperjump by @GoodPointDustin
A common mistake is to offer multiple CTA on the same screen.
People don't like to be confused. By using the same CTA copy & target you make their choice easier.
If it's necessary to have multiple actions, use a secondary button.
A common mistake is to offer multiple CTA on the same screen.
People don't like to be confused. By using the same CTA copy & target you make their choice easier.
If it's necessary to have multiple actions, use a secondary button.
5. Minipoll by @rjgilbert
Show the value visually in advance.
It will help visitors understand the real benefit of your product/plan and eventually boost your conversions.
Show the value visually in advance.
It will help visitors understand the real benefit of your product/plan and eventually boost your conversions.
6. LegitCheck by @chddaniel
Sticky filters enhance eCommerce UX because it reduces the searching friction for the users.
Especially, when your product listing is long or/and has infinite scrolling.
Sticky filters enhance eCommerce UX because it reduces the searching friction for the users.
Especially, when your product listing is long or/and has infinite scrolling.
7. Sideby by @wilrahn
Always tell users the reason why they should care about joining the waitlist.
Having an early bird discount is a huge benefit. Thus, make it prominent and highlight it to remove hesitations.
Always tell users the reason why they should care about joining the waitlist.
Having an early bird discount is a huge benefit. Thus, make it prominent and highlight it to remove hesitations.
8. Wonderpath by @dafnihnd
Respect the natural user flow
1. User sees the picker
2. Assumes there's a section below
3. Scrolls down and find out that picker is for the content above
4. Scrolls back up
Move the picker on top instead and remove the friction completely.
Respect the natural user flow
1. User sees the picker
2. Assumes there's a section below
3. Scrolls down and find out that picker is for the content above
4. Scrolls back up
Move the picker on top instead and remove the friction completely.
9. Wotnot by @MakadiaHarsh
Text is great and very important.
But visuals are a better (and quicker) way to introduce people to your product.
The human brain can recognize images in 13 milliseconds (WTF huh?!)
π―Bonus points if you make the chat widget interactive!
Text is great and very important.
But visuals are a better (and quicker) way to introduce people to your product.
The human brain can recognize images in 13 milliseconds (WTF huh?!)
π―Bonus points if you make the chat widget interactive!
10. Haptic by @Brslv
Leverage social proof. Especially above the fold!
Display respected people or/and products in your industry and add public links to back up your claims.
In the specific case, each company can redirect to its public Haptic page!
Leverage social proof. Especially above the fold!
Display respected people or/and products in your industry and add public links to back up your claims.
In the specific case, each company can redirect to its public Haptic page!
11. tl;dv by @thissen_carlo [BONUS]
Be clear on your copies to avoid misunderstandings.
For example, while reviewing the plugin I got confused.
My web camera opened and I saw this message "tl;dv will join soon":
Will a bot join the Meet call? Or a tl;dv team team member? π₯Ά
Be clear on your copies to avoid misunderstandings.
For example, while reviewing the plugin I got confused.
My web camera opened and I saw this message "tl;dv will join soon":
Will a bot join the Meet call? Or a tl;dv team team member? π₯Ά
Do you enjoy these tips?
Join my bi-weekly newsletter where I post similar content and more in-depth landing page teardowns π
learnuidesign.eo.page/jim
Join my bi-weekly newsletter where I post similar content and more in-depth landing page teardowns π
learnuidesign.eo.page/jim
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
