5 UX Principles You Must Adhere to for an Awesome UX Design

Packt_Pub
Packt_Pub
Dec 25, 2018 · 6 min read

Will Grant, a UI/UX expert and a digital product designer, explains the 5 principles you must follow to ensure a great user experience.

Image for post
Image for post

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.

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:

Image for post
Image for post

Simply by altering the type size by a noticeable factor, we can show the user the most relevant information first:

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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.

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing…

Packt_Pub

Written by

Packt_Pub

Stay Relevant!

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing, design, graphic design, mobile design, web design, product Design, logo design, design thinking, design tools, Sketch, Figma, Photoshop, Illustrator, Flinto, After Effects, Axure RP, InDesign, Farmer JS, 3D design & more

Packt_Pub

Written by

Packt_Pub

Stay Relevant!

Quick Design

Find top tutorials & courses to learn UI, UX, wireframing, design, graphic design, mobile design, web design, product Design, logo design, design thinking, design tools, Sketch, Figma, Photoshop, Illustrator, Flinto, After Effects, Axure RP, InDesign, Farmer JS, 3D design & more

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store