50 Website Design Mistakes (And Why)

The Website Architect

12 Jul 202108:24

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

00:00

😤 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.

05:02

😡 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

Web design trends refer to the evolving styles and practices in creating websites. They are often driven by technological advancements and user preferences. In the video, the speaker criticizes certain trends for pushing boundaries at the expense of user experience, highlighting the importance of balancing innovation with practicality.

💡User Experience (UX)

User experience, or UX, is the overall experience a user has while interacting with a website, which includes ease of use, accessibility, and satisfaction. The video emphasizes the negative impact of certain design choices on UX, such as slow-loading animations and non-intuitive navigation.

💡Sliders

Sliders are a web design element that allows users to navigate through different pieces of content horizontally. The script argues that sliders are ineffective because few users engage with content beyond the first slide, suggesting they do not enhance the user experience.

💡Auto-Playing Sliders

Auto-playing sliders are a type of slider that automatically transitions between slides without user interaction. The video criticizes this feature for promoting a poor user experience by forcing users to work to see the navigation or content, which goes against the principles of simplicity and ease of use.

💡Navigation

Navigation refers to the way users move through a website to find information or perform actions. The script advises against making the navigation process more complex than necessary, such as requiring users to click to see the menu, which can frustrate users and hinder their experience.

💡Center Alignment

Center alignment is a text formatting style where text is centered on the page. The video points out that center-aligning text with more than three lines can be annoying to read due to inconsistent starting points for each line, affecting the readability and user experience.

💡Justified Text Alignment

Justified text alignment is when text lines are adjusted to align with both the left and right margins, creating a straight edge on both sides. The script argues that this alignment can make text harder to read due to inconsistent spacing between words, impacting the overall readability.

💡Splash Pages

Splash pages are introductory pages that appear before the main content of a website. The video criticizes them for requiring an extra step from the user to enter the website, which can be frustrating and time-consuming, and also mentions their negative impact on SEO and conversion rates.

💡SEO (Search Engine Optimization)

SEO refers to the process of improving a website's visibility on search engine results pages. The script mentions that certain design choices, like splash pages, can hurt SEO by making it difficult for search engines to crawl and index the website's content.

💡Custom Scroll Bar

A custom scroll bar is a design element where the traditional scroll bar is modified in appearance or functionality. The video argues against customizing the scroll bar, stating that it should remain a consistent feature for navigation across websites to avoid confusing users.

💡Cursor Customization

Cursor customization involves changing the appearance or behavior of the mouse cursor on a website. The script advises against this practice, suggesting that it can be distracting and detract from the user's focus on the content.

💡Call to Action (CTA)

A call to action is a prompt encouraging users to take a specific action, such as filling out a form or making a purchase. The video warns against making the CTA the same color as the rest of the website, which can reduce conversions by making the action less noticeable to users.

💡Sticky Menus

Sticky menus are navigation bars that remain visible at the top of the screen even when scrolling down a page. The script criticizes sticky menus that lack a background color, as they can be hard to read and navigate, thereby affecting the user experience.

💡Form Fields

Form fields are input areas where users can enter information. The video suggests combining separate first and last name fields into one full name field for small to medium-sized forms, as having fewer fields can increase conversions by simplifying the process.

💡Horizontal Scrolling

Horizontal scrolling is a method of navigating content that requires side-to-side scrolling instead of the typical vertical scrolling. The script argues against horizontal scrolling websites, stating that they go against web design standards and can be frustrating for users.

💡Hero Sections

Hero sections are large, attention-grabbing areas at the top of a webpage that often include imagery and key messages. The video criticizes hero sections that span the entire screen height, as they can create a false impression of completeness and make users think there is less content than there actually is.

💡Overlays

Overlays are superimposed elements on top of the base content, often used for additional information or design effects. The script warns against using overlays that are not opaque enough, as they can make it difficult to read text in front of them, detracting from the user experience.

💡Footer Links

Footer links are navigation links placed at the bottom of a webpage. The video emphasizes the importance of including links in the footer, as users expect and use them for quick access to additional information and resources.

💡Visual Effects

Visual effects are graphical or animated elements used to enhance the appearance of a website. The script advises against overusing visual effects, as they can detract from the content, add unnecessary load, and complicate the website's design.

💡Smooth Scrolling

Smooth scrolling is a technique that allows users to scroll through a webpage with a more fluid, gradual motion. The video lists smooth scrolling as a design mistake, implying that it can be annoying or disruptive to some users' experience.

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.