5 UX Principles You Must Adhere to for an Awesome UX Design
Will Grant, a UI/UX expert and a digital product designer, explains the 5 principles you must follow to ensure a great user experience.
1. Don’t use more than two typefaces
Only amateurs call typefaces “fonts”, you know? “Proper” design professionals call them “typefaces” Fonts are the files on the device that the software uses to render the typeface. Fonts are the paint on the palette, while the typeface is the masterpiece on the canvas.
Regardless, too often, designers add too many typefaces to their products. You should aim to use a maximum of two typefaces: one for headings and titles, and another for body copy that is intended to be read.
Use weights and italics within that font family for emphasis — rather than switching to another family. Typically, this means using your corporate brand font as the heading, while leaving the controls, dialogs, and in-app copy (which need to be clearly legible) in a more proven, readable typeface.
Using too many typefaces creates too much visual “noise” and increases the effort that the user has to put into understanding the view in front of them. What’s more, many custom-designed brand typefaces are often made with punchy visual impact in mind, not readability.
2. Users Already Have Fonts on Their Computers, So Use Them
Yes, your corporate brand font is lovely. It’s so playful and charming but it takes an extra three seconds to load the page, as the font needs to be downloaded from the server and rendered — and nothing appears until it loads — driving your users crazy.
Including custom display fonts for headings and titles is fine; it helps to brand the product and adds some visual interest. However, using custom fonts for body copy is generally a bad idea.
First of all, these fonts have to be loaded from somewhere, whether it’s Google Fonts, Typekit, or your own CDN. This means that there is an overhead in getting the font files down to the user’s machine. Content-heavy pages will often break while the correct fonts are downloaded and rendered — the dreaded Flash of unstyled content or Flash of unstyled text (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
Secondly, if by specifying wild and wonderful body copy typefaces, you think you’re exerting some control over the end result, think again. Responsive design and 1,000s of different devices out in the wild mean your pages will look a little different for everyone.
Luckily, whether your user is on a phone or a desktop, Windows or Mac (or Linux), they have some beautiful, highly-readable fonts already installed and waiting to be used. The “system font stack” is a CSS rule that tells modern browsers to render type in the system-native typeface.
In most cases, using system-native fonts makes pages appear more quickly, and the type looks sharper and more readable.
Font-family: apple-system BlinkMacSystemFont Segoe UI Roboto Oxygen-Sans Ubuntu Cantarell Helvetica Neue sans-serif
Please, just use the system font stack.
Use Type Size to Depict Information Hierarchy
This is a simple yet effective method for organizing your views and making them instantly understandable for a wide range of users. Let’s look at an example of how not to do this in an imagined “Calendar” app user interface:
Simply by altering the type size by a noticeable factor, we can show the user the most relevant information first:
Scale up the information that you want users to see first, or that you think they’ll find most useful, and they can read on further for extra detail. This is the reason for a lot of news and factual journalism settling on this format:
Headline that tells you something
Subtitle that adds context and poses more questions
This is the body copy that expands on the story by adding detail progressively through the copy. Keep reading to the end to learn less and less important detail.
The exact same technique can be employed in user interface design to great effect.
Note
Pro-tip: Find a balance and don’t overdo it. If too many elements on the page are large, then they lose any sense of hierarchy and emphasis.
Use a Sensible Default Size for Body Copy
Your customers will be reading a lot of text across your app or site, so how big should the type be?
The days of fixed-size type are long gone. Most browsers on desktop and mobile will let users scale type up and down, switch into “reading mode” and apply system-wide accessibility settings, like large type and high-contrast colors.
With that in mind, all you’re doing here is setting the default type size that appears when the product is first opened. Ideally, the type should be big enough to be readable, but not so big as to overwhelm the user or take up too much space in a crowded view.
Body copy in 16px, with a 1.5 line height and “auto” or “default” character spacing, is usually a safe bet and a good default for the vast majority of your users.
Trying to set your own character spacing is usually unnecessary for body copy because the browser will do a better job of text rendering than you can.
Use an Ellipsis to Indicate that There’s a Further Step
If your user sees a “Remove” button, how do they know if pressing it will:
· Remove the “thing” they’re looking at?
· Ask which “thing” needs to be removed?
· Ask them if they really want to remove the “thing”?
· Instantly remove all their stuff?
Label the button “Remove…” and the user will have a good idea that there’s another step before all their stuff is removed. Most users will infer from this that the button is the first part of a multi-part process and there will be a second step to confirm or cancel the action. If a control requires an extra step to perform its action, include an ellipsis (…) in the control:
These little dots are a great example of invisible design: most users will never have even noticed them, but they impart a subtle message as a user’s experience builds over time. They don’t get in the way and they “just work.”
If you enjoyed reading this article, you can check out 101 UX Principles by Will Grant to explore 101 ways of improving your UX designs. Following in the footsteps of Jakob Nielsen and Don Norman, 101 UX Principles is the go-to guide for UX professionals, covering everything from passwords to planning the user journey.
