Visual Design Things!
One of the most important roles in our product has to be the visual design. The visual design not only attracts the user to start using our product, it also keeps them to continue using our product in the future. Anyone would find it annoying and difficult to use a product that is confusing and hard to operate. This is why we need to ensure that our product has good visual designs. This can be done by:
Create the Wireframes
A wireframe is a low-fidelity design of our product. In other words, it's the most basic layout of our product, which consists of only the essential elements of our product. A wireframe functions to provide the basic visual understanding and flow of our product in the early stages. This also helps us from forgetting any key elements. Creating a wireframe is fast and easy because it’s only like a sketch of the design. So, once created, it can immediately be reviewed by the client which would give us feedback. This helps us create a visual design that is accustomed to the client’s request. To make a wireframe, you can use a notebook and draw it manually, or use a wireframe website that helps you create wireframes, such as https://www.mockflow.com/ and https://wireframe.cc/.
Here is an example of the wireframe for one of BisaGo’s pages:
Create the Mockups
A mockup is a visual way of representing our product. Unlike the wireframe, a mockup displays the design of the end product and how it’s going to look like and function. It includes pictures, colors, typography, etc. A mockup is very important as it helps us reach an agreement with the client regarding the final decision of the product's design. It also helps the client review the design before starting the development, making the development faster as the developers don’t need to change the UI during the development. Instead, they could just work on the UI based on the feedback of the client’s review. There are a lot of platforms that can be used to create mockups. BisaGo chooses to use Figma to create the mockups.
Usability Heuristics
Jakob Nielsen’s 10 general principles for interaction design. They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines. — nngroup.com
- Visibility of System Status
This principle states that the design of the product has to keep the users informed on what’s going on, through appropriate feedback within a reasonable amount of time. Some examples of this is when Twitter plays a “swoosh” sound when posting a tweet, or Google Drive showing the status of the document being uploaded.
An example of the first principle in BisaGo is that the application shows a message when the user has successfully/unsuccessfully logged in to their account or when the user has updated their profile.
2. Match Between System and the Real World
This principle states that the system should speak the user’s language, which means that it should use words, phrases, and concepts familiar to the user and avoid using system-oriented or technical terms. The design should also follow real-world conventions, such as the recycle bin on our computers’ desktop that uses the picture of an actual trash bin. This makes it easier for the users to understand and remember it.
An example of the second principle in BisaGo can be seen in the app’s navigation bar. It uses familiar and conventional icons that ease the user to understand and remember them.
3. User Control and Freedom
The third principle says that users often choose system functions by mistake, thus needing a clear “emergency exit” to quit the unwanted state without having to go through an extended dialogue. The product should also support undo and redo, as it enables the user to cancel their action easily, preventing them from getting frustrated. An example of this can be seen in Google Drive when uploading a file, you can click the cancel button to cancel the upload even though it’s in progress.
An example of this in BisaGo is when the user wants to add information about a facility that supports people with disabilities. When they click on the “Simpan” button, the app will first give a message that shows if they are certain to submit the information. This will enable them from submitting incorrect information and can help them change it easily without redoing everything.
4. Consistency and Standards
A well-known saying is that “Consistency is key”. This also applies to visual design as it prevents the user from having any extra thought and wondering whether different words, situations, or actions mean the same thing. We should follow platform conventions, as consistency would also bring intuitiveness to our product. An example of consistency can be seen in the Microsoft Office applications. They use the same designs for home, insert, etc.
In BisaGo, consistency can be seen in the buttons we use, as they are straight forward and have similar designs throughout all pages.
5. Error Prevention
Error prevention says that rather than having good error messages, it is better to have a design that prevents such problems to occur in the first place. This can be done by either eliminating error-prone conditions or check for them and present users with a confirmation option before they commit to the action. An example of this principle is that Gmail gives an alert to the user for such keywords before the user sends it.
An example in BisaGo can be seen in the “Tambah Informasi” page when the user inputs information about a particular facility into the application. When the save/submit button is clicked, it will first give an alert that asks whether the user is certain of submitting it or not.
6. Recognition rather than Recall
This principle minimizes the user’s memory load by making objects, actions, and options visible. The product should be able to relieve the user from the need to remember information from one part of the dialogue to another. It’s better to provide options for the user to choose from. An example of this is Quora which lists the possible questions based on what the user is trying to type.
BisaGo has also implemented this principle as it can be seen when the user searches for a location. It will show the possible locations and recent locations.
7. Flexibility and Efficiency of Use
This principle states that the interface should be flexible transforming itself between a novice user and an advanced user. We can provide a faster way or more abilities for an advanced user to use our product while still keeping it simple for novice users.
An example of this principle in BisaGo is that we have a filter feature that allows advanced users when searching for a review of a facility at a certain location. The novice users are still able to search for the revies they need without the need to use the filter feature, as the application will show every review regardless.
8. Aesthetic and Minimalist Design
This principle states that dialogues should not contain information that is irrelevant. This is because extra information in a dialogue will compete with relevant and important information instead. Which would make it harder for the user to find the necessary information they actually need.
Below is an example of BisaGo that implements this principle. It can be seen that the “Informasi Fasilitas” page only shows the necessary information regarding that facility itself, such as the facility provided, the disability type, the image, the amount available, and a brief description.
9. Help Users Recognize, Diagnose, and Recover from Errors
The ninth principle emphasizes the error messages that should be expressed in plain languages. Furthermore, they should precisely indicate the problem, and constructively suggest a solution.
The implementation of this principle can be seen in BisaGo when signing up. If the user were to miss any mandatory fields empty, it will notify the user which particular mandatory fields they have left empty.
10. Help and Documentation
The last principle states that it may be necessary to provide help and documentation for your product. Although not having the need to provide this can be a sign that the design is already straight-forward and easy to understand, it’s still favorable to provide help and documentation.
Currently, BisaGo still has not implemented this principle because when compared to the other tasks, it still lacks the importance between the other tasks. However, it is something that could possibly be implemented in the future, once the application has been fully developed and is properly running.
References
