Visual Design:
Styles come and go. Good design is a language not a Sytle — Massimo Vigneli
Best Practice — a procedure that has been shown by research and experience to produce optimal results and that is established or proposed as a standard suitable for widespread adoption. The same as in Visual Design, to make a product not only interesting to be used by customer but also easy to use, visuals is a way where we communicate things with customer through images.

Images have been used since ancient times to express our self, the use of visual elements on user interface — such as icons, shapes, colors, typography, images, and illustrations — will bring relevant impacts in the products we design.
Visual elements may help us with:
- Speed up data perception, so that user may use things intuitively.
- Retain data for much longer, because visuals help us remember things.
- Trigger pleasure, satisfaction in understanding things.
- Guide attention, can improve navigation.
- Make user interface universal, can be understand by anyone.
There are many principles in user interface design one of them is 10 Heuristics by Nielsen.
10 Nielsen Heuristics
They are called ‘heuristics’ because they are more in the nature of rules of thumb than specific usability guidelines. These are 10 Nielsen Heuristics.
1. Visibility of System Status
“Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time.”
This principle is basically state that user should know what’s going on in the system. All information that available and that’s shown on the interface should visible and have a clear intention for the user. In the project, that we’re working on, we are making a point of sales web. In the web that will make a transaction what are the information.
2. Match Between system and 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.”
Point of sales if like in reality is like a real life cashier. The flow will be driven into several step as it is we are doing transaction in cashier. Starting from listing all of the customer order, calculating the price, and record the transaction.
3. User Control and Freedom
“Offer users a digital space where backward steps are possible, including undoing and redoing previous actions.”
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. In Moodah example, if there’s a mistake in listing transaction or wanted to cancel a transaction, it is better for the web to have an easy access to backtrack or terminate the current state.
4. Consistency and Standard
“ Users should not have to wonder whether different words, situations, or actions mean the same thing.”
Consistency reduces complexity
Consistency can be implemented in many ways. In visuals, it can be consistency in typography, color, shape size, etc. It can also be implemented in language, grammar, navigation of the system and many more. We should make it standard. Standard in this context mean the platform of the system.
A comprehensible system should never confuse users by using different words, visuals, or actions for the same concepts. — Michal Langmajer
For an example we have a button action that have the same purpose across the flow step should have the same in every page of the system. Then there’s consistency in design colors of the web page. Moodah have consistent design and typography. The color scheme is blue, grey and white. And for each component they have similar shape.
5. Error Prevention
“Whenever possible, design systems so that potential errors are kept to a minimum. 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.”
Based on Don Norman’s book The Design of Everyday Things, there are two kinds of errors created by interaction with a user interface: slips and mistakes. Slips is the user tends to do an action, but due to low attention, performs another one. Mistakes are often caused by a user’s incorrect mental model of how the system works.
But the better way to make a better web, is by making sure we prevent the user from making mistakes than giving an error message. Some error that can happen in Moodah is, when managing product there can a mistake in the inputs.
6. Recognition rather than Recall
“Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface.”
Why Recognition is better than recall, is because . Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface.
For example point of sales moodah have can have many products in it, and it won’t be good to show all of the list in one page. But when doing the transaction we know that we can search what we need instead f memorizing all the product.
7. Flexibility and Efficiency of use
“With increased use comes the demand for less interactions that allow faster navigation.”
Every user is unique; each have their own different needs and skills. Equally, every task is unique and requires different controllers. This principle applied to both beginner user or advanced user. We should give a user more than one way to do things. The interface should also display only relevant UI elements and commands while at it.
An example in Moodah, we can input the product manually or we can also import the product based on the .xls template that we are given. This will give an efficiency to input the product rather than put the products one by one.
8. Aesthetic and Minimalist Design
“Keep clutter to a minimum. All unnecessary information competes for the user’s limited attention resources, which could inhibit user’s memory retrieval of relevant information. ”
”Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupery
Too much information an aesthetic can create confusion. To let the remaining content stand out, you can use nothing but whitespace. A minimal design only put necessary visual, nothing more and nothing less.
9. Help user recognize, diagnose, and recover from error
“Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation.”
Every error message should be as explicit and precise as possible. Don’t give a vague messages like “something went wrong.” If there are a mistake, state it in a word that readable by users. Sometimes not all user know the code for 404.

In Moodah this case could happen when importing a data to Moodah. If there’s failure we need to tell the user that the data is failed to be imported. We don’t want any miscommunication and the users think that the data imported is already success. Or when a person is login and input a wrong password.
10. Help and Documentation
“Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. Ensure that it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.”
Documentation is usually create after a feature of a web is already implemented in the system. It should be well structured, written in a human language, and minimalist. The intention is to make the directions or steps to be explicit and precise so that the user can follow it easily. In our team, there’s a documentation of the query to make sure that people understand what each function and query is for.
Moodah Visual Design Implementation
Here is some implementation of 10 Nielsen Heuristics Design that our team implemented.
Point of Sales Configuration
Moodah have a consistent visuals and mostly it used whitespace. The consistency is also there in the button placement. IT don’t actually have a grand design. The design is simple, and most of it is relying on the color scheme. The picture below is different page. The consistency will help user act base don recognition rather than recalling.

There’s different information for both page, and purpose for both page but the consistency make it easier to understand the purpose. The words is straightforward to help users.

Session Page
The point of sales flow is basically the same as we do a transaction. We first order the ordered list by customer and then we calculated the price. In Moodah point of sales we automatically calculated the price, and we also keep the price in the product list itself.

After we calculated the price the next thing we do is we make payments. We record the payment, how much the due customer have to pay. As you may see, all of the important information from the previous page is still there. The same as navigation bar to make it easier to navigate through the point of sales. There’s also visibility of the session status.

Source
https://www.interaction-design.org/literature/topics/ui-design
https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c
