The Beauty in Products
When there are two products with the same function but have a different appearance, of course, you will choose a product with a display that you think is more attractive. That’s why User Interface (UI) design is very important in the development of a product. User interfaces are a major part of building engaging products.
User interfaces are not only focused on the beauty of the appearance, but also on maximizing the efficiency, usability, and accessibility of our products. Besides being comfortable to see, a good User Interface can make it easier for users to know clearly what our products are presented so that the services offered by our products can be conveyed to users. This can grab the user’s attention and keep them on our site.
Therefore, this article will discuss the stages that can be applied in building a good user interface.
Create Wireframe
A wireframe is a layout of our product that demonstrates what elements will be displayed on a page. The existence of a wireframe makes it easier for us to define and plan the information to be displayed. The purpose of the wireframe is to provide a visual representation of the product in the early phases of project development for stakeholder and team approval.
Usually, wireframes are built with plain black and white diagrams. Wireframes are built without the distraction of colors, images, or choice of a typeface because if the user does not understand the flow of the wireframe, then in the end the use of beautiful colors or text is irrelevant.
Three principles can be applied in building a wireframe:
- Clarity: The wireframe that is built must be able to explain what a product is, what users can do to the product, and whether the product can meet user needs.
- Confidence: Easy navigation can increase user confidence in the product.
- Simplicity: Users should be able to achieve their goals as simply as possible (it only involves a few steps).
The following is an example of a product wireframe that my group developed in the Software Engineering Project course. The following wireframes have been provided by our client.
Create Mockup
A mockup is a high-fidelity presentation of a product that involves design choices for color schemes, typography, layout, and iconography. Mockups can be created immediately after wireframing, or they can be postponed until after some low-fidelity prototype testing.
In addition to providing a visual product guide, mock-ups can provide several benefits, including:
- Make it easier for stakeholders to see an overview of the final product
- Helps uncover problems that are not so obvious during a wireframe. For example, a mismatch of color combinations.
- revision in the mockup phase is easier than in the coding phase.
Usability Heuristics
In the field of Human-Computer Interaction, heuristic evaluation is usually used to identify any design problems associated with the user interface.
One of the most widely used heuristic evaluations is the Jakob Nielsen Heuristic.
Here are 10 usability heuristics put forward by Jacob Nielsen
Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Good User Interface design can provide information regarding the current system status. This can help users to know what they are doing and determine their next action.
In the mock-up design that my group built, we indicate the user’s presence via bold text on the navbar.
We can also show visibility by using progress bar
Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Make a design that is familiar with the real world to make it easier for users to learn and remember how our system works. Thus, the design we create becomes more intuitive.
For example, in an application design that my group is developing, we use a star icon to show the rating of a POI.
Another example is, we can use credit card image as an account information in an mobile banking application to represents credit card
User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
To give freedom to users, the design made must provide an “emergency exit” for the user. This can put the user in control of the system thereby preventing the user from feeling frustrated. One way that can be applied is to create a cancel button so that the user can ‘undo’ the action taken. My group applies this design principle to the recommendation form page.
Another example is, in a blog, we can gives access for users to undo his/her post.
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
A design that does not maintain consistency can impose on the user’s cognitive load because it forces the user to learn the system again. Therefore, in the application design that my group has developed, we are consistent in displaying ratings using stars even though on different pages.
To keep the consistency, we can design based on design guideline
Error prevention
Good error messages are important, but the best designs carefully prevent problems 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.
One of the implementations in our application is that when the user wants to change the password, the user is asked to confirm the new password.
Another example, we can show some alert to user to guide him/her what to do. This would prevent error.
Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (eg field labels or menu items) should be visible or easily retrievable when needed.
Good design does not overwhelm the user’s cognitive load. One of the things that can be done so as not to overload the user’s cognitive load is to reduce the user’s memory usage.
In the design made by my group, we provide a name for each itinerary so that users can identify the itinerary just by looking at the itinerary name.
Another example is, we can give a feature where users can see what she/he has viewed recently.
Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
The quicker and easier an action is to do, the generally happier the user will be. Therefore, in the design that my group created, we provide bookmark buttons at each point of interest so that users can easily add or remove a poi from the bucket lists.
Another example, we can give a common shortcut for users in our application like pressing Command + C would let users to copy.
Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
The design made must ensure that the visuals displayed can convey the purpose or function of these elements in a simple way. A design that is too complex sometimes makes users do not understand the main purpose of these elements there.
Generally, the designs that my group creates are presented in a simple manner where the existence of each element focuses on the main function of that element.
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Error messages should be displayed visually so that users can notice errors that occur. For example, when the user does not fill in the required fields on the registration form, a message appears that the field must be filled.
Another example, we can show users when the username he/she enters has been taken.
Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Product documentation can be created to assist user tasks. Documentation can be a list of concrete steps that need to be taken. So far, my group hasn’t received any requests for documentation of our product so we haven’t implemented it yet. So, I provide an example from another application.
Another example, we could provide help center to help users that are new to our application
Alternative Design
My group also provides some design alternatives, especially on the home page. Despite their different appearance, each design represents the same functionality and purpose. We provide an alternative design of our products so that clients feel involved in the design process though indirectly
