1. Login

Crazy design

Examples of crazy web desing throughout the years...

  1. Reddit deleting comments without indication
    I have seemingly had comments deleted on reddit without my knowledge and consent, and without ever being notified anything was wrong. So I stopped using Reddit.
  2. Avoid Scrolljacking and Smooth-scroll Effects for Better UX
    Why web designers should avoid hijacking users scroll to make smooth-scrolling, parallax and other silly scroll-triggered effects.
  3. Problems With the Wifi Password Dialog in Windows 10
    Windows 10 wifi-dialog has major usability issues making it near impossible for some users to use it when logging in.
  4. Google Drive has no Save As Option
    Google Drive has disabled right-click, and the replacement menu is missing the options users need.
  5. How to Disable Persistent System Tray Popup Notifications in KDE
    How to disable device-notifications on KDE Linux desktop.
  6. Google Added Annoying Fixed Header to Result Pages
    Google recently started showing the infamous fixed header on their result pages.
  7. New Google Search Console Layout
    Google just enabled the new search console for users, and I had the chance to check it out. Sadly, it has a huge fixed header, making it difficult to get a good view on smaller screens.
  8. The Cumbersome YouTube Studio (Beta) Layout
    YouTube is creating a new creators studio, and it currently suffers from usability issues.

The crazy design category

Here you will find examples of crazy design trends to avoid, and suggestions as of what to do instead.

Some things might actually work, but that does not justify why we should use a specific technique or method.

Some general advice is found on this page, you can read the articles for more detailed explanations.

Fixed headers

It is no secret that I have come to hate fixed headers, and there are very few exceptions to this rule.

I think Facebook is one of the only sites that does not annoy me too much, but their header also does not take up too much space.

White-space

I will often encounter websites with way too much margin and padding, and what this typically does, is that it decreases the contrast of elements. It makes it difficult to quickly scan the page (unless you are familiar).

Personally, I prever staying around 1-1.5em with my margin and padding, and have found it works well. Elements that are separate can go higher, which indicates they are independent from elements that are semantically connected.

Text and fonts

One of my most hated things is light-gray text on white background. Some of the largest companies have made this mistake, and I simply can not wrap my head around why they allow it to happen in the first place. If you got an intern creating your layouts, and you have no oversight, then maybe I can understand why. But, I do not think that is the case.

If the text is hard to read for people with normal eyesight in many cases – imagine how someone with eye problems might struggle to read the text!

I also tend to dislike #fff backgrounds with #000 text. Seriously, tone down those colors a bit! If I am to spend a lot of time reading something, then I would prefer less sharp contrasts.

Images

Large images should be optimized, and ideally lower resolution versions loaded for smaller screens.

For .png files, you can often get better compression with PNGGauntlet in Windows, or Trimage in Linux.