5 reasons why flashy websites destroy the user experience!

Well.. in this day and age the web is filled with a lot of so-called flashy websites. Websites that are created by designers and developers that try to aim for an award-winning website. They are filled with the latest CSS & JavaScripts tricks. Why? To show off their skills to the outside world and make an award-winning website. These are usually the kind of websites that you find on platforms like Dribbble and Behance, but also on award websites like The Webby’s, Awwwards, Red Dot Awards etc.  The websites on these platforms set the norm for web design in the industry. But is this the right attitude when all these websites are focused on showing off skills, when they have forgotten that the user is the most important part of the website?

Of course designers and developers are not purposely trying to exclude people in their products. But when designers and developers don’t know what is causing exclusion for some people, bad products are created. So what are the main issues you will encounter on these flashy websites that are destroying the user experience? And even better, how can you make sure you include all people?

Mind blowing, flashing animation is a major issue with a lot of websites these days. Designers and developers do not take into account what effect animation has on their visitors; it can be harmful to some people. Did you know that a website that flashes or flickers can trigger seizures for some people? So not only will those people leave your website immediately if they notice heavy animations are used, it can actually be harmful for them. People can get physically dizzy or nauseous by some animations.

But it’s not forbidden to use animation all together. You can actually use animation in your design. Micro animations can even enhance the experience for the user on the website. It can help them understand certain interactions. But there are a few things to take into account when designing animations on a website.

When designing an animation, make sure that your user can stop the animation if it lasts for more than 5 seconds, by integrating a clearly visible play/pause button in the design. Also, give the button enough colour contrast.

If you want to give the user control, be careful of using autoplay in animations longer than 5 seconds. If animations autoplay, the user loses some of this control. Something will happen automatically beyond their control.
Small micro animations that have a duration of 5 seconds or less can play automatically, but please make sure that there isn’t any sound involved with the animation. The sound in the animation can interfere with the sound that is made by a screen reader if used, which makes it hard for the user to understand what is going on.

Some people can’t see a screen, because they’re blind. These people will make use of a screen reader, which is a device that reads a website aloud. Therefore, animations will also not be displayed for them. So don’t put very important content in your animation and always use a good alt-text.

Sliders are the evil of the web. They don’t convert. Research (NL Edu stats by @erunyon) shows that only 1% of people click on a slider, of which 98% is the first slide. So sliders are a real killer for your conversion. And besides that; they are hard to navigate, they sometimes play automatically which is annoying or are used to display important information. Displaying important information in a slider isn’t a good idea due to the fact people don’t interact with them much.

Websites that use a lot of animation are usually websites that use a lot of JavaScript. For instance; a big animation that will play in a continuous loop will need lots of JavaScript and CSS, which causes the fan of your computer to run overtime. This is pretty bad for the performance of a website. And did you know that a website that performs badly can actually be bad for the environment as well? A slow website takes up a lot of energy usage.

Don’t be that kid that uses experimental navigation just for the sake of ‘creating something new’. Navigation is not meant to be weird or ‘different’. It is meant to navigate the contents of a website. When you change navigation in such a way that it isn’t consistent anymore, your user may have a hard time finding what they need on your website.

When making changes to the conventional way of using navigation, ask yourself: are you making it easier for the user to navigate? Or are you changing it because you like the style better or you want to be ‘experimental’? Please think of your users and their needs first.

On the web you see many mouse-over effects that only change by colour when hovering on the object. The problem with only using a colour-changing mouse-over effect is that some people might not see the mouse-over effect at all. People that are colour blind for instance may not experience colour in the same way that you do. So when you only use ‘colour’ to explain something to your user, it might not be that evident to all users. Please use ‘form’ as well when you want to explain something. By using form (as well as colour, it doesn’t mean that you can’t use colour at all) you are making sure that the element you are trying to explain is understood by your users. And also please design a clear active and focus state so that users understand which part of the website is active.

A big pain in the eye (quite literally) is using colour with a very high contrast. So now you may think… what the f*, you’re telling me to USE contrasting colours and now you don’t? And that’s technically somewhat correct. It is important not to use colours that have very HIGH contrast, because it may cause a strain on the eyes.

For example; pure black #000000 on an pure white #FFFFFF background might be hard for some people to watch. Text can get blurred by using too much contrast. It may be better to use less contrasting colours, for example: #282828 on a #FBFBFB background might be a bit easier on the eyes.

Also; did you know that people with autism can be extra sensitive to bright colours? Some bright and really contrasting colours may pass the WCAG AA colour contrast test, but can be actually hindering some people. You can check the contrast ratio of your colours in WebAim Contrast Checker, a simple browser based colour contrast checker.

“Hey, please accept the cookies to view this website in its best potential. And also, can you sign up for our newsletter? And maybe you can follow us on social media! While you’re at it; can you please share this page as well?” Sometimes websites are filled with these kinds of nonsense pop-ups, also called modals. People need to be able to read the content without getting annoyed by all the things that pop-up on the screen. Please be mindful of the pop-ups/modals you use in your design, they really disturb the natural flow of people using your website.

To summarise the points described above; they all don’t keep in mind their end user. When designing or building a website it is essential to base the decisions you make on the end user, not your personal goals in achieving fancy web design or to develop your coding skills. In other words, design and develop your coding skills with accessibility as the foundation. Start by learning why accessibility is important and how it affects users. And especially; how it affects users when accessibility isn’t taken into consideration. You can take a look at our Web Accessibility, the basics course which provides you a broad overview about what web accessibility is. The Accessible Design course and Accessible Code course are follow up courses which will let you learn more about how to design and code for accessibility.

With small adjustments to your workflow, you can really make an impact on the web. It doesn’t mean that you can’t make award winning work, because you are still a creative person! Design and build with the accessibility guidelines as a foundation and let your creativity roam free! We think that creating a beautiful website that is stunning, as well as accessible, is the real achievement which deserves an award!