Why do other people's designs always look so professional, while our own are like copycat versions? In fact, because others have mastered a lot of professional principles and theories, the things they make will look very professional.
In this article, the author shares the principle of consistency in the design principles, after reading it, I hope you can also be as professional as the big guy.
1. What is consistency?
The literal meaning of consistency and the different scenarios used will also have different meanings, which are mainly used in UI/UX design.
Consistency in UI/UX design refers to the use of the same design elements and patterns throughout an application or website. It involves using the same visual language, layout, and interactions across all pages and screens to create a consistent and intuitive user experience. Consistency helps users understand how to navigate an app or website, eliminates confusion and frustration, and makes it easier for them to learn and remember how to use the product.
Design is not an isolated practice. It is intertwined with other fields, one of which is psychology. The psychological principle that plays a fundamental role in design is the law of repetition.
The origins of this law can be traced back to the early 20th century, when German psychologist Hermann Ebbinghaus conducted groundbreaking research.
His work has been revolutionary in understanding human memory.
Ebbinghaus's most famous contribution is the "forgetting curve", which shows that information can be lost over time if you don't try to retain it. However, he also found that repeated exposure to information can greatly affect our ability to memorize information. Essentially, repetition reinforces recall.
Ebbinghaus's repetitive experiments focused primarily on the process of learning and memory, but their impact went far beyond that. This makes people realize that repetitive elements are easier to remember, thus directing the viewer's attention and focus. It is clear that repetition can be used to guide behavior and understanding.
By repeating specific elements such as colors, shapes, and patterns, designers can create a sense of unity and rhythm. This repetition also enables designers to emphasize essential elements or information.
Repetition is not just a design principle, it's a fundamental aspect of life. In nature, repetition manifests itself in a variety of ways, from the symmetry of snowflakes to the rhythmic patterns of waves crashing against the shore, from the spiral of shells to the cycle of the seasons of the year. This natural repetition brings rhythm, structure, and predictability, creating a sense of comfort and familiarity.
Humans are part of nature and are inherently able to recognize and respond to these patterns. Our brains are excellent pattern recognition machines, and we tend to perceive repetitive patterns as comfortable and familiar. This cognitive trait explains why repetitive patterns in design, whether in digital interfaces, physical products, architecture, or marketing, resonate with us.
2. Why is consistency important?
In iOS's design guidelines, consistency is seen as the key to integrating design into the iOS ecosystem, helping users build a sense of familiarity between apps. Consistency in following the specification can "help your design feel at home in iOS", and consistency is an important way to bring product pleasure to users.
Among the classic interaction design principles, "consistency" has always been an important design criterion. Consistency and standards are the fourth of Jacob Nielsen's 10 usability principles, which are almost "must-read" for designers, and recommend that designers follow established rules for interfaces and interactions, both within apps and across platforms.
In specific implementation, internal consistency usually means that a unified visual style and interactive language should be used within the app, and the same functions and operations should be consistent in experience. External consistency, on the other hand, emphasizes that users should follow the design specifications of the platform and system, and maintain the similarity of users' experiences between different applications on the same platform.
Consistency is very important in UI/UX (User Interface/User Experience) as it is essential to provide a good user experience and usability of the user interface. Here are a few important reasons for consistency:
1. User learning curve:
Consistent UI/UX design can reduce the learning curve for users. When users encounter consistent elements, layouts, and interactions in an application or website, they can quickly understand and accurately predict how to interact with the interface. This reduces confusion and confusion among users, increasing their efficiency and satisfaction.
2. Improve availability:
Consistency makes the user interface easier to use. When users find similar design elements and interaction patterns between different pages or features, they can easily apply their existing knowledge and experience to new contexts. This consistency helps users complete tasks quickly, reducing errors and getting lost, providing better navigation and a smooth experience.
3. Brand recognition:
Consistent UI/UX design helps build brand image and enhance brand recognition. By maintaining consistent design elements, logos, and visual styles across channels and platforms, brands can build a unique and recognizable identity. Users can feel the consistency of the brand across different touchpoints, which increases the trust and loyalty of the brand.
4. User satisfaction:
Consistency has a direct impact on user satisfaction. Users feel more comfortable and confident when they feel consistent design and interaction when using an app or website. Consistency sends a signal of professionalism and quality, making users feel noticed and valued. This positive user experience helps improve user satisfaction and motivates them to continue using and recommending your products or services.
3. The case of consistency in life
There are many cases in life that are consistent,
a. For example, at the traffic light, when learning the driver's license or the teacher's teaching, the red light stop and the green light will be uniformly explained.
b. The use of left and right arrow symbols will be consistent in daily life.
c. When we take the subway, the subway route map will also be consistent, and the point size, text, arrival and non-arrival of each station and the stations that have traveled have a clear and unified design and interactive operation.
Fourth, the embodiment of UI design consistency
1. Color
Color is a physical phenomenon and sensory experience, a visual effect formed by the reflection or absorption of light waves on the retina of the human eye.
The color choices in the design represent the brand of a project, such as the common Ele.me blue, Meituan yellow, JD.com red, etc., and the consistency of colors helps to create a good visual experience, strengthen the brand image, improve usability and accessibility, and ultimately improve the overall interaction experience of users. This is critical to the success of the product. When designing, the color (brand color) will be carried over to the buttons, icons, fonts, labels, backgrounds, banners and other modules.
2. Font
A font is a specific style of text that describes visual characteristics such as shape, size, thickness, spacing, etc. of text.
Font is one of the most important elements in design, different types of fonts, font weight, serif font and serif font, font weight, etc., these inconsistencies will cause confusion on the page, and the choice and use of fonts will have an important impact on the user's visual experience, information perception, brand connection and emotional experience.
If a lot of fonts are used in the development and implementation, the loading speed will be affected, and if there is no unified font formulation rules, it will be cumbersome to update and iterate later, resulting in a waste of resources.
3. Icons
Icon is a simplified and visually expressive symbol and graphic, which is widely used in user interface design, information communication and other fields.
In many APPs, you can definitely feel that in addition to accurately expressing a certain meaning, the icon also needs to maintain consistency in the design, the size of the icon, the style of the design such as line icons, fill icons, simple icons, three-dimensional icons, cartoon icons, etc., if these icon styles are mixed, it will cause confusion, affect the user experience, and look unprofessional will also affect the user's concerns about security when using.
4. Button style
A button is a common interface element that triggers an action or function.
There are many styles of buttons in the design, because the different button styles of the project types are also different, the style of the button has round buttons, rectangular buttons, rounded rectangular buttons, diamond buttons, etc., it is recommended to use a unified button style in the same project, in addition to reflecting professionalism, it can also allow users to increase trust, the button style is used a lot, in addition to the use of the experience is not friendly, but also feel that it is not out of this product to go to another place.
5. Typesetting
Typography refers to the process of regularly laying out and formatting text, images, and other content in print or digital media.
The consistency of typography in the design enables users to quickly adapt to and understand the structure of the interface, reduce learning costs, and users have a stronger sense of belonging and security for the familiar typography mode, making the content easier to read, and users can quickly find the information they need according to the familiar visual movement line, and improve the efficiency of information acquisition.
Fifth, the embodiment of interaction design consistency
1. Consistent operation
According to the literal meaning, the process is consistent and the operation is consistent when the user is operating, such as the common process of placing an order to purchase goods.
When the user buys a product: click on the product - product details - payment to buy, and other products should also be like this.
It can be messy if each product process is different, for example:
Click Product A———— Product Details - Pay to Buy;
Click on product B - pay to buy - view product details;
Click on C product - list of similar products - product details - payment to buy,
This can be messy, and the user doesn't know what the next item will look like.
For example:
1. The video browsing in the APP is swiping up and down, and the video browsing becomes left and right after entering the new module.
2. When you need to confirm some operations, the confirmation button will be on the right side, and the confirmation button will be on the left side.
In addition to the chaotic experience of users, it is also difficult to cultivate user habits.
2. The copywriting symbols are consistent
The consistency of copywriting and punctuation marks is easy to understand, such as the common input box, "please enter your account", "please enter your password", the following text and title are not uniform in the same page scene, which will cause users to hesitate to operate.
3. Consistent feedback
When we see the next button, some places the interaction is to a new page, and some are used step by step. It is recommended to use one to maintain consistency and avoid misleading users.
The pop-up window after the operation feedback, the style of the pop-up window for the same function feedback is inconsistent: one will be a graphic pop-up, and the other will be a text-only prompt, and the user will also be very confused, including the style that appears during the interaction also needs to be consistent, and it may pop up from the bottom up in the play.
6. Summary
The importance of consistency in UI/UX is to provide a clear, efficient, easy-to-use, and enjoyable user experience. By maintaining consistency in design elements, layouts, and interactions, you can reduce the cognitive load of users, improve user learning efficiency, enhance brand image, improve user satisfaction, and ultimately achieve better business outcomes, which can be divided into the following seven points:
1. Improve the user's learning speed
Consistency allows users to take what they've learned in one part of an app or website and apply it to others. This reduces the time and effort required to learn new actions, as users can predict the behavior of unknown interfaces.
2. Enhance user efficiency
When users become familiar with a system's mode of operation, they can complete tasks faster because they don't need to relearn how to operate on each new interface or feature. This familiarity reduces thinking and decision-making time, directly improving operational efficiency.
3. Reduce the user error rate
Consistent interface and interaction logic can reduce the likelihood of users making mistakes. Consistent operating patterns are easier for users to remember and understand, reducing misuse and confusion.
4. Increase user satisfaction and trust
Users tend to feel more comfortable and confident with systems that look and behave consistently. This sense of trust is an important factor for users to continue using the product and is the key to improving user satisfaction.
5. Promote brand consistency
Maintaining visual and functional consistency across different products, services, or platforms can help strengthen brand identity. Users identify and associate brands with consistent design elements such as colors, fonts, layouts, which enhances the brand's overall image and market competitiveness.
6. Reduce development and maintenance costs
A consistent design and code base can reduce development time, simplify the testing process, and reduce long-term maintenance costs. When all parts follow the same rules, it becomes easier and faster to make changes to the system or add new features.
7. Improve accessibility
Consistency also helps improve the accessibility of the product. A consistent interface makes it easier for those with visual or cognitive impairments to understand and use, as they can rely on repetitive and predictive patterns to navigate.
Bibliography:
https://blog.prototypr.io/the-3cs-of-design-consistency-clarity-content-e58d58825626
https://bootcamp.uxdesign.cc/crafting-consistency-the-role-of-design-systems-in-ui-ux-eddb7e31570f
https://medium.com/as-a-product-designer/how-to-write-ux-guideline-%E5%BB%BA%E7%AB%8B%E7%94%A2%E5%93%81%E7%9A%84%E4%B8%80%E8%87%B4%E6%80%A7-47e0118baf4fhttps://medium.com/@pennylanedesign/design-documentation-a-key-pillar-for-consistent-and-collaborative-ui-development-68fce178b403
https://medium.com/super-jump/mass-effect-how-to-indoctrinate-users-with-ux-consistency-1aaff84afe68
https://medium.com/kubo/the-law-of-similarity-creating-visual-consistency-77d59957f14chttps://medium.com/weavedesign/the-law-of-repetition-designing-for-consistency-63ea3ff7920e
Columnist
Nan She, public account: Nan Set (ID: NANSHE18), everyone is a product manager columnist. Focus on design, strong logic, and focus on experience. Share experience design, AI development, and more.
This article was originally published by Everyone is a Product Manager and is prohibited from reprinting without permission.
The title image is from Unsplash and is licensed under CC0
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.