Interaction design skills to create a good user experience (Part 1) – Design knowledge

Preface: The original text is relatively long, with 65 items in total. I plan to translate it in three parts, which are items 1-20.

A good user interface has a high conversion rate and ease of use. In other words, it’s both business-friendly and user-friendly. Here is a list of some ideas we found.

1. Try using a one-column layout instead of multiple columns

A one-column layout will give you better control over the big picture. It also gives your users a preview of the overall content from top to bottom. However, multi-column layouts create additional risks by distracting users from the core content of the page. The best way is to use a logical narrative and then add an action slogan at the end to guide users.

2. Try using gifts instead of direct sales

Offering a gift to a customer is a friendly way to do it. However, on a deeper level, gifts are also an effective persuasion strategy based on the principle of reciprocity. It sounds obvious, give others a discount and you will benefit from it in future events.

3. Try to merge similar functions instead of fragmented UI

During product development, it’s easy to unintentionally create multiple modules, elements, and themes that perform the same function. Over time, the interface became fragmented. Watch out for the same functionality being presented in multiple ways as it can easily cause stress for your customers. Generally, the more fragmented the UI is, the higher the learning cost for your customers. Occasionally consider refactoring your UI by merging similar functionality.

4. Try using testimonials instead of bragging

Testimonials are another powerful persuasion tactic that directly increases conversion rates. Others’ support and praise for your product is a great way to call customers to action. So try to provide some evidence that these positive reviews are genuine.

5. Try to repeat your keynote multiple times rather than just once

Repeating your call to action is a strategy that works better on long pages, or if you repeat it across multiple pages. Of course, you don’t want to have the same information repeated 10 times on the same screen, which will frustrate customers. However, long pages are becoming more and more common, and the idea of ​​having everything fit “on one screen” is becoming outdated. So there’s nothing wrong with having a less prominent action list at the top and another prominent action slogan at the bottom. When the user reaches the bottom of the page, pauses, and thinks about what to do next—a potential area that might complete a quote or close a deal.

6. Try to differentiate clickable/selectable styles instead of blurring them

Visual style, such as color, hierarchy, and contrast, can be used to help users understand your most basic interface navigation language: where I am and where I can go. To clearly communicate with your users, your clickable actions (links, buttons), selectable elements (optional elements), and plain text should be clearly distinguished and then maintained consistently across the interface. In the example below, I chose blue to identify elements that can be clicked, and black to identify elements that have been selected or indicate the current location. Proper use of these markers makes it easier for users to learn and use these clues to navigate the interface. Don’t make it difficult to use the product by blurring these three functional styles.

7. Try using recommendations instead of listing the same options

When displaying multiple services, a strong recommendation may be a good idea, as users sometimes need a little push. Some psychological research shows that the more options there are, the less likely users are to put their ideas into practice and take action. To remove this choice barrier, try emphasizing and highlighting certain options.

8. Try using an undo operation instead of prompting for confirmation

Imagine you just pressed an action button or link. Undoing makes the action smoother and more natural. On the other hand, prompt actions imply that the user does not know what the user is doing and is constantly questioning the user.��’s intention. In most cases I would assume that the user understands his or her intentions and that misoperations are just accidental. When the prompt window pops up, the user must perform the confirmation operation repeatedly. Prompts again and again are actually a very inhumane design. Therefore, consider allowing users to perform undo operations to improve the friendliness of the product instead of constantly reminding users to confirm.

9. Try to specify who will use the product rather than everyone

Is your product available to everyone or does it have a precisely defined audience? It’s wise to clearly identify the audience for your product or service. By continuously understanding the needs and standards of target customers, you can gain more opportunities to communicate with customers and make customers feel that they are enjoying exclusive services of your products. The risk with this strategy is that you may streamline yourself and narrow your pool of potential customers. However, transparency builds trust, and you may gain more trust from your customers as a result.

10. Try to be direct rather than hesitant

You can convey your message with a trembling voice of uncertainty, or you can say it with confidence. If you often end your messages with questions like “maybe,” “might,” “interested?” or “want it?” perhaps you could try using a more authoritative tone. Who knows, maybe telling the user what to do next in more soothing terms can leave more room for the user to think.

11. Try to replace similarities with sharp contrasts

Distinguishing your slogan from surrounding elements and making it more visible can make your UI expressive. There are many ways you can easily make your slogan stand out. You can use contrast between light and dark tones to highlight. You can also use drop shadows and gradients to achieve layered contrast. Finally, you can further increase contrast by choosing complementary colors from the color wheel (for example, yellow and purple). To sum up, you should consider clearly distinguishing your action slogan from other elements on the page.

12. Try to specify the country of origin

Indicating your country of origin, where your product or service comes from, can bring you closer to your customers. Mention specifically the country, state, or city where your product originates, just like you would introduce yourself when communicating with others. If you do this in your product introduction, your interface will appear more user-friendly. Often, stating the country of origin of your product can also make customers feel more confident about the quality of the product. This is a win-win approach.

13. Try to streamline the form

Humans are hard-wired to resist labor-intensive work, and this shows up in form-filling. Every field you ask users to fill out runs the risk of them turning around and giving up. Everyone’s typing speed is different, and typing on a mobile device is even more of a chore. Determine whether each field is required and try to delete unnecessary fields. If you do have a lot of information that users need to fill out, consider splitting it up into different pages, or adding it after submission. Too many fields will make your form bloated. It’s easy to simplify it by just reducing the fields.

14. Try to expose options instead of hiding them

Every drop-down menu you use hides information that requires additional action from the user to display. If those hidden options are visible to the user throughout the operation, you might want them to be more visible. Keep the conventional drop-down menus, such as date and time (eg calendar) or location selections. Sometimes drop-down menus can also be used in places that users use repeatedly (for example: action menus). Where you need to make page jumps, try to avoid using drop-down menus for primary functions.

15. Try to describe it in an orderly manner by dividing it into modules instead of a long and straightforward narrative

It is easy to lose customers with long and straightforward explanations. Yes, long scrolling pages are very cool, but be careful to give customers the feeling that the content has ended before the page ends. If your page requires scrolling, try setting a visible sign to let users follow this rule. Secondly, the gap between content cannot be too large (of course I am referring to an interval range, and there are so many device sizes).

16. Try to maintain focus instead of abusing links

In order to satisfy the needs of as many customers as possible, it is easy to create links all over a page. If our focus is on that action slogan at the bottom of a long text, think again. Any other links may take the user away from the page. Pay attention to the number of links on your page and try to balance the style on the navigation page as much as possible (fewer links and higher conversion rates). Removing irrelevant links is more likely to get users to click that all-important button.

17. Try to display progress status

In user interfaces we often display elements with different states. Emails have read or unread status, invoices have paid or unpaid status, and so on. Notifying users of the special status of each record is a good way to provide informative feedback. Interface status can help users better understand whether their previous operations were successfully performed and how to handle the next operations.

18. Display button information that is beneficial to the user, rather than making the user feel that they are just completing a task

Imagine an interface with two simple buttons. One button tells you it will “save you money,” while another asks you to “sign up now.” I bet the first button has a better chance of being clicked because signing up has no intrinsic value of its own. Moreover, registration reminds people of endless forms and the process is particularly laborious. The hypothesis states that buttons that feel profitable to users are more likely to be clicked. In addition, writing the benefit near the action button can remind users of the reason for doing so. Of course, there is still room for task-based action buttons, but this is reserved for those action elements that don’t convert as highly but have high usage.

19. Try direct actions instead of contextless menus

Sometimes it’s more useful to operate directly on an element than to have an irrelevant menu list. For example, when displaying a list of data, we usually allow users to perform related operations on the items in the list. Clicking on a list item, or rolling the mouse over it, can be used to express a specific action (delete, rename, etc.). Another example of direct manipulation is clicking on a data item (for example, a string of text addresses), and then the text box becomes editable. Using this kind of interaction reduces some unnecessary steps. However, for some general operations (such as forward and back), there is nothing wrong with using context-free menus.

20. Try to display all content instead of creating additional pages

When creating a landing page, it would be better to display all form fields on the conversion page. Merging a registration form with a login page has more benefits than creating an additional registration page separately. First, we have reduced the extra steps in the process operation so that the operation will take less time. Secondly, by showing the number of form fields, we also show the customer the actual length of the registration form. Of course, the premise is that our form is relatively short (of course the form should be as short as possible).

Preface: The original text is relatively long, with 65 items in total. I plan to translate it in three parts, which are items 1-20.

A good user interface has a high conversion rate and ease of use. In other words, it’s both business-friendly and user-friendly. Here is a list of some ideas we found.

1. Try using a one-column layout instead of multiple columns

A one-column layout will give you better control over the big picture. It also gives your users a preview of the overall content from top to bottom. However, multi-column layouts create additional risks by distracting users from the core content of the page. The best way is to use a logical��The narrative then adds an action slogan at the end of the article to guide users.

2. Try using gifts instead of direct sales

Offering a gift to a customer is a friendly way to do it. However, on a deeper level, gifts are also an effective persuasion strategy based on the principle of reciprocity. It sounds obvious, give others a discount and you will benefit from it in future events.

3. Try to merge similar functions instead of fragmented UI

During product development, it’s easy to unintentionally create multiple modules, elements, and themes that perform the same function. Over time, the interface became fragmented. Watch out for the same functionality being presented in multiple ways as it can easily cause stress for your customers. Generally, the more fragmented the UI is, the higher the learning cost for your customers. Occasionally consider refactoring your UI by merging similar functionality.

4. Try using testimonials instead of bragging

Testimonials are another powerful persuasion tactic that directly increases conversion rates. Others’ support and praise for your product is a great way to call customers to action. So try to provide some evidence that these positive reviews are genuine.

5. Try to repeat your keynote multiple times rather than just once

Repeating your call to action is a strategy that works better on long pages, or if you repeat it across multiple pages. Of course, you don’t want to have the same information repeated 10 times on the same screen, which will frustrate customers. However, long pages are becoming more and more common, and the idea of ​​having everything fit “on one screen” is becoming outdated. So there’s nothing wrong with having a less prominent action list at the top and another prominent action slogan at the bottom. When the user reaches the bottom of the page, pauses, and thinks about what to do next—a potential area that might complete a quote or close a deal.

6. Try to differentiate clickable/selectable styles instead of blurring them

Visual style, such as color, hierarchy, and contrast, can be used to help users understand your most basic interface navigation language: where I am and where I can go. To clearly communicate with your users, your clickable actions (links, buttons), selectable elements (optional elements), and plain text should be clearly distinguished and then maintained consistently across the interface. In the example below, I chose blue to identify elements that can be clicked, and black to identify elements that have been selected or indicate the current location. Proper use of these markers makes it easier for users to learn and use these clues to navigate the interface. Don’t make it difficult to use the product by blurring these three functional styles.

7. Try using recommendations instead of listing the same options

When displaying multiple services, a strong recommendation may be a good idea, as users sometimes need a little push. Some psychological research shows that the more options there are, the less likely users are to put their ideas into practice and take action. To remove this choice barrier, try emphasizing and highlighting certain options.

8. Try using an undo operation instead of prompting for confirmation

Imagine you just pressed an action button or link. Undoing makes the action smoother and more natural. On the other hand, prompt actions imply that the user does not know what the user is doing and constantly questions the user’s intentions. In most cases I would assume that the user understands his or her intentions and that misoperations are just accidental. When the prompt window pops up, the user must perform the confirmation operation repeatedly. Prompts again and again are actually a very inhumane design. Therefore, consider allowing users to perform undo operations to improve the friendliness of the product instead of constantly reminding users to confirm.

9. Try to specify who will use the product rather than everyone

Is your product available to everyone or is it precisely specified?swipe? It’s wise to clearly identify the audience for your product or service. By continuously understanding the needs and standards of target customers, you can gain more opportunities to communicate with customers and make customers feel that they are enjoying exclusive services of your products. The risk with this strategy is that you may streamline yourself and narrow your pool of potential customers. However, transparency builds trust, and you may gain more trust from your customers as a result.

10. Try to be direct rather than hesitant

You can convey your message with a trembling voice of uncertainty, or you can say it with confidence. If you often end your messages with questions like “maybe,” “might,” “interested?” or “want it?” perhaps you could try using a more authoritative tone. Who knows, maybe telling the user what to do next in more soothing terms can leave more room for the user to think.

11. Try to replace similarities with sharp contrasts

Distinguishing your slogan from surrounding elements and making it more visible can make your UI expressive. There are many ways you can easily make your slogan stand out. You can use contrast between light and dark tones to highlight. You can also use drop shadows and gradients to achieve layered contrast. Finally, you can further increase contrast by choosing complementary colors from the color wheel (for example, yellow and purple). To sum up, you should consider clearly distinguishing your action slogan from other elements on the page.

12. Try to specify the country of origin

Indicating your country of origin, where your product or service comes from, can bring you closer to your customers. Mention specifically the country, state, or city where your product originates, just like you would introduce yourself when communicating with others. If you do this in your product introduction, your interface will appear more user-friendly. Often, stating the country of origin of your product can also make customers feel more confident about the quality of the product. This is a win-win approach.

13. Try to streamline the form

Humans are hard-wired to resist labor-intensive work, and this shows up in form-filling. Every field you ask users to fill out runs the risk of them turning around and giving up. Everyone’s typing speed is different, and typing on a mobile device is even more of a chore. Determine whether each field is required and try to delete unnecessary fields. If you do have a lot of information that users need to fill out, consider splitting it up into different pages, or adding it after submission. Too many fields will make your form bloated. It’s easy to simplify it by just reducing the fields.

14. Try to expose options instead of hiding them

Every drop-down menu you use hides information that requires additional action from the user to display. If those hidden options are visible to the user throughout the operation, you might want them to be more visible. Keep the conventional drop-down menus, such as date and time (eg calendar) or location selections. Sometimes drop-down menus can also be used in places that users use repeatedly (for example: action menus). Where you need to make page jumps, try to avoid using drop-down menus for primary functions.

15. Try to describe it in an orderly manner by dividing it into modules instead of a long and straightforward narrative

It is easy to lose customers with long and straightforward explanations. Yes, long scrolling pages are cool, but be careful of giving your customers the impression that the content has ended before the page has ended. If your page requires scrolling, try setting a visible sign to let users follow this rule. Secondly, the gap between content cannot be too large (of course I am referring to an interval range, and there are so many device sizes).

16. Try to maintain focus instead of abusing links

In order to meet the needs of as many customers as possible, it is easy toA page is created with links everywhere. If our focus is on that action slogan at the bottom of a long text, think again. Any other links may take the user away from the page. Pay attention to the number of links on your page and try to balance the style on the navigation page as much as possible (fewer links and higher conversion rates). Removing irrelevant links is more likely to get users to click that all-important button.

17. Try to display progress status

In user interfaces we often display elements with different states. Emails have read or unread status, invoices have paid or unpaid status, and so on. Notifying users of the special status of each record is a good way to provide informative feedback. Interface status can help users better understand whether their previous operations were successfully performed and how to handle the next operations.

18. Display button information that is beneficial to the user, rather than making the user feel that they are just completing a task

Imagine an interface with two simple buttons. One button tells you it will “save you money,” while another asks you to “sign up now.” I bet the first button has a better chance of being clicked because signing up has no intrinsic value of its own. Moreover, registration reminds people of endless forms and the process is particularly laborious. The hypothesis states that buttons that feel profitable to users are more likely to be clicked. In addition, writing the benefit near the action button can remind users of the reason for doing so. Of course, there is still room for task-based action buttons, but this is reserved for those action elements that don’t convert as highly but have high usage.

19. Try direct actions instead of contextless menus

Sometimes it’s more useful to operate directly on an element than to have an irrelevant menu list. For example, when displaying a list of data, we usually allow users to perform related operations on the items in the list. Clicking on a list item, or rolling the mouse over it, can be used to express a specific action (delete, rename, etc.). Another example of direct manipulation is clicking on a data item (for example, a string of text addresses), and then the text box becomes editable. Using this kind of interaction reduces some unnecessary steps. However, for some general operations (such as forward and back), there is nothing wrong with using context-free menus.

20. Try to display all content instead of creating additional pages

When creating a landing page, it would be better to display all form fields on the conversion page. Merging a registration form with a login page has more benefits than creating an additional registration page separately. First, we have reduced the extra steps in the process operation so that the operation will take less time. Secondly, by showing the number of form fields, we also show the customer the actual length of the registration form. Of course, the premise is that our form is relatively short (of course the form should be as short as possible).