Biểu mẫu là một phần không thể thiếu trong UI. Chúng thiết lập một kênh truyền thông không đồng bộ giữa các doanh nghiệp và người dùng. Chúng ta không thể phủ nhận tầm quan trọng của chúng. Tuy nhiên, vẫn còn rất nhiều biểu mẫu trên các trang web không được đầu tư về mặt hình thức dẫn đến việc có thể gây ảnh hưởng xấu đến việc chuyển đổi thông tin, gây khó khăn cho người dùng và cho việc lọc thông tin.
Đó là lý do tại sao mình muốn chia sẻ 15 mẹo thực tế này giúp các bạn hoàn thiện hơn các bản biểu mẫu để thể hiện sự tôn trọng đối với người dùng cũng như tối ưu hóa quá trình chuyển đổi thông tin.
1. Luôn sử dụng tiêu đề
Tiêu đề là một yếu tố rất quan trọng đối với biểu mẫu. Bạn cần thêm tiêu đề cho mỗi ô cần điền và hãy luôn để cho người dùng thấy được nó. Không gì khó khăn hơn việc phải đoán xem cần điền những gì vào chỗ trống. Có không ít trường hợp người thiết kế ẩn đi tiêu đề trên giao diện người dùng. Và nó gây bối rối cho người dùng khi không biết điền như thế nào cho hợp lý.
2. Tránh “ mô hình chữ Z”
Việc trình bày các ô điền thông tin dưới dạng lưới có thể gây nhầm lẫn cho người dùng. Khi các ô biểu mẫu được biểu diễn dưới dạng thẳng đứng, người dùng sẽ dễ dàng hơn khi đọc và điền thông tin.
3. Đặt tiêu đề phía trên ô thông tin
Tương tự như mẹo ở trên, việc để tiêu đề bên trái ô thông tin yêu cầu người dùng phản đọc biểu mẫu theo mô hình chữ Z, điều đó sẽ khiến việc quét thông tin trở nên kém hiệu quả. Vì vậy, bạn nên để tiêu đề phía trên ô điền. Trong trường hợp biểu mẫu ngắn chỉ cần điền 1- 2 thông tin thì trình bày theo dạng chữ Z hay hàng dọc đều không quá khác biệt.
4. Canh phải cho tiêu đề
Nếu bạn để tiêu đề bên trái ô điền, nhớ canh phải cho chúng. Việc này sẽ giúp người dùng đọc thông tin hiệu quả hơn và tạo cảm giác đối xứng cho biểu mẫu.
5. Nhóm các ô thông tin cùng chủ đề
Biểu mẫu quá dài có thể làm cho người dùng thấy mệt mỏi trong việc điền thông tin và dẫn đến việc khó khăn hơn trong quá trình chuyển đổi thông tin của bạn. Một thủ thuật thị giác đơn giản để giải quyết vấn đề này là nhóm các thông tin cùng chủ đề lại với nhau. Để nâng cao tính khả dụng, bạn cũng có thể để lại nút “ Lưu” cho từng phần biểu mẫu để người dùng có thể lưu riêng lẻ từng nhóm thông tin.
6. Tôn trọng luồng người dùng
Khi người dùng điền một biểu mẫu, họ sẽ điền từng cái một rồi mới nhấn gửi biểu mẫu. Đây là cách trình bày thông tin thông thường. Vậy nên hãy tôn trọng việc này và để nút gửi ở cuối biểu mẫu. Đây là một ví dụ điển hình về việc áp dụng luật Fitts trong thiết kế UI & UX.
7. Chừa không gian
Giãn dòng sẽ khiến thiết kế trông tuyệt vời hơn. Chừa một khoảng vừa đủ giữa các ô thông tin để giúp biểu mẫu bắt mắt hơn. Hầu hết mọi người dùng đều tránh điền những biểu mẫu trình bày dày đặc.
8. Tránh lặp tiêu đề
Trong thiết kế, cần hạn chế việc lặp lại thông tin giống nhau. Đặc biệt trong giao diện biểu mẫu, bạn cần cẩn thận suy xét bỏ đi những thông tin không cần thiết khi trình bày.
9. Hiển thị mô tả lỗi
Khi điền thông tin xảy ra lỗi, người dùng cần biết mình đã điền sai như thế nào và gợi ý để sửa lỗi đó. Hãy chỉ ra vị trí điền sai và có hướng dẫn cụ thể để người dùng có thể dễ dàng sửa đổi.
10. Sử dụng menu thả xuống khi cần thiết
Chọn phần tử UI phù hợp rất quan trọng. Đôi khi bạn sẽ phân vân về việc chọn cách trả lời sao cho phù hợp nhất. Đặc biệt đối với lựa chọn giữa menu thả xuống và các nút lựa chọn. Một quy luật nhỏ là hãy dùng menu thả xuống khi có từ 3 chọn lựa trở lên. Khi có ít lựa chọn hơn thì nút lựa chọn sẽ phù hợp để người dùng có thể xem trước các lựa chọn.
11. Tạo đòn bẩy giữ chỗ
Việc định dạng, đưa ra mẫu ví dụ cho thông tin cần điền sẽ giúp dễ dàng hơn trong việc điền biểu mẫu.
Ví dụ khi cần điền thông tin email: Hiển thị “ abc@gmail.com”
12. Chỉ dùng một nút kêu gọi hành động( CTA)
Cố gắng dùng một nút CTA duy nhất. Trong trường hợp cần 2 nút, hãy trình bày nổi bật nút quan trọng hơn.
13. Hiện thực hóa nút CTA
Việc dùng từ ngữ hợp lý trong thiết kế rất cần thiết. Tránh dùng những từ nộp, gửi, tiếp theo,.. Hãy hiện thực hóa từ ngữ để thể hiện được thông tin bước tiếp theo.
Ví dụ: Đối với một biểu mẫu đăng ký tài khoản thì hiển thị “ Tạo tài khoản” ở cuối.
14. Chọn kiểu dữ liệu hợp lý cho thông tin
Đừng dùng dạng văn bản cho tất cả thông tin trên biểu mẫu. Hãy điều chỉnh sao cho hợp lí với thông tin cần điền. Ví dụ đối với số điện thoại thì bắt buộc người điền phải nhập số.
15. Đặt giới hạn chữ
Hầu hết mọi ô thông tin đều cần giới hạn lượng thông tin. Việc giới hạn ký tự sẽ giúp người dùng nhận thức được cần điền bao nhiêu thì hợp lý và hạn chế bối rối cho họ khi điền dữ liệu.
————————————————————————————————————
Shortlink: https://icoursevietnam.com?p=1872
INCO là một tổ chức phi chính phủ quốc tế với mong muốn hỗ trợ thúc đẩy một nền kinh tế mới tại hơn 50 quốc gia. Với niềm tin rằng nền kinh tế tương lai sẽ phát triển bền vững và hội nhập, INCO Academy Việt Nam được lập ra năm 2024 nhằm hỗ […]
CS106A là một trong những khóa học phổ biến nhất tại Đại học Stanford, được hơn 1.600 sinh viên tham gia mỗi năm. Nó đã được phát triển trong suốt 30 năm qua bởi một đội ngũ tuyệt vời, bao gồm Nick Parlante, Eric Roberts và nhiều người khác. Khóa học này dạy các nguyên […]
Viết hiệu quả là một kỹ năng quan trọng trong kinh doanh, đặc biệt là trong mạng lưới quan hệ, và hầu hết giao tiếp diễn ra thông qua email. Trong khóa học này, bạn sẽ học từ vựng quan trọng và các chiến lược để viết email hiệu quả, bắt đầu từ dòng chủ […]
Chuỗi workshop này do Trung tâm Hoa Kỳ Hà Nội, Đại sứ quán Hoa Kỳ tài trợ. Bạn sẽ có cơ hội được làm việc với các những chuyên gia sản xuất podcast chuyên nghiệp, các giảng viên chuyên sâu về phát thanh, và những người làm chủ giọng nói điêu luyện trên sóng radio. […]
HUB NETWORK Hà Nội là Mạng lưới 16 câu lạc bộ về Khởi nghiệp, Đổi mới sáng tạo và Chuyển đổi số trực thuộc HUB NETWORK Thành Đoàn Hà Nội. Hiện tại, Hub Network Hà Nội đang tìm kiếm thành viên ban Operation & HR. Thời gian diễn ra vòng Application: 11/03/2024 – 04/04/2024 📌MÔ […]
ICEEDU.VN là nền tảng đào tạo trực tuyến về lập trình, cung cấp chương trình phát triển kỹ năng và kiến thức với lộ trình đào tạo tinh gọn gắn liền với thực tế, học trực tuyến miễn phí, nhưng được giải đáp trực tuyến cùng giảng viên. Khóa học Lập trình trực tuyến tại […]
Để thúc đẩy việc chia sẻ ý tưởng về bảo tàng và quản lý di sản văn hóa, Bộ Ngoại giao Hoa Kỳ và Viện Smithsonian (SI) đồng tổ chức chương trình trao đổi văn hóa “Cultural Heritage Forward” (CHF). Chương trình dành cho đối tượng là các chuyên gia bảo tàng và những người […]
VietinBank là ngân hàng đa năng, hiện đại, hiệu quả hàng đầu tại Việt Nam. Hiện tại, có hơn 550 cơ hội việc làm hấp dẫn đang chờ người ứng tuyển tại hơn 100 chi nhánh VietinBank trên toàn quốc. 📌THÔNG TIN CHUNG: Khu vực tuyển dụng: hơn 100 chi nhánh VietinBank trên toàn quốc […]
Được công nhận và được hỗ trợ bởi Ban Thư ký Công ước về Đa dạng Sinh học (CBD), Mạng lưới Thanh niên Toàn cầu về Đa dạng Sinh học (GYBN) đại diện cho tiếng nói của thanh niên toàn cầu trong các cuộc đàm phán dưới Công ước về Đa dạng Sinh học (CBD), […]
📌GIỚI THIỆU Đơn vị Nghiên cứu Lâm sàng Đại học Oxford (OUCRU) là đơn vị nghiên cứu lâm sàng và y tế cộng đồng có quy mô lớn, với trụ sở tại Việt Nam, Indonesia và Nepal. Tầm nhìn của OUCRU là tạo nên tác động tích cực tới nền y học tại địa phương, […]
Chương trình Mạng lưới tiếng Anh chuyên nghiệp trực tuyến (OPEN) cung cấp các khóa học trực tuyến cấp đại học kéo dài 8 tuần về Giảng dạy tiếng Anh cho người sử dụng các ngôn ngữ khác (TESOL). Các khóa học được phát triển và cung cấp bởi các tổ chức giáo dục đại […]
Khóa học này được thiết kế dành cho các nhà nghiên cứu ở các nước thu nhập thấp và trung bình đang làm việc trong lĩnh vực khoa học đời sống, khoa học vật lý hoặc khoa học xã hội. Khóa học đặc biệt phù hợp với các nhà nghiên cứu hàng đầu, hoặc những […]
ABROADER là tổ chức giáo dục quốc tế được thành lập nhằm hỗ trợ các bạn trẻ địa phương có cơ hội gặp gỡ bạn bè quốc tế, củng cố triển vọng nghề nghiệp và đóng góp phát triển cộng đồng địa phương. Hiện tại ABROADER đang tìm kiếm Local Buddies cho chương trình thực […]
Bạn đang là sinh viên đại học tại Hà Nội? Bạn đam mê truyền thông? Bạn yêu thích sự sáng tạo và đang quan tâm đến công nghệ truyền thông hình ảnh qua mạng xã hội? Chuỗi workshop Sản xuất video thực sự rất bổ ích với bạn và chúng tôi đang tìm kiếm ứng […]
Các nhà thiết kế đồ họa tạo ra các khái niệm trực quan, ý tưởng có khả năng truyền cảm hứng, có thể cung cấp thông tin và thay đổi. Khám phá các bài học trong lộ trình này để xây dựng được một nền tảng vững chắc, sau đó hãy bắt đầu tìm hiểu […]
Khóa học này được cung cấp bởi Jesus College tại Đại học Cambridge tập hợp nhiều ngành khác nhau như tâm lý xã hội, xã hội học, luật, nghiên cứu kinh doanh và chính sách công để kiểm tra bằng chứng về những gì hiệu quả và những gì có thể làm được. Người học […]