Designing the experience: What’s on the button
|
<br />Recently, UCDChina wrote a series of articles on the theme of "Pay attention to the text on the interface", which benefited me a lot in using text on the interface. Afterwards, I also made some summary and analysis on the performance of the content on the button, and shared it with you and hoped to get your corrections. 1. Don’t differentiate between buttons and links. ( The points listed here are not intended to attack other people's views, but are just for reference.) Many people advocate the distinction between links and buttons. Here, Civic has an article "About Mouse Click Objects: Which Should Be Buttons and Which Should Be Links." Chouyu's "Functions and Performance of Web Page Buttons" divides buttons into two categories: real buttons and pseudo-buttons. In fact, whether it is a button or a link, the task can be completed according to the user's goal guide. The link can also be made into a button to highlight the user's goal. Furthermore, it is not always possible to define the functions of buttons and links. If a button is designed to cause a "functional event", then is a link that opens a new page also a functional event? Therefore, in order to highlight the important functions of the current page for users to complete, even if it is just a link, it can be achieved through buttons visually and semantically. Of course, it is not recommended to use too many buttons on one page . For example, on Taobao's product page, in order to allow users to easily find the source of the current product and other relevant information about the store owner, they changed the previous link to a button:  2. What happens when I click At present, the text content on the buttons on various websites does not have any subjective ideas. It is whatever comes to mind without much consideration on the text. As mentioned earlier, links can be used as buttons, but sometimes a long string of text is a link, such as the title of an article. The text on the button needs to be concise and easy to understand so that its meaning can be quickly understood. Let's look at a few examples for comparison:  A: This is the window that NOD32 antivirus software displays when it encounters a virus. When users encounter a virus, they will be a little fearful and cautious. They want to quickly keep the virus out, but they are not sure whether the system itself will be threatened. When this window pops up, two questions will arise about the "Stop" button. Will clicking this button stop the software blocking? Or stop the threat of the virus?   B: Look carefully at the words on these two buttons. "Write a diary" is taken from QQ space. It has a predicate and an object. Of course, the subject is the user "I", and the combination is "I write a diary"; "Buy" is taken from Taobao's product page, but it only has one predicate (action), and the combination that can be completed is "I buy the product." But they all fulfilled their duties in their respective positions just right. Why? I will summarize it later.  C: “Click to enter” is completely redundant and only increases the time users spend on the button. So, usually: a button, combined with other interactions and information organization on the page, should be able to be properly combined into a complete sentence "what happens when I click it", and the three words "I click" are between me and the mouse, and do not have to appear on the web page . So the "click to enter" on the button in Example C is redundant. As for what is just right, why the "buy" on Taobao with only a predicate verb can be just right, this is related to page interaction. My analysis is that when the user and the page complete a task, a series of interactive events occur, and this object comes with this series of events. If another object is added here, it will create an ambiguity of returning to the beginning of the series. Conversely, if a page contains multiple series of interactive events, an object must be added to the button to make it clear which event occurs when the user clicks .  A series of events  Multiple events per page 3. Using shapes to express meaning <br />Chinese oracle bone inscriptions used shapes to express meaning, and later, after reaching a consensus on a large number of characters, people did not pay much attention to the actual origins of the characters. The same is true for buttons  Consensus button  The button without consensus will not work. 4. Look at some more buttons         |
<<: JavaScript Advanced Programming: Variables and Scope
>>: MySQL View Principle Analysis
Recommend
Implementation of Nginx configuration of multi-port and multi-domain name access
To deploy multiple sites on a server, you need to...
How to customize at and cron scheduled tasks in Linux
There are two types of scheduled tasks in Linux s...
Introduction to JavaScript conditional access attributes and arrow functions
Table of contents 1. Conditional access attribute...
MySQL scheduled task example tutorial
Preface Since MySQL 5.1.6, a very unique feature ...
js array fill() filling method
Table of contents 1. fill() syntax 2. Use of fill...
Detailed explanation of MySQL binlog usage
binlog is a binary log file that records all DML ...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...
The correspondence between Tomcat and JDK versions and the features of each Tomcat version
Apache Tomcat is an open source software that imp...
What are the file attributes of crw, brw, lrw, etc. in Linux?
What is a file? All files are actually a string o...
Vue realizes the card flip effect
This article example shares the specific code of ...
Using better-scroll component in Vue to realize horizontal scrolling function
About Recently, in the process of learning Vue, I...
CentOS7.x uninstall and install MySQL5.7 operation process and encoding format modification method
1. Uninstalling MySQL 5.7 1.1查看yum是否安裝過mysql cd y...
Usage and scenario analysis of npx command in Node.js
npx usage tutorial Tonight, when I was learning V...
How to use js to communicate between two html windows
Scenario: When page A opens page B, after operati...
MySQL DML statement summary
DML operations refer to operations on table recor...