Design your website to survive the landing page blink test
-
Upload
denis-duvauchelle -
Category
Self Improvement
-
view
2.417 -
download
0
description
Transcript of Design your website to survive the landing page blink test
![Page 1: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/1.jpg)
Survive the Landing Page Blink Test
Don’t lose users in the first 0.5 seconds!
![Page 3: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/3.jpg)
“There can be as much value in the blink of an eye as in months of rational
analysis.”
― Malcolm Gladwell, Blink: The Power of Thinking without Thinking
![Page 4: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/4.jpg)
Top 20 internet users by country:1. China2. USA3. India4. Japan5. Brazil 6. Russia7. Germany8. Indonesia9. UK10. France11. Nigeria12. Mexico13. Iran14. Korea15. Turkey16. Italy17. Phillippines18. Spain19. Vietnam20. Egypt
The world total…
2,405,518,376 users
![Page 6: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/6.jpg)
For entrepreneurs, this means a huge market of technologically capable
people in a geographically borderless market.
And plenty of solutions, tools and gimmicks to offer them.
![Page 7: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/7.jpg)
This also means that what makes the biggest impact on your potential users will be the first thing they see on your website.
So, how fast do people make up their minds about what they see online?
![Page 8: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/8.jpg)
0.5 seconds
(study conducted at Carleton University Canada, 2006)
![Page 9: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/9.jpg)
Sucks to be you, Web Designer!
![Page 10: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/10.jpg)
Add to that, the number of new websites created every year…
In 2012 alone, that was 51 million.
![Page 11: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/11.jpg)
Image credit
I’m too old for this sh!%
![Page 12: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/12.jpg)
But never fear, there is hope!
A follow-up study by University of Basel in Switzerland in 2012 proved this about website design:
![Page 13: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/13.jpg)
Step 1: Use a Template
![Page 14: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/14.jpg)
Why use a template instead of building my own site?
• Faster• Cheaper• Code is clean (pay for your
template from a reputable site!!!)
• Customizable (usually – or just ask the creator to pop in a feature)
• Already been tested for user optimization
• You can choose one that is cross-browser and cross-device capable from the get-go
Resources for themes:
ThemeforestTemplate MonsterThemetrust
![Page 15: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/15.jpg)
Alternatively… if you know a website you want to “borrow”…
Right click > “View source” and check the links for the CSS or JS tosee if it’s WordPress, Joomla etc. and what the theme name is. Then search for it
on Google.
![Page 16: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/16.jpg)
Pro tip: see what others in your industry are doing and take the best features from them. You’ll need to research them in any
case to get the “prototypical” aspects correct.
![Page 17: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/17.jpg)
It may be tempting to go for an eye-catching and unique design at the start…
![Page 18: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/18.jpg)
…but if your brand is very new, it will drive people away
Image credit
![Page 19: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/19.jpg)
Rule of thumb: keep it simple, clean and clear until you have gained a loyal user base
![Page 20: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/20.jpg)
Check out the hard facts on this infographic by Calvin Sellers:
Human Visual Processing – Why understanding it is Crucial for Web Design
![Page 21: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/21.jpg)
Step 2: User Testing
![Page 22: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/22.jpg)
a) The Coffeeshop Test
Get out on the street with your laptop and smartphone, and ask people to tell you what they think.
Make sure to charge your devices fully before starting!Image credit
![Page 23: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/23.jpg)
b) Heatmapping and metrics
Choose from a range of tools:
-CrazyEgg-Clicktale-Mouseflow-Google In-Page Analytics-Mixpanel
![Page 24: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/24.jpg)
Conversion and retention combined are the Holy Grail
With all of the information interpreted from mapping and analytics, from coffeeshops to
templates, you will be able to refine your website to optimal user retention and higher
conversion rates.
Good luck!
![Page 25: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/25.jpg)
Hopefully you will end up with a pretty website like Squarespace…
![Page 26: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/26.jpg)
…and not this eyesore!
![Page 27: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/27.jpg)
Find the original article that inspired this Slideshare on The Next Web:
“Don’t lose users for eternity in the first five seconds: how to survive the blink test”
![Page 28: Design your website to survive the landing page blink test](https://reader036.fdocuments.in/reader036/viewer/2022081518/554a53ceb4c905522f8b4a6a/html5/thumbnails/28.jpg)
Got questions? Click on an icon!