User Interface Design
A good program in a product is not enough to please your customers. When there are two products with the same function but have a different appearance, of course, you will choose the product with the display that you think is more attractive. That is why User Interface (UI) design is an important part in the development of a product.
Create Wireframe
A wireframe is a layout of our product that demonstrates what elements will be displayed on a page. Wireframes focus on the layout and structure of the website rather than the typography or coloring. Wireframes are used to convey to your client or stakeholder how you plan to construct the product. Wireframe makes it easier for us to define the information to be displayed. Usually, wireframes are made with black and white diagrams.
The following is an example of a product wireframe that my team developed in the PPL course.
Create Mockups
A mockup is a high-level visualization of your application. Mockups can be created immediately after wireframing. Unlike wireframes, mockups visualize the final version of your product’s design with basic functionalities.
The following is is an example of a product Mockups that my team developed in the PPL course.
Nielsen’s Heuristics
There are heuristics principles to improve the design of your app.
Visibility of system status
User Interface design must provide information regarding the current system status. This can help users to know what they are doing and determine their next action. For example in my project, we indicate the current user’s presence via bold on the navbar.
Match between system and the real world
Your design should speak the user’s language and make sense to your target users. There must be a specific word meaning or symbol description in your app. For example in my project we use the star icon to indicate the POI rating, we use the list icon to display the bucket list, and we use the cart icon to display the ticket purchase page.
User control and freedom
Your users should feel that they are in control of their actions. This includes actions that are accidental, meaning that you need to provide an exit to avoid having the user from feeling frustrated. For example, the design made must provide an “emergency exit” for the user. We can create a cancel button so that the user can ‘undo’ the action taken. In my project, this principle applied in create itinerary form recommendation or manual.
Consistency and standards
The design of your components within your application should be consistent and standards. For example in my project, cancel buttons have the same color on some pages of my product and consistent in displaying ratings using stars even though on different pages.
Recognition rather than recall
Users need to feel at ease when using the application, they shouldn’t have to remember extensive amounts of information to complete any action within using the app. For example in my project, we provide a name for each itinerary list so that users can identify the itinerary just by looking at the itinerary name.
Flexibility and efficiency of use
There shouldn’t be a single fixed action for all your users to complete a certain task. Each user is different. Therefore each user has different methods of how they wish to complete a task. For example in my project, we provide bookmark buttons at each point of interest or in page detail of poi so users can easily add or remove a poi from the bucket lists.
Aesthetic and minimalist design
The design should focus on the primary goal of that particular interface, and reduce the amount of unnecessary or other information that could compete with the visibility of your primary goal. Generally, the designs that my team implement are presented in a simple design. The existence of each element focuses on the function of that element.
Help users recognize, diagnose, and recover from errors
Error messages should be displayed visually so that users can notice errors that occur. It should also contain messages that users understand, not error codes or technical words that only developers get. It should describe the problem clearly, and provide a solution or a shortcut to solve the issue immediately. For example in my project, when fill submission doesn’t match with required will be displayed error.
Help and documentation
You are may provide your users helpful documentation, which would act as a guide to help them. However, we must try our best to make the design simple enough for users such that this documentation is not required. So far, my team hasn’t implemented it yet in ppl .
Alternative Design
My team also provides some design alternatives, for example, the home page. Despite their different appearance, each design represents the same functionality and purpose.
References:
https://www.interaction-design.org/literature/topics/ui-design
