This project gathers some of the most annoying and frustrating website characteristics. Free the page from these elements by hovering on each.

This project was created by Readymag—a tool for designing the web without coding.


The web is fluid. An incredible amount of information flows constantly through underground cables, Wi-Fi hotspots and huge data centers, pouring out from your screen. Sometimes, when the connection is weak, it feels like a spring in the desert. Other times you feel overloaded, like a town under a broken dam.

If we take the analogy further, what lingers between users and information is debris. Banners, bad navigation, ads, unnecessary buttons are simply remainders of more or less successful attempts to guide attention elsewhere.


It’s time to de-clutter the web!


00

readymag.com

Hello!

readymag.com

readymag.com

readymag.com

readymag.com

We have smth special for you!

You're awesome!

readymag.com

readymag.com

readymag.com

readymag.com

readymag.com

readymag.com

Look at me!

readymag.com

Semantic overload


If the goal of a web page is to convey information (be it a story of your company, a trade offer or an announcement of the upcoming event), it should be judged according to the clarity of its message. Thus, we should always help users focus on relevant information instead of distracting them. Some of the most common examples of ignorant or malicious attempts to shift your flow include:


Intrusive pop-ups and sidebars, especially those with third-party advertisements:

ranging from nonsensical mini-windows to carousel ads, they are pure distraction. Remember the “spin to win” wheel? As quickly as it gained widespread usage, it became hated by most users. But keep in mind that a strategic pop-up—such as an exit notice—can be effective.

Floating menu bars:

a big obstacle to users with small screens.

Splash pages:

the easiest way to run a potential visitor off your site. The same goes for sign-up walls—a mandatory request to create an account before exploring the content of a website.

Hidden elements:

each element or navigation button should clearly indicate what it does (and do only that).

Social engagement elements on each page:

it’s obnoxious to constantly prompt users to visit your social media profiles.

Complicated backgrounds under text:

they make it hard or even impossible to read.

01

R

y

a

e

d

±

web

»

click!

g

m

m

m

m

Hi

a

,

.

.

Breaking bad layouts


Good layouts are designed to give a lively, even flow of information—but careless spacing of letters, lines and words can tear this fabric apart.


Some common examples of bad web layout include:

Fonts are too small or difficult to read.

Underlined text without a link.

Tiny click targets—please, be friendly to users.


Use this checklist to make sure your text is properly arranged.

02

Font hostility


Using too many fonts on a website decreases cognitive fluency and interrupts flow. This means users will find it difficult to understand what they’re looking at.


Cursive or otherwise “hand drawn” looking fonts are hard to read, decreasing ease of use for visitors and potentially pushing them away.


Read our Almanac on mixing and matching fonts.

03

Ready?

(yes)

(close)

Animation hell


More often than not, online junk attacks are backed up with a significant amount of dark pattern firepower—including nudity, flashy animations and hidden close buttons.


Flickering lights may trigger seizures in users with epilepsy. Web content that flashes or blinks should do so at a slow rate to avoid this risk. The defined threshold is no more than three flashes in one second.


Here you’ll find more tips on how to make your website accessible.

04