Top 10 Web-Design Mistakes

Summary

In his 2021 keynote, Jakob Nielsen discusses the top 10 web design mistakes, highlighting issues like mobile design on big screens, large hero images, layout shifts, unlabeled icons, and inflexible input. He emphasizes the importance of user-centered design, criticizing arrogance in web design that prioritizes the site over the user. His top mistake is the overuse of pop-ups and overlays, which obscure content and degrade user experience. Nielsen urges designers to eliminate these mistakes to improve usability and business value.

Takeaways

• 🌐 The top 10 web design mistakes of 2021 were presented, highlighting that some issues persist from previous years due to a lack of awareness or action.
• 🔍 'Evil design' refers to intentional user-hostile design choices, such as Amazon making it difficult to unsubscribe from annual memberships.
• 🤔 'Stupid design' is attributed to a lack of understanding of good design practices, which the top 10 list aims to address by raising awareness.
• 🛠️ 'Lazy design' is when designers know a practice is flawed but fail to correct it, often due to resource constraints or low priority.
• 📱 Mistake #10: Mobile design on big screens is an example of not tailoring the design to the user's medium, leading to a poor user experience.
• 🖼️ Mistake #9: Having only a huge hero image above the fold is compared to outdated splash screens, which hinder user interaction and information access.
• 🔄 Mistake #8: Layout shift during page load is a technical issue causing aesthetic and usability problems due to components downloading and shifting the page layout.
• 🏷️ Mistake #7: Icons without labels can confuse users, as the same icon can mean different things across different websites, and obscure icons are hard to interpret.
• 📋 Mistake #6: Not allowing users to select and copy-paste text disrupts a fundamental user behavior and integration mechanism across applications.
• 🔢 Mistake #5: Inflexible input requirements, such as specific formatting for codes, can increase error rates and hinder the user experience, especially with copy-paste.
• 👀 Mistake #4: Low-contrast or tiny text is a significant accessibility issue, affecting users of all ages and reducing the readability of content.
• 🔗 Mistake #3: Misleading links that do not meet user expectations can damage trust and user satisfaction, as links should be a promise of content delivery.
• 🕒 Mistake #2: Slow response times, whether due to outdated technology or slow cloud service components, negatively impact user experience and site usage.
• 🚫 Mistake #1: Pop-ups and overlays are the most intrusive design mistake, obstructing content and overwhelming users with unnecessary interruptions.
• 📚 The common thread among these mistakes is arrogance in design, where the website's importance is placed over the user's needs and experience.

Q & A

What is the main topic of Jakob Nielsen's keynote speech?

Jakob Nielsen's keynote speech is about the top 10 biggest design mistakes in web design as of 2021.

Why does Nielsen consider some mistakes on his list to still be a disgrace even after many years?

Nielsen considers some mistakes to be a disgrace because they persist despite being identified as issues in earlier years, indicating a lack of improvement and awareness in web design practices.

What are the three categories of bad website design according to Nielsen?

The three categories are evil design, where the site deliberately does something bad for users; stupid design, where the designers are unaware that their design choices are harmful; and lazy design, where the designers know the issues but fail to fix them.

Can you provide an example of 'evil design' as mentioned by Nielsen?

An example of 'evil design' is Amazon's difficulty in unsubscribing from their annual membership, which is intentionally designed to retain customers by making it hard for them to cancel.

What does Nielsen mean by 'top mistakes' in the context of his list?

By 'top mistakes,' Nielsen refers to design errors that are both particularly annoying or harmful to users and prevalent, meaning they are commonly found across many websites.

Why is mobile design on big screens considered a mistake according to the script?

Mobile design on big screens is a mistake because it fails to adapt the user interface for the medium the user is actually using, which can result in a poor user experience, such as the improper use of a hamburger menu on large displays.

What is the issue with having only a huge hero image above the fold on a website?

Having only a huge hero image above the fold can be problematic because it may not communicate effectively what the site offers, limit user choices, and create an illusion of completeness that can hinder the discovery of additional content below the fold.

What are the problems caused by layout shift during page load?

Layout shift during page load can cause aesthetic issues with the page moving and jumping as elements settle, and severe usability problems as users may click on elements that have shifted, leading to incorrect actions or navigation.

Why are icons without labels considered a usability issue?

Icons without labels can cause confusion as the same or similar icons may represent different functions across different sites, and obscure icons may not clearly convey their purpose, leading to user hesitation and potential errors.

What is the impact of not allowing users to select and copy-paste from a website?

Not allowing users to select and copy-paste disrupts a fundamental web operation that enables information sharing across applications, potentially hindering user tasks and reducing the likelihood of users engaging with or recommending the site.

How does inflexible input negatively affect user experience?

Inflexible input can be a significant annoyance and usability problem, as it often requires users to enter information in a specific format that may not align with common practices or personal preferences, increasing the likelihood of errors and hindering the ease of data entry.

What are the implications of using low-contrast or tiny text in web design?

Low-contrast or tiny text can make a website difficult to read, especially for users with aging eyesight, and can be a significant barrier to accessibility, potentially alienating a large portion of the user base.

Why are misleading links and expectations considered a design mistake?

Misleading links and expectations break the fundamental promise of a hyperlink, which is to provide specific content when clicked. This can frustrate users and undermine trust in the website's content and navigation.

What is the recommended response time for a website according to Nielsen's usability guidelines?

The recommended response time for a website is sub-second, or one second or less, to ensure a smooth user experience and avoid the perception of the computer slowing down the user.

What is the number one design mistake of web design in 2021 according to the script?

The number one design mistake of web design in 2021 is the overuse of popups and overlays, which obstruct the user's view and interfere with the content they are trying to access.

What does Nielsen suggest is the underlying cause of many web design mistakes?

Nielsen suggests that arrogance on the part of website designers and developers is the underlying cause of many web design mistakes, as it prioritizes the website's interests over the user's needs and experience.

How does Nielsen relate the poem 'The Charge of the Light Brigade' to user behavior on poorly designed websites?

Nielsen relates the poem to user behavior by suggesting that users, like the soldiers in the poem, do not make reply or reason why; they simply leave if the website is unpleasant or difficult to use, which can ultimately harm the website's success.