A good interface design should have a high conversion rate and be easy to use, in other words: both for business purposes and easy to use.
One design consulting firm summarized 75 proven principles from its own clients:
The first 40 rules of this article circulated in China before, and the last 35 rules were translated by me after staying up late. This website will constantly update and add new rules, and I suggest collecting them.
1. Use a single-column layout instead of a multi-column layout
The single-column layout gives the user more control over the overall situation and allows the user to see the content at a glance. A multi-column layout can be distracting. The best thing to do is to use a logical narrative to guide the user and put your action button at the end.
Review images
2. Use a gift hook instead of a hard sell
For example, you can offer users a gift as a gesture of goodwill. More deeply, gift-giving is an effective persuasion strategy based on the principle of reciprocity. The obvious benefit is that you’ll be able to move forward with your activities more smoothly.
Review images
3. Merge overlapping functions to avoid dispersion
Over time, inevitably, you add many modules, elements, and the same functionality. A fragmented interface adds to the user’s learning curve, so incorporate repetitive features and refactor your interface.
Review images
4. Reviews are better than bragging
User praise is another persuasion tactic that can improve conversion rates. The opportunity for a project increases when a prospect sees that others have spoken highly of your service. So try to provide some solid evidence that they are true.
Review images
5. Repeat your main action button
Repeating the main action button multiple times is good for long or paginated screens.
Review images
6. Distinguish between clickable and selected styles
Visual styles such as color, depth and contrast can be used as reliable clues to help people understand your navigation interface: where I am and where I can go. For user clarity, the styles of clickable elements (links, buttons), selected elements (selected menus), and plain text should be significantly different from each other and consistent in the interface. Visually, we tend to think that blue means clickable and black means selected or something.
Review images
7. Make recommendations instead of letting the user choose
When listing many options, it’s a good idea to give a single key recommendation, and while the recommended Settings won’t satisfy all users, there’s a good reason for doing so: The more choices a user has, the harder it is to make a decision (decision paralysis). So you can highlight an option to help the user make a choice.
Review images
8. Use the Restore function instead of the pop-up dialog box
Let’s say you just clicked on a link or button. Undo makes the action more natural and intuitive. Popping a “yes” box for every action is like asking the user if they understand what the action will do. In fact, misoperations occur only in rare cases. Therefore, the confirmation window designed to prevent misoperation is actually inhumane, and users need to make meaningless confirmation every time they operate. So consider implementing undo in your product to make it user friendly.
Review images
9. Make sure your product is for everyone, not everyone
Do you want to market your product or do you want to target a precise audience? The answer is: you need to be more precise in product positioning. The risk of targeting your product precisely is that you may narrow the pool of potential customers you are targeting, but this greater professionalism will in turn win trust and authority.
Review images
10. Be direct instead of hesitant
You can express yourself in a voice that shakes with uncertainty, or you can express yourself in a confident way. If you end your interface with question marks, like “maybe”, “maybe”, “interested?” “Or” Would you like to try it? “You can be a little more assertive. However, nothing is absolute, and it is ok to relax the wording and allow the user to think for himself.
Review images
11. Make the interface contrast and make it easy to distinguish
It is much better to highlight the main functional areas from the interface. There are many ways to make your main slogan stand out. Accentuate by contrasting light and dark tones. Add layers to the interface by adding shadows, gradients, etc. Finally, you can even design your interface with complementary colors (like yellow and purple) on the hue ring to accentuate the center of gravity. Put all of this together and you end up with an interface that clearly separates your main intention from the rest of the interface and is perfectly rendered.
Review images
12. Be distinctive rather than ordinary
Introducing yourself or your product with a name, picture, or place of origin can make your communication with users more personal, and when you implement this in your interface design, it can feel very friendly. At the same time, designating the area will also enhance the product’s reputation, better than better.
Review images
13. Simplify forms
People are lazy, and no one wants to fill out a bunch of form fields. Every field in the form runs the risk of losing users. Think about whether each field is required. If you really need a lot of information for the user to fill in, try to spread it out on different pages so you can add to it after the form is submitted.
Review images
14. Expose options instead of hiding them
Any drop-down box you use will hide information from the user and require additional manipulation to display it. If this information is necessary throughout the operation, you’d better make it more obvious by presenting it. Drop – down boxes are best used to select dates, provinces and other conventions. It’s best not to drop down important options in the program.
Review images
15. Making interfaces interlocking is better than straightforward typography
A bland line will surely turn off the user and stop reading. Long, single-column scrolling pages are fine, but sections should be set up appropriately and interlinked to keep the user interested. But it should be noted that the space between sections should not be too large.
Review images
16. Don’t distract your users with too many links
It is common practice to put links here and there on a page to meet the needs of various users. Think again if your main goal is to get users to click the download button at the end of the page. The user may have clicked on another link and left the page. So you need to pay attention to the number of links on your page, separate navigation and action links with styles, and try to remove links you don’t need.
Review images
17. Present the status or progress of the operation
Most interfaces now feature progress bars or status ICONS, such as read or unread emails or paid or unpaid electronic bills. It is necessary for the user to present such a state in the interface. This allows the user to know if certain actions were successful and what to do next.
Review images
18. Use the Profit button instead of the regular button
Imagine two buttons on the screen: one says “Save you money” and the other says “sign up now.” I bet most people click on the first one because the second button doesn’t feel profitable and “sign up” is associated with an endless list of forms. This means that buttons that make users feel profitable are more likely to be clicked. This kind of text message can also be placed next to the button, not necessarily as the title of the button. Of course, normal buttons are still useful, and are generally used in places where there is a lot of repetition.
Review images
19. Use intuitive actions rather than context-free menus
It’s much more straightforward to work directly on elements. For example, in a list, if we want the user to operate on each item, put the button on the current item, not out of the list. Another example is to directly click on the element to enter the editing state (for example, the address information on the page can be edited after clicking). This method is much simpler than the traditional selection and click the corresponding button for operation. Of course, there’s no need to do this for general operations that don’t need any context, such as forward and back buttons on a page.
Review images
20. Try to display the form directly without extra pages
On a large enough widescreen screen, it’s better to present the form directly than to click a button and pop up the form. First of all, there are fewer clicks, the process becomes simple and saves time. Second, presenting the form directly lets the user know how long the form is, which is also a way of telling the user that registering won’t take much time. Of course, this rule applies when the registration form is very simple.
Review images
21. Make the interface appear smooth rather than rigid
In the process of user operation, elements on the interface will often appear, hide, open, close, zoom in and zoom out shift, etc. Add some natural animation to these elements, fade in and out of the effect is not only beautiful, but also more realistic, the original element size and position change is a time required animation process. However, be careful not to set the animation time too long, which will make the user impatient to complete the operation as quickly as possible.
Review images
22. Use step-by-step guides instead of abrupt sign-ups
Instead of asking users to sign up right away, let them do something experiential first. This experience process can show the application’s functions, features, etc. Once a user understands the value of the application in a few simple steps, he or she will be more willing to fill out the registration form. This step by step guidance can be as long as possible to delay the user registration time but also allows users to do simple operations such as personalized Settings without registration.
Review images
23. Reduce borders to avoid wasted attention
The process border becomes more dominant. Needless to say, borders are great for dividing areas for blocks, but their sharp lines can also draw the user’s attention away. In order to achieve the purpose of dividing sections without diverting the user’s attention, elements in different areas of the interface can be grouped by blank, different background colors can be used, text alignment can be unified, and different styles can be set for different areas. When using wySIWYG interface design tools, we often drag many blocks out of the interface easily, and too many blocks become cluttered. So we put some lines here and there. A better idea is to align the blocks vertically, so that you don’t have those extra lines messing with the vision.
Review images
24. Show the benefits of your product instead of listing its features
The market is such that users are always interested in their own interests and features are not that important to them. Only profit can more intuitively reflect the value brought by using the product. In his book the $100 Startup, Chris Guillebeau argues that people care more about love, money, recognition and free time than they do about stress, conflict, anxiety and an uncertain future. So I believe it is necessary to return to benefits when presenting product features.
Review images
25. Design presentations without data
The interface often needs to display different amounts of data, ranging from 0,1,10,100 to 10000+. A common problem here is how to display the interface before the program starts with zero data and then has data. This is something we often overlook. When the program starts with no data and the user sees nothing, the user may not know what to do. Taking advantage of the initial interface without data allows users to learn and become familiar with how to use the program and create data in the program. Striving for perfection is always our goal, and interface design is no exception.
Review images
26. Try the default selection
Making the interface the default option for users to use your product means that if they really want to use it, they can click OK without having to click on it. Of course, designing the interface to look like the default option is somewhat controversial and feels a bit forced on users. If you want to be ethical, you can either make the choice ambiguous or use a less explicit description like a double negative, both of which make the user feel less compelled to use the product.
Review images
27. Keep the interface consistent and do not increase the user’s learning cost
Since Donald Norman’s series of books, consistency in interface design has become a universal rule. Consistency in design reduces learning costs for users, who do not need to learn new operations. When we click a button, or drag and drop it, we expect it to be the same across all interfaces of the application, with similar results. However, before making the interface consistent, keep in mind that it is advisable to break the overall consistency in moderation. This occasional inconsistencies in design can go a long way in highlighting where you need to be. So nothing is absolute, and we should follow the same design guidelines, but break them down appropriately.
Review images
28. Use appropriate defaults to minimize additional user operations
Proper defaults and pre-populated form fields can greatly reduce the user’s workload. This is a very common way to save users valuable time by quickly filling out forms or registering information.
Review images
29. Follow routine to avoid reinventing the wheel
Following conventions in interface design is similar to the previous interface consistency guidelines. If we follow some conventions in our interface design, it will be easy for users to use. In contrast, inconsistencies and failure to follow conventions increase the cost of learning. With these conventions in interface design, we know without a second thought that the (mostly) cross in the upper right corner of an interface is used to close an application, or that we can predict what will happen when a button is clicked. Of course, conventions can become obsolete, and over time, the same operations can take on new meanings. Remember, however, that when you break these conventions in an interface you must do it for a good reason.
Review images
30. Make users feel like they can avoid losing rather than gaining
We like success, no one likes failure. According to reliable evidence from psychology, people are generally more interested in avoiding losing something they own than in gaining something new. This conclusion also applies to product design and promotion. It’s better to explain that your product will help the customer protect his interests, health, social status, etc., than to tell the customer that the product will bring him something he doesn’t have. Insurance companies, for example, are they selling us big payouts if something goes wrong or are they emphasizing that they can help us avoid losing what we own?
Review images
31. Hierarchical graphical presentation is better than straightforward text description
Hierarchical design distinguishes the important parts of an interface from the non-essential parts. To make the interface clear, work on alignment, spacing, color, indentation, font size, element size, etc. All of these tweaks, when used properly, can improve the readability of the entire interface. Such a clear design allows users to slow down and read, as opposed to a straightforward interface where users can see from top to bottom at a glance. This also makes the interface a little bit more unique. Just like a trip, you can take a high-speed train to get to a scenic spot quickly (from the top of the page to the bottom), but you can also go slow and enjoy the scenery along the way. So the layered design gives the eye a place to rest, rather than a blank, monotonous screen.
Review images
32. Group related items to avoid clutter
Grouping functional items together can improve usability. Anyone with a bit of common sense knows that knives and forks, or opening and closing files, go together. It is also logical to put elements that are functionally similar together, and it is consistent with our common perception.
Review images
33. Use in-line validation instead of telling errors after submission
When working with forms, it’s a good idea to immediately verify that what the user has filled in meets the requirements and then send a validation message. So mistakes can be corrected as soon as they occur. On the other hand, checking the form after submission will result in an error message that will make the user feel uncomfortable and have to do the same thing all over again.
Review images
34. Relax user input requirements
The user input data, as far as possible to relax the restrictions, including format, case and so on. This makes it a little more human and makes the interface a little more user-friendly. An example of this is when the user is asked to enter a phone number. There are many ways to enter a phone number, including parentheses, dashes, Spaces, area codes and no area codes. If you deal with these formatting issues in code, you can just write a few more lines of code for yourself, and save millions of users their work.
Review images
35. Make users feel like they need to respond quickly instead of being timeless
A sense of urgency is an effective tactic that allows users to make decisions immediately rather than waiting ten days and a half months. The important thing is that this tactic works well because it implies a scarcity of resources or limited time of activity. You can buy today, but tomorrow you may not be able to buy at such a low price. On the other hand, this tactic also makes users feel like they’re missing out on a great opportunity, again, tapping into people’s fear of losing. Of course, this tactic will be dismissed by some as unprincipled. However, this is a tactic, and it doesn’t hurt to use it while maintaining legitimacy. So please don’t create the illusion of urgency in the interface for marketing purposes.
Review images
36. Try hunger marketing (Create scarcity)
Rare things are precious. The message of hunger marketing is that there are not many things, there are only a few, come back tomorrow, there may be no more. Just compare the price difference between wholesale and limited edition items. Back to wholesalers or big retailers, they also use hunger marketing to get better sales. But in the software industry, we often forget that there is such a thing as hunger marketing. Because digital products can be copied easily, there is no shortage of products. In fact, in the interface design, it can also be used to connect with the reality of resource shortage. Think about tickets to a webinar, or the number of people you can serve in a month.
Review images
37. Let the user choose from what they know instead of recalling it
This classic principle of interface design has a psychological basis: it’s easier to pick something out of a pile than it is to ask someone to recall something. Recognizing something just requires a little bit of memory, a few clues. Remembering requires a thorough search of our brains. Maybe that’s why multiple choice questions are done faster than short answer questions. So try to present the user with some information that they’ve been given before and let them choose, rather than having them think about it for a while and fill it out themselves.
Review images
38. Make the click area bigger
Links, form input fields and buttons are easier to click on if they are larger. According to Fett’s Law, clicking with a peripheral like a mouse takes some time, especially if the elements are small. For this reason, it’s best to make your form input fields, buttons, etc., bigger. Or you can keep the design the same and just increase the clickable area of the element (the hot area). A good example of this is text links and navigation menus on mobile devices, which are not necessarily large text but have a stretched background and can be clicked over a wide range.
Review images
39. Optimize page loading speed and don’t make users wait too long
Speed is important. How quickly the page loads and how quickly the UI responds to the action are directly related to whether the user has the patience to wait. There is no doubt that every additional second of waiting will lose some users or opportunities. A good solution, of course, is to optimize your pages and images. Psychology can also be used to make the wait seem less long. Specifically, there are two techniques. A progress bar is displayed, and something else relevant or interesting is displayed to grab the user’s attention (it’s better to walk along a conveyor belt than to just stand there and stare).
Review images
40. In addition to pressing buttons, it is recommended to add shortcut key support
When your app is widely distributed, consider the feelings of power users. People are always trying to find a faster way to perform repetitive tasks, and shortcuts were invented. Shortcuts are far more productive than clicking around on an interface. A good example is the J (back) and K (forward) keyboard combinations that are popular in mainstream applications such as Gmail, Twitter and Tumblr. Buttons are great, but shortcuts make them even better.
Review images
41. Try anchoring prices
As Kahneman observes, the cognitive bias caused by anchoring is hard for humans to overcome. Our decisions are influenced by the number that first enters our brains, and anchoring doesn’t have to be a price, it can be a number. The most common example of marketers exploiting the anchoring effect is to display both the suggested retail price and the actual price.
Review images
42. Make the progress bar preset partially gone
The closer we get to accomplishing something, the stronger our motivation is. This is called the goal gradient effect. It’s not too late to look like you’ve made progress.
Review images
43. Use progressive displays rather than full expansions
Progressive displays don’t allow a lot of irrelevant information to be directly exposed, and the content is contextually relevant, making it easier for users to understand and not scaring them off by showing too many forms at once.
Review images
44. Make small promises instead of big ones
Use of commitment is a powerful persuasion strategy, fully exploit the principle of self-cognitive consistency, a succession of small questions to answer “yes”, will lead to a bigger question “yes”. And showing a monthly fee instead of an annual fee conveys the feeling that there is no contract, and that users can opt out at any time, with no barriers.
Review images
45. Replace the modal dialog box with a gentler prompt
Although modal dialogs attract the user’s attention, they also cause some other problems. Firstly, they prevent the user from operating outside the dialog box and interrupt the user’s previous actions. Why not try in-line or swipe out methods that are less annoying?
Review images
46. Try multifunctional controls instead of breaking them into many functional blocks
For example, the filter function can be implemented in the input field without adding additional filter menu. Add a hover display to the scoring function instead of adding additional display modules. But don’t abuse it or you’ll add to the user’s learning curve.
Review images
47. Try adding icon text
ICONS and text together can reduce a lot of ambiguity, such as does the down arrow mean move down? Lower the priority or download? Or does the “X” icon mean delete? Ban or close? The problem is when the user doesn’t have time to understand the meaning of your ICONS, so in order to understand the ICONS, it is best to have text, if space is not enough, hover ICONS to display text.
Review images
48. Try using more natural language instead of dry text
Natural language is easier for users to understand than short, strict phrases.
Review images
49. Stimulate users’ curiosity
Provide a piece of information that piques the user’s curiosity. This could be a sample chapter, demo, trial, or free content that you need to make XYZ to see.
Review images
50. Try to reassure users instead of assuming everything is okay
Telling your customers that payment is secure, shipping free and returnable without any worries is a great strategy to increase conversion rates.
Review images
51. Try the price illusion
Changing the way you prompt people to judge the value of your product entirely on their own can also help them do so. If you decide to take advantage of human irrationality, you can make your product seem more valuable by displaying different prices. Add words like “only” and “affordable” to the price. Break down the price per unit (e.g., $1 a day instead of $30 a month for a membership) and use numbers ending in 9 to reduce the number of digits.
Review images
52. Try thanking your users rather than simply confirming
Thank you for making your business, product or UI more personal and showing appreciation and care for your users. Thanks can lead to further conversation or action. Thank you for reading this paragraph. 🙂
Review images
53. Give meaningful results directly don’t ask users to do digital conversion work
For example, displaying three minutes ago is easier to understand than displaying a date and time, freeing the user from all the math.
Review images
54. Give users the freedom to double-check their choices
Tell the user the freedom to choose or reject after the action button or selection.
Review images
55. Make rewards random
Variable random rewards are addictive (one of the reasons why games are addictive)
Review images
56. Grab the user’s attention
Important actions can be highlighted by increasing the size and contrast. Other ways to attract attention include using irregular shapes, automatic focus, highlighting, fixed following (floating), and directional arrows.
Review images
57. Make comparisons clear
The table should show the most relevant attribute differences to help the user make a single decision.
Review images
58. Display groups rather than individual items
People have a tendency to collect things, both physical and virtual. Collecting a whole set of things is a natural goal. There is usually an increase in revenue from getting a whole set of things (the cake is bigger and better than its individual components). Showing past gains also increases motivation for future actions.
Review images
59. Let users have clear expectations rather than keep them in the dark
You are the first step in step X. Your choice is in Y. You will receive XX before Z and the next mission will be completed. This constant clarity builds trust with the user, rather than leaving them in the dark.
Review images
Replace seriousness with humor
Why do you have to be so serious all the time? Adding humor to your UI will help build emotional connections with your users/customers and make it easier to forgive your mistakes.
Review images
Replace silence with feedback
When we perform an action, surely we want to know if it succeeds. For example, when we send an email, we want to know if it was sent successfully. No feedback means uncertainty: does it work? Did you click? Did you push the button? Do you want to retry? Success alerts are a valuable interaction.
Review images
62. Determine user intent
As shown in the figure below, this is a multi-level menu of Amazon. When the first menu is expanded and the user moves the mouse to the lower right corner to pass the second menu, the previously expanded menu will not disappear. They predict by the algorithm that the user may want to click a sub-menu under the first menu.
Review images
63. Use loose spacing to avoid elements crowding together
Padding makes content and tables more readable, and is widely used in lists, tables, paragraphs, and other elements.
Review images
64. Use storytelling instead of listing facts
Storytelling is the oldest form of communication and can be used on pages and various UI interaction pages. A basic story has a few simple elements, such as setting, characters with a purpose, and problems encountered. Stories can elicit an emotional response from readers, as if they were in the same situation. In this way, the story will be more memorable. That’s why sales people have long loved telling stories, and it’s been very effective.
Review images
65. Use reliable content and avoid fakes
People can tell when something is too fake. To make your product more trustworthy, don’t fake it. There is no reason and meaning for the high stock charts and happy people on the web. Mixed with good and bad reviews, non-integer numbers make your web pages more authentic.
Review images
66. Optimized as the user progresses
Once the user is familiar with your interface, something that is displayed for beginners or something that is frequently displayed becomes less important and can be removed or moved elsewhere. This allows for a more streamlined design.
Review images
67. Make others the center
When it comes to building social influence, prioritize other people’s interests and turn the “I” into the “you” in the conversation.
Review images
68. What is obvious to you may not be obvious to others
Some things seem obvious to us but not to others. Let the user enter the URL shortcut as shown below, the user may not know what to refer to:
Review images
69. Keep your language concise and clear. Cut out the unnecessary nonsense
Use fewer, shorter words, and after you’ve written the draft, see if you can cut them down. Getting to the point can help you avoid losing your audience’s attention.
Review images
70. Use reactive layouts to avoid static layouts
There’s nothing worse than having horizontal and vertical scroll bars on a page that supports a responsive layout that looks good on all sizes of mobile devices.
Review images
71. Keep the visuals clear
Group different elements, use different font sizes, and use different hues for a clear visual effect.
Review images
72. Make your interface error-correcting
Mistakes are inevitable, so the user interface should allow for subtle corrections. For example, change an account or address
Review images
73. Let users try social commitments
Humans prefer a consistent self-image, and social commitment can be a self-motivation. At this point, an overt social commitment makes it all the more responsible to keep it. When we tell people we will do something (or take overt action), the likelihood of future action is higher.
Review images
74. Added retry and redo capabilities
For example, when uploading an image, the file fails to upload or you are not satisfied with the uploaded image and want to change it, retry and redo are necessary.
Review images
75. Eliminate too many choices
Having more choices makes decision making harder and can even reduce satisfaction because it increases the tendency to regret and blame yourself. The famous jam experiment has been proven time and again.
Review images
This article was translated from Goodui.org/ by Xiangyang Qiao, PMCAFF product Manager community original columnist
Original articles, the author: community PMCAFF products, if reproduced, please indicate the source: http://36kr.com/p/5041515.html
“Isn’t reading this enough? If you’re starting a business and want your project covered, please tell us here!”