Introduction to user interface(UI) design

User interface design

What is User interface design

User interface design is the point of interaction and communication between humans and devices/machines. UI design is an essential aspect of user experience that deals with how different visual elements, like colors, typography, and imagery, work together.

UI consists of two major parts:

• Visual design- which is concerned with the look and feel of a product.
• Interaction design- which is the functional and logical organization of elements.

User interface design prioritizes the user’s visual experience aims at creating an interface that makes it easy, functional/useable, and as enjoyable as possible for users to interact with a product.

Rules of a good UI design

• Feedback- Keeping users informed about what’s going on within a reasonable time frame is an appropriate gesture especially when an action is performed.
• Design vs Reality- Using words, phrases, concepts, icons, familiar to the users makes it easy for users to learn how the interface works. This builds an intuitive experience feel.
• Reversible action- Making your users able to reverse an action like undoing a delete makes them feel in control and allows them explore the product without the fear of doing something wrong- when a user knows that errors can be easily undone it gives them the courage to explore unfamiliar options.
• Consistency and standards- Consistency in content, icons and other UI elements is important as we do not want users to wonder if different words, icons, situations, or actions mean the same thing.
• Recognition and cues- Elements, actions and options should be made visible because humans have short term memories and should not have to remember all information. Providing visual cues allows users navigate through the interface easily as it serve as reminders for users. Providing reference points like page title helps the user to know where they are on the interface. A user should never wonder where the are or how they got to a screen on the interface.
• Flexibility and usability- A UI design should be made such that even a new user easily understands and can use the product with ease. Adding features like tooltips, tutorials and explanations is a helpful gesture for new users.
• Aesthetic and minimalism- Any information or visual element that is irrelevant should not be found on an interface because an extra unit of irrelevant information will reduce the visibility of a relevant unit of information. Make sure that the visual elements of your interface supports the user’s goal.
• Clear error messages- Use plain and easily understood language (not codes) to indicate an error and constructively suggest a way out. Error messages should also be easily recognizable by using visual representations.
• Eliminate error-prone conditions- You can prevent your users from making avoidable errors like presenting them with a confirmation before committing to an action or suggesting a usual action to them.
• Visibility of progress status- While the system is booting, loading, calculating or doing anything at all that takes some time, the use of progress indicators so the users can know how long they have to wait will make the user comfortable. Leaving users to see nothing while the system is busy is not a pleasant experience.
• Requesting for already entered data- Do not ask for the same data the user has already entered because this is tiring and could be frustrating.
• Apply Fitts law- Fitts Law states that the time to acquire a target is a function of the distance to and size of the target. For example, call to action buttons should be designed in such a way that it is big enough and easy to interact with.
• Accessibility- When designing a product, you must understand that some of your users will have special disabilities like low vision, blindness, hearing impairments, cognitive impairments, or motor impairments which means you have to factor in these disabilities in the design to make it accessible.
• Protect your user’s work- Users losing their work as a result of an error such as network or accidental page refresh should not be the reason for a user to start filling a form from the beginning.
• Reduce cognitive load- Cognitive load is the amount of mental stress a user passes through trying to get a task done. For example, if your UI requires users to enter credit/debit card expiry date without normal spacing it can result in a lot of incorrectly-captured dates. So you can help users breaking up the field to input these dates and giving descriptive faint dates in the field so they can have an idea of how to write the dates.
• Visual organization- improves usability and legibility, allowing users to quickly find the information they are looking for and use the interface more efficiently.
• Help- Providing documents to make users understand how to complete a task is important- however, it’s best if the interface is self explanatory . Help documents should have a search box and a list of well explained but straight to the point steps.
• Responsive designs- When designing, you need to keep it in mind that users will view your product on different devices so you need to design for multiple screen resolutions and also make sure the design translates well across all resolutions.
• The use typography to create hierarchy and clarity- You need to understand typography. The types of fonts, the appropriate usage and how different sizes, and arrangement of the text helps to increase scan-ability, legibility and readability.