101 UX Principles

Will Grant

• Publisher: Packt Publishing
• Year: 2022
• ISBN:
  9781803230511
• Edition: 2
• Topic: Design
• Subtopic: Web Design

Improve user experience by avoiding common frustrations and focusing on what mattersEndorsements "This updated version of 101 UX Principles is a delight. It's an educational and fun provocation to look at the world of UX differently – solidly from the user's point of view." –Elizabeth Churchill, Director of User Experience, Google "A phenomenal reference guide. Complete with case studies, a record of personal experience, and visual examples, Grant makes it clear why these techniques have found their way into the canon of UX best practices." –Jeff Gothelf, Author of Lean UX "..I recommend it to anyone looking to learn the basics and also for more experienced designers - the author's candid opinions will force you to revisit some of your established assumptions!" –Anne Marie-Leger, Staff Product Designer, Shopify "An absolute must-read, not only for UX designers, but this book is also super relevant for product managers trying to get better at product usability. Two enthusiastic thumbs up!" –Trent Blakely, Sr. Product Manager, EquinixBook DescriptionThis book is a manifesto of UX/UI design best practices to help you put the focus back on what really matters: the user. From UX laws to practical UI, color, typography, and accessibility advice, it's all packed into this easy-to-consult and fun read: • Essential UX laws• Handy best practices• Snippets of technical knowledge for anyone who wants to work in the digital space 101 UX Principles demonstrates the success from best-in-class products and leads the way to delight your users. Keep it on your desk for quick reference, send as a gift to colleagues to build allies, or brandish it as your weapon of choice during meetings to fight for your users' right to a better digital experience.Sneak a peek at some of the new and updated principles in this UX design book: • Work with user expectations, not against them• Make interactive elements obvious and discoverable• Optimize your interface for mobile• Streamline creating and entering passwords• Respect users' time and effort in your forms• Use animation with care in user interfaces• How to handle destructive user actions• Chatbots are usually a bad idea – and how to make them better• Use A/B testing to test your ideas• Let users give feedback, but don't hassle them• Make it clear to users if they're joining or signing-in• Only use modal views for blocking actions• How complexity can be good for some usersWho is this book forThis book is a distillation of Will's 20+ years of experience in the form of successful design principles to help early career UX designers learn the ropes and provide experienced professionals with new ideas when building their products.UX/UI designers, product managers, entrepreneurs, aspiring strategists, and anyone creating a digital product, service or a campaign will find this book extremely useful.

#8

Don’t Use More than Two Typefaces

It’s a pretty common point of confusion, but typefaces and fonts are different things. “Proper” design professionals call them “typefaces,” while fonts are the files on the device that the software uses to display the typeface. Fonts are the paint on the palette, while the typeface is the masterpiece on the canvas.

For example, Helvetica is one of the most widely used typefaces, but a font is a particular set of glyphs within that font family: for example, Helvetica Condensed Bold, 10pt.

Regardless, too often designers add too many typefaces to their products. You should aim to use two typefaces maximum: one for headings and titles, and another for body copy that is intended to be read in depth.

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 a punchy visual impact in mind, not readability.

Learning points

• Use two typefaces, maximum.
• Use one typeface for headings and titles.
• Use another typeface for body copy.

#9

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 delays the web page display by 4 seconds 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 content delivery network (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.

Secondly, if, by specifying wild and wonderful body copy typefaces, you think you’re exerting some control over the end result, then think again: responsive design, assistive technologies for disabled people, and thousands of different devices out in the wild mean your pages will look 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.

The CSS code below tells the browser to display the text in one of three commonly used styles, only using the built-in font files on the device.

• Sans-serif typefaces like Helvetica or Futura—most modern sites and applications use sans-serif typefaces.

  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; 

• Serif typefaces—the more “traditional” looking typeface with little “hooks” (called serifs) hanging off each letter.

  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 

• Monospace typefaces—so called because the spacing between each letter is the same, designed to increase readability for code examples.

  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 

Please, just use the system font stack.

Learning points

• Use the system-native fonts that your users already have installed.
• System fonts will typically render better than custom ones—and will include glyphs for many non-English languages too.
• Using native fonts speeds up page load time.

#10

Use Type Size and Weight to Depict an Information Hierarchy

This is a simple, but 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:

Figure 10.1: This example shows all the type in the pop-over at the same size and weight

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

Figure 10.2: This example shows how using different type sizes (or weights) can help differentiate information

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.

Another option is to use type weight instead of scale, as in this example. Using a selection of bold, regular, and light typefaces has a similar effect to altering type size, but reduces the demand on the screen space.

Figure 10.3: Three different weights, all the same size

Many news sites and factual journalism sites have settled on this format:

The exact same technique can be employed in user interface design to great effect.

Figure 10.4: Design blog ‘A List Apart’ uses typographic hierarchy to excellent effect on its article list

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. When everything is important, nothing is important.

Learning points

• Type size and weight can indicate the importance of information to users.
• Use at least two, but no more than three, type sizes.
• Think about which fragments of information are most important to your users.

#11

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.

This can be achieved easily with the following CSS:

body { font-size: 16px; line-height: 1.5; } 

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.

Learning points

• Body copy in 16px, with a 1.5 line height and “auto” or “default” character spacing, is the “gold standard” for readable text.
• Allow users to scale your type up and down for their device.
• Allow users to display your content in a way that works for their needs.

Controls

There are many different types of controls in UX and UI design. Some of the most common are buttons, checkboxes, sliders, and text fields. Each of these controls serves a different purpose, so it’s essential to choose the right one for the task at hand.

#12

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 thi...