Design Principles & UX — Part 3

What are Design Principles?

While these articles are numbered, they are by no means sequential. If this is your first time diving in, here’s a quick intro:

The principles that exist in the world of design are all outlined to help you create a design that is usable, aesthetically pleasing, and accessible.

There are a lot of resources out there that help outline these things, with many opinions, lists, and other related teachings that are all useful in their own rights. I wanted to share in multiple releases, some of the principles and techniques that I’ve learned of and follow as a UI/UX designer.

Today, we’re going to focus on the following:

System communication
The system should inform the user of what is happening.

System confirmation
The system should allow the user to cancel their action(s).

System consistency
The system acts the same across sub-pages and tasks.

# System communication

The system should inform the user of what is happening.

If you’ve ever been confused after pressing a button or completing an action because nothing seems to be happening, then you’ve experienced the system not communicating to you properly.

The system can communicate in many ways:

• By showing a push notification.
• By showing a notification requiring user action.
• By showing a loading icon or state.
• By disabling a feature while it’s doing something.
• By playing a sound or showing something on the screen indicating something has changed or is in progress.

These are just the first 5 things that come to mind, but the list is truly extensive. It comes down to notifying the user when the system is doing something, whether it’s at the result of user action or not. If a system is updating or reloading something automatically, there should be a loading state. If a user presses a button to submit something like a payment, then the system should load while it verifies the payment, and show a success or failure notification to the user.

This GIF outlines, without sound, the visual notice the system gives the user when the other person has read the message. Source: https://about.fb.com/wp-content/uploads/2017/06/messenger-gif-1.gif

Sounds, in particular, have been of great interest to me lately, and I found a very thorough and well-put article on The Role of Sounds in UX that I highly recommend if you aren’t too familiar with sound design. Obviously, sound has its own drawbacks as if the user has their chosen device muted or has an auditory disability, they won’t receive any system feedback. Overall, though, the most important thing to keep in mind is to not overdo it. Not every individual piece needs to have a feedback sound to it and not every action completed by a user needs a sound effect. It’s up to your discretion, but typically less is more with sound.

## Tips

• Tell the user when they succeed or fail after completing an action. Tell the user when the system is doing something that directly impacts what they are trying to get done.
• Remember when adding in any sort of animation, to be careful not to trigger epilepsy in your users. I am not an expert in planning for this, but this article released by MDN gives some advice for helping reduce the chances of causing a seizure.
• Try and plan for multiple forms of system feedback to the user. Not all users will notice a loading icon changing to success, just as not all users will hear a success sound. If you have both, while there is still a chance of the change being missed, there are at least more opportunities for the user to be informed.

# System confirmation

The system should allow the user to cancel their action(s).

Have you ever forgotten to add a subject line or finish writing an email but pressed “send”, and been unable to undo your action? Or, even worse, have you ever been working on a document, and either closed it or refreshed the page and gone back and all of your changes were missing? All of these are examples of actions that would have benefitted from the system confirming that the action the user was taking was the one they wanted to take. As annoying as pop-up windows are, they do serve a practical use in most cases — helping the user to not make errors.

The first thing I thought of was this post — a perfect example of pressing send before intended. Source: https://imgur.com/gallery/5MoCRje

Error messages, meaning that you’re telling the user where the issue is, is just as important as error prevention itself. Error prevention helps stop users from actually making the error, to begin with — giving the user the opportunity to undo the action if it wasn’t intentional. I find that talking with the developers about what undo features will be available is incredibly insightful. I recently had a discussion with the developers I work with about an undo feature I had included in a design, which wasn’t going to be possible. Instead, I added in text in the prior confirmation step, informing the user that their action would be final. This way, the user knows that their action will be irreversible, but they still have the opportunity to back out.

## Tips

• Talk with your developers about what undo features will be available, and try to do this during ideation before you get into the designs themselves.
• Add in undo and back features where it makes sense. I tend to add more in the designs initially and then make the decision to remove them later on, as I find it easier to remove and then realign things than it is to have to add a feature in later on.
• Use humanizing language. Try to avoid overusing sarcasm and negativity, but don’t be so friendly that it comes across as overbearing. It’s a fine line to walk, but at the end of the day, your goal should be to clearly and effectively communicate what the user needs to do, what the system will do, or any other expectations that the user needs to be aware of.

System consistency

The system acts the same across sub-pages and tasks.

Typically, when you visit a website, you expect all of the subpages to look similar enough to at least make it seem like they came from the same URL. Sometimes this doesn’t happen and it can be jarring, even increasing the chance of the user leaving because they feel they’ve been redirected to a random site. This is on the largest scale, and with the influx of sites being built with tools like Squarespace and WordPress, it gets a lot harder to find sites where entire pages are different.

What I do see, a lot of the time, are small issues. Things such as inconsistent button styles across pages, or things like a weird button hover state. I was recently scrolling through a site looking for a new small appliance, and I experienced the visual button inconsistency on just the homepage!

Left: A rounded, sentence case button. Right: A rounded square, all-caps button. Both screenshots are of buttons from the same site — the site will remain anonymous.

In the example above, the thing I dislike the most is the fact that the button styles are so different at the most basic level. Colours and button size all change depending on the context in which the buttons are needed, which I understand and don’t find personally jarring. But when the style changes on the buttons — like the border-radius difference between a fully rounded button and a rounded square button or the font style— I find that I usually find myself scrolling up and down between the button instances to confirm whether I’m going crazy or not.

## Tips

• Try to design a consistent button style with many different variations. Create button variations for filled, outline and text buttons that all align with the main style. It’s a small thing to focus on, but the small elements all help contribute to the overall experience.
• Test and design for all possible button states. This includes inactive, hover, active, focus, and disabled states.
• The same thing is true of form fields — if you’re using an outlined style for form fields on your contact form, you should use the same style for any form fields that are in the footer, modals or other call-to-action sections.

Disclaimer: I am not an expert in the field of UI or UX. I am someone who has been working in the field for 5+ years, who started when UI and UX were still questionable fields, even if it had been around long enough that some people knew what it was. I’ve seen it grow. I’ve found more and more resources over time. I’ve second-guessed every design decision. I’ve had internal stakeholders question my designs, only to go back to the original design after more vigorous feedback rounds. I’ve had designs that shifted from something I enjoyed, to something the client was happy with.

There are so many ups, downs, and confusion in this field, but every time I find new articles, I feel just that little bit more confident in the decisions that I’m making. I hope that this article finds you well, and you’re able to take it and the information it provides with you into your career and also feel just that little bit more confident in your designs and decisions.