Forms are omnipresent on the internet these days. We all come across them, be it before purchasing items, signing up for subscriptions, social networking or joining a discussion forum. It’s hardly an overstatement that they’re an indispensable element for information sharing today.
Ngày nay chúng ta thường bắt gặp form trên internet. Chúng ta đều phải đi qua form trước khi mua hàng online, hoặc khi đăng ký để nhận thông báo, vào mạng xã hội và tham gia vào các diễn đàn. Không phải là nói quá khi nói rằng form là thành phần vô cùng cần thiết cho việc chia sẻ thông tin ngày nay.
However, signing up is often perceived as an unavoidable evil for businesses, as maximum drop-offs are witnessed at this page. They’re mostly time consuming, complicated and sometimes get too personal.
Tuy nhiên, đối với những người kinh doanh thì việc sử dụng form khi đăng ký thường được nhìn nhận như là một thao tác xấu nhưng không thể tránh được, bởi vì họ nhìn thấy tỷ lệ người dùng bỏ cuộc lớn nhất là ở những trang đăng ký. Đa phần chúng tiêu tốn thời gian, phức tạp và đôi lúc cần những thông tin quá nhạy cảm.
Well, let’s see how this humdrum experience can be made more intuitive and effortless for the users.
Vậy hãy thử xem làm thế nào để biến những trải nghiệm nhàm chán này trở nên trực quan và hoàn toàn không mệt mỏi cho người dùng.
Before we dive in, I should caveat that while most of these guidelines are based on experiments and statistically valid data, they shouldn’t be considered as the ultimate truth. Forms are highly-contextual design elements and depend on more that just these guidelines too increase conversions. With that said, let’s jump in.
Trước khi đi sâu hơn, tôi phải báo trước rằng hầu hết những hướng dẫn này dựa trên kinh nghiệm và dữ liệu thống kê, nhưng chúng không nên được coi là chân lý. Form là các thành phần thiết kế phụ thuộc nhiều vào ngữ cảnh và phụ thuộc vào hơn những hướng dẫn
depend on more that just these guidelines too increase conversions. Vậy hãy bắt đầu.
We’ll be working on revamping this rudimentary TV subscription form in the next 10 steps 👇
Chúng ta sẽ sửa lại một form đăng ký kênh TV trong 10 bước dưới đây.
This is a very simple trick which helps provide structure to the content. Alignment is nothing but arranging text in the most efficient way- allowing for efficient, effective scanning and limiting errors or missed fields.
Đây là 1 trick rất đơn giản mà lại giúp tạo nên cấu trúc cho nội dung. Căn lề là sắp xếp chữ theo cách hiệu quả nhất - cho phép scan hiệu quả và hiệu suất cao, hạn chế lỗi và thiếu trường chưa được nhập.
Various approaches can be taken to organise content, but let’s look into just the text arrangements. Have a look at these 4 options which have center, left , right and top-left aligned elements.
Có nhiều hướng tiếp cận để tổ chức nội dung, nhưng hãy thử nhìn vào 4 cách căn lề các thành phần: giữa, trái, phải và trên-trái.
Basically, having the label text as close to the input field makes the grouping more relatable. It is easier to associate them due to their proximity. So the top-left aligned labels work pretty well in this case. It has upper edge as it required fewer ‘visual fixations’, helping the viewer scan the form in one go.
Về cơ bản, nhãn càng gần trường input thì sẽ làm cho việc gom nhóm trở nên có thể. Nó là dễ dàng để liên kết chúng với nhau bởi vì sự quan hệ gần gũi giữa chúng. Vì vậy mà căn lề kiểu trên-trái cho nhãn sẽ làm tốt trong trường hợp này. Vì kiểu căn lề này làm giảm đi "visual fixations"(tạm dịch: các bước di chuyển của mắt), giúp người dùng lướt qua form mà không phải đảo mắt nhiều.
Grouping information into chunks is an easy way to highlight association. If the form has more than six fields, it is recommended to group them into logical sections. These steps are even more emphasised if each section is given their respective header, and are neatly arranged in a top-down order.
Gom các thông tin thành các nhóm là cách dễ dàng để nhấn mạnh sự liên kết. Nếu một form có nhiều hơn 6 trường, chúng ta nên gom lại trong những nhóm logic. Sẽ còn được nhấn mạnh hơn nếu mỗi nhóm có một tiều đề liên quan, và được sắp xếp gọn gàng theo thứ tự từ trên xuống dưới.
Don’t forget to provide a good amount of breathing space (padding/ distance) between the individual sections to distinguish them.
Đừng quên để một khoảng cách phù hợp giữa các nhóm để phân biệt chúng
3. Write clear labels
3. Đặt tên nhãn rõ ràng
Using succinct and crisp labels. It helps the user understand what information is required in one glance. Avoid using complete sentences to explain simple questions, just one or two words generally suffice.
Sử dụng tên nhãn ngắn gọn, rõ ràng, súc tích. Điều này giúp người dùng hiểu những thông tin gì cần có trong một ánh nhìn. Tránh sử dụng câu đầy đủ để mô tả một câu hỏi đơn giản, chỉ cần một hoặc hai từ là đủ.
Don’t make the user guess the input the information format. It’s considered a good practice to design the input fields in a customised manner, which explicitly shows how the information is to be fed in. Even short help messages (like password setting guidelines) mentioned clearly next to the input box reduce errors while form filling.
Đừng bắt người dùng phải đoán định dạng thông tin cần phải nhập vào. Việc tùy chỉnh thiết kế cho từng trường input để chỉ ra tường minh thông tin được đưa vào như thế nào là việc tốt. Thậm chí thông báo ngắn (như là hướng dẫn thiết lập password) được đề cập rõ ràng cạnh trường input sẽ giảm thiểu lỗi khi người dùng điền vào form.
To create a clear distinction between the foreground and background, a different shade can be used for the input fields. Here, the rectangles are filled in with a solid white while the borders are made subtler.
Để tạo sự phân biệt rõ ràng giữa foreground và background, các trường input có thể sử dụng một sắc thái khác với nền. Ví dụ như ở dưới đây, các hình hộp được lấp đầy vơi màu trắng và các đường biên được phối màu một cách tinh tế.
Generally users find it tough to answer questions in which they have to manually type in the input. Giving a few suggestions upfront is a good way to get their thoughts running. And representing these options with additional visual cues can turn out to be even better, as it requires minimal congitive load and provides a direction of thought.
Nói chung người dùng cảm thấy khó khăn với những câu hỏi mà họ phải nhập câu trả lời bằng tay. Đưa ra vài câu trả lời tham khảo là cách hay để giúp họ nghĩ thông. Thậm chí minh họa những câu trả lời đó bằng những yếu tố trực quan có thể còn tốt hơn, vì nó giúp người dùng mất ít công sức nhất và cung cấp một hướng suy nghĩ cho họ.
This is a very simple trick to de-clutter a form page. Rather than mentioning ‘compulsory’ next to every header, just put an asterisk and mention the optional ones in words. Also, make sure to align this text next to the top label, and not the input field.
Đây là một trick rất đơn giản để loại bỏ các item không cần thiết. Hơn là viết rằng "bắt buộc" bên cạnh mỗi label, chỉ cần đặt một dấu * (dấu hoa thị) và đặt chữ "tùy chọn" cạnh những label tùy chọn. Những hãy đảm bảo rằng phải căn lề các label này thẳng hàng với label của nhóm, chứ không phải với trường input.
Now that the form looks pretty neat, let’s concentrate on the call to actions. Most forms will have at least two call to actions — proceed and cancel. Here, submitting the form is definitely more important, hence it is the primary CTA, whereas cancel the Secondary one. Prominence must be given to these accordingly depending on their significance.
Bây giờ form trông khá gọn gàng, hãy tập trung vào các CTA (call to actions). Hầu hết form đều có ít nhất 2 CTA - gửi và hủy bỏ. Trong ví dụ này, gửi form là quan trọng hơn nên gửi là CTA chính, còn hủy bỏ là CTA phụ. Sự quan trọng hoặc không quan trọng cần phải được gán cho từng CTA dựa vào mức độ cần chú ý tới của chúng.
CTAs can either look like a solid rectangular button, or a text link. Depending on your use case, make sure that only ONE of them is the prominent one.
Các CTA có thể trông như một button hoặc một link. Tùy theo từng trường hợp, hãy chắc chắn rằng chỉ có một trong số chúng là cái quan trọng.
The most effective CTAs work because they offer a clear value proposition. They exactly mention what’s going to happen once you hit on the button. This clarity is essential for great CTAs, and can go a long way in making the design more compelling and trustworthy.
Các CTA hiệu quả nhất hoạt động bởi vì chúng đưa ra một thông điệp rõ ràng. Chúng đề cập một cách chính xác những gì sẽ xảy ra khi người dùng kích vào button. Sự rõ ràng này là cần thiết cho những CTA tuyệt vời, và nó vẫn còn hữu ích để tạo ra một thiết kế thuyết phục và đáng tin trong tương lai về sau.
Generally speaking there are three important messages that a good form validation should convey to the user:
Nhìn chung có 3 thông điệp quan trọng mà một sự xác thực form tốt nên truyền tải đến người dùng:
- An error has occurred. Display clearly that there is an error in the form, preferably using a red color signal to attract attention
- Một lỗi đã xảy ra: hiển thị rõ ràng rằng có một lỗi trong form, ưu tiên sử dụng các biểu tượng màu đỏ để thu hút sự chú ý.
- Where the error occurred: Highlighting the fields that caused the error
- Nơi mà lỗi xảy ra: làm nổi bật lên các trường gây ra lỗi.
- How the error can be repaired: Provide information on what needs to be different in order for the field to validate
- Lỗi xảy ra như thế nào: cung cấp thông tin về việc cần phải sửa cái gì để trường trở nên hợp lệ
All these have one clear goal: to avoid confusion. To minimise drop-outs, make sure to create validation that eliminates any risk of customers being confused.
Tất cả 3 thông điệp trên đều có một mục tiêu chung: tránh gây khó hiểu. Để giảm tối đa tỷ lệ bỏ cuộc, hãy chắc chắn phải tạo ra những xác thực mà xóa bỏ bất kỳ rủi ro nào về việc người dùng cảm thấy khó hiểu.
Colors can be cleverly used to direct the user’s attention, and add an aesthetic appeal to the design. The trick is to stick to not more than 2 main colors in the page. Just make sure to use them wisely, keeping the main goal of the form in mind.
Màu sắc có thể được sử dụng thông minh để hướng sự chú ý của người dùng, và thêm một sức hấp dẫn thẩm mỹ cho thiết kế. Trick ở đây là chỉ sử dụng không quá 2 màu chính trong trang web. Hãy đảm bảo rằng sử dụng chúng khôn ngoan, luôn giữ mục đích chính của form trong tâm trí.
Using the most basic of design principles, a simple form can easily bemade more engaging, aesthetic and usable. Do have a look at the drastic difference between the before and after. 😲
Sử dụng những nguyên tắc thiết kế cơ bản nhất, một form đơn giản có thể dễ dàng trở nên hấp dẫn hơn, thẩm mỹ hơn và dễ sử dụng hơn. Hãy nhìn vào sự khác biệt khổng lồ giữa trước và sau.😲
.jpeg)
.png)
.jpeg)
