50 Website Design Mistakes (And Why)
Вставка
- Опубліковано 8 тра 2024
- 50 web design mistakes and explanations, that you can learn to avoid making the same mistakes yourself.
[1] www.nngroup.com/articles/illu...
Music: • Last Night
Support me on Patreon so I can post more videos: / thewebsitearchitect
I agree with a lot of them but some of those are very partial. So if we follow ALL those rules we end up with the same boring websites everywhere. Design is in constant evolution and it'll only do you a disservice ignoring designs just because you don't like it.
Look. İf you want the thing work simplesty is the key. İf you want it to be good looking the UX will decrease. This is something about humans we don't like changes.
Just because iphone13 looks like iphone12 this doesn't mean it's boring this means it works !
It's funny, your statement implies websites aren't supposed to be boring. Websites are devices to provide information, written, and visual. that information is about the company and the information is for the client or potential client to learn via the website.
Before websites, there were books, pamphlets, and brochures, none I have seen be very exciting.
Websites are meant to provide boring information for a company. Website designers are the ones that get bored and decided to spice it up and so it began. The exciting website. bells and whistles, and animated this and flashing that, well, in the e-commerce space the average bounce rate is around almost 50%. A business person comes to a site strictly for business-related information, boring information. he encounters your exciting website, and he bounces, onto the site that gives him the information he needs without all the eye candy. The 50 matter.
I would disagree, you can have very unique and great looking websites while still following them, heres some for example:
www.emyth.com/
neoreach.com/
Its up to you if you want to follow them or not, but most if not all of them have us user experience reasons to back it up - its not just because I dont like it. Its about finding how far you want to push usability to stand out, I have a bias wanting to promote the former.
Following all these rules don't mean you'll have a boring website, you'll just have to do more reasonable work to make it not boring and still serve its purpose, making it special at the cost of serving its purpose is lazy... how's avoiding these things will make a website boring? It's like asking an architect to make a house not boring by ignoring the main reason it's called a house...
@@the180degreerule3 I love you.
You know, I've been designing web pages since the '90s. And I've never been comfortable with all the flashiness of these newer designs. Seemed to take away from what a website is truly meant to do. And I was told I was being old-fashioned and maybe shouldn't even be in the business of web design. But now I know that it wasn't me all along. It wasn't me. IT REALLY WASN'T ME!!! Great video.
You actually expressed that view amongst your colleagues? And they screamed heretic to you and said why are you even there?
You are brave sir, people have been executed for lesser offenses. kidding.
You didn't know they were anti-standards, well now you know, and there is a term for them, "faddists". They fall in love with the latest fad. They go out and learn and use it in their designs. Doing that is like an addiction.
I do that only reluctantly because you really need to keep up with the latest techniques. But, with your people, it sounds like a religion, to actually question your love for design, because you hold certain thoughts, and imply you don't belong. That my friend is called intolerance, something you'd never expect to find in a design/development shop or department. Well, now we know.
Get ready to be replaced by AI very soon !
To put it in a paraphrase from Jacob Nielsen: "No one cares about your splash screen. Users just want to get in, do what they need to, and get out as quickly as possible."
Most of these (if not all) sins against web design just add flair at the cost of user efficiency. Good list, I approve.
I agree with all but one of these. #15 is actually a big accessibility "pain point". People got used to dropdowns on hover, but technically it should be on click.
This is one of those things that got adopted even though it's an incorrect pattern.
I was thinking this same thing during the video. I think I agree with the majority of his points, except for the point about hover on menu.
Hard to hover on a phone heh.@@alanbloom20
exactly hover drop downs suck, they close if you accidently move your more and open when you don't want them to open
Agreed. Click drop downs are much more predictable.
also you can't hover while using phone, tablet etc
@@junimeme5626
Great video. My views…
2003: make it more animated, more unique, more multimedia.
2023: make it more like Craigslist
Thank you for this. I've been stuck with designing rather than creating content to my site. More power to you
I love your straight forward explanation, and same for me, these annoys me a lot, where I've to think twice where the button is , what the site really stands for, and literally the pre loading shit, i don't have that much of time to wait for couple of minutes for the site to load it's stuff.
I really liked your explanation, would really love to see more content in the future,till then lemme watch some of your old ones.
Every piece of advice you've provided is incredibly helpful and valuable.
Your tips are so skillfully structured that breaking even one of them could lead to a significant misstep.
Thank you for sharing this exceptional content. I'm delighted to become one of your subscribers. ❤
I agree having less form fields is generally better, though having both first and last names is valuable and probably worth keeping for many
On a contact form it’s not necessary. On a user profile form, yes.
I agree too especially with international customers.
It makes it easier when you contact them especially when the form creates an account in your CRM.
Absolutely. It depends on your goals.
If it's a normal contact form, 1 is fine. If you're going to be emailing them regularly and want to have a casual hello with their first name after it, separating first and last name is essential.
All I can say is, "Say it louder for the people in the back!" Such good tips!
More like "shout it louder for the people in the front". (Yeah, if only they wanted to listen… :q )
As a recent boot camp graduate and looking to build a portfolio website; thank you for these tips. They are really helpful.
Yes a Part 2 please. I seriously enjoy learning from your videos. I find them to be the best. Thanks
Great video lots of info in a short time, thank you!!
Hey, could you make the exact list but with opposite areguments? I think id'd be fun to see the completely different ouput with a different perspective. Great content btw. Thank you as alwyas
I was hoping there was at least one I couldn't agree on. But you nailed it 100%.
Would love an updated list that takes into account ADA compliance requirements. Several of these reference design choices that don’t meet WCAG 2.1 (2.2 is being finalized soon, too). As designers, it’s our job to make content accessible to all. Thank you for taking steps to move the community forward.
I was just thinking this. A follow-up plus update would be great. I wonder if he still hates smooth scrolling...
I was thinking the exact same!
Bro like all of these 50 points are legit. U da man
i love this video... thank you for your research..
I needed this so badly, it's going in my Saves.
While I agree with many (if not all), it is the be handled subjectively. If you are making a website that is more fashion over function, then do whatever you want to achieve it. If you want a Henry Ford-esque guide to an effective user experience, this is the list to follow. It’s not sexy, but it works.
i actually find hover menus annoying. Cause sometimes Im trying to reach something else but it gets in the way. I think so,e of these are fine for portfolio because you are trying to show off what you do and flashy can get the client’s attention
OMG please make a part 2!!!!
"Instead of having to hide how slow your website is...." LMFAO. This is fantastic. I am showing this to my web design class. Thank you!
Fantastic! I wish more designers understood what you’re trying to get across.
Wow...Great video!!
Absolutely brilliant. Love number 50
I'm sorry but can you explain the number 50 for me pls. I don't know whether he means that "smooth scrolling" is a mistake or "smooth scrolling" is the standard that designers shouldnt f*ck with??
I totally agree!! We visit websites to purchase or get product information as quickly as possible, not to be amused by the "WOW!" kind of Cool design. Why are so many "web desinger" misunderstood? Right?
Your videos are very useful and provide lots of information. I have received lots of help after watching this post, please continue to share this kind of information. Thank you.
Thx for the video, can you elaborate more about the smooth scrolling? I think a small amount won't hurt.
I think it means that when you scroll it moves to the next section to keep it fully align with the screen.
In another video, he mentions this. (I think it's the homepage video)
I feel you brother, I feel you. You're not alone. I will do the mathematics based on your advice and create a personal website for myself.
I love web development.
This guy managed to list everything that make me angry about websites.
I love it
WOW just WOW!!! Love this and If you listen with the right ears you will know that he just summerized 3 yrs of university studies of design, graphic design and psychology. PLUS biz strategies and how to increase ROI!! Dude you are probably a lot more intelligent than people give you credit for!!! I see you!!! Can't belive I found you just now!!!
You do make good points, but a lot of these seem like they stem from a belief that there's a set 'correct' way to make a website. While there are certainly 'incorrect' ways, some of which you did touch on, there's also shades of gray within all this. I think you demonstrated this bad/good approach best with your point about not using emojis in your design, since it doesn't look professional - maybe, but not everything in life is 'professional', there are brands out there that may benefit from the goofiness of a crying laughing emoji. There are also brands that may benefit from a mostly eyecandy website, since websites aren't always about being a cold conversion funnel, building brand image is not a thing you can really always box with the same old tired 'we're a company that does things for these clients, contact us' layout. Contact buttons aren't always bad, too. You may not care much about leads, in which case a simple button taking the user to their mail client is perfectly fine.
Context matters, and context varies, vastly.
I was looking for a comment like this, I definitely agree with you!
I study graphic design and even though this video had some useful tips, some other ones really hurt creativity. It really depends on the target audience and the goal of the websites. Sometimes it's better to go for a more interactive website which can retain users attention for longer or to switch something up with the goal of leaving a long lasting impression, than to go for a traditional website. Yes, users may not be used to some of these features but technology and design is progressing and newer generations are getting used to them already, so why stay behind if we want to appeal to them?
Doesn't activating the navigation dropdowns on hover take out control from the user? I know it is a common practice, but not sure if it is the better option. This might be more evident with megamenus.
Tbh this is one ive recently had some updating beliefs on, im still unsure about it. I would say that because hover is still very common I would stick to using that. The problems with hover (like accidentally getting out of box boundaries in a sub-dropdown) can be solved with some thought and proper spacing. My thoughts so far!
Great video, better ending
That so much wisdom has only 10K views … it’s a crime.
In another video you said it's okay to use the click to show dropdown as someone cannot mistakenly get out of focus. And clicks are better for retaining focus and not lose focus of active dropdown. Which is the good one now?
Super clear and agreed on all aspects. Simplicity sells. Fancy stuff disturbs your eyes.
Really educative video for me and I am 99.9% agree with you, it's just that I have a bias for a bit of customization to scrollbars, custom enough to look consistent with my site design while 100% serving its purpose as distinctive and as usable like the browser provided one. a close example will be UA-cam's scrollbar in dark mode.
I think the exception to this (or rathere these 50) rule is for portfolio websites for web designers who actually want to exhibit their skillset and how they have the technical expertise to push boundaries their potential client would possibly want
I'm binging all of your videos right now. So pissed at YT for not showing me content like this instead of the kiddie meme crap. Ok, rant over.
Thanks for the value.
You amuse me. 😊
I am torn here... Personally, and a lot of other people I talk to, prefer a unique design over the same one. Half of this boils down to making it look like every other website. I don't think that makes any impact on someone if they don't remember your website because it looks the same as the other one they just clicked. Some of these mistakes, I think are bad because they were executed poorly. Though, I think these ideas make things that people would remember you or your product. I think it's a matter of balance.
The answer is to make your website unique enough to be remembered yet familiar enough to easily use. Just because there's a 50-odd things you shouldn't do to your website, doesn't mean you can't create a great, unique, rememberable, and easy to use website.
Great Video
24. How do i make it vertical when there are supposed to be 18 items in the drop down
A megamenu layout.
In Tip 15, what about the 'hover tunnels' that get created ??? You did mention it in the header video when you said, we can make it 'click' rather than Hover to avoid the hover tunnel issue, please highlight on this ?
Thank you bro!
Could you make a video about a clean website project structure as dev?
Excellent.
Great video
I hear and obey. You are only too true. It's funny I think what you have said, but I see it so much I think that it is the norm, well apparently the norm is not the standard. Understood. I am happy to adopt standards and simplicity. It saves a lot of time researching how to do dat.
Now I know wanting to be normal is OK. I went to school to learn web design and have been inundated every with these design atrocities ever since I graduated. What you have said is the proper way. If you want to have some real fun, find the Fortune 5000 sites that use cinematography types elements in their websites. I believe to set themselves apart, and to be "advanced". I figure anyone that goes to that site just wants the information, not to see a show. great video.
Honestly I always believe the future of websites is simpler and slick designs and not flashy designs
Is this still the same site? hahaha I love your content!!!
Fenomenal tips. We need to care more about UX
great tips, thanls a lot. but i dont quite understand the last one (tip 50). can you explain a little more?
I love the hint of sarcasm :D
Super video.
you should have milions of views dude..
PART TWO PLZ 😅
You mean 50 more mistakes?
Some of the designs are suitable for portfolio presentation, but when it comes to business, I agree that they may not be appropriate.
lol.. you make me laugh but you speak the truth 100%!
what is "conversions"?
I'm creating a website nowadays , my website's layout and and alignment got randomly misplaced, I mean All the options on my webpage got here & there, lost their actual fixed places And positions. What should I do please help.
I agree with everything said here. Get creative on your own site. Not a clients
I have to say I severely disagree with #44 in the context of websites selling cars or other expensive, configurable goods. The #1 factor for good conversion there is not a fast UI, it's having a 3D configurator where people can set up "their" car. Those things take time to load.
If we're talking about just loading a video for a background I agree completely, though.
I use justified and smooth scrolling 🙈 ill change it now
Wouldn’t separate fields for first name last name benefit uploading lists to mailchimp and other email platforms? Seems like that is more important.
I didn't get #50. Can somebody please explain? What is wrong with smooth scrolling?
Im not sure about hover drop down menu most dropdown menus opens on click nowadays
Hope this video can help new web designers to avoid making the mistakes on making websites.
More vids plz🔥
Can you expand on smooth scrolling?
Please what is vague H1, I can not find explanation to understand it. As mistake 22.
Sticky menus that don’t have a background color. Did you forget ?😅
Some of it are great & understandable, but some of it is also a little bit .. outrageous~
I laughed out loud at the point, "You're not special just because your logo is placed on the right side." By the way, great insight. I agree with some parts and disagree with others.
What is wrong with smooth scroling? It makes is so much easier to follow the flow on the screen when scrolling.
This UA-cam comment section didn't have a label. It had a placeholder :p
Okay I found 3 on my design and have gotten rid of them I owe you a drink.
A call to action on the hero image. Why do you expect me to book an appointment when I don't know anything about your service/product yet.
Exactly. Same question with me.
The biggest mistake is not what the designer want or dont want in a website, it is what the client wants in the end that counts😂😂
I agree with 49 of them 🙃
You've peeked my interest, which one? Better not be smooth scrolling.
@@thewebsitearchitect Haha! No, I disagree with the need for a home link as part of the main navigation. I did test this with quite a few people and all of them just clicked on the logo whenever they thought they needed to go back to the homepage.
@@kelindrawn Its defeinely becoming more and more fundamental knowlege, but I beleive its still best to keep in there for people who arent tech-savy or used to using the internet as much as we do. The people you tested probably didnt include your grandmother, and thats the exact type of person I like to add the homepage link in for. Its definetly not one of the most important of the 50 mistakes, so I am on your side - its not really a big deal.
@@thewebsitearchitect Does it not also boil down to the question wheter or not there is content available that is exclusive to the homepage? If so then yes, a way to go back there needs to be available and it needs to be obvious as well. If not, I think even my grandmother would pick the destination directly from the main nav :)
@@kelindrawn Personally I think it boils down to just providing more value. It would better to have it then not have it, if you were to remove it then the likely reason why is because you thinks it looks better without it but that's sacrificing UI for UX which I'm not for. I found this (cherry picked) article: www.evolvemarketingteam.com/blog/web-design/yes-your-website-still-needs-a-homepage-button-or-link/ with this quote to try to convince you: “Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a reset button or using a ‘Get out of jail free’ card.” - Steve Krug
You hit every nail square on the head.
Splash pages serve a purpose, not just another entrance. Most of the time, a splash page is being used as a lead magnet by affiliate marketers or someone who doesn't own the content on the final destination page. These are marketers trying to grow their email list, not designers adding an extra step just for the fun of it, lol.
0:37 Rare accessibility recognition for "very little people"; as web developers, we must realize that people such as Warwick Davis and Peter Dinklage also use the web.
I agreed with 100% of the 50 points you made, and may I offer an additional point that makes my blood boil? And it's one that I never see anyone mention, and that's aggressive text truncation. Notorious offenders include the Apple help forums, which force the user to click "show more" on every single response, regardless of length - even a reply that spans only three sentences! And of course there are the ubiquitous phrases of anything longer than five words that get the ellipsis treatment (sometimes impossible to expand!). UA-cam itself is notorious for this one, forcing users to click a video just to see the entire title. This problem also plagues side menus and drop-down options (BitBucket and JIRA are egregious offenders, often concealing crucial information). What's a few extra bytes of text in an age of streaming content!? Let me read the text, FFS! 😡💨
No estoy de acuerdo con algunos, y hay otros que son algo cuestionables. Pero la mayoría son muy acertados.
Thanks for the helpful video. What exactly does „smooth scrolling“ mean and should it be used or not?
Smooth scrolling is something people add to a website to alter the way the scroll works when using the scrollwheel on your mouse. It feels as if your scrollwheel is on ice when scrolling. The scrollwheel is a feature that should be consistent across websites. Its one of the most important features people use in a browser to view a website, and hence why you should'nt go changing peoples control of it.
Man, I wish I found you a month ago!
Can you do a video on things we SHOULD implement cutie? Thanks ahead
Whats wrong with smooth scrolling i use that for everything lol
Excellent video and I agree with most of the information presented but should you not practice what you preach? On my 13-inch Mac, your website is a victim of the illusion of completeness. Also, you might wanna do a contrast accessibility check.
These rules are for a business website na, what if we are making a theme based website
agree with most but some of these feels like you're just butt hurt about something, contrast is a thing and sometimes to stand out would be a good thing as opposed to a bad one when pulled off correctly, it's better to say that it is not for just anyone to try to pull off these stunts
Notes of the video:
* Using sliders: They are ineffective and very few people will see the content beyond the first slide.
* Auto-playing sliders: They do not promote a good user experience.
* Making users click to see the navigation: If the navigation can fit on one screen, put it on the screen.
* Center aligning everything: Especially text that has more than three lines, it becomes annoying to read.
* Using justified text alignment: The inconsistency between the spacings of each word makes it harder to read.
* Using right alignment for text: Same reason why you shouldn't use center alignment.
* Splash pages: They make users work extra to get to the website content.
* Slow-loading animations: They make it impossible to quickly scan a website for content.
* Hiding the scroll bar: It creates a bad user experience.
* Styling the scroll bar: The scroll bar is meant to be a consistent feature to navigate websites.
* Horizontally scrolling marquees: They are annoying to look at and difficult to read.
* Changing the background color of the website as you scroll: It takes away from the content and it's distracting.
* Customizing the cursor: It confuses users.
* Forcing users to click a dropdown in the navigation for it to appear: It should appear on hover.
* Turning the entire website into a vertical slider: Scrolling should be consistent from website to website.
* Using emojis: It looks unprofessional.
* Not following web design standards: There's a reason why they exist.
* Wasting time with time-consuming opening messages.
* Wasting time with long menu animations.
* Making the hamburger icon button not look like a hamburger icon.
* Using vague h1s on the home page: It's bad for user understanding and SEO.
* Using typewriter text changing effects: It's annoying and hurts user experience.
* Horizontal submenus: Users expect them to be vertical.
* Making the color of your call to action the same color as everything else on your website.
* Sticky menus that don't have a background color.
* Having separate first and last name fields for forms in small to medium size forms: Combine the two fields into one full name field.
* Horizontal scrolling websites.
* Small home pages: The home page should be informative enough.
* Center aligned text forms: They should always be left aligned for better usability.
* Having a menu that just has icons in it: New users shouldn't have to think to be able to use a menu.
* Square buttons: People expect buttons to be wide.
* Forms without labels.
* Hero sections that span the entire height of the screen: It creates a false impression that the website doesn't have more content.
* Link in the description to read more about it: If your design is so unintuitive that it requires you to tell me to scroll then your design has failed.
* Websites that automatically play sound.
* Making users hover over something to see the titles.
* Logos that don't have the name of the company in it.
* Navigation should always be at the top.
* Vertically aligning text: This is another example of sacrificing ux for ui.
* Not having the home link in the navigation.
* Unloading content with an animation to only have to load it back with more animation.
* Preloaders for the making of this video.
* Home pages that are just slideshows.
* Interrupting vertical scrolling for horizontal scrolling.
* Overlays that aren't opaque enough to be able to clearly read the text in front of it.
* Text over background always.
* Not putting links in the footer.
* Overusing visual effects.
* Smooth scrolling.
And Here I'm trying to learn micro-interaction 😥
When someone has a fancy mouse animation site, I open it on mobile. 25% to 60% of an audience will never see mouse-over animations.
had a good laugh 🤣
"50 Website Design Mistakes" aka.: Sometimes less is more!
Who hurt you?
I avoided all of these.... because I've not built a site 😅
f**king smooth scrolling PREACH PREACH PREACH