Thoughts, stories and ideas.

shutterstock_248217778-1

What is User Interface Design?

User Interface (UI) Design is the link between users and the website. It includes the basic design elements that need to be present for someone to navigate your site and make decisions. It includes the way that your website interacts with users, the overall design and how information is displayed.

There are several different ways that you can look at user interface, but the basics always include the communication from a product to the user, and the other way round.

UI Design is all about structure, user guidance and communication. This is one of the main reasons it’s important that you pay close attention to it. It is the basic building block of how your website is created and how it functions when visited by your target audience. If it doesn’t go smoothly, issues tend to follow.

User Interface Design include the following elements: input controls, navigational components, informational components and containers.

As they say, the devil is in the details. Buttons, lists, toggles, icons, breadcrumbs, tags and more also play an extensive role. The back-end design your site directly affects your audience’s front-end experience.

Why is User Interface Design So Important?

User Interface Design is one of the reasons that your website will start to see an inflow of traffic. It draws people in and keeps them on the website.

UI is what makes people recommend your site and become loyal customers. Therefore, come what may, UI design guideline should never be overlooked.

One thing that takes people by surprise is how big of an impact even the minutiae in UI Design can have.

What are User Interface design principles?

To increase the chances of success when creating user interfaces, most designers follow interface design principles. User Interface design principles represent high-level concepts that are used to guide software design.

The important UI Design principles are:

⦁ Place the users in control of the interface

⦁ Make it comfortable for users to interact with a product

⦁ Focus on consistency

Let’s look at these three in detail:

1. Place users in control of the interface

⦁ Make actions reversible

User-friendly interfaces instil a sense of control in their users. Handing users the control makes them comfortable. They will learn quickly, as well as gain a fast sense of mastery.

This rule means that the user should always be able to quickly backtrack whatever they are doing. When a user knows that errors can be easily undone, it encourages exploration of unfamiliar options.

On the other hand, if a user has to be extremely careful with every action they take, it acts as a barrier to exploration and leads to nerve-racking experience that no one wants.

Perhaps, the most common interfaces where users have the ‘Undo/Redo’ option are text and graphics editors.

While writing text or creating graphics, ‘Undo’ lets users make changes by going back step-by-step through changes that were made.

‘Redo’, on the other hand, lets users reverse the undo. This means that even if they go back a few steps, they are still able to move forward through their changes again.

image--1-

‘Undo’ can be extremely helpful when users choose a system function by mistake. Here, the undo function serves as an ’emergency exit,’ allowing users to leave the unwanted state. One good example of an emergency exit is Gmail’s notification message with an undo option when users accidentally send or delete an email.

image-2
Undo option in Gmail interface

Source:https://in.pcmag.com/e-mail/50668/how-to-manage-undo-send-in-gmail

⦁ Create an easy-to-navigate interface

Navigation should always be clear and self-evident. Users should be able to enjoy exploring the interface of any software product. Even complex B2B products full of features shouldn’t intimidate users so that they are afraid to press a button.

Make users comfortable by providing some context of where they are, where they’ve been, and where they can go next:

⦁ Provide visual cues

Page titles, highlights for currently selected navigation options, and other visual aids give users an immediate view of where they are in the interface. A user should never have to wonder, “Where am I?” or “How did I get to this screen?”

⦁ Predictability

Users should be provided with cues that will allow them to predict the result of an action. A user should never be wondering, “What do I need to press in order to do my task?” or “What is this button for?”

A clear, visible workflow that enables users to understand where they are in a process will encourage them to stick with a task.

⦁ Provide informative feedback

Feedback is typically associated with points of action — for every user action, the system should show a meaningful and clear reaction. A system with feedback for every action helps users achieve their goals better.

For example, when users interact with an interactive object (such as a button), it’s essential to provide some indication that an action is acknowledged. This might be something as simple as a button changing colour when pressed (the colour change notifies the user of the interaction).

The lack of such feedback forces users to double-check to see if their intended actions have been performed.

⦁ Show the visibility of system status

Visibility of the status of a process is essential when users initiate an action that takes some time for a computer to complete.

The use of progress indicators is one of the subtlest aspects of user interface design that has a huge impact on the comfort of users.

image--2-

A well-designed interface can comfort users by showing the progress of a task. Dropbox is indicating the status of a document upload, i.e. the current progress and the amount of time left.

2. Make it comfortable for a user to interact with a product

⦁ Promote visual clarity

Good visual organization improves usability and legibility, allowing users to quickly find the information they are looking for and use the interface more effectively.

When designing layouts:

⦁ Avoid presenting too much information at one time on the screen because this will result in visual clutter.

⦁ Remember the principle - form follows function. Make things look like they work.

⦁ Apply the general principles of content organization such as putting similar items together in a group, numbering items, and using headings and prompt text.

⦁ Don’t ask users for data they’ve already entered

Users are easily annoyed by tedious data-entry sequences. Hence, don’t force them to repeat data they’ve previously entered. The most effective apps perform the maximum of work while requiring a minimum amount of information from their users.

⦁ Avoid jargons and system-oriented terms

When designing a product, it’s important to use language that is easily readable and understandable. The system must speak the user’s language, with words, phrases, and concepts familiar to the user, rather than jargon or system-oriented terms.

image--3-

It’s advisable to use terms throughout the interface that users can understand, rather than system or developer language. Image credited to Thinkwithgoogle.

⦁ Design accessible interfaces

When we design products it’s important to remember that a well-designed product is accessible to users with low vision, blindness, hearing impairments, cognitive impairments, or motor impairments. Improving on your product’s accessibility enhances the usability for all users.

Colour is one of the elements of an interface that has a profound impact on accessibility.People perceive colour differently.

Approximately ten percent of men and one percent of women have some form of colour blindness. Therefore, when designing interfaces, it’s better to avoid using colour as the only way to convey information to the user.

Any time you want to use colour to convey information in the interface, you should use other cues to convey the information to those who cannot see the colours.

image--4-

Bad: This form relies only on red and green to indicate fields with and without errors. Users who suffer from deuteranopia (red-green colour blindness) will fail to identify the fields.

image--5-

Good: Icons and labels show which fields are invalid which helps to communicate the information to a colour-blind user.

⦁ Handling errors

Bad error handling paired with useless error messages can irritate the users and lead them to abandon your page.

A well-crafted error message, on the other hand, can turn a moment of irritation into a moment of conversion.

An effective error message is a combination of an error notification along with hints for solving the problem.

image--6-

Good error messages are precise, polite, and constructive. MailChimp is a good example of how to handle an incorrect password scenario.

Even better than writing good error messages, is creating a design that prevents an issue from occurring in the first place.

Try to either eliminate error-prone situations, or check for them and present users with a confirmation dialog before they commit to the action. For example, Gmail prompts the user when they forget to insert an attachment.

⦁ Protect a user’s work

Users should not lose their work as a result of a mistake on their side, a system error, and problems with an internet connection, or any other reason other than those that are completely unavoidable, like an unexpected power loss.

image--7-

Google Chrome allows you to restore pages when a session didn’t shut down correctly.

⦁ Make user interfaces consistent

Consistent design is intuitive design. Consistency is one of the strongest contributors to usability and learnability. The main idea of consistency is transferable knowledge — let users transfer their knowledge and skills from one part of an app’s UI to another, and from one app to another app.

⦁ Visual consistency

A user should never question the integrity of a product. The same colours, fonts, and icons should be present throughout the product indicating consistency.

Don’t make unnecessary changes in the visual styles within your product. For example, a ‘Submit’ button on one page of your website should look the same on any other page.

image--8-

Avoid using different styles for the same elements on different pages of the site. Users should not have to wonder whether a transformed button like this example means the same thing.

⦁ Functional consistency

Functional consistency means consistency of behaviour. The object should work in the same way throughout the interface. The behaviour of interface controls (buttons and menu items) should not change within a product. Users don’t want surprises or changes in familiar behaviour. This can inhibit learning and lead to inconsistency in the interface.

⦁ Consistent with user expectations

Users have certain expectations about the apps/websites. If users expect your page to work/look a different way, you will face a hard time changing those expectations. If your approach is not convenient for the user, go with what your user expects.

⦁ Standardization: Your product should be consistent with standards instructed by platform guidelines. It ensures that your users can understand individual interface elements in your design.

⦁ Don’t reinvent patterns: For most design problems, set solutions already exist, called as patterns. Popular patterns become conventions and majority of the users are familiar with them.

image--9-

It may not be feasible for you if instead of considering these conventions, you create your own solutions/patterns. You might face usability problems not necessarily because your solution will be wrong, but because users won’t be familiar with it.

⦁ Don’t try to reinvent terminology: Avoid using new terms especially when there are words available that users already know. Users spend most of their time in other apps/sites, so they have certain expectations about naming. Using different words might create confusion.

The term ‘shopping cart’ will be familiar for a majority of e-shoppers, while the term ‘shopping center’ might confuse users and make them wonder.

Conclusion

The goal for UI designers today is to produce user-friendly interfaces, i.e. interfaces that encourage exploration without fear of negative consequences.

Undoubtedly, interfaces of the future will be more intuitive, enticing, predictable, and forgiving, but most of the basic principles of interface design listed in this article will surely apply to them as well.

If you want your UI design to satisfy your users as much as possible, be mindful of the above points.