Using Guidelines to Design a Good Product
How a product is designed is the users’ first impression of the product, so it’s crucial to do it the right way. In software development, this is called the user interface and user experience. User Experience (UX) is how the user interacts with the product, like how easy it is to use the features. On the other hand, User Interface (UI) refers to the aesthetic of the product, i.e. how it looks and feels, and is an inseparable part of UX.
To deliver a good product, there are guidelines to follow when designing it. It’s important because a product needs to be consistent, and it’s easier for the developers to implement the design into code. In this article, we’ll discuss the guidelines of both UI and UX.
UI Design Guideline
UI guideline is a set of rules that the designers must follow when designing a digital product. The rules usually include colours, fonts, buttons, errors, warnings, and many more. Here are some explanations for some of them.
Colours
Before making a prototype, you have to choose the product’s signature colours. They must include primary colours, accent colours, semantic colours, and neutrals.
Primary colours are the dominant colours, usually the brand colours. The primary colours should not be more than two.
Accent colours are used to highlight particular elements on the design. They should not take more than 10% of the product.
Semantic colours are used to show information after an action is taken or something happens in the system: error, success, or warning. Ideally, every product should use green for success, red for error or failure, and yellow for warning.
Neutrals are the colours white, grey, or black that are used for backgrounds and texts. Below is an excellent example of a colours guideline.
For example, we wanted to accentuate that our PPL project is an agriculture platform, so we decided to make the primary colour green. We believe that green represents nature and growth.
Typography
Besides the fonts to use, typography also includes the text size, font weight, letter and paragraph spacing, and everything related to text. Every product should have a limited number of fonts. Each font usually has a designated function, either as heading, subheading, or body. You can also make rules for when and where to use bold, regular, and light text.
Buttons
Buttons are used to take actions, so it’s important to ensure that they have good usability and are intuitive enough.
The first rule is to differentiate clickable and non-clickable buttons. For example, if an action is not available before a field is filled, the button’s colour should be grey to show that it can’t be clicked. In contrast, a clickable button should have a noticeable colour and be emphasised (e.g. with gradient, rounded rectangle, or shadow).
Another important rule is to make each button predictable so the users know what to expect. A good way to do this is by assigning semantic colours for different types of buttons. For instance, a delete button should be red because it’s a destructive action, and users should think twice before clicking it. In addition, make sure that every button is not ambiguous. For example, instead of a button that says “OK”, consider making one that says “Order Ticket”.
Since we aim for consistency in our product, there should be a set of default buttons to use all across the product. For example, the set can include a primary button, a secondary button, and a danger button.
Aside from the above guidelines, there are other elements of design to make guidelines for, like margins, forms, spacings between elements, etc., which won’t be discussed in this article.
UX Design Guideline
Just like UI, there are rules when it comes to designing the UX too. Here are some of them.
Know Your Users
This one might sound obvious since UX is basically about the users’ interaction with the product. However, sometimes designers forget about this and assume that the users think and behave like them. This is simply not true, which is why it’s important to do user research and create personas before designing a product. You can read more about personas here.
To conclude the article linked above, design guidelines should be based on the personas that we have created. This rule applies for all aspects of the design guidelines, including colour scheme, typography, etc. For example, one of the personas for our PPL project is a farmer who might not be familiar with technology. Therefore, we designed the pages to be simple, intuitive, and easy to read.
Don’t Put Too Much Information
Users usually use a product to get things done quickly, and they don’t want to spend too much time on a use case. Interfaces should be simple and free of unnecessary elements that are not relevant to the current task.
Keep Users Informed
Don’t keep users in the dark. When a page is loading, for example, show a loading screen and offer an option to retry if it fails. Even better, show them how much progress has completed.
Show Recognisable Elements
Make sure that users can recognise how to use features on the product without having to recall it. This is why it’s important to pay attention to consistency across the product.
Prevention is Better Than Cure
Errors are bound to happen on digital products, but users hate them. It’s crucial to check for possible errors and give warnings to the users before they commit the action. For instance, if a user types in a number in a text-only field, show a notification and prevent the user from submitting the form.
All in all, making UI/UX guidelines is a crucial step of a design process. Without guidelines, the users would not have good experience while using the product.
Reference
This post is written as an assignment for the PPL course at the Faculty of Computer Science, UI.
