We’ve all seen web sites or digital experiences that we instantly regarded as “unhealthy designs.” However what truly 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 the way to create good designs. Listed below are ten frequent examples of unhealthy design and the way to appropriate their shortcomings.
1. The design is just too cluttered
Cluttered designs have been generally seen within the early days of the web. Designers tried to cram as a lot as they might onto every web page, usually ignoring white house fully. The outcomes have been pages that have been exhausting to navigate, lacked construction, and made discovering what you have 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 component, make certain that you’re giving your design some respiration room. Take away pointless parts when doable to permit the essential elements to face out.
2. Inconsistencies in your UI
Inconsistent UI is among the most annoying sorts of unhealthy design. When shade 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 must consistently re-acclimate to every part or web page of your web site, requiring additional psychological effort to realize their targets. And even small inconsistencies can contribute to this.
Among the finest methods to fight inconsistencies is to create a method information to your designs.
Among the finest methods to fight inconsistencies is to create a method information to your designs. Outline the way in which issues ought to look, together with the place issues like navigation must be positioned on every web page, what the colour palette must be, the typography decisions, and even issues just like the width of traces for icons and dividers.
It will assist make sure that your UI stays constant no matter adjustments to the content material or involvement from a number of designers.
3. Poor typographic hierarchy
Do individuals come to your web site solely to be offered with a wall of textual content? Textual content on the net just isn’t 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 rapidly.
A structured typographic hierarchy that makes it straightforward to pick issues like headlines and subheads in addition to physique copy and captions is important for readability on the net. Good typographic hierarchy typically consists of 1 or two typefaces used at completely different sizes, weights, and kinds to distinguish between heading ranges, physique copy, and different textual content parts.
To additional improve readability in digital designs, be sure you use shorter paragraphs, ample line heights, and make essential content material extra digestible by way of using issues like bulleted lists.
4. Complicated iconography
All the level of icons is to present guests a visible cue in regards to the content material they’re seeing. Icons are sometimes used for issues like navigation. The aim is for customers to instantly acknowledge what an icon represents to make interacting together with your web site simpler.
Common icons exist for a cause. Particularly, that they’re immediately recognizable to customers. Once you begin to experiment with icons or icon sets which have extra summary or metaphorical meanings, all you’re doing is probably complicated customers. Should you do stray from universally acknowledged icons, or want to make use of icons for one thing that doesn’t have a common image hooked up, use labels to stop confusion.
5. Poor type design
Should you’re creating a web site to do something apart from present info, varieties are seemingly a part of your UI design— whether or not they’re varieties for customers to subscribe, make a purchase order, or another perform. Sadly, poor type design abounds on the net. And in case your varieties aren’t user-friendly, you’ll see a a lot decrease submission charge.
There are just a few basic items to remember when designing varieties:
- Hold your varieties as quick as doable to realize the mandatory aim. For instance, subscription varieties ought to ideally solely embrace a discipline for the e-mail deal with, and presumably the subscriber’s title.
- Make submit buttons extremely seen and labeled descriptively. For instance, use “subscribe” as an alternative of “submit.”
- Ensure that your error messages are useful. Ideally, they need to be triggered as the shape is crammed quite than after submission.
- Break up lengthy varieties into smaller pages. A checkout type, for instance, may be break up into pages for transport info, billing info, and reviewing the acquisition earlier than submitting. Don’t overlook to point progress to customers as they work by way 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 usually fairly easy. Utilizing a grid to position parts inside your design is an easy, established method to keep alignment. Don’t overlook to make use of a baseline grid, too.
7. Irrelevant imagery
Pictures and photographs must 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. Make it possible for each picture you embrace is instantly 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 skilled suggestions.
“You need to choose pictures which have a robust relationship together with your product targets and make sure that they’re context-relevant.” — Anastasia Marinicheva, UI / UX Designer
8. Lack of distinction
Unhealthy distinction is extra than simply visually unappealing. It will probably additionally hurt the accessibility of your designs. Make certain that the distinction between essential parts — together with textual content — in your pages meets accessibility requirements. It will make sure that customers don’t miss the essential elements, in addition to make any textual content content material extra readable.
9. Poor person analysis
Not understanding the wants of your viewers can result in horrible design. In spite of everything, good design isn’t nearly the way in which a web site appears to be like; it’s primarily about how effectively your design works to your customers.
Take time in the beginning of the design course of to study what your customers need and want out of your web site. Then take a look at completely different design concepts and iterations to provide you with an answer that solves person issues. A design that’s visually mediocre however meets person wants and desires will at all times be a “higher” design than one that appears stunning however is tough for individuals to make use of.
10. Lack of accessibility
Accessibility is just too usually regarded as an inconvenience. However accessible designs are extra usable for all customers. Study the fundamentals of accessibility to create digital merchandise that work higher for everybody.
Apply WCAG accessibility requirements to your whole designs to enhance person expertise throughout the board. Don’t consider them as an inconvenience or a restriction, however as an alternative as a method to make your designs higher for all. ■
RELATED RESOURCES
Discover extra Process tales on our weblog Courtside.
Have a suggestion? Contact [email protected].
