Brent Nygaard's Writing

The Laws of User Experience Design

2021-08-03T22:00:00Z

Designing good user experiences is hard. It can require lots of research, lots of testing, and despite our best efforts to be as user-centered as possible, people can just be hard to please.

Thankfully, a bunch of very smart people have identified common psychological principles that we can take advantage of to guide our users and make the job of designing good interfaces a bit less risky.

Here are a few of the essential ones that you can use right now without getting a designer involved.

1. Law of Proximity

Objects that are near, or proximate to each other, tend to be grouped together by the person perceiving the objects.

Our brains really want to organize objects and group things together. And the closer objects appear to each other, the easier it is for our brains to lump them together in a conceptual grouping.

When we make software interfaces, this idea is easy to make use of by simply controlling the spacing around sets of objects. For example: Increase the margin between separate sections or decrease the margin around items that are of the same kind.

A very common use of this is in typography: Headings may have more space above them than below them, this way the paragraph that came before is not associated with the heading and the paragraphs that come after.

2. Law of Common Region

Elements tend to be perceived in groups if they are sharing an area with a clearly defined boundary.

Related to the previous law, this gives you another simple way to help users figure out what items in your interface are related to each other.

There are a number of ways to create a common region in digital interfaces, but two of the most common are borders and backgrounds. Put a border around the objects that you want users to associate with each other, or, put a background color or image behind them. Both will help your users make sense of the structure of your interface.

3. Von Restorff Effect

Also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Use this effect in combination with a good information hierarchy and well-defined user goals on each screen to determine which elements in the interface need to stand out from the others.

A very common use of this effect is the ubiquitous call-to-action. Usually the button on a screen that will perform the primary action ("Buy now!"), it is often a different shape, color, or size from the other buttons and elements around it to ensure that users see it and remember it.

Don't rely on only one differentiation when taking advantage of this effect (such as just changing the color). You might have color-blind users or users with reduced vision, so a combination of changes is necessary (e.g. different shapes and colors).

4. Hick's Law

The time it takes to make a decision increases with the number and complexity of choices.

Basically, don't overwhelm your users!

The more items there are in a list, or the more possible actions there are in a menu or control panel, the longer it will take your user to decide what they want to do. Longer time to a decision = higher probability of them giving up = bad for them, and bad for you.

A few ways that you can use this knowledge to help your users:

In general, minimize choices where possible.
Break complex tasks and flows into smaller steps (checkout, on-boarding, long forms, etc.)
Highlight recommended options for your users (often used in price comparison tables).

We'll stop there for today, but there are many more psychological laws, effects, and principles that can be applied to digital user experiences.

People are complex and weird, but our brains have developed efficient ways of dealing with information and decision-making that we must take into account when we are building our software.

The UX Design Process for Non-Designers

2021-09-14T22:00:00Z

Great processes can produce great work and UX design is no exception. Follow this breakdown of the design thinking method to improve your UX game.

Do you find yourself improvising the interface design process every time your team starts a new project? Perhaps with mixed results: some projects work out great and there are smiles all around (and $$), others... not so much. You also might find it difficult to stick to the same process each time when budgets, priorities, and timelines are always so different. I know I do.

But...

In order to create consistently great work, you need a great process that you follow consistently
– me (and probably other people)

If you do have a great process and your clients sing your praises, the awards are piling up, and users flock to your apps, then well done! Go treat yourself to frozen yogurt, you deserve it. 🍦

But if you don't have a consistent, proven process for creating beautiful, functional interfaces (or you find it hard to stick to one) then read on!

Design Thinking

It turns out there is a mature and very well-defined process already out there that can be directly applied to a huge range of project types: Design Thinking.

And you don't have to be a designer, artist, or another type of "creative" to use it.

Design Thinking, just like UX design, is all about putting the end-user first and working back from their needs and problems so that, hopefully, your final product is actually useful and beneficial to them.

The five steps of the Design Thinking Method

1. Empathize – get to know your users

Who are you are hoping to help?
What matters to them?
Put yourself in their shoes as much as possible.
Don't assume you know them or their problems!

2. Define – state the problem and the opportunity

What is the problem the user has that you are hoping to solve?
What opportunity do you have to innovate for the user's benefit?
What does success look like for the user? (not the execution, but the outcome of a good execution)
What does success look like for the business?

3. Ideate – come up with some solutions

Brainstorming! Activities! Creativity!
Generate as many potential solutions as possible. Anything goes!
focus on high-level solutions, don't get lost in the details.

4. Prototype – build a rough version of the solution

Filter and narrow down your list of solutions to a few of the most promising candidates.
Build the chosen ideas in low to middle fidelity. The medium/format is not important yet. Choose a medium or tool that allows you to build quickly and get it in front of the users (this could be drawings on paper or a clickable Figma presentation)
If time and budget allow, prototype more than just one idea so that you have more to test with. If one idea flops with your users, you will have another option ready to test with them.

5. Test – find out if your ideas are working

Get your prototypes in front of the people you want to help.
Observe reactions and behaviors. What worked, what didn't?
Use your findings to iterate on and improve the solution and the prototype.
Repeat until you have validated an idea that is resonating really well with the users.

It's up to you to decide how in-depth you go in each step, what tools you use, how long you take etc. That's one of the benefits of this method: it's easy to scale up or down based on your timelines and budgets.

As long as you are starting with the end-user and working back from their needs and problems, and then testing your ideas with them, you should be making better interfaces in no time.

Some parting points

Stop making assumptions about what people need. Ask them instead.
Prototype quickly and cheaply. This allows you to keep a bulk of your budget (money and time) for the final design and development.
Testing doesn't have to be complicated or expensive. Get in the habit of doing it early and often.

How to Perform a Mini UX Audit in 5 Steps

2021-09-21T22:00:00Z

Learn the basic, big-picture steps needed to perform your own UX design audit on your web apps, websites, and mobile apps.

There are many reasons why you might want to audit the UX of a digital interface. Maybe there is a known performance or business problem, but why it's happening isn't clear. Perhaps people just aren't using the software much, despite being well known or having good marketing. Maybe your client has asked you to do a redesign of their website and you want to make sure you don't waste time "improving" the wrong things.

Whatever your reason, a UX audit is a valuable exercise, and if done well will give you quality data that you can use to improve the user experience of the software, thus improving the business performance too!

1. Define the goals and outcomes

What is success for the user?

What does this app/website/piece of software promise to do for the people using it? When a user completes a successful session of using the interface, what makes them feel like it was a good use of time?

Get in touch with a few people who actually use the software regularly and ask them.

What is success for the business?

What does the business get out of creating, serving, and supporting this app for these users? Is it purely financial? Increased corporate productivity? A marketing or PR stunt? What outcome would make the owners and stakeholders throw a party?

2. Review analytics (if any)

Review data from analytics tools (such as Google Analytics etc.) and company records. Clues that there might be a problem could be people exiting a flow at the same point each time without completing a function, high bounce rates, etc.

These stats should just give you some ideas of where there might be problems. You will need to investigate further to confirm them.

Be careful not to rely too heavily on analytics or business-defined metrics (such as KPIs or other performance metrics). Sadly, business goals are sometimes in opposition to true user satisfaction!

3. Identify the core states of the interface

Go through the interface now and systematically identify the following "states" of the software:

The blank state - What users see the first time they log in or launch the software.
The working state - What users see during the normal course of use. With data and content in place. This is the interface "in action".
The error state - What users see when something goes wrong!

As you identify and define these states, make lots of notes about what you see and what you experience.

4. Review the core states

For each of the three states above that you have now identified and defined, review them across the following UX heuristics:

Language - Are the words, sentences, and paragraphs used throughout the app appropriate and clear for the users? Is there a lot of jargon or lingo used? Confusing sentences? Ambiguous messages?
Priority - What matters most to the users? What do they spend the majority of their time doing and in what order? Is that being serviced and supported, or hindered, by the interface?
Universality - Across visual cues, language and labels, can anyone, even users who aren't the target audience, "get it" and understand how this interface works and what it does?
Visual Clarity - Are interaction cues obvious (such as animations when you click on controls, or alerts that confirm your actions)?
Is the overall visual hierarchy of information clear: can you tell what is most important on a screen?
Is there a clear separation between content and controls (what is read-only information, and what a user can interact with)?

As you review the interface with these categories in mind, take note of any and all problems you come across. Big ones and small ones, and all in between.

5. Present your findings and recommendations

Well done! You've done the hard work, now it's time to put it all together and prioritize the data!

Take your list of problems and start sorting them by how important they are to fix. Remember, when rating a problem you need to consider both what it means to the user and to the business and who will be best served when/if it is fixed.

After you have sorted your problems, you will have a good set of objective and actionable steps that you can either present to your client or use internally to guide your design and development teams!

5 Ways to Improve the Typography in Your Interfaces

2021-09-28T22:00:00Z

The words and legibility of our UIs are so, so important. Let's go over a few easy-to-implement typography tricks that will take your web apps and sites to the next level.

Most digital interfaces are primarily text. The words of our UIs are doing almost all of the work of conveying the actual information to the user. In my opinion, you should be able to strip out the styling of a well-designed interface, leaving just the words and the space around them, and still be able to have a good idea of what is going on.

So it follows that one of the most effective ways to improve the user experience is by working on the typography.

Here are 5 quick tips to help you elevate the interface designs on your next job.

1. Use fewer fonts

Fonts are fun. There are so many great ones out there to try. But most interfaces will benefit from having just 1 to 3 different fonts, max. And great care should be taken to make sure that all of the fonts chosen work well together.

More than three and your interface will start to look messy and inconsistent, distracting the user from the actual information and words.

2. Control line length

When working with big chunks of text, try to keep the line length between 45 to 75 characters. 66 characters in length is considered to be the sweet spot for improved readability.

The reason is that as our eyes scan the text from line to line, we can easily lose our place if the line is too long. You have probably done something like follow a line of text with your finger in a book, or highlight the line of text you are reading with your mouse so that you don't lose your place. Shorten those lines so your users don't have to resort to such methods.

3. Use a type-scale

A type-scale is a mathematical method for defining a harmonious and rhythmic set of font sizes for your UI.

You start with a base font size (your body copy), say 18px, and then multiply or divide it by a scale factor to get font sizes larger or smaller in your hierarchy (such as H1, H2, H3, etc.). A common scale factor is 1.25.

This removes the guesswork on your part and makes sure that all font sizes are related to each other. The visual result is one of harmony and consistency.

4. Increase font size for long-form text

This is a simple and effective way to improve the readability of long pieces of text in your interfaces (articles, posts, legal text, etc.).

Instead of sticking with the "industry norms" of 16px or 18px for body text on the web, try pushing it up to 20px. It will reduce the eye strain of the user, and they will subconsciously thank you for it.

It does depend on the font you have chosen, so make sure you test it before applying it blindly.

5. Make use of contrast

Increase the dynamism of your UIs by utilizing type contrast to your advantage. Huge headline next to small text. Extremely heavy font-weight, next to razor-thin.

This kind of contrast can add drama and artistic flair to a layout. It can pull the viewer in, exciting them about the content.

But always make sure that you aren't compromising the readability of the text.

How to Plan Your App's MVP

2023-02-20T22:00:00Z

Creating an MVP (Minimal Viable Product) is one of the earliest steps in launching a digital product. Your MVP should be the simplest version of the app that provides as much real value to your users as possible.

An MVP is an efficient and cost-effective way to see if your concept has any potential for success. Then, based on the results, you can decide whether to invest more in developing the app.

But what should your MVP contain? Let's discuss how to prioritise your long list of features.

1. Talk To Your (future) Users

First, it’s important to remember that it should be all about the users, not the specific features of the app you envision. Who are they, really? What do they do? Where do they reside? What is their financial status? In what sector do they work?

Do you have answers to those questions? Great! But how many of them did you guess?

You need to speak to actual people who might be using your app. It's best to talk to multiple people. Ask them why they'd use the app. What do they hope it will help them achieve, do, or create? Do they already have something else doing that for them?

2. Figure Out Their Biggest Goals or Problems

Now that you have your answers, it's time to identify the biggest problem your users want solved. What tasks do they desire to be possible if your app launches? When you describe what you're building or show them prototypes, do they feel excited? Skeptical? Do they immediately ask if it can do X?

Summarize these into a short, prioritized list of the users' most critical goals or problems to be solved.

3. Scope Out the Primary Use-Cases

What kind of technology and development effort is needed to solve the top three problems you discovered? Are all three possible with your current resources? If not, can you solve the top two? If you can't do that, can you solve the first one?

If you can tackle all three, do it. Build and launch the app with all three features. But don't go beyond that for now. Give your users the best solution you can with the least amount of build time and cost.

And remember, a major part of how your app helps users succeed is by being user-friendly. Don't neglect UX and UI design, even in the MVP stage.

Your MVP should be complete and well-designed enough to test whether users find it valuable. Keep it constrained, so you can design, build, and get it out quickly and inexpensively. Ultimately, successful apps, websites, and software services are guided by user research and a product-first approach.