Designing the experience: What’s on the button

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:
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
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:
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
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?
Design experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprint
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.
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
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 .
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
A series of events
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
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
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
Consensus button
Design experience: content on the button_123WORDPRESS.COMjb51.net reprint
The button without consensus will not work.
4. Look at some more buttons
Design experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprint
Design experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprint
Design experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprintDesign experience: content on the button_123WORDPRESS.COMjb51.net reprint

<<:  JavaScript Advanced Programming: Variables and Scope

>>:  MySQL View Principle Analysis

Recommend

How to choose and use PNG, JPG, and GIF as web image formats

So which one of these formats, GIF, PNG, and JPG,...

Several solutions for forgetting the MySQL password

Solution 1 Completely uninstall and delete all da...

Why the explain command may modify MySQL data

If someone asked you whether running EXPLAIN on a...

Summarize the common application problems of XHTML code

Over a period of time, I found that many people d...

HTML form application includes the use of check boxes and radio buttons

Including the use of check boxes and radio buttons...

How to install vim editor in Linux (Ubuntu 18.04)

You can go to the Ubuntu official website to down...

An example of elegant writing of judgment in JavaScript

Table of contents Preface 1. Monadic Judgment 1.1...

Tutorial on installing mysql under centos7

Recently, I plan to deploy a cloud disk on my hom...

How to change the default character set of MySQL to utf8 on MAC

1. Check the character set of the default install...

HTML table markup tutorial (48): CSS modified table

<br />Now let's take a look at how to cl...

Tutorial on installing nginx in Linux environment

Table of contents 1. Install the required environ...

Detailed description of the function of meta name="" content="

1. Grammar: <meta name="name" content...

How to purchase and install Alibaba Cloud servers

1. Purchase a server In the example, the server p...

Let's talk in detail about the difference between unknown and any in TypeScript

Table of contents Preface 1. unknown vs any 2. Th...