Top 10 Web-Design Mistakes

[@brucemurray2520]

Used your HyperText & HyperMedia book 27 years ago to create my main website. Resulted in full time self-employment for 25 years and a house at the beach in SoCal. Thanks!!!

[@drophy]

[SPOILERS BELOW] Timestamps in case anyone wants to review any of the mistakes :) 3:35 10) Mobile design on big screens 5:30 9) Huge hero image above fold 6:40 8) Layout shift on page load 8:40 7) Icons without labels 9:50 6) Can't select and copy-paste 11:20 5) Inflexible input 13:02 4) Low-contrast or tiny text 13:49 3) Misleading links and expectations 14:43 2) Slow response time 16:20 1) Popups/overlays

[@dimarassamakha1884]

Thanks!

[@MarkoDjukic]

That is good design and saving users time. Thank you very much.

[@AnthonyMiyazaki]

You're a UX genius for putting this here. Thanks!

[@AnthonyMiyazaki]

"Layout shift on page load" is often done on purpose by clickbait websites (the ones that often advertise on news websites). They do it so that the user will accidentally click on an ad immediately after the layout shift. I think that falls into the "Evil" category.

[@ironcito1101]

Some of these are often in the Evil category. Many sites disable copying and even right-clicking altogether because they fear that people will steal their stuff. Many also place a transparent div over images so users can't right-click and save the image. It's rarely a mistake, and it's silly because it's very easy to defeat. Popups are evil most of the time. If it's not an ad, it's a message asking us to share on social media, or to sign up, or whatever stuff they want to push on us. They know it's annoying. The misleading links are also very often clickbait.

[@MarkoDjukic]

I agree. So we actually didn't move much from the beginning of 2000's. Those are all refabricated (marketing) tricks.

[@Shinkaizen]

Thank goodness for inspect element feature! Not many know their way around but that's an extra step needed to do if we desperately need those info.

[@webdouglas]

Hamburger menu on Desktop... Good Lord, I'm not alone noticing that stupidity! 🤦🏻‍♂️

[@welling1]

And they often have only three items in it!

[@annajasko]

and funny enough, they tend to think its cool to have the burger menu on a desktop version-)))

[@craigsims808]

Hamburger is not useful even for mobile website

[@Ryudayz]

Thanks for this video. I'll argue that the popups are not a mistake, but evil design, in many cases. Marketers know they can harass you with them and force you to pay attention to something you don't want to. Also, both the ATT app and the ATT website is the poster child for many of these. Ironically communications companies that capitalize on the internet, like mobility providers and internet providers, are the biggest offenders of this.

[@KathBorup]

The 'can't copy paste' one really bothers me

[@MassimoVilla]

Thank you Jakob, pure gold.

[@monumento.f.501]

Thanks for the compilation, and thanks for the correctly aligned text.

[@MichaelLibby]

#1 Web-design mistake made by the NNgroup: using videos instead of written articles. This video has no obvious place to look for the actual top ten list, and therefore no way to jump to each design flaw. For those of us who are hard of hearing, I have to do extra work to turn the captions on (in spite of having the "always show captions" option checked in YT settings). And then I have to read all the text anyway... slowly, without the ability to skim or scan ahead.

[@craigsims808]

I will write the article

[@MichaelLibby]

@@craigsims808 I do see now that someone else commented with the list of mistakes and timestamps. But a transcript or actual article would be incredibly welcome. NN group does a really good job and this is extremely valuable content. Thank you!!

[@theredscourge]

#0: Features that break the "right click open in new tab" functionality

[@thewowstudio5890]

Thanks for sharing this list. I think #1 (Popups/overlays) can be done right when it is part of the interaction and the user has autonomy. But I agree, too many have abused the use of it and created a bad experience. @ #10 - The hamburger menu for desktop - I think there are pros and cons to this flat design concept on desktop. Similar to the hamburger menu the 3x3 menu used by Google and Facebook also list large categories of information - Yes One-click extra does lead to less interaction with the menu but do the users as result engage more with the content? The research you guys have done highlights a lot of important issues. We changed to the hamburger menu for desktop for aesthetic reasons a year ago and also because we did not have enough to showcase at the time. But the recent problem we have encountered with the hamburger menu is the slower performance due to the transition and animation effects which we have to now take into account for re-evaluating. Also, we had neglected the disorientation of "where am I?" And this video made us reflect back on that. And yes there are too many websites that work well on mobile but offer a terrible confusing experience on desktop. Again thank you for sharing this.

[@icksv5529]

9:50 6) Can't select and copy-paste. This actually it's not a coding mistake, in the vast majority of times it's done intentionally. It's an attempt to avoid material to be copied/pasted on another website. I find it annoying when the font is small, there are big chunks of text or Chrome does not render properly the new Helvetica font, because I cannot highlight the text, this help me to read it.

[@MarkoDjukic]

"Reader Mode" in Firefox or Chrom (chrome based) doesn't help?

[@RealFlicke]

I agree. But it can also be stupidity/laziness if you carelessly use "pointer-events: none".

[@GuilhermeBrennerBello]

I think we have to interpreted this items listed on this video. Yes you can use a overlay panel, its not a rule that not can be broken. Ok, my design don't use overlays, every click will open a new page with a breadcrumb to contextualize where user are. But some overlay can be more dynamic and contextualized, like Netflix film grid, that pop a overlay panel bring all the user information want to know. Its better than open a new page with a breadcrumb to came back without preserve scroll position and the thumb where user click. like a comment that I read here, content is enough to navigate, the menu it isn't the main interaction now menu is the old footer site map now.

[@mack_solo]

Points 10, 9 and 4 come from not understanding the available real estate of the platform the site is designed for. 16:9 has been a de-facto desktop screen standard for 20 years now, yet we still see 4:3 templates of VGA era in majority of the websites. Incidentally this is what happens when "no coding required" is adopted by designers to produce the layouts in absolute numbers on their local machines, which do not scale to users relatively different display sizes. Thus we end up with hero images that overbear the content, or text clustered in the centre without a reason, or DUPLO sized graphic/headers which imply users are babies.

[@PeterVillevoye]

Well, 16:9 is not a de-facto standard at all. In fact, no dimension has been a standard for the last 20 years. Laptops and desktops have sported numerous dimensions, and users have all kinds of bars and docks on the top, bottom, and sides of their screens, eating into the screen's real estate. And users are often using multiple, larger, and especially wider screens, so they tend to have multiple windows open loosely next to or overlapping each other. To be honest, when using my laptop attached to my much larger and wider (35") second screen, I notice I'm using many windows in a less oblong shape. Differences in dimensions have been a long-standing issue for reusing content in many media, not just screens. Just look at the sheets of paper Jakob is holding. To many viewers, this US Letter format has an oddly sized dimension, compared to the globally more common A4 sheet size. (BTW, the A4 adheres to the Golden Ratio, and that's not 16:9 either...)

[@mack_solo]

@@PeterVillevoye Well, you are incorrect. HDTV is a standard and it uses 16:9 ratio, as do majority of HD computer and gaming displays which followed suit (in fact replaying movies in the correct FHD aspect ratio was the major reason): 1280×720, 1366×768, 1600×900, 1920×1080, 2560×1440, 3840×2160, 5120×2880, 7680×4320 - these are all in 16:9 ratio as are these: WXGA, HD, 1080, 2.7K, 4K, UHD, 8K, etc. Good coding practices recognize that one may not necessarily look at the sites at full screen, and the layout will break at some point when the user heavily customises the viewing window, but that's not what the website design is aiming for. I've never had a product spec to design a website for the "less oblong window on the left screen". On lighter note, you're stating the lack of 16:9 ratio as a standard on the platform that adopted it some time in 2008 :) (all videos are in 16:9 window and the KZbin website has been designed to complement that). The video was about common website design mistakes. Not understanding the differences between resolutions and screen ratios is a mistake, which will often result in negative UX (even if it's just in KZbin comment section ;)

[@RealFlicke]

Spanning a block of text over the whole screen width would be terrible to read. I think it's good to have most of the content in a fixed width block which is centered. But you could split it up into columns for some designs.

[@clarazuccarino3309]

Thank you Jakob, I totally agree and this list would me on my mine for ever!! Learn and grow 🤩

[@ninas1675]

The content of this video is very helpful. But seriously, why do you use paper sheets instead of a well designed presentation with some examples..?

[@UXHeWrote]

As a UX writer, I run into #7 all the time. Ambiguous icons without labels....urgh!

[@UGPepe]

#2 is the big elephant in the room for the current generation of web developers, with their bloated stacks, microservices and containers on top of containers to implement trivial tasks

[@LazarusStr]

Great perspective along with a lot of valid points. I will keep the thought of creating a quit none arrogant web site 😀 😂

[@MinimaLune]

Please make UX adjustments to your KZbin channels. Here are my suggestions: 1. Add timestamps to easily navigate between each section of your videos 2. Provide full description with links that navigates to the resource or reference 3. Add your social, and website information to each video (perhaps in the description) 4. Add some background music to make longer videos more pleasant to watch 5. Record videos in 60fps

[@JamesSmith-kv8js]

I couldn't agree more. It's kinda ironic that NN/g, as one of today's pre-eminent UX/UI authorities, doesn't bother to provide a great user experience with their own videos. In fact, they commit some of the very design mistakes they call others out on. I would add to your list: 6. Show not tell. Only having a presenter talking is not enough. 7. Use proper inserts, not paper board cards. 8. Be brave, allow comments in all your videos. 8. Use a more toned-down, de-saturated background.

[@aytaneminova8417]

1. Most of the videos on this channel are 3-4 min long. That's why timestamps are not deeded. They occasionally add some longer videos. 2. They usually have reference in the articles on their website. Because they're based on research. For videos they don't have references because they're mostly observations and advice from usability from experts working at NN. It'd be funny if they used the same video as a reference to the original video. 3. They already have it. End of each video. 4. Please no. It's annoying. Not everybody likes it. And as I mentioned before, they barely have long videos. Most videos 3-4 min long and some people like me watch longer videos at x2, so I can't imagine how ridiculous it'd sound with background music. 5. Yeah this one maybe.

[@katarzynamrowczynska6510]

In some videos it would be very helpful to add some examples (screenshots or something) popping up as extra elements in the video. But that is obviously time consuming because it needs video editing. On the other hand, I am sure the NN Group could afford hiring a video editor or an intern :) It is amazing and useful content but nowadays it is great to make an extra step for a better user experience. Many new UX designers learn from your videos and they might find it difficult to picture what you are explaining without seeing the examples.

[@vaskenmouradian287]

#6 don’t some site disable this so that people don’t take the content they have and put on their own site?

[@MarkoDjukic]

1, 4 and 8 are on my "Most Annoying" list.

[@neerajraje]

Huge image above fold is my fav. it's become a blind spot now.

[@МаріяМариніч-ж9з]

Thank you for so interesting information!

[@chumleyk]

Did you really need all these people on the video meeting for this?!

[@UGPepe]

you can thank octogenarian unelected GDPR legislators for the #1

[@RogerAL]

Great Video!!

[@dupasraka47]

wheres the data on those?

[@MehboobRiaz]

Thank you so much!

[@jwsc9578]

#5 is the worst ...

[@nichnadahu]

Thank you

[@Spacecookie-]

11:30 blowing bubbles?

[@mack_solo]

Point 6 - that's clients' own doing. This is what happens when the pursuit of copyright protection is vigorously implemented ("right-click disable").

[@shantyman161]

If people want to copy, they will achive this no matter what the site allows - even if they have to take screenshots. So not allowing copy/paste will only annoy users.

[@LaLu85558]

Очень жаль, что нет русских субтитров ((((( It's a pity that there are no Russian subtitles ((((

[@enterpriseux]

I wish, Norman and Nielsen finally would get retired. At least 50% of these 10 is bullshit and I always wonder, where those guys take this from... E.g. The Full Screen Teaser Websites perform great, when used smart. Icons don't need labels at all in many cases etc.

[@craigsims808]

Preposterous analysis

[@Naturehack]

Lolol how many of these commenters are Amazon prime members? NN Offensive Ignorance A professional skill I've bought one thing from Amazon way back when and they attempted to hinch me bye-bye then Shut up Norman! I must remain ignorant

[@Leo-Crespi]

please don't listen to this guy

[@retagif]

It's an arrogant that thinks what users want

[@Leo-Crespi]

@@retagif That wouldn't be an issue if he had something good to say after all, the problem is that his suggestions are outdated and sometimes just nonsense.

[@Loyyid]

@@Leo-Crespi can u give an example of his nonsense?

[@ajnikhil]

why?

[@welling1]

He backs up everything with evidence and case studies. Screw your feelings.