Hick’s Law states that the more choices an individual has, the longer they will take to make a decision. There’s actually a fascinating study on this phenomenon in which people in a supermarket were given more or less varieties of jam to try. In the end, those who had more choices were much less likely to end up buying some jam than the ones that had less variety to choose from. How’s that important for your website? Because you might be able to boost your conversions simply by limiting the choice you give to users. Here are a few examples of what that might look like:
Whether or not there is still such a thing as the fold is part of a heated debate. Some say that because of the multitude of screen sizes these days, the fold doesn’t matter anymore. Others have a different opinion. However, the fact is that even in 2018, people spend 57 percent of their time above the fold with a sharp decline afterwards. 74 percent of their time is dedicated on the first two screenfuls. So, it seems like the fold still matters. For your website that means you need to prioritize your content and use the available space to hook users in so they continue. Here are some tips on how to do that:
It’s probably one of the least debated facts in the web design sphere that speed is important. Research has shown that it influences everything from bounce rate over user satisfaction to conversions and revenue. If your site is slow, visitors will not stick around. Period. Plus, because users care, search engines also do and factor your page loading speed into their rankings. For that reason, it’s paramount that you invest in making your site as fast as possible. How? The articles below will put you on the right track:
You do not need sass or less to specify variables anymore! You can use this powerful feature in pure CSS now, specify, for example, color, and use it in many places without copying its hex code. Let’s take a look at the example, and you will learn how.
Frosted glass is one of the most trendy things in CSS & website UI world last time, but how can you build it? It’s easy, and now I’ll show you how! Let’s take a look at the example, and build frosted glass with us.
When you create an image gallery, you want to mark somehow the hovered image very often. The great idea is to add zoom on hover to accentuate the hovered photo. Let’s take a look at how it works: In the example above, I’ve created a small images gallery and add scale property on hover to make the hovered image bigger than the others. Easy right?
If you ever did graphic design, you probably know how helpful are masks. It’s also possible to use image masks in CSS. Let’s try to make a mask for an image: In the example above, I’ve created a circle gradient mask, but you can also use an SVG graphic as a mask, by adding the URL to the file.
Another type of animation which can be done in CSS is rotation, it’s a little bit more dynamic, and it’s great to add some life to loader element, logo or image in the gallery. Let’s check what we can do with rotation: In the example, we can see a cat rotating four times during one cycle of the animation.
Animations can grab a user’s attention on the website, and this is why it’s used in web design so often. Creating it in CSS makes things much easier, let’s take a closer look at an example animation in CSS: In the code above, I’ve created a small dot that changes the position and opacity every 25% until it will get 100% and then starts once again. It’s also possible to change colors and other properties of the elements.