Lessons learned from Reading 10 UI/UX design systems

By Mohammad Iqbal

As a way to improve my UI/UX skills I decided to read the guidelines for 10 popular UI/UX design systems. In this article I will give you a concise summary of the most important concepts.

follow me on twitter for future updates and tutorials: https://twitter.com/iqbal125sf

Biggest Takeaway

The biggest thing I learned about UI/UX from these libraries is that good UI/UX is about simplicity more than anything else.

A lot of good UI/UX is common sense and the problems come from overthinking things. Even without formal training or knowledge most people can eyeball a good or bad UI.

If it looks right it probably is, and if it looks off it probably is.

I don’t want to list specific examples, because that may seem like I'm denigrating the design system, but I would recommend looking at the “Dos and Donts” section of some of the libraries. It’s pretty obvious why the components/elements are bad UI. For example, having vague or verbose button text. Having mislabeled inputs fields, etc.

Most of the counterexample UIs come from vagueness or over complicating things, both of which can be solved with simplicity.

Good UX

A lot of good UX also has to do with empathy and being able to predict and address the needs of users. Most of this has got to do with setting up your UI to be as simple and direct as possible. Bad UX is vague or overly complex.

UI should not be the focus. Make it “invisible”, so the user should barely notice it.

Good Content

Unanimously all 10 design systems agreed that text content should be written in a simple natural conversational style. Almost like you are talking to a friend or acquaintance.

Also things to note:

• Break up walls of text with meaningful headings
• Content should be concise and to the point.
• Content should not sound condescending in order to appear authoritative.

Some Good heuristics:

• Use light backgrounds. dark backgrounds for nighttime mode only.
• Be as unobtrusive as possible with popups. Modals should only block the main UI to confirm urgent actions, such as deleting assets.
• Have about 60-80 characters per line for written content
• Familiarity: use easily recognizable icons for common tasks. shopping cart icon and Floppy disk for save
• Forgiveness: have a way to undo important actions
• Graceful error handling: If something fails or doesn’t function as intended it should be obvious to the user why
• Use skeleton components instead of loading screens
• Use BEM naming scheme or something similar for CSS

Here are the libraries:

Google: https://material.io/design/

Shopify: https://polaris.shopify.com/design/colors

IBM: https://www.carbondesignsystem.com/guidelines/accessibility/overview

SalesForce: https://www.lightningdesignsystem.com/guidelines/builder/

Apple: https://developer.apple.com/design/

UK Government: https://design-system.service.gov.uk

Mailchimp: https://ux.mailchimp.com/patterns

Starbucks: https://www.starbucks.com/developer/pattern-library

US government: https://v2.designsystem.digital.gov/Ui-patterns: http://ui-patterns.com/patterns/