50 Website Design Mistakes (And Why)
Summary
TLDRThis video script highlights 50 common web design mistakes that can frustrate users and harm website effectiveness. It covers issues like overuse of sliders, poor navigation, slow-loading animations, and unprofessional use of emojis. The script emphasizes the importance of adhering to web design standards for a better user experience, and calls for simplicity and clarity in website design to avoid these pitfalls.
Takeaways
- 🔄 Avoid using sliders as they are often ineffective and not user-friendly.
- 🚫 Stop autoplaying sliders as they can hinder the user experience by forcing interaction.
- 📱 Ensure navigation is easily accessible and not hidden or require extra steps.
- 📝 Don't overcomplicate the contact process; make it straightforward for the user.
- 📚 Avoid center-aligning text with more than three lines as it can be hard to read.
- 📏 Stop using justified text alignment due to inconsistent word spacing that can affect readability.
- 🚫 Eliminate splash pages as they can harm SEO, reduce conversions, and waste user time.
- 🚶♂️ Refrain from using slow-loading animations that can frustrate users trying to quickly scan content.
- 🔒 Stop hiding the scroll bar, as it disrupts the consistent navigation experience across websites.
- 🖱️ Avoid customizing the scroll bar, which should remain a standard feature for ease of use.
- 🚫 Do not force horizontal scrolling as it goes against conventional web design and can be annoying.
- 🌈 Stop changing the background color while scrolling, as it can be distracting and detract from the content.
- 👀 Refrain from customizing the cursor, as it can be confusing and disrupt the user's experience.
- 🔍 Ensure that navigation elements like dropdowns are intuitive and appear on hover, not just on click.
- 🔄 Avoid turning the entire website into a vertical slider, as it can take over and disrupt the natural scrolling experience.
- 😐 Stop using emojis in web design as they can appear unprofessional.
- 🚫 Do not deviate from web design standards in an attempt to be unique; consistency is key.
- ⏱️ Avoid time-consuming opening messages and long menu animations that waste the user's time.
- 🍔 Ensure the hamburger menu icon is recognizable and not overly stylized to the point of confusion.
- 📝 Use clear and specific headings (H1) on the homepage to improve user understanding and SEO.
- 📖 Avoid typewriter text effects, which can be annoying and detrimental to the user experience.
- 🔄 Refrain from horizontal submenus, which are not user-friendly and go against standard expectations.
- 🔲 Ensure call-to-action buttons stand out with a distinct color to increase conversions.
- 🔽 Avoid sticky menus without a background color, as they can be hard to navigate.
- 📧 Combine first and last name fields in forms to reduce the number of input fields and improve conversions.
- 📚 Avoid horizontal scrolling websites, as they go against standard web design practices.
- 🏠 Make sure the homepage is informative enough to give users a clear idea of the website's purpose.
- 📝 Forms should be left-aligned for better usability and user experience.
- 📘 Avoid menus with only icons, as they can be confusing for new users.
- 🔲 Use wide buttons instead of square ones to align with user expectations and promote better user experience.
- 📝 Ensure forms have clear labels to avoid confusion and improve user experience.
- 🎉 Avoid hero sections that span the entire screen height, as they can create a false sense of completeness.
- 🔍 If design requires instructing users to scroll, it indicates a failure in intuitive design.
- 🔊 Websites that automatically play sound can be intrusive and should be avoided.
- 🔍 Avoid requiring users to hover over elements to see titles or content, as it can be inconvenient.
- 🏷️ Logos should include the company name for clear identification, not just an icon.
- ⬆️ Navigation should be at the top for ease of use, with a left menu as an acceptable alternative.
- 📏 Avoid vertical text alignment as it can sacrifice user experience for aesthetic design.
- 🏠 Ensure the home link is in the navigation, as not all users know the logo can be used to return home.
- 🔄 Refrain from using animations that unload and reload content, as they waste user time.
- 🌀 Avoid using preloaders that can't accurately determine when a site has finished loading.
- 📑 Avoid making the homepage a slideshow, as it doesn't provide enough space for effective information delivery.
- 🚫 Stop treating the website like a PowerPoint presentation with disruptive horizontal scrolling overlays.
- 🔲 Ensure text over backgrounds is opaque enough to be clearly readable.
- 🔗 Always include links in the footer, as they are expected and used by visitors.
- 🎨 Overusing visual effects can detract from the content and add unnecessary load and complexity to the website.
- 🎢 Lastly, avoid smooth scrolling as it can be jarring and disrupt the user's natural scrolling experience.
Q & A
Why are sliders considered ineffective in web design?
-Sliders are considered ineffective because they often go unnoticed by users, and only a small percentage of visitors engage with content beyond the first slide, leading to a poor user experience.
How can auto-playing sliders negatively impact user experience?
-Auto-playing sliders can be disruptive and annoying, as they force users to interact with the website in a way that may not be intuitive or convenient, potentially detracting from the overall user experience.
Why should website navigation be easily accessible?
-Website navigation should be easily accessible to avoid adding unnecessary steps for users. If the navigation fits on one screen, it should be displayed without requiring additional actions, streamlining the user's journey.
What is the issue with center-aligning text that has more than three lines?
-Center-aligning text with more than three lines can be annoying to read due to inconsistent starting points for each line, which disrupts the natural reading flow and can lead to a poor reading experience.
Why should justified text alignment be avoided in web design?
-Justified text alignment can create inconsistency in the spacing between words, making the text harder to read and potentially causing strain for users, which is counterproductive to a good user experience.
What are the drawbacks of using splash pages in web design?
-Splash pages can be problematic because they require an extra step for users to access the main content of the website, which can be frustrating. Additionally, they can hurt SEO, decrease conversions, and waste users' time.
How can slow-loading animations affect a website's usability?
-Slow-loading animations can make it difficult for users to quickly scan the website for content, which can be particularly annoying if users are not in the mood to wait. This can lead to a frustrating user experience and potentially deter users from staying on the site.
What is the purpose of the scroll bar in web design, and why should it not be hidden or customized excessively?
-The scroll bar is a consistent feature that helps users navigate websites. Hiding or excessively customizing the scroll bar can disrupt this consistency and make it harder for users to interact with the site, negatively impacting the user experience.
Why should the background color of a website not change as the user scrolls?
-Changing the background color as the user scrolls can be distracting and take away from the content. It can also create a disjointed experience, as the visual elements shift unexpectedly, which can be jarring for users.
What is the issue with customizing the cursor in web design?
-Customizing the cursor can be confusing for users, as it may not be immediately clear what the cursor is or what it does. This can disrupt the user's interaction with the website and detract from the overall experience.
Why should emojis be avoided in professional web design?
-Emojis can appear unprofessional in a professional web design context. They may not align with the brand's image and can detract from the seriousness and credibility of the website's content.
What is the main takeaway from the list of 50 web design mistakes mentioned in the script?
-The main takeaway is that web designers should prioritize user experience and effectiveness over novelty or trendiness. Avoiding these common mistakes can lead to a more intuitive, user-friendly, and successful website.
Outlines
😤 Common Web Design Annoyances
This paragraph highlights 50 common web design mistakes that negatively impact user experience. It criticizes the overuse of sliders, auto-playing media, and navigation that isn't easily accessible. The speaker emphasizes the importance of straightforward design, readable text alignment, and efficient user interaction. Splash pages, slow-loading animations, and hidden scroll bars are called out as particularly frustrating. The paragraph also advises against customizing basic UI elements like cursors and navigation icons, as these changes can confuse users and detract from the content.
😡 UX Blunders in Modern Web Design
The second paragraph continues the discussion on web design pitfalls, focusing on user experience (UX). It points out issues such as unintuitive menus, oversized buttons, and forms lacking clear labels. The illusion of completeness caused by hero sections that span full screen height is mentioned, alongside the problems with websites that play sound automatically or require extra effort to view content. The paragraph also addresses the ineffectiveness of logos without company names and the importance of top navigation for ease of use. It concludes with a call to avoid unnecessary animations and visual effects that can slow down websites and detract from the user's ability to access information quickly.
Mindmap
Keywords
💡Web Design Trends
💡User Experience (UX)
💡Sliders
💡Auto-Playing Sliders
💡Navigation
💡Center Alignment
💡Justified Text Alignment
💡Splash Pages
💡SEO (Search Engine Optimization)
💡Custom Scroll Bar
💡Cursor Customization
💡Call to Action (CTA)
💡Sticky Menus
💡Form Fields
💡Horizontal Scrolling
💡Hero Sections
💡Overlays
💡Footer Links
💡Visual Effects
💡Smooth Scrolling
Highlights
Websites are pushing design trends too far, sometimes forgetting basic web design and user experience standards.
Avoid using sliders as they are ineffective and users rarely engage with content beyond the first slide.
Auto-playing sliders can hinder user experience by forcing interaction to access the navigation.
If navigation fits on one screen, it should be displayed without adding extra steps for the user.
Center alignment of text with more than three lines can be annoying to read due to inconsistent starting points.
Justified text alignment can make reading difficult due to inconsistent word spacing.
Splash pages can be detrimental to SEO, conversions, and user time, so they should be avoided.
Slow-loading animations can frustrate users who want to quickly scan the website's content.
Hiding the scroll bar can negatively impact user experience by removing a consistent navigation feature.
Avoid customizing the scroll bar as it should remain a standard feature for website navigation.
Horizontal scrolling and changing background colors while scrolling can be distracting and take away from the content.
Customizing the cursor can be confusing and disrupt the user's experience of navigating the site.
Avoid forcing users to click a dropdown in the navigation; it should appear on hover for ease of use.
Turning the entire website into a vertical slider can disrupt the expected scrolling behavior.
Using emojis in web design can appear unprofessional and detract from the site's credibility.
Don't waste time with long opening messages and menu animations; focus on user experience.
The hamburger icon should be recognizable to ensure users understand its function.
Vague H1 tags on the homepage can harm user understanding and SEO.
Typewriter text effects can be annoying and negatively impact user experience.
Horizontal submenus are not user-friendly and go against expected web design standards.
Call to action colors should stand out to increase conversions, not blend in with the rest of the site.
Sticky menus without a background color can be confusing and hinder user experience.
Forms should not have separate first and last name fields; a full name field increases conversions.
Horizontal scrolling websites can go against user expectations and harm user experience.
Small homepages may not provide enough information, which is crucial for user understanding.
Center-aligned text forms should be left-aligned for better usability.
Menus with only icons can be unintuitive for new users who need to identify the menu's purpose.
Square buttons may not promote good user experience as users expect wider buttons.
Forms without labels can lead to poor user experience if users forget the placeholder text.
Hero sections that span the entire screen height can create a false impression of completeness.
Unintuitive designs that require instructions to scroll indicate a design failure.
Websites that automatically play sound can be intrusive and negatively affect user experience.
Logos without the company name can confuse users who cannot identify the brand from an icon alone.
Navigation should always be at the top for ease of use, with a left menu as an occasional alternative.
Vertically aligned text can sacrifice user experience for aesthetic purposes.
Not having a home link in the navigation can confuse users who expect it for easy access.
Unloading content with animations and requiring users to sit through them again is time-consuming.
Pre-loaders can be problematic as they often cannot accurately indicate when a site has finished loading.
Home pages that are just slideshows lack the space for effective information delivery and good user experience.
Interrupting vertical scrolling for horizontal scrolling is unpredictable and can disorient users.
Overlays that are not opaque enough can make it difficult to read text, detracting from user experience.
Links in the footer are expected by users and should not be omitted.
Overusing visual effects can detract from the content and add unnecessary load to the website.
Smooth scrolling can be a design mistake as it can disrupt the natural scrolling behavior of users.
Transcripts
[Music]
websites nowadays are trying to stand
out
more and more to do this they push
current web design trends out of their
comfort zone
for better or for worse however it seems
by doing this
they forget how to follow simple web
design in user experience standards
that result in websites being annoying
or uneffective
here are 50 web design mistakes and
explanations
that you can learn to avoid making the
same mistakes yourself
grab a pen this shit's going to be fun
[Music]
stop using sliders they aren't effective
and very little people will actually use
them
and see the content beyond the first
slide
stop auto playing sliders how exactly
does this promote a good user experience
why are you trying to make me work by
having to click to see the navigation
if the navigation can fit on one screen
put it on the screen
don't add an extra step for the user
just to make the website more minimal
if you have a contact button call to
action at the bottom of your home page
do yourself a favor and don't just put
the contact form on the page
instead of adding an extra step for the
user stop
center aligning everything particularly
don't center text that has more than
three lines
it ends up becoming annoying to read
because the inconsistent starting points
for each line
stop using justified text alignment the
inconsistency
between the spacings of each word make
it harder to read
stop using right alignment for the same
reasons why you shouldn't use
center alignment splash pages don't make
me work an extra step
just to get to your website after having
just entered your website
i shouldn't have to then again enter
your website
not only that but splash pages hurt seo
decrease conversions and waste
users time don't have them stop using
these slow-ass loading animations
it makes it impossible to quickly scan a
website for content
if anyone isn't in the mood to watch
your disney film it very quickly becomes
annoying
stop hiding the scroll bar ironically
this is done to
create an experience but at the cost of
user experience
stop styling the scroll bar the scroll
bar is meant to be a consistent feature
to navigate websites
stop messing around with it i don't care
if you have learned a new css
pseudo element marquees or anything
horizontally scrolling
they're annoying to look at in difficult
to read stop changing the background
color of the website as i scroll
it takes away from the content and it's
just distracting
stop customizing the cursor holy is
this still the same site
don't force me to click a drop down in
the navigation for it appear
it should appear on hover stop turning
the entire website into a vertical
slider by taking over my scrolling
scrolling should be consistent from
website to website
stop trying to take control of it stop
using emojis
it just looks unprofessional don't mess
with web design standards by trying to
reinvent the wheel
you're not special because you've put
your logo on the right instead of the
left
stop wasting my time with these time
consuming opening messages
stop wasting my time with these long ass
menu animations
don't make the hamburger icon button not
look like a hamburger icon in attempt to
be special
make it consistent so people know what
it is and what it does
stop using vague h1s on the home page
this is bad for user understanding
and seo can we stop using these
typewriter text changing effects
it's annoying as hell and it hurts user
experience i've seen
hundreds of these and i've always
skipped over them
horizontal submenus a design style no
one asked for
users expect it to be vertical again
don't ignore
web design standards in attempt to be
special
don't make the color of your call to
action the same color as everything else
on your website
you're just losing out on conversions
sticky menus that don't have a
background color
how is this a good thing did you just
forget
if your menu has sub menus in it it
should always have an arrow to indicate
that
this makes for better user experience
and understanding
don't have a separate first and last
name fields for your forms
in small to medium size forms having
less fields has shown to increase
conversions
combine the two fields into one full
name field
horizontal scrolling websites this is
another example of people doing the
opposite of web design standards
stop trying to be special at the cost of
user experience
small home pages the home page in most
cases is the most important page of your
website
so it should be informative enough to
give the user at least a general idea
about who you are and what you do
center aligned to text forms they should
always be left aligned for better
usability
having a menu that just has icons in it
a new user to a website shouldn't have
to think to be able to use a menu
the new mailchimp design also does this
as well and it's
super annoying square buttons people
expect buttons to be wide it just
doesn't promote good user experience
forms without labels this is bad user
experience as well
if i type anything at all and forget
what the placeholder text said
i have to delete everything i just did
to know what the input field was for
hero sections that span the entire
height of the screen
this creates a false impression that the
website doesn't have more content and
that you're at the end of the page
this is called the illusion of
completeness 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 go back to
the drawing board
websites that automatically play sound
do i even have to say why
don't make me work to see content i
shouldn't have to hover over something
like this
just to see the titles this is more of a
graphic design thing
but logos that don't have the name of
the company in it
how am i supposed to know who you are
based on an icon you're not
pepsi navigation should always be at the
top
a left menu can sometimes be okay but if
you want to make it as easy as possible
to use your website it should be at the
top
vertically align text this is another
example of sacrificing ux
for ui not having the home link in the
navigation
not every user knows that the logo is a
reliable way to get to the home page
you don't see this one often but
unloading content with an
animation to only have to load it back
with more animation
stop wasting my time by having me sit
through all these animations
preloaders for the making of this video
i have opened up
hundreds of websites on awards.com and a
large portion of them had preloaders
and a large portion of those sites
didn't load
at all because preloaders often can't
tell
when a site is actually done loading or
not this is actually a very common
problem with them
instead of trying to hide how slow your
website is
how about you stop adding in all this
eye candy
so you don't need the pre-loaders in the
first place
home pages that are just slideshows
there just
isn't enough room to have the amount of
information an effective home page
requires with this layout
and overall this doesn't promote good
user experience
stop trying to make your website a
powerpoint presentation
stop interrupting my vertical scrolling
for horizontal scrolling
it's unpredictable and it usually ends
with me over scroll past
the normal section after it 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
people use them and expect them so put
them there
over using visual effects it takes away
from the content and it adds more load
and complexity to your website
and lastly design mistake number 50
smooth scrolling so there it is
there's 50 web design mistakes
if you avoid these mistakes you will
create a more effective easier to use
and more understood
website if i missed any mistakes let me
know in the comments
so i can make a part two thank you for
[Music]
watching
5.0 / 5 (0 votes)