![\"Oberlo](\"https:\/\/lh4.googleusercontent.com\/g6jl0Ay7h4sIUrv1VM9xseST76MxqRRgfERvcXpotL8RjXZlk_NN0c85Kz87XXxui3Uin6HzgYZHiHVRDW-KgUdP-54Y-rG-rOFV7Fdl2TlAQ9El2qFBYBti5Y9pZ_Ku_cGwRJcU\")
The harder it is for someone to understand your website, the harder it will be for you to make them buy.<\/p>\n\n\n\n
Oberlo does a great job at explaining what they do. Using only 16 words they have mapped the complete journey you have to take before you start selling. Truth be told, this is oversimplified. But their app is not about design or traffic generation, they simply help you outsource and add products to your Shopify store.<\/p>\n\n\n\n
People have a really small attention span. If they don\u2019t find what they are looking for in just a few seconds, they just bounce. If your traffic is coming from SEO, imagine that your competitors are a back button click away. You should always strive to synthesize your content in bite size information.<\/p>\n\n\n\n
2. Make it familiar<\/h3>\n\n\n\n![\"Mcdonalds](\"https:\/\/lh5.googleusercontent.com\/n5R5Br4Zd_i0beb5xpvtrSBJrrLjCvzQFDtKChPx3emfVTCQwPkgCfwiXSzU4Wu00nofQRnBFjvSjqg-nM4U_4T8aw266Y2PNE6HtRr4fWOcrEj_VKBYeQanAzhe_ukwD8wu6VWy\")
Hamburger menu. Literally. Source<\/a><\/figcaption><\/figure><\/div>\n\n\n\n\u201cThe hamburger button, so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface.\u201d<\/em><\/p> Wikipedia<\/em> <\/cite><\/blockquote>\n\n\n\nWhen you see it, you know what it does. If you are not a visionary agency (like this one<\/a>) then your website should have the same elements as all the others in your niche.<\/p>\n\n\n\nThis is a really sensitive field. Don\u2019t copy the whole design of another website, but make sure that your navigation elements are placed in a familiar way.<\/p>\n\n\n\n
The greatest example is the hamburger menu. Everyone knows what it is and what it does. It can have different shapes, sizes, colors or text.<\/p>\n\n\n\n
![\"Hamburger](\"https:\/\/lh4.googleusercontent.com\/TCpmSAFJ3Hrjlxb33q3cS65pzNkACiKyHMN6Tkv68qU7RSW-e1ry0F8dtYZpUfv5USABLp6y0_bpPqpo7xgRgyYGG7fMWLfSI9RZkz0Rc9wg-QhLLtof0QkKhp4uIj7JvLF_hj0A\")
Source: https:\/\/codepen.io\/mblode\/pen\/evjfn<\/a> <\/figcaption><\/figure><\/div>\n\n\n\nThese are just 13 variations of the same menu (see how it works<\/a>). If the initial design is not different, their animation is. Experiment with whatever you like, but always try and stick with the familiar.<\/p>\n\n\n\n3. Make it intuitive<\/h3>\n\n\n\n![\"Crazyegg](\"https:\/\/lh5.googleusercontent.com\/uJD4VQcpzgxWf8nDxhMShcIz3LPwZpj4r0UCsp14qx36SqX_Q9ASTS7P1MPNqNpCPbm-84LVPE0ZmG7x1ikB8eI5KrndfTyQSslU8uzWokYocjqjGfk41NO9zS1A6myoSjeZaOLg\")
Source crazyegg.com<\/a> <\/figcaption><\/figure><\/div>\n\n\n\nOr just plain easy. Providing guidance to your users can pay out big time. CrazyEgg <\/a>does a great job at pointing the user in the right direction, literally. <\/p>\n\n\n\nAnother great example is freedomfastlane.com<\/a>:<\/p>\n\n\n\n![\"Freedom](\"https:\/\/lh4.googleusercontent.com\/dd4PNydekvu-TBwn3jyj0LeALhnmCvKpxhyGeh9vu0AOxyfQqvhq9RUTBX48Ew9aAeYDpsCth0h0YwGt2dVhJNhD_oRuih9XmcQYux4NNiuhYG16og3tREUWQ5zU2aRIi0POkRiz\")
This guy is looking straight at the header <\/figcaption><\/figure><\/div>\n\n\n\nThis technique is very popular as it relies on human psychology.<\/p>\n\n\n\n
It almost certainly happened to you before. You were just walking down the street when you notice someone looking at the sky. Your instincts kicked in and the next thing you did was to focus your attention at the sky too. Maybe for just a second, but that was enough.<\/p>\n\n\n\n
Visual cues are an important part of design. They can be really powerful when combined with good copy. Speaking of which:<\/p>\n\n\n\n
4. Copy is key<\/h3>\n\n\n\n![\"Sendinblue](\"https:\/\/lh4.googleusercontent.com\/Dlc2KP-BipwF-5QEhehuaQqk4g4VUAAVaJpxj6SYiSrkqIk8FkSASRWFBLNXnSIGmJSSmVJaC1QwhngVaxQZWhofR2THF10GGlLESal8vh1yzxIvFlElaL-AYEc5ZWbJJITXRONq\")
Source Sendinblue.com<\/a> <\/figcaption><\/figure><\/div>\n\n\n\nImages, videos, CTAs or pagination are nothing without good copy. <\/p>\n\n\n\n
Your copy should be short and sweet. Moreover and most importantly: you should be consistent. Sendinblue did a great job at capturing my attention with their header: \u201cPut the pedal to the metal on your marketing\u201d. This creates a visual image in users minds. To further emphasize this they have added a car as the icon, although they have nothing to do with cars at all. The last piece of this great banner is the actual CTAL \u201cTake a free test drive\u201d. <\/p>\n\n\n\n
The whole section is consistent, creates a visual image and takes advantage of power words<\/a>.<\/p>\n\n\n\n![\"Zoomsphere](\"https:\/\/lh6.googleusercontent.com\/LcwjGid7nitJt6VWNJfXLl9mRFEzCmQgwjrun6IKrvb22sEMZwmzjMJ6wLO7Z0TM-5nzGP5Q4Szm67ypNjV7Q-VOV0YcitypV7elfqypWn8dJgp7aD8xziNwHq1dSCc1xAKsZb1S\")
It takes a second to understand what Zoomsphere<\/a> does <\/figcaption><\/figure><\/div>\n\n\n\nYou don\u2019t necessarily have to use images to explain what you do (like Oberlo). It\u2019s the first time I heard of ZoomSphere, but I knew in a second what they do. <\/p>\n\n\n\n
Their header might seem too simplistic, it really is. But simple is way better than complex (in the vast majority of cases). Try to explain what you do in a few simple words. In case of ecommerce websites, use this space on your website to tell users why they should buy from you.<\/p>\n\n\n\n
5. Forms design<\/h3>\n\n\n\n![\"Bank](\"https:\/\/lh5.googleusercontent.com\/8WrsKT9PKdMCazQ1o8BpDfa-TICpRiUuW72HaTg4VpnqUWaXPwY5oFCGazbnlO6tULxtFnyABi-IWlbHM07q2eXlDXEVxZrCVDErvWNhoEfqtMcECj-aghIkK6Cj-FigOOxn2IWx\")
Bank of America<\/a> new account form <\/figcaption><\/figure><\/div>\n\n\n\nWhen you want to open a bank account you WANT to give all of your information to the bank. Especially when applying online. In this case a long form can actually boost conversions. If they only asked for your name and email then you would know something is wrong. <\/p>\n\n\n\n
Long forms are not conversion killers in this case. The same applies to ecommerce websites, they have to know your address so they can deliver your purchase.<\/p>\n\n\n\n
But what if you have a Saas?<\/p>\n\n\n\n
![\"Buffer](\"https:\/\/lh3.googleusercontent.com\/UE0FGXIklEXB5doWMfuVnGUe1PTVNGwv6tBWGO7lfm9m5SeDXiDoWpv30UKUvEkAUHQzTxFlsZC-Fbbld93z3GSIc0r6Uc7MJHvfKajJSSNlbxzeZ4C7vUp_kIirLiHdLR4-MAqb\")
Buffer<\/a> needs just 2 pieces of information to get you started <\/figcaption><\/figure><\/div>\n\n\n\nEven though they have a paid service, Buffer only asks for 2 pieces of information to get you started. This reduces friction and streamlines the signup process. If they were to ask for your address, phone number or your credit card, would you trust them? No way.<\/p>\n\n\n\n
When designing your own forms, you should ask for the bare minimum information from your prospects. If you are a bank, you might need 40 fields. If you are a Saas, you can just add social login and thus get rid of a form altogether.<\/p>\n\n\n\n
There isn\u2019t a one for all solution, so always adapt your forms to your business.<\/p>\n\n\n\n
6. Speeeeeeed<\/h3>\n\n\n\n![\"Score](\"https:\/\/lh6.googleusercontent.com\/jJBdQcal9e2YjhP9aMnbtPYkX_3W6GtU_2UqKd50NQ1-LA4KxPjK0OyUYMviwjHSmBOJFkGuJIwAIqZ8w5aUnGrTqthnqMowW1x3d1vD5HaMKC9IVukPetBSXehJ886sul_REjMv\")
Source<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n
\u201cThe hamburger button, so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface.\u201d<\/em><\/p> Wikipedia<\/em> <\/cite><\/blockquote>\n\n\n\n
When you see it, you know what it does. If you are not a visionary agency (like this one<\/a>) then your website should have the same elements as all the others in your niche.<\/p>\n\n\n\n
This is a really sensitive field. Don\u2019t copy the whole design of another website, but make sure that your navigation elements are placed in a familiar way.<\/p>\n\n\n\n
The greatest example is the hamburger menu. Everyone knows what it is and what it does. It can have different shapes, sizes, colors or text.<\/p>\n\n\n\n
Source: https:\/\/codepen.io\/mblode\/pen\/evjfn<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n These are just 13 variations of the same menu (see how it works<\/a>). If the initial design is not different, their animation is. Experiment with whatever you like, but always try and stick with the familiar.<\/p>\n\n\n\n
3. Make it intuitive<\/h3>\n\n\n\n
Source crazyegg.com<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n Or just plain easy. Providing guidance to your users can pay out big time. CrazyEgg <\/a>does a great job at pointing the user in the right direction, literally. <\/p>\n\n\n\n
Another great example is freedomfastlane.com<\/a>:<\/p>\n\n\n\n
This guy is looking straight at the header <\/figcaption><\/figure><\/div>\n\n\n\n This technique is very popular as it relies on human psychology.<\/p>\n\n\n\n
It almost certainly happened to you before. You were just walking down the street when you notice someone looking at the sky. Your instincts kicked in and the next thing you did was to focus your attention at the sky too. Maybe for just a second, but that was enough.<\/p>\n\n\n\n
Visual cues are an important part of design. They can be really powerful when combined with good copy. Speaking of which:<\/p>\n\n\n\n
4. Copy is key<\/h3>\n\n\n\n
Source Sendinblue.com<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n Images, videos, CTAs or pagination are nothing without good copy. <\/p>\n\n\n\n
Your copy should be short and sweet. Moreover and most importantly: you should be consistent. Sendinblue did a great job at capturing my attention with their header: \u201cPut the pedal to the metal on your marketing\u201d. This creates a visual image in users minds. To further emphasize this they have added a car as the icon, although they have nothing to do with cars at all. The last piece of this great banner is the actual CTAL \u201cTake a free test drive\u201d. <\/p>\n\n\n\n
The whole section is consistent, creates a visual image and takes advantage of power words<\/a>.<\/p>\n\n\n\n
It takes a second to understand what Zoomsphere<\/a> does <\/figcaption><\/figure><\/div>\n\n\n\n You don\u2019t necessarily have to use images to explain what you do (like Oberlo). It\u2019s the first time I heard of ZoomSphere, but I knew in a second what they do. <\/p>\n\n\n\n
Their header might seem too simplistic, it really is. But simple is way better than complex (in the vast majority of cases). Try to explain what you do in a few simple words. In case of ecommerce websites, use this space on your website to tell users why they should buy from you.<\/p>\n\n\n\n
5. Forms design<\/h3>\n\n\n\n
Bank of America<\/a> new account form <\/figcaption><\/figure><\/div>\n\n\n\n When you want to open a bank account you WANT to give all of your information to the bank. Especially when applying online. In this case a long form can actually boost conversions. If they only asked for your name and email then you would know something is wrong. <\/p>\n\n\n\n
Long forms are not conversion killers in this case. The same applies to ecommerce websites, they have to know your address so they can deliver your purchase.<\/p>\n\n\n\n
But what if you have a Saas?<\/p>\n\n\n\n
Buffer<\/a> needs just 2 pieces of information to get you started <\/figcaption><\/figure><\/div>\n\n\n\n Even though they have a paid service, Buffer only asks for 2 pieces of information to get you started. This reduces friction and streamlines the signup process. If they were to ask for your address, phone number or your credit card, would you trust them? No way.<\/p>\n\n\n\n
When designing your own forms, you should ask for the bare minimum information from your prospects. If you are a bank, you might need 40 fields. If you are a Saas, you can just add social login and thus get rid of a form altogether.<\/p>\n\n\n\n
There isn\u2019t a one for all solution, so always adapt your forms to your business.<\/p>\n\n\n\n
6. Speeeeeeed<\/h3>\n\n\n\n
Source<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n