Good Visuals, Good Experience
An interface or design is always important in developing a product or project, especially when it comes to validating the product whether it is good or needs more improvement. Design is communication in a visual way that aims to be a guideline for users and leads them to the developers’ goals.
There are a few steps to make a good design, Wireframe and Mockups!
First thing first, you need to make a wireframe for your product design.
A wireframe is a visual guide that represents the skeletal framework of a product or as known as low-fidelity design. The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholders and project team approval before starting the design phase. The wireframe depicts the page layout or arrangement of the product’s content, including interface elements and navigational systems, and also how they work together. Wireframes can be simply hand-drawn, but nowadays we can use software like Microsoft’s Visio or I usually use wireframe.cc to provide an on-screen delivery.
How to create a Wireframe?
You need to keep the wireframe simple, remember these 3 important things
- Do not use colors, if you would, rely on various gray tones
- Do not use images, you can use a rectangle box with an ‘X’ through it
- Only use one generic font, it’s should not be a part of wireframe
Here’s an example of my project’s wireframe. Actually, in my project, we’ve been given the high fidelity mockup from our partner so we skipped this step. I’ll explain this later.
Let’s move to the next step, Mockups!
I assume you’ve done making the blueprints of your project, what you’ll have to do now is creating a mockup. A mockup is a high-fidelity design, but not the final product yet. It used to represent the structure of information, visualize the content, and demonstrate the basic functionalities in a static way. There are a lot of mockup tools today that you might want to use, such as Adobe XD, Figma, Marvel app, etc. I always use Figma to create Mockups for every project, but it’s all up to you.
How to create a Mockup?
- Identify your problem first
You are trying to make a solution to a problem, you can ask a lot of ‘why’ questions. Discovering the real problems will not only result in a way better outcome but will make the designer and developer easier. - User realistic assets
The right asset in mockup can bring it to the high fidelity design, you should be working on the visual language of your new product. There’s a broad range of great stock images and videos available which will help you to make your mockups more vivid and make the difference. - Fail fast and fix things faster
- Keep the workflow transparent and provide updates to your team
- Communicate clearly and address issues right when they happen
- Make sure to involve every stakeholder
An example of my project’s mockup using Figma, given by my partner will shown in next part.
Usability Heuristics
In product design, there are some rules that must be applied in making a product in regards to user experience. Jakob Nielsen developed the Neilsen’s 10 Usability Heuristics together with Rolf Molich in the early 90’s. The ‘Usability Heuristics by Neilsen’ is a broad principle for usability and user interaction.
Here’s I gave a nice illustration of the Usability Heuristics
Now, I want to explain more about each heuristics
- Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
The system needs to give feedback to the user, the user must always know where they are, what they’re doing, and what is the result of their action. To implement these 1st heuristics, we highlight the active page to make sure users know where they are and what they will do. That highlight can be seen from the navbar, so users know what page they are currently on. Other than that, we also give green dot for new questions so the users would know what question they haven’t read.
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.
You can use the universal language that all users will understand. In this case, we use Bahasa for the language because our target users are all Indonesians. Unfortunately, there are some words in Bahasa that are not familiar to them. For example, the word “skip” is more familiar than “melewati” because I rarely hear that in a Bahasa based application.
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.
Users must easily access to get out of unwanted situations. When users want to send the answer, we give the choice to edit first or publish immediately. So, if users click the ‘send’ button by mistake, they can undo their move and continue the writing. Other than that, if there is a little mistake or typo or even wrong answer when they read their answer again, they can change it first and not immediately published. Here’s the word ‘Sunting’ means to edit and ‘Terbitkan’ means to publish.
4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Consistency means follow platform conventions, like design and words/phrases consistency. A system that is comprehensive makes the users not confused. We follow the design guideline from Justika, like fonts, color, and style. The icons we use also indicate its function, such as user profile and send message.
5. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
We haven’t implemented this feature yet because the designs are coming from our partner, hence there is no need for prevention because there is no possible error coming from users other than login and I will tell about this in point 9.
6. Recognition rather than recall
Minimize the user’s memory load by making 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.
Users should be given options to choose from, instead of having to think up possible options themselves. Every question appears with the category itself, so users can pick what category they want to answer. Other than that, there is a “Draft” page which consists of a list of questions that they haven’t published. So, they can recognize there are still questions that they haven’t published.
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.
We shouldn’t make things too complicated for users. The interface should be flexible to a novice user and an advanced user. Our project consists only of basic functionalities, so there is no differentiation between novice and advanced users. But, to facilitate users when using this application we make the onboarding screen in the beginning of use. So, it makes all users know how the application works.
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.
Minimalist design is everything presented to the users is necessary and useful. In my project, we only use two icons and three illustrations so there are less things the user has to process. Overall the design of our product is very simple and minimalist because we are more focused on its functions.
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.
The error messages must be displayed in plain and universal language.In my project, we implement this by pop up warning in if users input the wrong email or password. This kind error is usually known as mistakes from users.
10. Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Help and instructions sometimes are needed in some applications to help users understand the application. We haven’t implemented the FAQ features. So far, we have only made an onboarding page to make users more understand how to use the applications.
Conclusions
An interface or design is always important in developing a product or project. First, you need to draw the Wireframe without colors and images. After making the wireframe for the blueprints or low fidelity design, you need to make the high fidelity design, called Mockups. Mockup could be done by any supporting tools out there. There are 10 rules that must be applied in making a product in regards to user experience according to the Neilsen’s 10 Usability Heuristics.
Yeay, there it is all about design your product. I know it’s not easy, just keep your design under Neilsen’s 10 Usability Heuristics and it will be.. voila!
Happy designing! :)
