Visual Design Things!

Akbar Novial
Dec 22, 2020 · 8 min read

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:

An example of the wireframe for BisaGo’s “Profile” page

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.

An example of the mockup for BisaGo’s “Profile” page

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

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.

BisaGo when the user inputs the wrong email or password during login
BisaGo when the user updates 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.

BisaGo’s Navbar

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.

BisaGo “Tambah Infomasi” page

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.

The “Simpan” Button in “Tambah Informasi” page
The “Simpan” Button in “Edit Profile” page

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.

BisaGo “Pencarian” page

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.

The filter button in BisaGo’s “Informasi” page

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.

BisaGo “Informasi Fasilitas” page

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.

BisaGo “Register” page

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

bisaGo2020

bisaGo2020 is a group of computer science students in their 5th semester working on enhancing bisaGo

bisaGo2020

bisaGo is a mobile app designed as a platform to provide information about public facilities in order to help people with disabilities. Users can access and add information about the availability of public facilities in a location.

Akbar Novial

Written by

bisaGo2020

bisaGo is a mobile app designed as a platform to provide information about public facilities in order to help people with disabilities. Users can access and add information about the availability of public facilities in a location.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store