Common web design & UX flaws/questionable choices today

[storymakerechidna]

A simple topic for sharing some design and user experience problems that you see too often on websites today. Obviously, this is subjective and what one person considers a problem, another person may not. You may elaborate on why exactly it’s a problem in more controversial cases, if you choose to do so. Also, you may feel free to offer solutions to these problems, if and when it makes sense to do so.

• Photos and even videos are being used as backdrops for text frequently these days, which isn’t problematic in and of itself. The issue is that this makes it easier for there to be low contrast between text and background when web-makers don’t exercise due diligence and allow the text to cover a part of the photo or video that’s close to the text’s color. This seems to happen a bit more often when the photo in the background is something “changeable” and not set-in-stone, something you might swap out, such as slides in a slideshow. Otherwise, you can be careful to choose a photo that has a high contrast with the text in the area where the text will be. Some solutions to this problem include putting a color overlay over the photo or video that will create more contrast, or only choosing images that have high contrast with the text throughout.

• Headers/navigation bars at the top of the screen which are either fixed or sticky (thus staying with you as you scroll) AND have high vertical dimensions, meaning they cover a large portion of the screenspace for reading. There may be certain types of sites where this isn’t a big deal or is somehow justified, but all too often, and especially on sites where you’re going to be reading a lot, it can be really annoying. In fact, my tolerance for this is so low I will sometimes use the development tools of the browser to remove the position: fixed or position: sticky rule! People want to see the site’s content, and there’s typically no real benefit to the header being so huge other than taking up space that could be used for that content that people actually came there for. Some sites try to ameliorate this by having the header only show when you’re scrolling upwards, but I think it can still irritate…

I have more I can think of, but I might do that later. For now, I want to hear what YOU think!

[Mittineague]

I’m far from being a design guru, but I think a lot of the problem is one that has long been a fault.

That is, designing so that everything is good for the environment one is designing in without considering other use cases.

For example, If l have a heavy media file local / cached, I won’t have a transfer slowdown that first time visitors would have. If I have a large viewport area, content won’t be cramped for me like it might be for a user with a smaller viewport. If my browser font settings differ from a users settings I won’t be seeing things the same way they do.

I think a good way to deal with contrast issues is to have a buffer zone around text to ensure there is contrast. For example, if you go to https://meta.discourse.org/ and switch Dark Theme <-> Light Theme you can see the effect around the logo.

I haven’t come across many sites that have large aggressive top headers. But I have seen a few that have a heavy “above the fold” file that makes the page look like a “white page” FAIL until it loads in.

[TechnoBear]

Photos and even videos are being used as backdrops for text frequently these days, which isn’t problematic in and of itself.

Actually, it can be problematic in itself, especially with a video or moving background. Some people have perceptual difficulties, which make it hard to distinguish text from a background image. If that image is constantly changing, they stand little or no chance of deciphering the text. I suspect - although I have no information here and would be interested to know - that dyslexics would be similarly affected.

As for the moving background - and sliders and other animations - it seems to me that few designers have ever read the WebAIM accessibility guidelines on animation.

Animation should almost always be user controlled or very short in duration. Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

Moving images I can’t control are likely to render a site unusable for me, so I’m all too aware of the number of site using such methods. The worst offenders have multiple instances on a single page. There seems to be an obsession with “cool effects” to the total disregard of usability.

[storymakerechidna]

Honestly, I personally was not really a fan of using videos as a background myself (just seemed like all sorts of overkill), but now hearing that the movement itself can make the text hard to read for some (which in retrospect makes sense), that’s all the more reason to steadfastly avoid them. So I rescind the comment that they’re not inherently problematic, I just said that because I couldn’t think of a reason offhand why they were a problem, and now I have one.