Using Guidelines to Design a Good Product

Photo by Kelly Sikkema on Unsplash

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

Colours

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.

Source: http://www.mikottisdesign.com/savo-ui-styleguide

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

Source: https://dribbble.com/shots/14303721-MVSG

Buttons

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

Source: https://www.justinmind.com/blog/button-design-websites-mobile-apps/

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.

Source: https://dribbble.com/shots/11105649-Button-Guidelines

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

Know Your Users

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

Keep Users Informed

Source: https://dribbble.com/shots/7330689-Spinners

Show Recognisable Elements

Prevention is Better Than Cure

Source: https://dribbble.com/shots/5735249-Design-System-Text-Field

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.

CS Student