User Interface is usually the very first thing that the end-users will notice when they first use an application. It gives them the first impression of how well-built an application is. They usually judge the quality of an application or a website based on how visually pleasing the design of the interface is, or how easy it is to navigate the application to perform a certain task. As a software developer, it is crucial that we spend some time understanding how to craft an attractive design to satisfy both the business stakeholders and the end-users. This article will talk about the steps to create a good visual design interface, as well as the Jakob Nielsen’s 10 Usability Heuristics.
Step 1 : Design Benchmarks
Before deciding what we want our application to look like, we usually want to check out other companies or other designers’ works as a source of inspiration. There are websites such as Dribbble, Behance or Awwwards that we can utilize to look at other people’s showcased design to enable us to have mental imagery on how our application will look like.
Step 2: Interface Inventory
Once we have gathered ideas on the things that we like, we can make interface inventory that defines all of the design tools that we need, such as animations, typography, color palettes, input components (buttons, text field, etc.), informational components (tooltips, dialogue boxes, etc.). We can do this step in Figma.
Step 3: Creating a Sketch
The next step is to create a rough draft/sketch of what our design will look like. Sketching can be done on a piece of paper, or can also be done digitally.
Step 4 : Creating Wireframes
Wireframe is made to define visual hierarchy and structural guidelines of each screen. It’s a low-fidelity design meaning that the designs need not be detailed. We can use Whimsical to make our wireframe.
Step 5: Creating Mockups
Mockup is a high-fidelity design. Mockups will have to look exactly like the finished product, it is a prototype of the product. It provides detailed design that’s also interactive, we should be able to scroll through the pages, click a button, checkboxes, and so on. This is the design that we will present to our team or the stakeholder, we can also test this prototype and get feedbacks for it. We can use Figma as a tool to create mockups.
10 Usability Heuristics
10 Usability Heuristics is a general rule of thumb used in interactive design to ensure the usability of a product, it also provide a simple and quick testing areas to identify problems and its possible solutions. It is useful to understand these heuristics, so let’s look further into it.
1. Visibility of System Status
Our design should be able to inform the users of what’s going on inside our system, and that we need to give feedback to users immediately. A simple thing like loading signals or color change will be able to notify users about this. For example, there will be a red message when users mistyped their password.
2.Match between System and Real World
The design should be easily understood by the users. It needs to use words and concepts that are familiar to the user instead of them having to guess what it means.
3. User Control and Freedom
This principle talks about giving users the freedom to undo any mistakes that they might have performed. Users need a clearly marked undo or cancel button instead of going through a complicated process that will leave them confused.
4. Consistency and Standards
Consistency is key. Users will prefer not to guess what task different buttons perform, we need to maintain consistency within a single product or we can also follow industry conventions. For example, all edit buttons should have the same shape and colors since they have the same functionality.
5. Error Prevention
We should provide users with helpful constraints to prevent them to committing an accidental slip ups or error. We can, for example make a confirmation alert.
6. Recognition rather than Recall
It’s better to provide users with a set of options rather than to let them remember everything. The goal is to minimize their memory load by making components that are easily retrievable and visible to them. For example, we can make the system to autofill users’ username and password if they wish to do so.
7.Flexibility and Efficiency of Use
The design should be flexible to use, meaning that both novice and advanced users should be able to use it within their comfortability range. In addition, We need to make our website efficient to use, we could make it by providing shortcuts or customization for users to perform a certain task. For example, we can provide users with options to register with their Google account instead of registering their account manually.
8.Aestethic and Minimalist Design
This one is pretty straight forward. Minimalist design enables users to perform a task without any needless information or distractions. However, our designs don’t have to be boring. We also need to make them visually appealing.
9.Help Users Recognize, Diagnose and Recover from Errors
Error message should be visible and should be explained in plain language, with a sufficient error message. Error message should not contains error codes such as 404:Not Found. Furthermore, it is also useful to provide them with solutions to the error. For example, we should allow users to change their password if they forget it.
10.Help and Documentation
Sometimes it may be necessary to provide additional information to help users navigate our application. If this is the case, make sure that we make it easy for users to spot the help they need.
If you’re designing or learning to design an application, I hope this article helps you along your journey. Best of luck! :)