What is ‘bad design’? 10 examples & how to avoid them

Read Time:6 Minute, 30 Second


We’ve all seen web sites or digital experiences that we instantly considered “unhealthy designs.” However what really makes a design “unhealthy”? And the way can we, as designers, study to acknowledge and keep away from these errors?

Understanding what makes a design unhealthy is step one in studying methods to create good designs. Listed here are ten widespread examples of unhealthy design and methods to right their shortcomings.

1. The design is just too cluttered

Cluttered designs had been generally seen within the early days of the web. Designers tried to cram as a lot as they might onto every web page, typically ignoring white area fully. The outcomes had been pages that had been onerous to navigate, lacked construction, and made discovering what you had been searching for virtually not possible.

Whereas the cluttered UIs of 90s design and early 00s have (largely) disappeared, cluttered designs nonetheless exist. Whereas not each web site must be minimalist, with wide-open areas between every aspect, make sure that you’re giving your design some respiratory room. Take away pointless parts when attainable to permit the necessary elements to face out.

2. Inconsistencies in your UI

Inconsistent UI is among the most annoying sorts of unhealthy design. When colour palettes change from web page to web page, navigation jumps round on every web page to wherever the designer felt like placing it, fonts appear to be chosen at random, and there’s no unified visible model, customers endure. They need to continuously re-acclimate to every part or web page of your website, requiring further psychological effort to realize their objectives. And even small inconsistencies can contribute to this.

Probably the greatest methods to fight inconsistencies is to create a mode information in your designs.

Probably the greatest methods to fight inconsistencies is to create a mode information in your designs. Outline the best way issues ought to look, together with the place issues like navigation needs to be positioned on every web page, what the colour palette needs to be, the typography selections, and even issues just like the width of strains for icons and dividers.

This can assist be certain that your UI stays constant no matter modifications to the content material or involvement from a number of designers.

3. Poor typographic hierarchy

Do folks come to your web site solely to be offered with a wall of textual content? Textual content on the internet will not be the identical as textual content in a e book or journal. A full web page of textual content with no typographic hierarchy is intimidating to guests and might bore them shortly.

A structured typographic hierarchy that makes it straightforward to pick issues like headlines and subheads in addition to physique copy and captions is significant for readability on the internet. Good typographic hierarchy typically consists of 1 or two typefaces used at totally different sizes, weights, and kinds to distinguish between heading ranges, physique copy, and different textual content parts.

To additional improve readability in digital designs, ensure you use shorter paragraphs, enough line heights, and make necessary content material extra digestible by means of using issues like bulleted lists.

4. Complicated iconography

All the level of icons is to offer guests a visible cue concerning the content material they’re seeing. Icons are sometimes used for issues like navigation. The objective is for customers to right away acknowledge what an icon represents to make interacting along with your website simpler.

Common icons exist for a motive. Particularly, that they’re immediately recognizable to customers. While you begin to experiment with icons or icon sets which have extra summary or metaphorical meanings, all you’re doing is probably complicated customers. When you do stray from universally acknowledged icons, or want to make use of icons for one thing that doesn’t have a common image connected, use labels to stop confusion.

5. Poor kind design

When you’re creating an internet site to do something aside from present data, varieties are probably a part of your UI design— whether or not they’re varieties for customers to subscribe, make a purchase order, or another operate. Sadly, poor kind design abounds on the internet. And in case your varieties aren’t user-friendly, you’ll see a a lot decrease submission charge.

There are just a few staple items to bear in mind when designing varieties:

  • Hold your varieties as quick as attainable to realize the required objective. For instance, subscription varieties ought to ideally solely embrace a area for the e-mail handle, and probably the subscriber’s identify.
  • Make submit buttons extremely seen and labeled descriptively. For instance, use “subscribe” as an alternative of “submit.”
  • Ensure your error messages are useful. Ideally, they need to be triggered as the shape is crammed fairly than after submission.
  • Break up lengthy varieties into smaller pages. A checkout kind, for instance, is perhaps break up into pages for transport data, billing data, and reviewing the acquisition earlier than submitting. Don’t overlook to point progress to customers as they work by means of these pages.

6. Poor alignment

Unhealthy alignment of parts could make a web page really feel unpolished even when customers don’t instantly acknowledge why. However fixing your alignment is mostly fairly easy. Utilizing a grid to position parts inside your design is a straightforward, established option to keep alignment. Don’t overlook to make use of a baseline grid, too.

7. Irrelevant imagery

Pictures and images needs to be included in a design to assist the content material being offered. They need to reinforce the concepts and ideas on the web page, not distract from them. Be sure that each picture you embrace is immediately tied to the web page’s content material. Cute kitten pics are nice, however provided that your content material is about cats!

📌 Try 7 best practices for using photography in UI design for extra knowledgeable ideas.

“It is best to choose photographs which have a robust relationship along with your product objectives and be certain that they’re context-relevant.” — Anastasia Marinicheva, UI/UX Designer

489e5802b7e0de9bf5a7557f8e7a6727

8. Lack of distinction

Unhealthy distinction is extra than simply visually unappealing. It may possibly additionally hurt the accessibility of your designs. Make sure that the distinction between necessary parts — together with textual content — in your pages meets accessibility requirements. This can be certain that customers don’t miss the necessary elements, in addition to make any textual content content material extra readable.

9. Poor consumer analysis

Not understanding the wants of your viewers can result in horrible design. In spite of everything, good design isn’t nearly the best way a website appears to be like; it’s primarily about how effectively your design works in your customers.

Take time originally of the design course of to study what your customers need and want out of your website. Then take a look at totally different design concepts and iterations to give you an answer that solves consumer issues. A design that’s visually mediocre however meets consumer wants and desires will at all times be a “higher” design than one that appears lovely however is tough for folks to make use of.

10. Lack of accessibility

Accessibility is just too typically considered an inconvenience. However accessible designs are extra usable for all customers. Be taught the fundamentals of accessibility to create digital merchandise that work higher for everybody.

Apply WCAG accessibility requirements to your entire designs to enhance consumer expertise throughout the board. Don’t consider them as an inconvenience or a restriction, however as an alternative as a option to make your designs higher for all.


Discover extra Process tales on our weblog Courtside.
Have a suggestion? Contact stories@dribbble.com.



Source link

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.