15 Mẹo Để Biểu Mẫu Có Giao Diện Bắt Mắt Hơn

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.

————————————————————————————————————

  • Tác giả: Jim Raptis
  • Link bài gốc: TẠI ĐÂY
  • Dịch giả: Phan Vân Anh – CTV ban Dịch thuật
  • Khi chia sẻ, cần phải trích dẫn nguồn đầy đủ tên tác giả và nguồn là “Dịch giả: Vân Anh – Nguồn: iVolunteer Vietnam”.

Shortlink: https://icoursevietnam.com?p=1872

NHỮNG BÀI VIẾT KHÁC

Khóa Học Miễn Phí Về Phát Triển Phần Mềm Có Chứng Nhận Của Microsoft Và LinkedIn
June 18, 2024

Khóa Học Miễn Phí Về Phát Triển Phần Mềm Có Chứng Nhận Của Microsoft Và LinkedIn

💻 THÔNG TIN CHUNG Nền tảng: LinkedIn Đơn vị cấp chứng chỉ: Microsoft Hình thức: Online Thời lượng: 6h 16p Nội dung khóa học: Khám phá những kỹ năng cần thiết cho sự nghiệp phát triển phần mềm. Tìm hiểu các khái niệm và cấu trúc cốt lõi của ngôn ngữ lập trình cũng như […]

Khóa Học Miễn Phí Về An Ninh Mạng Có Chứng Chỉ Của Microsoft Và LinkedIn
June 18, 2024

Khóa Học Miễn Phí Về An Ninh Mạng Có Chứng Chỉ Của Microsoft Và LinkedIn

💻 THÔNG TIN CHUNG Nền tảng: LinkedIn Đơn vị cấp chứng chỉ: Microsoft Hình thức: Online Thời lượng: 5h 23m Nội dung khóa học: Khám phá các kỹ năng cần thiết cho sự nghiệp trong lĩnh vực an ninh mạng. Có được sự hiểu biết vững chắc về các thuật ngữ an ninh mạng thường […]

L.E.A.F Network Mở Chương Trình Rèn Luyện Thực Tế  Online – Empower Your Interpersonal Skills (EYIS)
June 16, 2024

L.E.A.F Network Mở Chương Trình Rèn Luyện Thực Tế  Online – Empower Your Interpersonal Skills (EYIS)

Hành trình tự khám phá, trải nghiệm để thấu hiểu bản thân thật sự rất gian nan nếu chỉ đi một mình. Nó bắt đầu bằng việc tự bản thân phải tốn nhiều thời gian thực hành, khám phá ra những điểm mạnh/yếu và tự tìm cách vượt qua thử thách bởi những thiếu sót […]

Chương Trình Online Coaching Mở Khóa Học Về Xây Dựng Tư Duy Giải Quyết Vấn Đề 
June 15, 2024

Chương Trình Online Coaching Mở Khóa Học Về Xây Dựng Tư Duy Giải Quyết Vấn Đề 

Cuộc sống có vô vàn vấn đề liên tiếp xảy ra với chúng ta. Đối diện với những vấn đề ấy, bản thân sẽ phản ứng như nào? Bỏ trốn hay sẽ đối diện và vượt qua? Là con người, ai cũng mong muốn được chiến thắng thử thách và trở thành người có bản […]

Khóa Học Miễn Phí Về Thiết Kế VLSI Kỹ Thuật Số – RTL Sang GDS Từ Semiconductor Club 
June 10, 2024

Khóa Học Miễn Phí Về Thiết Kế VLSI Kỹ Thuật Số – RTL Sang GDS Từ Semiconductor Club 

Trong khóa học này đề cập đến những kiến ​​thức cơ bản về Triển khai Chip, từ thiết kế logic (RTL) đến cung cấp bố cục sẵn sàng để chế tạo (GDS). Các khóa học miễn phí không bao gồm Phần Chứng chỉ và Hỏi đáp. 📌 THÔNG TIN CHUNG: Mức độ: Tất cả các […]

Khóa Học Miễn Phí Về Kinh Tế Thị Trường Từ Đại Học Yale
June 10, 2024

Khóa Học Miễn Phí Về Kinh Tế Thị Trường Từ Đại Học Yale

Tổng quan về các ý tưởng, phương pháp và thể chế cho phép xã hội loài người quản lý rủi ro và thúc đẩy doanh nghiệp. Nhấn mạnh vào kỹ năng lãnh đạo hiểu biết về tài chính. Mô tả thực tiễn ngày nay và phân tích triển vọng cho tương lai. Giới thiệu về […]

Khóa Học Miễn Phí Về Ngoại Giao Toàn Cầu Từ Đại Học Luân Đôn
June 10, 2024

Khóa Học Miễn Phí Về Ngoại Giao Toàn Cầu Từ Đại Học Luân Đôn

Ngoại giao Toàn cầu MOOC có nền tảng trực tiếp từ Chương trình MA Ngoại giao Toàn cầu/Học viện Quốc tế của Đại học London/SOAS được ra mắt vào tháng 4 năm 2013 và đã thu hút hàng trăm sinh viên từ khắp nơi trên thế giới. Chương trình MA Ngoại giao Toàn cầu được […]

Chính Thức Mở Đơn Tham Gia Trường Học V.Gen Về Đa Dạng, Công Bằng, Dung Hợp Và Tiếp Cận (D.E.I.A) 2024 Do Tổng Lãnh Sự Quán Hoa Kỳ Tại Thành Phố Hồ Chí Minh Đồng Tổ Chức
June 9, 2024

Chính Thức Mở Đơn Tham Gia Trường Học V.Gen Về Đa Dạng, Công Bằng, Dung Hợp Và Tiếp Cận (D.E.I.A) 2024 Do Tổng Lãnh Sự Quán Hoa Kỳ Tại Thành Phố Hồ Chí Minh Đồng Tổ Chức

V.Gen Network for Vietnam là một tổ chức cộng đồng phi lợi nhuận hoạt động trong lĩnh vực Giáo dục và Phát triển thanh niên được duy trì từ 2018 đến nay. V.Gen được tạo ra với mục đích xây dựng một môi trường trao đổi học thuật cho giới trẻ Việt Nam và các […]

Khóa Đào Tạo Miễn Phí “Kỹ Năng Học Tập & Đổi Mới” Thế Kỷ 21 Thuộc Chuỗi Dự Án Talent Generation Training Program
June 1, 2024

Khóa Đào Tạo Miễn Phí “Kỹ Năng Học Tập & Đổi Mới” Thế Kỷ 21 Thuộc Chuỗi Dự Án Talent Generation Training Program

Talent Generation 2024 là một chương trình thuộc dự án Today’s Voice 2024 của Trung tâm văn hoá và giáo dục UNESCO-CEP. Chương trình ra đời nhằm ra đời nhằm giúp sinh viên Việt Nam nâng cao kiến thức, năng lực tư duy và các kỹ năng cần thiết trong môi trường làm việc chuyên […]

Chương Trình “Khởi Sự Nghề Nghiệp Quốc Tế” G23.0 Chính Thức Mở Đơn Đăng Ký
May 31, 2024

Chương Trình “Khởi Sự Nghề Nghiệp Quốc Tế” G23.0 Chính Thức Mở Đơn Đăng Ký

EAS Việt Nam mở ra chương trình “Định hướng, trải nghiệm doanh nghiệp” nhằm giúp đỡ Học sinh, Sinh viên phá vỡ những rào cản và trang bị kiến thức, năng lực làm việc môi trường thực tế, đào tạo các kỹ năng và phương pháp học tập làm việc, phát triển và định hướng […]

Trung Tâm Văn Hóa Hàn Quốc Tại Việt Nam Mở Đơn Đăng Kí Khóa Học Nhảy Vũ Đạo K-Pop Tại Hà Nội
May 12, 2024

Trung Tâm Văn Hóa Hàn Quốc Tại Việt Nam Mở Đơn Đăng Kí Khóa Học Nhảy Vũ Đạo K-Pop Tại Hà Nội

Lớp học K-POP Academy nằm trong chuỗi chương trình thường niên của Trung tâm Văn hóa Hàn Quốc tại Việt Nam. Đây là lớp học nhảy vũ đạo miễn phí do chính giảng viên người Hàn Quốc trực tiếp giảng dạy. Năm nay, lớp học được mở ra dành riêng cho các bạn trẻ yêu […]

Khóa Học Cắt May Áo Dài Dành Cho Giáo Viên – Sinh Viên Tài Trợ Bởi Công Đoàn Giáo Dục Việt Nam
May 6, 2024

Khóa Học Cắt May Áo Dài Dành Cho Giáo Viên – Sinh Viên Tài Trợ Bởi Công Đoàn Giáo Dục Việt Nam

Khoá học hỗ trợ khởi nghiệp của Bộ Giáo Dục Đào Tạo, Công Đoàn Giáo Dục Việt Nam kết hợp với Nhà thiết kế Đỗ Trịnh Hoài Nam & Học Viện SVF Academy dạy nghề Giáo Viên, Sinh Viên biết cắt may và thiết kế áo dài áo dài ly vuông không nhăn nách dúm […]

Khóa Học Nền Tảng Công Nghệ Miễn Phí Từ Tổ Chức Phi Lợi Nhuận INCO
April 24, 2024

Khóa Học Nền Tảng Công Nghệ Miễn Phí Từ Tổ Chức Phi Lợi Nhuận INCO

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ỗ […]

Khóa Học Lập Trình Python Căn Bản Miễn Phí Code In Place Của Đại Học Stanford 2024
April 10, 2024

Khóa Học Lập Trình Python Căn Bản Miễn Phí Code In Place Của Đại Học Stanford 2024

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 […]

Khóa Học Miễn Phí Về Sử Dụng Email Trong Mạng Lưới Từ Trường Đại Học Washington
April 9, 2024

Khóa Học Miễn Phí Về Sử Dụng Email Trong Mạng Lưới Từ Trường Đại Học Washington

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ủ […]

Khóa Học Sáng Tạo Podcast Miễn Phí Do Trung tâm Hoa Kỳ Hà Nội Và Đại Sứ Quán Hoa Kỳ Tài Trợ
April 6, 2024

Khóa Học Sáng Tạo Podcast Miễn Phí Do Trung tâm Hoa Kỳ Hà Nội Và Đại Sứ Quán Hoa Kỳ Tài Trợ

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. […]