UI Design Guide 2018 — Rules of User Interface Design

13 min readJun 3, 2018

The best UI design guide of 2018. This guide is based on the inputs of our team of experienced and talented designers. Read On. Originally published here.

Efficient and effective UI/UX development is one that ticks many checkboxes. It should be unique, usable, easy on the eye, a visual treat, and of course, should provide all relevant info. The main aim of UI design is to achieve an interaction between the user and the platform which is intuitive, simple and efficient. A good UI design plays a good role in the user not having to break a sweat in order to operate your platform. ‘How to create incredible UI’ is a question all designers and developers ask, on a regular basis.

Let’s take an example of WhatsApp, the most popular instant messaging tool on mobile. It has a very clean UI design and has clear indicators to all relevant sections of the app. The swiping animations are also fast and smooth, with microinteractions such as the ‘ticks’ that appear when a message is delivered, and which turn blue when a message is read, make the user’s life that little bit easier.

Having a crisp and well laid-out UI design is one of the major reasons why people prefer WhatsApp over other instant messaging services. One could also consider the app to be a complete package when it comes to great UI design. Sure, there are other apps that do the job better than WhatsApp does, but when it comes to getting all the basics right, Jan Koum and Brian Acton certainly did it.

Now, how to replicate the efficient design of WhatsApp? A comprehensive UI guide is about to follow. This guide aims to be of great help to developers and designers alike and aims to touch on all the elements and processes that make up great UI. Every procedure, element, guideline, and tip will be touched upon here, so make sure to read it all the way. You don’t want to miss a thing!

ELEMENTS OF GOOD UI/UX DEVELOPMENT

There are a few main ingredients that lead to your platform having a good UI design, a few rules of user interface design. Including these elements in your planning and preparation stage will surely allow you to create exactly what you want, and in record time as well. Let us discuss the different elements and things a designer must know in creating the most amazing UI design ever seen. This will also help us to answer the question ‘How to create incredible UI’.

GOOD RESEARCH AND PLANNING

Obviously, if you don’t know what your target audience wants, how will you give it to them? Thousands of cracking ideas fail due to inadequate or complete lack of research of their target audience.

Nailing a UI design is no different. You must understand what people like, what they are willing to pay for, and what they want to see in something that they use every day. Conduct surveys and market analyses to get to know if people like their notification bar in a top down or bottom up scroll fashion.

Ask if users want a separate screen for displaying their deleted images in a file manager app. The moment you have answers to all your questions is the moment in which you know exactly what your users want. This will enable you to provide them with a smashing UI design that is sure to keep them addicted to using your platform.

Keep in mind that the final design you produce must also be in line with the company goals and objectives. Agreed, users and customers are the absolute kings when it comes to running a business, but it would be foolish to ignore the company principles and rules. Therefore, a good UI design is almost always representative of what the users want and how the company wants to give it to them. Also, it is crucial to follow all rules of user interface design.

CLARITY AND SIMPLICITY IS OF PRIME IMPORTANCE

The intentions of what you wish to achieve with your UI design must be very clear. The user must not find it hard to find what he/she is looking for, and the interface should be easy to navigate. Having clarity of thought and of design is something that beginner designers neglect, and this is one of the biggest mistakes they make.

Grabbing the user’s attention is one thing, keeping it for an elongated span is another. Your platform must look to achieve that not with its world-class list of features, but with a clear and simple design that makes users want to come back to your app in spite of any inherent flaws it may have. Interactions play a huge part in deciding the simplicity factor of your design.

Hence, make sure that users do not have to perform too many actions in order to achieve something as insignificant as setting a reminder. Microinteractions must also be kept as simple as possible, with clear indicators to performing of actions and completion of tasks. The moniker ‘keep it simple, stupid’ is one that perfectly applies to the concept of great UI design.

DESIGN AND PROTOTYPING

Building a prototype to represent what your idea stands for is quite a major step when it comes to elegant and efficient UI/UX development. You want to show people what your vision is, how you plan on designing the interface for your platform, and that is achieved by designing a prototype.

It could be as simple as a single interactive page, which displays the crux of your ideas, and all the essential UI features that you’re looking to incorporate. Only when you’ve designed the prototype can you work on ironing out the bugs and glitches, and putting your UI out for other people to test.

TESTING ON ACTUAL PEOPLE, NOT BOTS

Once you’ve created the product that you envisioned of, it is time to test its mettle in the real world. Conduct tests on actual people. Give them your platform, ask them to analyze the look and feel of the product, and then tell what they like and what they don’t.

It is the best way to grow and learn about the strengths and weaknesses of your UI/UX development and is way more fruitful than conducting tests on bots available online. This is akin to the research phase, the main difference is the fact that surveys done before the development of the product are part of the research phase, and those done after are part of the testing process.

Testing represents a real indicator of how your fully launched product is likely to perform in the market. Most of the times, it happens that products replicate their initial responses on the small scale. If your product receives generally favorable reviews by its alpha and beta testers, it is much more likely to do well on its full release than an untested product.

If people like how your interface feels, how it looks, and what it does, it proves that you successfully designed a killer UI which could potentially take the market by storm.

MAKING INVENTORIES AND LIBRARIES

No matter if you are starting fresh or working on an already existing product, it always is of great help to build an interface inventory and library, with samples of all designs that have been developed. Scalability and consistency are ensured by having such a common inventory for all teammates to work on.

Usually, this can be achieved by tasks as simple as taking screenshots of all your designs and then ordering them on the basis of some common factor, using powerpoint or other tools. What this does is create a place where you have all the elements that you need to use for your UI design for quick future references, and also for ease of access when discussing your designs with teammates or clients.

Once you have your inventory ready, it is time to build some libraries. Start by noticing and identifying common design patterns in your inventory, and develop around them. For instance, designs that signify action progress factors could be clubbed to for a separate library, similarly for microinteractions and other essential elements.

This helps you to achieve a deeper level of consistency and makes your designs have a composite nature, as you build complex ones out of smaller, simpler units. Also, when adding new designs, you know where to place them, as your inventory and libraries are now clearly demarcated to show exactly what they contain.

DESIGNING ANIMATIONS AND INTERACTIONS

A few years ago, animations and interactions were not as prevalent in UI design as they are now. Users might have been able to navigate from screen A to B with little or no animation and had no problem with it.

Now, the trends in UI design have undergone major changes. Animations have a huge effect on the usability of a platform since users want their interactions with their mobile screen to feel as natural as possible.

UI designers now work harder than ever in perfecting animations and interactions, and following all the rules of user interface design, since screens have developed into fluid media, by which we mean a loss of the static characters of an interface.

How pages as a whole interact with the user, and as units interact with each other is an important part to understand, since it will dictate how user-friendly and visually aesthetic your interface will look.

Hence, the key to designing a good UI is to understand all the interactions and design proper animations that complement these interactions as well as possible.

When designing animations, we need to take into consideration a number of factors and rules of user interface design, such as the type of user action that triggers a transition, the kind of transition itself, and the duration of the animation.

To make sure that users have a good time using your platform, you need to give equal importance to all these factors, in conjunction with the type of content your platform is providing, and then design animations that complement your platform perfectly.

When it comes to microinteractions, it comes as no surprise that users want to see the visual feedback of every action that they perform. This is where microinteractions come into place.

A good UI design will always let its users know when they have performed an action if their actions have had the desired effect or not, and has the action triggered any other action or not. Having a proper system in place when it comes to designing animations for microinteractions can be extremely helpful inefficient UI design.

ALL ABOUT DESIGN CONSISTENCY

The importance of consistency has already been touched upon in this guide in bits and pieces. However, the topic of design consistency needs to have a separate section altogether, because of the prime importance it holds in the process of UI/UX development and the rules of user interface design.

Think of design consistency as a promise, a commitment to your users, for instance, whenever they click on the cross-shaped button on a window, it is assumed that it will close the window. Establishing standards for some renowned actions or buttons is somewhat of a measure of design consistency.

A few best practices to incorporate consistency in your design are listed below, they are some things a designer must know.

USER-TARGETED RESEARCH

The importance of research in UI design has already been explained before. To establish consistency, that research needs to be carried out in correspondence with the type of application you are trying to build.

For example, if you are building UI designs for an online ticketing application, understand the goals that users want to accomplish with your app.

Some of these could be searching for rail tickets within a given time frame or looking for air tickets from a given place to another. Once we get to know user goals, we can get down to designing our UI in such a way that it fulfills expectations of users.

Established UI/UX development patterns are also crucial to understand since a lot of similar problems in UI design can be solved using recurring patterns.

DESIGNING THESE RECURRING PATTERNS

A proper hierarchy is paramount when it comes to designing recurring patterns for solving UI design problems. Subconsciously, users pay attention to the flow of interactions, the layouts and the positioning of items that they see on their screen.

For the elements, the inventory and libraries designed earlier will be of great help in building up complex patterns from simpler units. This pattern library can also be expanded either as part of or independent too, a design system, which, essentially, are for quick references by all team members, to ensure team-wide consistency.

When it comes to the actual elements, making sure that the correct fonts, logos, and typefaces are used all across the UI is a measure of the consistency that your design holds. For elements which are tough to achieve consistency with, templates can provide a way out.

CONSISTENCY IN ACTIONS

Interactions, for the best part, should always consist of the same actions to be performed by the user. If a user is looking to view an image from a specific folder, he/she should never have to perform a different action each time he/she wants to view that same image.

It is a crucial step in ensuring that your application remains easy to use, and does not cause headaches for users. People, believe it or not, are lazy and afraid of the unknown. Therefore, having interactions that consist of as few steps as possible, and the same steps every time is a great way to ensure that they keep coming back to your application.

CONTENT DESIGN

Consistency in UI design is not just limited to interactions and elements of design. Across the app, content on display should also have a specific pattern to its placement and the way it looks. For example, the expand button on a smaller piece of information should always be in the same place on different screens.

People can detect minor off-things in the app if they keep recurring. Things as simple as a missing Oxford comma can tick users off since, after a certain number of subconscious notices, the conscious mind of the users begins to take notice. Hence, it becomes a necessity to ensure that consistency across the content is also maintained along with consistency in interactions and elements.

Now that we know all things that comprise efficient and beautiful UI, let us discuss some guidelines and tips for designers and developers to keep in mind.

GUIDELINES FOR UI/UX DEVELOPMENT

Jacob Nielsen and Rolf Molich, notable usability experts, have formulated these ten UI/UX development guidelines, or rules of user interface design, back in the 90s, which still hold prominence now. These are some crucial things a designer must know.

User control and freedom. This pertains to offering users freedom over their actions, and also the ability to redo and undo interactions.
Visibility of system status. Users should always have essential system information available at their disposal, it should be easy to comprehend and not very detailed.
Match between system and the real world. Users expect their interactions with the application to mimic the look and feel of a physical object. Thus, it is the job of UI designers to provide users with such an experience, based on their needs and wants.
Error handling. UI systems should be designed so that errors and bugs are kept to a minimum. Users are meant to use the platform, not correct errors. Therefore, it is crucial that they encounter as fewer errors as possible.
As explained in the previous section, design consistency is something that makes users stick with your application for time immemorial. Similar elements, terminology, and actions should be maintained across all parts of the UI.
Flexibility and efficiency. Faster and efficient usage of the UI is a must, and designers must code it in such a way that the time taken to perform an action is minimized, and more efficient.
Minimalistic design. Keeping it simple is what users like to see. Too much of detail clutters up the app screen, leaving a sour taste in users’ mouths. Unnecessary information must be kept at bay from users, with only essential and required info on display.
Recognition rather than recall. This is done to reduce the number of brains that a user is required to employ in order to complete an action. The interface should be designed in such a way that it minimizes cognitive load. The user should not have to rack his/her brains in order to remember what a certain action does, he/she should only have to recognize with the help of some visual clues.
Help users diagnose and recover from errors. First of all, errors should be kept to a minimum. If at all they creep in, the interface should provide users with methods to detect and handle errors, and not just allow them to sit there deadlocked. Error messages should be communicated in layman language, so that it is easy for users to understand.
Help and documentation. If users get stuck on a certain action or screen, appropriate help documentation should be there to assist users in overcoming any hurdles they may face. Ideally, the situation should be one which does not require the need to refer to any text to navigate the interface, however, one may be required for some exceptional and complicated cases.

THINGS A DESIGNER MUST KNOW

Coming to the end of this guide, we have some final tips, tricks, suggestions and rules of user interface design for developers and designers to help them design the UI that they want and their users love. Here they are.

Create layouts that fit the screens of devices you’re planning to release your platform on.
Create buttons that are of a respectable size, so that users can easily press them.
Spacing is crucial. It makes text appear better and more readable.
Contrast in colours should be such that it doesn’t make the text illegible.
The size of text should also be at least 11 points, which makes for comfortable viewing or reading.
High resolution images are a must, since they usually do not distort upon screen rotation.

THE ENDING

This comprehensive guide to UI/UX development covered all aspects of what a good UI design must have, and all the rules of user interface design.

All elements, planning processes, interface inventory establishments and library making, animations and interactions designing, guidelines and tips have been covered here.

We hope that this guide was of immense help to designers and developers alike, and that it make their UI design process easier.

Does the process of UI design still feel a bit too big for you?

HOW SODIO CAN HELP

At Sodio, we have a great UI/UX development and design team, that can help you integrate animations into your UI, follow all rules of user interface design and ultimately build up your user retention stats. Our designs are state-of-the-art and visually pleasing, along with being efficient and fast.

With a talented team of designers, we are sure to leave you satisfied with our work, and we can assure you that your users will love your platform! All the elements covered in the comprehensive user interface design guide will be incorporated into your application, making it one of the best out there.