Why is website design so awful today, generally?

[Akrapovic]

I know I'm breaking my own rule by posting again, but this is more of a meta post.

Funny, when one attempts in threads like this to try to convince rationales with no recognition or at least acknowledgment for the negative tradeoffs, it feels an awful lot like pressing on a piece of text thinking it's a button and getting no action.

Well, I made a large post in a lot of detail that many people agreed with. You then came back and said i am "clearly wrong". Is that the acknowledgement you want to receive? So in that regard, I think you need to be a bit more self-critical and analyse yourself, your feelings and your actions a bit more. Why are you feeling like this? Why are you feeling the need to post these absolutely massive posts and pepper them with technical terms? Why do posts which disagree with you get more likes?

Again, I'm not saying you're wrong, but if I was new to this thread and someone asked me my first opinion on it, I'd say it's either poorly generated by some terrible AI application, or it's an echo chamber of buzzwords being used to try and make someone sound smarter and more technical than they actually are.

I mean no offense, but I think maybe you need to start looking at yourself rather than asking why everyone elses websites are rubbish. And a Udemy course wouldn't hurt, at least to pass some time. Or look at The Futur YouTube channel for free. I've only just started watching it, but there's some good stuff in there . https://www.youtube.com/channel/UC-b3c7kxa5vU-bnmaROgvog

 

[Tozovac]

I didn’t say you’re wrong. I say in sometimes specific and sometimes general terms that certain design decisions result in certain negative consequences for me and many, despite any justifications.

I’ve said often in this thread or others, I’m fine repeating and complaining, it’s therapy for me, and it’s nice when I run into other like-minded folks. I can deal with the echo chamber, lol.

I’m not after likes here or anywhere, nor do I use them as a reliable barometer. I know what works better and worse for me and notice when it changes for the better and worse. There are enough people that agree with me, here, there and elsewhere to know I’m not a lone dysfunctional wolf.

http://cheerfulsw.com/2015/destroying-apples-legacy/

Hopefully with Jony Ive decreasing his presence at Apple, some sense of software design for function instead of fashion will return.

Why should I or anyone need a class to learn more about some of today’s design decisions. The proof should be in the ease of use, which some smart people feel used to be a bit easier.

https://9to5mac.com/2017/06/21/scott-forstall-design-debate/

No offense taken if you point out that I should study up, but you should include folk like Scott and Amy too.

 

[Michael Scrip]

I'll add another entry to the "whitening of websites" list.

Feedly just made an update today. It's all very light now. Hardly any contrast. Plus they added a 3rd column on the left that only has a few options.

As usual... I'll get used to it. But I hate when things change for unnecessary reasons!

OLD

NEW

 

[Tozovac]

As usual... I'll get used to it. But I hate when things change for unnecessary reasons!

Unnecessary change that’s a change for the worse is the pits. It’s those little things like shading on the left that differentiated and added subtle context to what’s on the right that make the experience so much better. Everything morphing to white, gray, lighter gray, and darker white to where everything just morphs together is cumbersome on the brain after a while.

Hopefully the change didn’t also remove the colored icons on the submenu picks that help so much with quick, almost subconscious navigation.

Can’t wait for this white-wash minimalist fad to pass.

 

[cyb3rdud3]

Yet all the UX tests with focus groups we and many other organisations perform provide the polar opposite to what you are arguing. I wouldn't hold my breath to wait for this inclusive style that is accessible to all, anytime and anywhere, to pass.

 

[FortuneAsker]

Here's a decent example of the current trend that's awful in its basic incompetence:

https://www.nytimes.com/2018/09/08/business/roger-federer-uniqlo-godsick.html

A dementedly screen-huge photograph with an unreadable title. What is the point of that? The point is that it's stupid. And there is no way Google Analytics reflect the reader's annoyance.

 

[Akrapovic]

Improvements can be made to both of the old and new.

Old: Orange on grey "new" symbol is poorly made. Orange/Red merge and blur with grey badly. That New button would be better as a solid block of colour. But it also appears to be text rather than a clickable button? So why does it have an outline to give the appearance of a button? Making that a different colour, removing the outline would improve that New button/highlight.

We say the new one has less contrast, but when it comes to content I disagree. The old one has more grey on grey. The actual headlines are black on white on both. The old one has grey text on a grey background at the top. It appears to have less contrast, but not really.

The new one has a screen highlight in the form of a green left border on the menu. That's good for seeing where you are. The third column on the left is awkward. Not sure what it's doing there. Having it white is strange too, as now the screen looks stripey. However, there is a big clue on that bar as to why it went white - it has a moon icon. Is that for a dark version of the site? If so, then it gives the user the ability to customise the site? If that's an option then just go bury it in the settings. It doesn't need to be on the front page at all times. Same with the plus and help icons. Those can go elsewhere and that bar can be binned.

I prefer the large images of the first version, but I prefer the thinner reading width of the third. As screens progress beyond HD, you really need websites to keep a hold of the text width. So this layout is designed to deal with a variety of screen sizes better.

I don't think either of these are better and worse. Both have issues.

 

[cyb3rdud3]

Here's a decent example of the current trend that's awful in its basic incompetence:

https://www.nytimes.com/2018/09/08/business/roger-federer-uniqlo-godsick.html

A dementedly screen-huge photograph with an unreadable title. What is the point of that? The point is that it's stupid. And there is no way Google Analytics reflect the reader's annoyance.

I actually like that. The title is fine on my monitor, but agreed it disappears when you shrink the screen. Either they've set the responsive points or they've done that intentionally. Great photo. Very impactful. Works for me.

 

[Akrapovic]

Here's a decent example of the current trend that's awful in its basic incompetence:

https://www.nytimes.com/2018/09/08/business/roger-federer-uniqlo-godsick.html

A dementedly screen-huge photograph with an unreadable title. What is the point of that? The point is that it's stupid. And there is no way Google Analytics reflect the reader's annoyance.

It will. Google Analytics will tell you if the user closed the page, if they read the article and then clicked another link on the site, or if they stayed and read it (or at least had it open for a while) before closing the page. If moving to that design increases the number of users who close the tab quickly (bounce rate) then that's an easy way of telling that people don't like it. If it results in more people staying and then (even better) clicking another link, then you can call it a success.

For the design, I need an account to view the article, but I was able to get a split second look at it before a very badly formatted popup came up. I like the large picture, and the logo at the top without a box. I don't like the hamburger on a large screen. That could be done better.

Edit: The Hamburger is also in the wrong place for a mobile phone. Should be top right. Top left is the least accessible part of the screen.

 

[Michael Scrip]

Improvements can be made to both of the old and new.

Old: Orange on grey "new" symbol is poorly made. Orange/Red merge and blur with grey badly. That New button would be better as a solid block of colour. But it also appears to be text rather than a clickable button? So why does it have an outline to give the appearance of a button? Making that a different colour, removing the outline would improve that New button/highlight.

We say the new one has less contrast, but when it comes to content I disagree. The old one has more grey on grey. The actual headlines are black on white on both. The old one has grey text on a grey background at the top. It appears to have less contrast, but not really.

The new one has a screen highlight in the form of a green left border on the menu. That's good for seeing where you are. The third column on the left is awkward. Not sure what it's doing there. Having it white is strange too, as now the screen looks stripey. However, there is a big clue on that bar as to why it went white - it has a moon icon. Is that for a dark version of the site? If so, then it gives the user the ability to customise the site? If that's an option then just go bury it in the settings. It doesn't need to be on the front page at all times. Same with the plus and help icons. Those can go elsewhere and that bar can be binned.

I prefer the large images of the first version, but I prefer the thinner reading width of the third. As screens progress beyond HD, you really need websites to keep a hold of the text width. So this layout is designed to deal with a variety of screen sizes better.

I don't think either of these are better and worse. Both have issues.

When I said "contrast" I was referring to the dark background of the left column and white background of the right column on the old site.

Now it's white and off-white on both columns. I don't like that. It seems like all sites are becoming shades of white... which seems to be a common complaint in this thread.

You're correct about the moon icon. There is a dark mode. It makes the columns dark and slightly less dark. (I'm not a fan of dark-mode websites... but that's a story for a different day)

I was happy with the old site where there were two different colored backgrounds to separate the columns.

Two days ago I didn't look at Feedly and say "this is awful... they need to removes the darker backgrounds and make everything white and smaller."

But they did it anyway.

I'll be fine. I can still browse my RSS feeds as usual.

I just hate when things change... especially when they whitewash everything!

 

[FortuneAsker]

It will. Google Analytics will tell you if the user closed the page, if they read the article and then clicked another link on the site, or if they stayed and read it (or at least had it open for a while) before closing the page. If moving to that design increases the number of users who close the tab quickly (bounce rate) then that's an easy way of telling that people don't like it. If it results in more people staying and then (even better) clicking another link, then you can call it a success.

For the design, I need an account to view the article, but I was able to get a split second look at it before a very badly formatted popup came up. I like the large picture, and the logo at the top without a box. I don't like the hamburger on a large screen. That could be done better.

Edit: The Hamburger is also in the wrong place for a mobile phone. Should be top right. Top left is the least accessible part of the screen.

It will tell you that user closed that page, but not closing it does necessarily imply liking it. Not being annoyed enough to leave immediately does not mean being happy with what you see.

I only ever leave the sites that literally make me pull my hair out (usually by annoying SUBSCRIBE popovers AND/OR due to painfully annoying content AND/OR blatant clickbait practice). Which does not mean I'm necessarily happy with what I see because I realize what I see has a lot to do with what I read.

Oh, here is my laptop view of the page that rocked your socks off:

https://imgur.com/hNEezQt

 

[Akrapovic]

It will tell you that user closed that page, but not closing it does necessarily imply liking it. Not being annoyed enough to leave immediately does not mean being happy with what you see.

I only ever leave the sites that literally make me pull my hair out (usually by annoying SUBSCRIBE popovers AND/OR due to painfully annoying content AND/OR blatant clickbait practice). Which does not mean I'm necessarily happy with what I see because I realize what I see has a lot to do with what I read.

Oh, here is my laptop view of the page that rocked your socks off:

https://imgur.com/hNEezQt

I think this is another example of an issue in this thread. Everything is very black and white (pun intended!). Everyone seems to think if you don't hate something you must love something. The page that "rocked my socks off"? The one where I pointed out the bad popup, poor use of a hamburger and bad placement of the hamburger? Totally rocked my socks that one.

As for the image you've posted (the irony of the use of imgur is not lost on me) - the white text on the image is extremely poorly done. Surprisingly bad since even simple WordPress themes solved that problem years back. There's also too much text. The headline is too long, and the subtitle is basically a paragraph.

Large images with text on them can work if you use an overlay over the image with a mostly transparent blend on them. I added that to one of my old sites years ago (excuse formatting errors - some plugins are broken and the site is no longer maintained)

http://theracingline.net/2018/articles/aco/the-triple-crown-of-motorsport/
http://theracingline.net/2018/articles/aco/24-hours-of-le-mans-resources/
http://theracingline.net/2018/race-car-tech/cornering-vertical-load-and-load-transfer/
http://theracingline.net/2018/race-car-tech/tyres-load-sensitivity/

All of these have a very subtle gradient which makes the bottom of the image darker, allowing the white text to work on the image. Large and dramatic splash images can be done, but designers have to be aware that photos vary a lot and you need to take that into account on a site that's going to be constantly updated.

So yeah. I like the concept of that NYT page. I think it's poorly executed.

When I said "contrast" I was referring to the dark background of the left column and white background of the right column on the old site.

Now it's white and off-white on both columns. I don't like that. It seems like all sites are becoming shades of white... which seems to be a common complaint in this thread.

You're correct about the moon icon. There is a dark mode. It makes the columns dark and slightly less dark. (I'm not a fan of dark-mode websites... but that's a story for a different day)

I was happy with the old site where there were two different colored backgrounds to separate the columns.

Two days ago I didn't look at Feedly and say "this is awful... they need to removes the darker backgrounds and make everything white and smaller."

But they did it anyway.

I'll be fine. I can still browse my RSS feeds as usual.

I just hate when things change... especially when they whitewash everything!

I personally don't mind the white and off-white. I think the white column on the far left is very poor though. It should be darker, so the page gets lighter as it moves to the right hand side. Although I don't see what that far left column brings to the party anyway. I'd just straight get rid of it.

Dark mode has its place on mobile phones, where a good percentage of people are reading in bed. So if your site has the ability to flip to dark mode, it's easier on the eyes. But for a desktop view that shouldn't really be relevant. I'm open to hearing an opposing viewpoint on dark mode on the desktop, but I can't really picture a situation where it's useful. Soa again, that option and that bar should be shoved away in a menu somewhere.

 

[FortuneAsker]

I think this is another example of an issue in this thread. Everything is very black and white (pun intended!). Everyone seems to think if you don't hate something you must love something. The page that "rocked my socks off"? The one where I pointed out the bad popup, poor use of a hamburger and bad placement of the hamburger? Totally rocked my socks that one.

That was a hyperbole.

As for the image you've posted (the irony of the use of imgur is not lost on me) - the white text on the image is extremely poorly done. Surprisingly bad since even simple WordPress themes solved that problem years back. There's also too much text. The headline is too long, and the subtitle is basically a paragraph.

As an aside, what's the deal with Imgur? It's actually one of the more modern looking sites I like. Not the redesign (which displayed especially badly on my laptop, with the POST button overlaid by the search field), but they at least keep the option to switch back to the old style alive (which I definitely appreciate. Same with Reddit. On the other hand, I would choke the Twitter people.)

Large images with text on them can work if you use an overlay over the image with a mostly transparent blend on them. I added that to one of my old sites years ago (excuse formatting errors - some plugins are broken and the site is no longer maintained)

None of the examples you have posted kills it for me, period. But I could definitely do without the BAM! LOOK-AT-ME images that force me to scroll down and waste my time without learning much.

But yeah, in the sea of very bad and poorly executed, this is good. We can't deny though that it looks samey and uninventive. But... If there is no subscribe popover and/or autoplay video (which I forgot to mention as an example of TERRIBLE, TERRIBLE, SCREAM-inducing madness), I will suffer through.

 

[Akrapovic]

I thought I'd replied to this, sorry Fortune!

Imgur I find a mess. Get the app! Click here for the app! We have an App. Did you know we have an app? And it's determined to make itself into its own social network. I just want an image host. Imgur wants more. Reddit I find insufferable but yeah, the old layout is alright. I wouldn't be surprised if it goes away one day.

The Twitter redesign is poor at best.

 

[FortuneAsker]

I thought I'd replied to this, sorry Fortune!

Imgur I find a mess. Get the app! Click here for the app! We have an App. Did you know we have an app? And it's determined to make itself into its own social network. I just want an image host. Imgur wants more. Reddit I find insufferable but yeah, the old layout is alright. I wouldn't be surprised if it goes away one day.

The Twitter redesign is poor at best.

As long as sites don't force the redesigns on their users and allow them to choose the preferred layout (and it's not that finicky, is it -- if you use a site for a decade, a radical redesign can totally spoil your relationship with the service), I'm not mad at attempts to improve stuff. Thus Imgur hasn't lost me, because I can go on with the same old black-and-green design with the single NEW POST button and without all that annoying stuff you have mentioned. If I was forced to endure the new design without the chance to switch back, I wouldn't use it either.

Truth is, if I hadn't registered on Imgur before Imgbb, I would probably use the latter by now, as it's much lighter and user-friendlier. And it does not force me to look for the old design option out of sheer annoyance with the new one.

 

[Tozovac]

Today's example of a pain-inducing website that seems designed more for the designer's portfolio than for efficient use by the user:

2018 Subaru Forester Cargo Space And Cabin Room

Passengers and cargo both get plenty of breathing room in the 2018 Forester. With features like Underfloor Cargo-area Storage; there plenty of room for everything.

www.subaru.com

Awful on both desktop and mobile. Am researching cars and went to my 3-screen setup for efficiency, since flicking around different pages on an ipad or iphone when looking to do productive work is an exercise in memory and frustration. This page's spread-out presentation and unnecessary screen-wide image loads requires way too much scrolling (and gives way too little info on one screen view) that I just want to close it and move on.

The main thing I went to this page to find was the available Packages and options for the Touring trim level, and I haven't found them after 60 seconds of loads and scrolling. Wonderful site.

Then again, Subarus are made out of love and not metal, hardware, technology, performance, etc. So why should a consumer like me need to research silly stuff like actual specs when I should just be buying for the groovy feeling of love...

So many of today's websites (and priorities behind them) are just so out of whack.

 

[decafjava]

That is an awful site I agree with you.

 

[Tozovac]

On a related note, I'm not sure I like Macrumors' move to looking more and more like Facebook with how "Likes" are now little blue thumbs up's. They've been moved to the left and no longer stand out, so the functional improvement beyond just trying something new is...?

As a subset of my lousy website/iOS/app interface trends/fads, with this continual homogenizing towards everything looking minimalist and rather alike (minimalist flat design, stark white & light blue, the absolute reduction of context-providing frames/borders, the use of an often-faint underline to denote "selected" instead of a bolder "pressed/enabled" type of visual representation (which I think came from Google's Material Design?), the use of grey text/font to indicate "actionable item" instead of saving greyed-out to indicate not-selectable, circular icons/avatars instead of rectangular, the nominal use of someone's initials in the avatar if no set avatar is chosen, facebook's blue thumbs-ups, the use of low-contrast font/text throughout), how much more can we stand before things are no longer interesting, and how much more will designers be needed before everything is just templatized?

Are these directions most definitely indisputably best-in-class and the best way to do things, thus the homogeneity, and I'm just in the vast minority?

If everything morphs to where you can no longer differentiate Macrumors' site, Facebook, Microsoft Office, Apple iCloud.com, and any given website or app from a distance of 5 feet (and this holds for as long as 2D screens are in use), then I'll be proven wrong that this was, in the the majority's opinion, a move to best-in-class interface design.

Or if at some point designers start pulling out their hair from boredom because of all the twindom they bought into and perpetuated (or their management forced upon them), then hopefully instead of re-inventing radical changed-overnight new interface ideas (like iOS 7 did), hopefully they resort to interface cues and layouts that trend a bit back towards the "less minimalist" and "more unique," both for improved (IMHO) intuitive function, easier reading, and more enjoyment/uniqueness.

 

[moderniste]

The idea is to make the interface fade back so that the content can shine, but differentiation is an issue if everyone does the same thing. Lately illustration has become more popular, as with the mailchimp rebranding that got a lot of attention. Right now the trend is towards bold typography, colours with enough contrast to pass wcag requirements and transition animations.

But those trends don't always filter down past the homepage of a site, which often do remain quite minimalist. Still, completely flat design isn't as trendy as it was a few years ago.

 

[Tozovac]

Well well well. The slow revolution back towards sanity continues! Looks like makers of iPadOS realized that simplified scroll-heavy mobile-centric websites often suck (in my words, to be blunt), versus the improved productivity functionality of a desktop centric layout, so they added additional abilities to force desktop versions on iPad to iPadOS.

Here’s how to force desktop versions of certain sites on your iPad, for later loads.

How to Force Safari to Use Desktop View by Default for Specific Sites in iOS 13

In Safari for iPhone, as far back as iOS 7, you can request the full desktop version of websites. The process was streamlined starting in iOS 9, but the process remains relatively hidden and easily missed. Now, iOS 13 shines a light on it, as well as adds functionality to set the desktop view...

ios.gadgethacks.com

 

[Akrapovic]

That’s been a feature (even on iPhone) for about 4-5 years now. Nothing’s changed except the option moved.

 

[Tozovac]

That’s been a feature (even on iPhone) for about 4-5 years now. Nothing’s changed except the option moved.

You’ve been able to permanently set a desktop view for specific sites before iPadOS?

 

[Akrapovic]

Yeah. And iPhone. Long press on the refresh button. Safari remembers which sites you’d done it with. Clear cookies to get the old site back. Didn’t work in private browsing mode. Does now.

 

[Tozovac]

Yeah. And iPhone. Long press on the refresh button. Safari remembers which sites you’d done it with. Clear cookies to get the old site back. Didn’t work in private browsing mode. Does now.

I’d enable that view constantly before iPadOS, and reliable repeating later never ever worked for me, ever. I’d have to constantly re-enable requesting a desktop site when presented with the inefficient & limited mobile-centric view.

What’s not for debate is that new iOS recognizes that a desktop view is more appropriate on the iPad, and not a Responsive Design compromised view. A step in the right direction.

 

[Akrapovic]

Again with the terminology. It's still loading a responsive design. It cannot not load a responsive design. If you load a site, you're getting it - it's in the code. The design that the browser displays is just selected based on the width of the browser viewport (sometimes the height too, but usually the width). You can test this by taking your browser and making it thin, then wide, then thin then wide, and seeing the site adjust. It's all just CSS media queries.

Very few sites deliver a mobile only version of a site now days. It was the norm for a short period, but now it's usually the same site that's delivered to every device, and the device makes the choice on how to display it based on the CSS media queries.

This iPadOS feature (which isn't new - it's just become a toggle switch) just fools the site by making it think the viewport is wider than it is. It's still responsive - Safari is just lying to the CSS so it won't move things about. It also doesn't "recognise that a desktop view is more appropriate" or it would set that to the default and move on. It recognises that a desktop view may be more appropriate for some users on some sites.

Of course, desktop class browsing also means that the :hover pseudo class becomes very relevant. Something which cannot be done with a touch screen, and is a pain when developing sites.