User Interface Design
Having a good User Interface (UI) Design is an essential part of a project. But what exactly is a good UI? And how do we make one? This article will cover about the princips and the steps to creating a good User Interface Design.
What is User Interface Design?
According to Interaction Design Foundation, User Interface Design is “the process designers use to build interfaces in software or computerized devices, focusing on looks or style.”
10 Usability Heuristic — Jakob Nielsen
A good UI design aims to create interface which users find easy to use and pleasurable. Here are 10 Usability Heuristics defined by Jakob Nielsen as a guide to creating a great UIs.
1. Visibility of system status
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
— ex. Modal pop up when a form is successfully submitted or failed, and show the status “submitted” or not in the information.
2. Match between system and the real world
“The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”
— ex. The use of bahasa Indonesia for a portal that is commonly used by Indonesian, the use of ‘NPSN’ as school identifier as it is used in Indonesia
3. User control and freedom
“Users often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.”
— ex. An option to submit, exit, or save as draft when filling registration form.
4. Consistency and standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”
— ex. The use of the standard common login form, and consistent color used in the system.
5. Error prevention
“A careful design which prevents a problem from occurring in the first place is Even better than good error messages.”
— ex. Disabling email field in user’s profile to prevent the change of user information that will disrupt the database.
6. Recognition rather than recall
“Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”
— ex. Field labels are shown on top of each field rather than disappear when the field is filled.
7. Flexibility and efficiency of use
“Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”
— ex. Option to change registrant status by going into the registrant detail page one by one or by changing it straight in the registrant list.
8. Aesthetic and minimalist design
“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”
— ex. Showing only some of the necessary information in the registrant list, the rest are shown in detail option.
9. Help users recognize, diagnose, and recover from errors
“Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”
— ex. Letting user know what makes an error in an input field.
10. Help and documentation
“It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.”
— ex. Tooltips attached to any active element (icons, text links, buttons, etc.) on a page to provide descriptions or explanations for their paired element.
Now we get the idea of what a good UI is, let’s get into how we can start making it.
In UI design, there are some phases or steps that designers go through, from creating a rough sketch — to a finished product. Some of the most used are wireframe and prototype.
Wireframe
A wireframe is a low-fidelity way of showing a design. It’s the graphic representation of an app or a website containing the most essential elements and the content, like a blueprint of a building. — UX Planet
Creating a wireframe will help gather things together and see the big picture. A wireframe shows the following characteristics:
- Main chunks of content — what elements need to be in the system
- Outline and the layout structure — a hint of what to put where
- Most basic UI — e.g. simplified shapes, text, and visualizations, with only one color tone.
Mockup
From the wireframe we created before, we want to put the product’s characters into the design. Experiment with the color schemes, visual style, and typography to find which suits your product goals and the users we aim for. The final design decisions will be the exact look of our product.
A mockup is a static visual way of representing a product, it shows how the product is going to look like. — UX Planet
Also make sure to refine our design by referring back to the 10 Usability Heuristic guides. Oh, and please put your fellow developers into consideration too, cause they’re the one who’s going to code all that ( ﾉ ﾟｰﾟ)ﾉ.
