Physical Address
Sec. 4, Zhongxiao E. Rd., Xinyi Dist., Taipei City, Taiwan (R.O.C.)
According to research by Labsology, the design and structure of a website can directly impact the purchasing intention of website visitors. The study reveals that 75% of individuals have abandoned the purchase of goods due to poorly designed websites. Furthermore, the design and structure of a website also influence visitor retention and conversion rates. When users find a website inconvenient to use, 60% of them are likely to leave, whereas a user-friendly design and structure can potentially increase conversion rates by over 200%.
User Interface (UI) is one aspect of User Experience (UX). UI design places a strong emphasis on aesthetics, focusing on elements such as buttons, typing systems, overall color schemes for websites and apps. Equally important is the visual guidance that ensures users can easily understand and navigate the product, achieving a seamless user experience (UX).
Exploring various online platforms, it becomes evident that successful brands prioritize UI design. Examples include Booking.com for online hotel reservations, Airbnb for international vacation rentals, and Google for its global search engine. According to the arguments presented by Professor Larry Constantine in Human-Computer Interface research, effective UI should adhere to 6 principles: structural, simplicity, visual, feedback, tolerance, and reuse. Integrating these 6 principles with Hong Kong Inspirr Creation’s 6 design principles suggested, we can summarize and elaborate on the following points:
Grouping related elements according to a logical structure is essential for constructing a clear and organized interface. This approach facilitates a more efficient understanding and memorization of information for users. How to group interface information? Many designers tend to place related elements within the same container, distinguishing different elements from one another. However, this method may introduce unnecessary elements to the interface, resulting in a somewhat cluttered appearance.
Exploring the use of “whitespace” as a means to group information not only simplifies the overall design but also enhances the layout to be more comfortable for users to read.
Not all content on the interface are equal importance. To facilitate easier understanding for users, it is crucial to place the most significant information in the most prominent position on the interface. This can be achieved by employing contrast techniques such as size, color, and spacing to create a clear visual hierarchy.
If you want to quickly and easily check whether the hierarchy in the interface is clear, you can use the “Squint Test” to identify which elements are most important. After identifying them, optimize their design to enhance the aesthetic appeal and reinforce the visual hierarchy of the interface.
User typically expects elements that look similar to have similar functionalities. Similarly, elements with different functions should have distinct visual designs. Adhering to this principle ensures consistency in design, enhances product usability, and reduces errors, eliminating the need for users to relearn how to use the interface.
In the example above, the style of the icon area is very similar to the “Book now” button, which may lead to user confusion, assuming both areas are “clickable.” Therefore, it is recommended to remove the blue background from the icon area.
Direct and intuitive interaction design evoke emotions and influence user behavior. Moreover, streamlined and straightforward interaction operations can enhance the user experience, thereby improving customer retention for the product.
How to design a direct and effortless interactive experience? The most effective way is to eliminate unnecessary design elements without compromising information conveyance, simplifying the overall design. This creates a simpler, more focused interface, helping users to quickly and easily engage with the product.
Do not using more than three colors in design if possible, as it can make the interface appear cluttered and distract users. Try using brand colors on
Try useing brand colors link elements like text links and buttons, aiding users in identifying clickable elements at a glance. However, it’s essential to note that if an element already provides users with the “interactive” information, there’s no need to apply brand colors to all interactive elements. For instance, if a card design itself serves as a clickable cue, there’s no need to add a separate link with brand-colored text on the card.
In UI design, contrast is a crucial element influencing the readability and visual hierarchy of a product. It informs users about the importance of different interactive points, effectively drawing their attention and directing their focus to specific elements on the layout.
More importantly, enhancing the contrast between elements is beneficial for users with visual impairments such as color blindness. This improvement enables them to clearly perceive all elements and details within the interface, facilitating easier product usage. Additionally, judicious use of contrast can contribute to the creation of diversity, visual interest, and drama in the product, allowing users to enjoy a unique and engaging experience during their browsing journey.
In the UI usability evalutaion, I listed principles based on Jakob Nielsen’s 10 Usability Heuristics Proposed in 1995 as follow to be a reference:
Conclusion: UI design is not solely about visual aesthetics but also about communication, performance, and convenience. The six important UI design principles mentioned above can serve as guiding directions for practical implementation, leading to the creation of visually appealing and highly usable products.
Excellent UI (User Interface) determines good UX (User Experience), and good UX determines user stickiness, influencing the conversion rate. These factors are crucial in determining the success or failure of a platform.