Visual Design:

Styles come and go. Good design is a language not a Sytle — Massimo Vigneli

Zerlinda
Zerlinda
Nov 1 · 8 min read

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.

https://uxdesign.cc/the-power-of-visual-in-product-design-e1308542698b
https://uxdesign.cc/the-power-of-visual-in-product-design-e1308542698b
Visual Design, Jonny Czar

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:

  1. Speed up data perception, so that user may use things intuitively.
  2. Retain data for much longer, because visuals help us remember things.
  3. Trigger pleasure, satisfaction in understanding things.
  4. Guide attention, can improve navigation.
  5. 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

1. Visibility of System Status

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

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

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

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

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

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

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

”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

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

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

Point of Sales Configuration

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

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://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c

Moodah POS

IT Project 2019 Group 2

Zerlinda

Written by

Zerlinda

Moodah POS

IT Project 2019 Group 2

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade