Bad/bloated web design

[MrMobodies]

Do you find that a lot of modern web design becomes a bit too much that is claustrophobic?

Take a look at https://www.scan.co.uk/
It is becoming to a point now that they are meddling with contrast effects on parts of the page and it is hurting my eyes.
After every search it goes from dark to light.
It does nothing but hides what I am looking at.
Amazon did that and I added the element to the block list but it doesn't work well with Scan.
If I remove the element it goes away but add it to Adblock and the page disappears.

I wanted to look around for some ATX power supplies but already I got a headache just after a couple of minutes.

The only reason I started to use Adblock is kill this kind of thing and the suggestions or anything that pops out and annoys but I think that is a good example.
I only use Fanboy's list of annoyances.

Check out the second image when I turn off Adblock with some of the other rubbish I hid.
Like that description and "Add to Basket" bar is so much more important that about 1/5 no sorry 1/6th of top the area is taken up over the contents whilst serving as a distraction.

[MrMobodies]

I have switched off Javascript to see what would happen and it looks a lot better and no flashing.
I didn't expect it to work or be able to search.

Now I can see what I am doing.

Not sure if the checkout will work.

Do you think I am being too fussy?

[Whales]

Not at all.

There are no working negative feedback loops between users and sites.  Voltage offsets.  They can claim to care about users, but really all they give a damn about is looking fashionable and earning money.

More than a decade ago we had the popup apocalypse, a situation so poor that browser vendors actually started blocking those things.  Then advertising became menace (malware, animation, slowing pages, privacy) so whole civilisation of ad blockers was born. 

Now we're in the age javascript abominations.  When you write a plain HTML page:  adding javascript and CSS can only make it harder to read from there.  A good designer knows this and uses restraint.   Flashy bars, narrow text columns, "lightbox" interactions (where the page gets darkened), pages that don't scroll like every other page, low-contrast font-background colour pairs and ten things to click through before your get to the page.

I thought that the <blink> and <marquee> tags were dead because they were annoying, now we're just found more evolved ways of preventing people from using your page.



If I can't read your shitty website then I'm the only person left that can fix it. 

(1) I browse most websites with JS disabled (via the exten Ublock Origin).    This decrapifies a good 50% of sites.

(2) For those that refuse to work without JS: I use my own home-grown extension to disable CSS when I hit Shift+Alt+A.  Often a website flat-out refuses to unhide itself until the javascript executes, this fixes it with a single keypress and no other effort on my part.

Google AMP pages are an interesting example of this, where the CSS intentionally hides the page for (11?) seconds or until JS executes. 

This same key shortcut also fixes sites that use fixed-width text columns.  I can tolerate some of this, but on a widescreen monitor I hate having to scroll every 3 paragraphs to read your news article.  Especially when the whole article fits on one screen after I disable your CSS.


(3) Then there are the websites that are still shite and demand JS to do anything.

If I don't visit that site often: my Shift+Alt+A CSS disabler is useful.  I also have a second shortcut (Shift+Alt+X) that simply disables "position:absolute" elements (bits of the page that don't move when you scroll, like header bars) and fixed-width text; so I can keep most of the website's layout and theming intact.

If it's a website I visit often then I occasionally write proper CSS fixes and use the "Stylus" addon make them permanent.  On youtube I completely de-pad (shrink) the search bar, and prevent it from following me as I scroll down the page:




Anyway, I'll stop rambling.  If anyone is interested in my key-shortcut addon I can upload it to the Firefox addons website (it might work on Chrome too).

[Nominal Animal]

I browse most websites with JS disabled

I've used NoScript and Adblock+/uBlock Origin for over a decade now.

Whenever I see what others are used to seeing, it reminds me that I could not do that. It's not a matter of "just accepting it as it is" for me: the choice is either I use the tools to filter the extraneous noise to an acceptable level, or I won't use web at all.

While I am not a graphic designer (I don't have the "eye" for that), I have worked with really good ones to build websites and web-based tools, and actually know a lot about the technical/scientific side of the user interface design (as in actual research and findings, not just opinions). I am tempted to start a rant how even this "use a separate box to post a comment, clicking preview to see how it'd look like" is a horrible easy hack that people have just gotten used to, while there are much better ways to implement it.  But, because most peoples' response is a shrug, or maybe "I don't mind", I'll quiet down now.

[bd139]

I write web apps a lot of the time. I have done since the web appeared in the 1990s.

I have seen a massive decline in front end quality in the last decade and you know why?

Sometimes stuff is actually just done and people have a fear of that. Once it's done they're of no value.

Thus the "never done" attitude is what happens. Thus what do you do to something that is done? Shovel more features into it. Next thing you know your web site looks like an Indian train, except less useful.



And on top of that there are predators everywhere. These predators come in two forms:

1. The marketers.
2. The framework pushers.

The marketers want your entire web site to look like the depiction in Futurama:



The framework pushers are the real criminals. These guys want to sell you a product ecosystem and training which gives you magical powers. Unfortunately they are literally selling you a lock in which costs your business a lot of money when you need to step outside the box for a moment or the ivory tower framework pimps have sold up and moved to a beach somewhere. While you're using it your customers are paying for the crimes in data volume, abysmal performance.

If you have to break the browser to make a site usable then the site is broken.

[jc101]

On the scan website, if you reduce the width of the browser window the ad's at the side vanish.  I've found that quite handy when using their site and does save the eyes.

[kosine]

I think a big part of the problem is that there's a lot of artistic people out there, but not that many jobs requiring pure art. So a lot of them end up as "designers" of some sort.

[Whales]

I think a big part of the problem is that there's a lot of artistic people out there, but not that many jobs requiring pure art. So a lot of them end up as "designers" of some sort.

Bad websites are not artistic at all.

If you put some love into a website: most people will tell you it's ugly.  So instead people try to make their sites look like everyone else's.

A revealing quote: "How is reddit so successful when the site is so ugly?".  That was, of course, before it changed to be Facebook a few months back.

[The Soulman]

Another fine example:

http://www.musictribe.com/

They are probably the biggest player in the pro audio business and have hundreds if not thousands of products under different brands.
Good luck finding the product you are looking for. 

[cdev]

They should do whatever they need to do in the most standards conformal way possible and anything that involves dynamic content, Javascript or plug-ins should degrade gracefully so that you don't have nothing appear if the user has disabled that capability. Also every page should have a unique and meaningful title and descriptive meta-data, not generic text that's repeated over and over on every page in the site.

[SilverSolder]

My pet peeve with modern web design is that it doesn't make good use of screen space...   eBay can only just about manage four listings on a 24" monitor, for example...   the rest is white space.  Seriously? ...

[BravoV]

For sure, at the desktop style (not mobile) web, some nasty ones can even bring down a modern powerful desktop multiple cores CPU, down to it's knee for 1st few seconds just to render the page, seen from CPU utilization chart.

It feels like the browser acting like a CAD application rendering a complex 3D view even its just a 2D.

[cdev]

There must be something 'wrong' with those web pages. Crypto-currency mining javascripts, perhaps?

Its time to return to the basics. "Hey, you, get off of the cloud".

[MrMobodies]

I am please I am not the only one.

What I have noticed is that a few websites allow their fixed headers to be closed.
Like Archive.org
Google maps with the collapsible side pane.
Cisco with the toggle button.
I made a complaint years ago to Apple about some silly white space on their boards and now have a close button.
A button that doesn't get in the way of the contents and it gives the user a choice like they would have absolute positioning whilst achieving the tablet touch only input issue from something read: "Why do we force tablet users to scroll to the top" on fixed headers.

Not at all.

There are no working negative feedback loops between users and sites.  Voltage offsets.  They can claim to care about users, but really all they give a damn about is looking fashionable and earning money.

More than a decade ago we had the popup apocalypse, a situation so poor that browser vendors actually started blocking those things.  Then advertising became menace (malware, animation, slowing pages, privacy) so whole civilisation of ad blockers was born. 

Yes I use to spend all night on customers things uninstalling dodgy browser toolbars and remove the registry keys manually because they wouldn't uninstall properly and all the hidden "services" that it put it there alongside other things. Not all of them were picked up by their malware detectors. Some were even rootkit based.

Now the toolbars are embedded on web pages.

I am left with that Bookmark killer by Alisdair McDiarmid and some fixed header killer extensions.

This is a good extension on Chrome to manage the fixed headers on Youtube but doesn't seem to always work like on some websites as they base the contents on a fixed pane which it kills and the functionality. Fixed header hider fixer:
https://chrome.google.com/webstore/detail/sticky-header-hider-aka-f/eagncneohcoiofhknkofdobphnhgblad
You can set websites whether to leave/kill or restore fixed headers in the position that they appear.
It isn't perfect but it is good enough for Youtube.

For youtube I got rid of the shadows (the darkening of top and bottom) when I want to seek back and forwards which I do a lot, the spinning thing and what's up next.

I add these to Adblock which gives such a better experience with the Youtube player and no interference:
You also need to Untick allow intrusive advertising for it to work.

youtube.com##.ytp-gradient-bottom
youtube.com##.ytp-gradient-top
youtube.com##.ytp-tooltip-bg
youtube.com##.ytp-play-button ytp-button
youtube.com##.ytp-bezel
youtube.com##.ytp-spinner
youtube.com##.ytp-title-link yt-uix-sessionlink
youtube.com##div#theater-background.player-height
youtube.com##.ytp-chrome-top
youtube.com##.ytp-share-button-visible
youtube.com##.inner-text
youtube.com##.annotation.annotation-type-text
youtube.com##.annotation-shape.annotation-popup-shape.annotation-type-text

Here are others that rid off some of the annoyances if you get annoyed too by them:
Just rename the co.uk to match your domain.

google.co.uk###sbse0
google.co.uk###sbse1
google.co.uk###sbse2
google.co.uk###sbse3
google.co.uk###sbse4
google.co.uk###sbse5
google.co.uk###sbse6
google.co.uk###sbse7
google.co.uk###sbse8
google.co.uk###sbse9
google.co.uk###sbse10
google.co.uk###sbse11
google.co.uk###sbse12

amazon.co.uk###suggestions
amazon.co.uk###suggestions-template
amazon.co.uk###nav-flyout-iss-anchor
amazon.co.uk###miniATFUDP
amazon.co.uk##nav-flyout-anchor
amazon.co.uk###huc-v2-order-row-with-divider
amazon.co.uk##.a-row.huc-v2-pinned-order-row-with-divider
amazon.co.uk###huc-v2-order-row-placeholder
amazon.co.uk##.a-row.huc-v2-order-row

ebay.co.uk###nav-bar
ebay.co.uk###lkd_hdr
ebay.co.uk###gAC

amazon.co.uk##nav-flyout-iss-anchor
amazon.co.uk##nav-flyout-searchAjax
amazon.co.uk###miniATFUDP

dailymotion.com##.np_icon
dailymotion.com##.np_darken
dailymotion.com##.np_transition

Dailymail.co.uk##.floating-buttons
bbc.co.uk###bbccookies

The elements above I can do without as they are not essential in functionality like that Basket and purchase bar on Ebay and Amazon unless they remove them from the usual places.

[Ranayna]

Somewhat related side note:
https://security.googleblog.com/2018/10/announcing-some-security-treats-to.html

No Google login without JavaScript enabled anymore.

[IanMacdonald]

The problems with websites are basically the same problems that other programs suffer - Bloat arises though the use of a monster library to perform a simple function. Multiply that by a few simple functions, each using a different monster library, and you have hundreds of MB of code displaying 1kB of text.

The security issues arise the same way, since each monster library contains numerous coding bugs that hackers can exploit.

The security issues in turn mean constant patching and updating, or else your site gets hacked.

The constant patching  makes it risky to do anything unconventional, even to use documented features that are not often used, because the next patch may break those features. Thus, people tend to stick to mainstream features, and as a consequence all websites start to look and behave alike. (75% of the Web now uses WordPress)

That, and the libraries are way too complex for the average coder to understand the workings of, so webdesigners become 'appliance users'  just blindly pushing buttons and hoping they have the desired effect.  If they need to add a feature, their only recourse is to search at random for one that's been written already.

This exacerbates the problem of bad visitor experiences, because the way the website works is no longer even determined by its owner, but by some remote code library maintainer. The library maintainer being completely out of touch with end-user feedback. (The 'image slider' craze is a typical example, every visitor loathes these flickering, flashing, jumping distractions, every WordPress theme has one regardless.)

Though, if you do decide to code your own, you hit a really insidious problem in that there is no proper standard for the settings on webhosts. PHP in particular suffers from the problem that the php.ini settings vary from one host to another, and this can completely break a program even though it was coded to exactly follow the instructions in the PHP manual. Worse,the webhost can prevent you from changing the settings too, so you can't even correct the problem. The PHP creators basically should have not allowed this situation to develop. Instead they should have determined how PHP would work, and made that apply universally.

You can see here whence the reliance on code libraries and databases arises. If you can't trust any given PHP code to work, you use WordPress or whatever big-box product, because the WP coders have done the donkey-work of  finding out which functions they can safely use on most webhosts. It then befalls on you, like it or loathe it, to store your pages in a database instead of in files. That is because MySQL is more predictable in terms of settings consistency than PHP. Unfortunately MySQL and its variants are absolute, utter crap when it comes to security... and this is the area where most of the vulns arise.

[Red Squirrel]

I absolutely can't stand modern web design.  Way too much overuse of javascript, too many popup and "interactive" crap that just makes the experience terrible.  The thing that makes me immediately leave a site is modals, I can't stand those things, (popups that are Js based that popup the page and block your view).  People who code those should be hung by their nuts.

Another annoying trend is headers and footers that don't scroll with the rest of the page.  They take up page real estate for no reason.  Worse is when the header is not even directly on top but somewhere a bit lower. 

[MrMobodies]

I just noticed the behind the scenes video on twitch.

I was trying remove those annoying things from the video player:

twitch.tv##.player-overlay.player-play-overlay.js-paused-overlay
twitch.tv##.pl-overlay.pl-overlay__fullscreen
twitch.tv##.js-ima-ads-container.ima-ads-container
twitch.tv##.popup-marker-thumbover
twitch.tv##.pl-controls-top.js-controls-top
twitch.tv##.popup-marker-thumbunder
twitch.tv##.popup-arrow
twitch.tv##.popup-thumb-wrapper
twitch.tv##.popup-timestamp

If I remove twitch.tv##.pl-controls-bottom it not only removed the bottom shadow but also removes the player controls as the shadow element is on top.

I can change it the colour of the element but I can't seem to write the Stylish sheet properly for it to automatically do that.

I went on their boards but can't post a screen shot or start a request. I get an internal error message but I think they are having a make as some pages load to a new design which also looks a bit bloated.

[DimitriP]

I absolutely can't stand modern web design.  Way too much overuse of javascript, too many popup and "interactive" crap that just makes the experience terrible.  ........    People who code those should be hung by their nuts.

Another annoying trend is headers and footers that don't scroll with the rest of the page.  They take up page real estate for no reason.  Worse is when the header is not even directly on top but somewhere a bit lower.

There is a war going on. Causing this mess.
Monitor a web page and it connects to a couple of hundred "other places".
As for the people coding, they (the companies) are filling the need of myperfectshinywidger.com to show up on a search when someone is looking for perfect shiny widgets.
The actual people coding, well...they need to eat too, along with the perfect shiny widgets people.
And there are also a bunch of not so perfect, not so shiny widget places that need to eat too.

So everyone in the fight can't stop fighting.
Google is keeping score , a large number of other companies are keeping score, and another large number of companies will help you improve your score.
...and the fight continues...

[james_s]

The thing that bugs me is the way so many sites follow fashion trends in design the way teenagers chase clothing fads. It's all about looking fashionable and trendy with hardly a thought to usability. Lately the trend has been low information density mobile style pages despite the fact that desktop/laptop still make up a majority of traffic on most sites. Then there is the trend of hiding things requiring extra clicks, has anyone tried the DigiKey site lately? I have to click the "show more" button to display the rest of the parametric search options every single time, clearly designed by a web designer who had no idea how engineers select components. Before this there was the "flat design" trend that spread everywhere, lack of visual cues to indicate what is clickable and what is just graphics, and the low contrast crap, dark gray text on a slightly lighter gray background.

On the other end of the spectrum there are websites for various government services that somehow manage to combine the minimalist look of the late 90s internet with all the worst usability issues of the modern web. I don't even know how they manage to make some of them as bad as they are.

[Red Squirrel]

Noticed that too with Digikey.

And yes I HATE the flat trend.  Windows 10 is a good example of everything wrong with modern UI design.  Too much white, not enough indicator of what can and can't be clicked on and no proper separation of information, no borders, button edges etc, it's just so bland. Gray text that is hard to read and fuzzy adds to the horror of the experience.   Also waste of space because everything is so big and spread out in a terrible way.  Go back to say, windows 2000 era and look at something like the screen saver dialog box. It fits nicely even on an 800x600 screen and all the information and settings you need are there and clearly indicated.  Go on windows 10, and once you even figure out how to GET to those settings, the dialog takes up an entire screen on a HD monitor, and half the options are missing and nothing is really clear.   It's like the fact that higher resolutions are available is completely negated by complete inefficient use of space.

[james_s]

Yes the seas of white space that are so common these days drive me nuts. It feels like I'm sitting in the middle of a vast empty warehouse under blindingly bright fluorescent lighting. I've always liked high density layouts with everything in plain view, like the cockpit of an older aircraft. I loathe "minimalist" designs that try to "declutter" by hiding all the stuff I need to use.

[MrMobodies]

I h

Noticed that too with Digikey.

And yes I HATE the flat trend.  Windows 10 is a good example of everything wrong with modern UI design.  Too much white, not enough indicator of what can and can't be clicked on and no proper separation of information, no borders, button edges etc, it's just so bland. Gray text that is hard to read and fuzzy adds to the horror of the experience.   Also waste of space because everything is so big and spread out in a terrible way.  Go back to say, windows 2000 era and look at something like the screen saver dialog box. It fits nicely even on an 800x600 screen and all the information and settings you need are there and clearly indicated.  Go on windows 10, and once you even figure out how to GET to those settings, the dialog takes up an entire screen on a HD monitor, and half the options are missing and nothing is really clear.   It's like the fact that higher resolutions are available is completely negated by complete inefficient use of space.

I heard at about the beginning of this year Classic Shell support was coming to an end.

[IanMacdonald]

There is a war going on. Causing this mess.
Monitor a web page and it connects to a couple of hundred "other places".
As for the people coding, they (the companies) are filling the need of myperfectshinywidger.com to show up on a search when someone is looking for perfect shiny widgets.
The actual people coding, well...they need to eat too, along with the perfect shiny widgets people.
And there are also a bunch of not so perfect, not so shiny widget places that need to eat too.

So everyone in the fight can't stop fighting.
Google is keeping score , a large number of other companies are keeping score, and another large number of companies will help you improve your score.
...and the fight continues...

Worst of it is, the perpetrators are forcing every webmaster to implement security measures which they say are to prevent MITM attacks.. but which are cleverly crafted to NOT prevent them or their buddies performing the same class of attack, nor even to alert the user to their presence when they do. Arguably the real reason is to push certificate sales, along with giving end users a warm, fuzzy feeling of security.

https://iwrconsultancy.co.uk/blog/https

"And yes I HATE the flat trend.  Windows 10 is a good example of everything wrong with modern UI design.  Too much white, not enough indicator of what can and can't be clicked on and no proper separation of information, no borders, button edges etc,"

Agree. One of the worst examples is the crop of login screens on which you can't tell where to type your name or password because the fields have no defined edges. So you take a stab, and your password goes who-knows-where instead of into the field. That can't be good for security.

[MrMobodies]

Amazon Prime annoyance.

See attachment:

Have you come across this behaviour on Amazon yet?

If it annoys you just add the following to your Adblock blocklist:
amazon.co.uk##.a-scroller.attach-accessory-section.a-scroller-vertical
amazon.co.uk###a-popover-lgtbox
amazon.co.uk##.a-declarative.attach-popover
amazon.co.uk###attach-accessory-pane
amazon.co.uk###attach-desktop-sideSheet
amazon.co.uk##.a-section.attach-desktop-sideSheet

Interference by Amazon.
Annoying shadow once again on the things that I do want to see, fixed element in the way that I do not want to see all for crappy suggestions on lengths that I do not need.