UI Design
User Interface is one of the most important things when developing applications. To satisfy the users we’d really need to pay attention to what we’re making and how our application is going to be used by the users. But what is user interface really?
What is it?
According to indeed.com User Interface can be defined as
The user interface (UI) is the point at which human users interact with a computer, website or application. The goal of effective UI is to make the user’s experience easy and intuitive, requiring minimum effort on the user’s part to receive maximum desired outcome.
Basically user interface is what human users see and interact with when using applications, UI is typically made to appeal to human senses.
There are also different types of User Interface, with its own uniqueness
- Form-based User Interface, which is used when we need to input data into the system. One of the example of this UI is the login menu.
- Graphical User Interface, which is a tactile UI input with a visual output.
- Menu-driven User Interface, which is used for UI that has a menu navigation. One of the example is the ATM menu.
- Voice User Interface, which is used when the user give a voice command as an input. One of the example is siri or google assistant.
- Touch User Interface, which is used for smartphones and tablets. My project uses mostly this interface since we’re making a mobile application.
How to make it good?
To make a good UI we can’t just make it on the go, because it’s risky and we could ended up with a bad UI and its to late to change it. To ensure that we’ll get an application with a good UI we can start our development process by making a wireframe and mockups.
A wireframe is basically the blueprint of how our application is going to look like, wireframe gave a clear outline of how the application is going to look without actually making the application UI. A wireframe is usually black and white with a gray square as a place holder for images and other assets and a “lorem ipsum” text as the placeholder for the text that are going to be in the application.
A mockup is basically a more working blueprint than wireframe, a mockup acts as a guide when developing the application. A mockup is what the application is going to look like with the correct images and assets, the correct texts and with the correct color scheme. A mockup is also has the correct navigation between pages and a good mockup should give the developer a real sense of the application.
For this project me and my team made the wireframe and mockup on figma, we also collaborated with the client’s UI/UX designer and she’s the one who gave the exact color scheme and sizes.
To implement a good UI we’ll need some guidelines and directions, Jakob Neilsen made 10 general principal on User Interface which are:
- Visibility of system status, we need to always inform the user about what’s going on whether the process is a success or a failure.
- Match between system and real world, we always need to make the design resemble the real world since it’s what users understand.
- User control and freedom, sometimes users made mistakes so we always need to make application exit or cancel process when needed.
- Consistency and standards, we need to make everything on our application consistent and have some sort of standard to make the user familiar with the application.
- Error prevention, we need to make a design that wont lead to errors.
- Recognition rather than recall, the user shouldn’t have to remember information from one part of the interface to another, we should make the information visible and easy to retreive.
- Flexibility and efficiency of use, make the design more efficient.
- Aesthetic and minimalistic design, other than usability we should also focus on how the app is going to look like.
- Help users recognize, diagnose, and recover from errors, error message should be visible and easy to understand.
- Help and documentation, documentation should be easy to search and read.
That’s all I’m going to to talk about, hopefully it’s helped you make a better UI.