The laws of UX are a guiding set of principles and best practices for UX, UI, and product designers. Steeped in psychology, they help us to understand how people perceive and interact with our products—allowing us to make better design choices.
In this series, we'll explore how we've applied 10 out of 21 UX laws in the Motorloan.my project, one of our team's initiatives. Part 1 of this blog will focus on the first five laws we utilized.
1. Law of Proximity
The Law of Proximity states that: Objects that are near, or proximate to each other, tend to be grouped together.
To enhance users' ability to utilize the filter and categorization tools effectively, we applied the Law of Proximity by placing search filter components close together. Placing search bar, filter dropdown menus, and category options closely tells users that they belong to the same functional group, making it easier to use the filter tool.
We also applied the law of proximity to our card elements, focusing on arranging text, buttons, images, and other components within the same content block. By spatially grouping these elements, users can easily identify patterns or similarities, making it easier to navigate the interface.
2. Law of Common Region
Law of Common Region states that: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Implementing this law, we used different background colors and subtle shadows to clarify the boundary between sections of the website. For example, the card listing above might seem similar but they are separated with different background colors. This acts as a visual divider, helping users differentiate between various sections and providing a clearer visual indication throughout the long website.
3. Law of Similarity
Law of Similarity states that: The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
We applied this law to card and status badge designs, using consistent visual cues such as color, typography, layout, and images. This aids users in identifying various functional groups across the website, ensuring a seamless user experience.
While we utilized distinct colors to differentiate various application statuses, we ensured consistency in font style and layout design across badge designs. This approach helps users in quickly identifying different statuses while maintaining a cohesive visual experience.
4. Law of Uniform Connectedness
Law of Uniform Connectedness states that: Elements that are visually connected are perceived as more related than elements with no connection.
Connectedness aids in organizing groupings and relationships in web design. Hence, we applied the law of uniform connectedness in tab designs. In tabbed navigation, the selected tab is visibly linked to its corresponding content, while the other tabs remain visually separated.
5. Law of Prägnanz
Law of Prägnanz states that: People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.
We implemented this law by organizing website content with a clear hierarchy between different sections. The layout placement and arrangement of every components on the website are simple and clear, enabling users to navigate through sections and understand connections at first glance.
Stay Tuned!
Time to wrap up the content ans stay tuned for Part 2, where we'll delve deeper into the strategies powering our seamless user experience. On behalf of our entire team, we extend our deepest gratitude for joining us on this journey of knowledge. We hope the insights shared have broadened your understanding of UX design and inspired you to make a positive impact through your work. Thank you once again for your unwavering support.
Feel free to reach out to us if you have any questions or ideas to share, we'd love to hear from you! See you next time.
If you interested to join our team, you’re welcome to explore career opportunities at our company website and connect with us on LinkedIn to stay updated on our latest projects and insights.
Dream it, Believe it, Build it! ????