Bootstrap lớp phủ là gì?

Lớp phủ, hộp thoại, cửa sổ kiểu cách, hộp đèn, bạn có thể gọi chúng là bất kỳ thứ gì bạn muốn, là một cửa sổ nhỏ hiện lên giữa màn hình, để thu hút sự chú ý của người dùng là một mẫu thiết kế được . Trong các ứng dụng, web và thậm chí cả trên điện thoại di động, phương thức được sử dụng để thu hút sự chú ý của người dùng vào các nhiệm vụ con, mà không cần phải tách chúng ra một trang khác. Phương thức sử dụng một cách đúng mực có thể rất tiện dụng và hiệu quả, nhưng giống như bia của Bỉ hoặc bánh rán Krispy Kreme, việc sử dụng quá nhiều sẽ khiến người dùng cảm thấy không khỏe và buồn nôn. Hãy chắc chắn rằng người dùng của bạn sẽ không cảm thấy khó chịu bằng cách xem xét 10 lời khuyên dưới đây

1. Sử dụng modal ít nhất có thể

Modal là một chàng trai hư trong thế giới của các mẫu thiết kế giao diện người dùng. Giống như Justin Bieber tại một bữa tiệc của Hollywood luôn luôn cần phải trở thành trung tâm của sự chú ý sẽ liên tục yêu cầu bạn. " hãy nhìn tôi, hãy nhìn tôi, HÃY NHÌN TÔI". Người dùng sẽ phải xử lý phương thức trước khi có thể tiếp tục và không thể truy cập trang web bên dưới. Thỉnh thoảng đây là một điều tốt, chẳng hạn như khi người dùng phải xác nhận một hành động quan trọng, nhưng trong hầu hết các trường hợp, nó không cần thiết và chỉ gây khó chịu. Thay vì sử dụng phương thức sẽ tốt hơn nếu bạn hiển thị nội dung ngay trong trang web. Ví dụ bằng cách mở rộng các phần của trang web, sử dụng hoặc bằng cách chuyển đổi giữa các thành phần giao diện người dùng. Có một bài viết khá hay về chủ đề này Các mẫu thiết kế để thay thế cho các phương thức cửa sổ

Trang hồ sơ cá nhân của LinkedIn là một ví dụ hay cho công việc thay thế phương thức (hình bên dưới). Thay vì sử dụng phương thức này, nó cho phép người dùng chỉnh sửa một trường khi họ nhấp vào trường đó ngay trong trang web

LinkedIn cho phép người dùng chỉnh sửa các trường ngay trên trang thay vì sử dụng phương thức

Thật lạ khi Twitter sử dụng chế độ cho việc viết một tin mới, họ cũng cho phép người dùng nhập các tin nhắn trong trang của mình (hình bên dưới). Đây là trải nghiệm người dùng tốt hơn bởi vì người dùng vẫn có thể sử dụng trang (ví dụ: sao chép và dán văn bản) và không khóa trang web khi sử dụng phương thức. Thay vì sử dụng phương thức, tôi nghĩ sẽ tốt hơn nếu mở rộng thanh điều hướng ở phía sau (xem mô hình ở bên dưới) bởi vì người dùng luôn luôn có thể nhập tin nhắn trong trang

Twitter sử dụng phương thức để cho phép người dùng tạo một tin mới

Twitter sẽ tốt hơn nếu cho phép người dùng nhập tin nhắn mới ngay trên trang của họ

Phương thức có thể hữu ích trong một số trường hợp như khi bạn cần người sử dụng phải tương tác trước khi tiếp tục, hoặc khi cái giá phải trả cho sai lầm là rất cao. Ví dụ, khi xác nhận xóa một thứ gì đó, hoặc nhập một địa chỉ email để tải xuống một cuốn sách điện tử.  

2. Don't default open modal

Đột nhiên mở phương thức khi người dùng không làm gì giống như lẻn ra sau ai đó và đột nhiên xuất hiện. Điều đó là không thông minh và bạn không làm được. Một phương thức luôn luôn mở ra khi bạn làm một điều gì đó. Đó có thể là lựa chọn một nút, nhấp vào một liên kết hoặc lựa chọn một tùy chọn. Điều này thậm chí còn được áp dụng cho các phương thức mời bình luận. Don't use modal, thay vào đó hiển thị lời mời trên một trang mới, hoặc thậm chí còn tốt hơn là bao gồm lời mời trong trang chính hiện tại. Một phương thức cảnh báo người dùng phiên họp của họ sắp kết thúc là ngoại lệ duy nhất mà tôi không thể nghĩ ra

Tại TechMaster có khóa học "Web cơ bản HTML5, CSS3 và Javascript" dành cho người mới bắt đầu, chưa học lập trình hoặc cho những ai muốn ôn lại kiến ​​thức cơ bản về lập trình web

3. Làm tối trang web bên dưới modal

Khi mở một chế độ điều khiển quan trọng là trang bên dưới phải hơi tối. Điều này có 2 tác dụng. Đầu tiên nó làm cho người dùng chú ý vào phương thức và thứ 2 là cho người dùng biết rằng trang web hiện không hoạt động. Hãy cẩn thận với việc sử dụng màu sắc. Quá tối đa, người sử dụng sẽ không thể xác định được trang web hiện tại. Quá sáng, người sử dụng có thể coi là trang web đang hoạt động và thậm chí có thể không chú ý đến phương thức đầu tiên

4. Cho phép người dùng nhấp (hoặc nhập) vào bất kỳ đâu

Phương thức có 2 thành phần chính. First first thu hút sự chú ý vào phương thức cái bắt buộc người sử dụng tương tác với họ trước khi tiếp tục. Thứ 2 là phần bên ngoài modal cái cho phép người dùng nhấp hoặc nhập để đóng modal. Có một quy tắc chung là bạn sẽ chỉ sử dụng phương thức cho các tác vụ quan trọng tương ứng. Ví dụ khi yêu cầu người sử dụng xác nhận họ thực sự muốn xóa một tài khoản, hoặc họ thực sự đồng ý với điều khoản và điều kiện mà họ đăng ký (cái mà họ sẽ đọc thật kỹ, như tất cả chúng ta sẽ . Trong hầu hết các trường hợp cách sử dụng phương thức tốt nhất bên ngoài là cho phép người dùng nhấp (hoặc nhập) để đóng/hủy bỏ nó

5. Luôn cung cấp một tùy chọn rõ ràng ràng buộc

Tiếp theo phần trước, không nên chỉ sử dụng khả năng nhấp (hoặc nhập) ở bên ngoài để đóng phương thức, cũng nên luôn có một tùy chọn đóng ở góc trên bên phải. Một ý tưởng hay nữa là bao gồm tùy chọn bổ sung đóng hoặc hủy trong phương thức, thường là một liên kết hoặc nút. Điều này giúp người dùng có thể quay về trang gốc một cách dễ dàng

John Lewis bao gồm một tùy chọn đóng rõ ràng ở góc trên bên phải của phương thức

6. Don't bao gồm quá nhiều bước

Nếu một tương tác đủ phức tạp với nhiều bước bắt buộc, thì nó cần một trang riêng, sẽ có thêm nhiều khoảng trống và linh hoạt hơn so với một phương thức. Cố gắng tránh sử dụng phương thức với nhiều bước như hình bên dưới từ ngân hàng Barclays Bank. Chia sẻ một nhiệm vụ phức tạp nhiều bước là một ý tưởng tuyệt vời, nhưng nói chung nó là một dấu hiệu cho thấy một điều gì đó quá phức tạp để yêu cầu người dùng hoàn thành trong khuôn khổ của phương thức

Cố gắng tránh phương thức con quái vật với nhiều bước như của ngân hàng Barclays

7. Don't plug too many second

Bạn không nên cố gắng bổ sung quá nhiều thứ vào phương thức. Vui lòng giữ rõ ràng phương thức và đơn giản. Nếu bạn nhận thấy mình đang cố gắng nhồi nhét quá nhiều thứ vào phương thức thì nó thường có nghĩa là phương thức không phải là giải pháp thiết kế kế tốt nhất

8. Bao gồm nhiều thông tin quan trọng

Một điều quan trọng là phương thức không che khuất các thông tin có thể hữu ích cho người dùng chẳng hạn như giá cả, ngày và danh sách. Trong thực tế nhiều thông tin quan trọng được nâng lên trong phương thức. Ví dụ một phương thức yêu cầu người dùng xác nhận xóa một vài mục, nên liệt kê danh sách các mục sẽ xóa

9. Cố gắng tránh sử dụng phương thức cho các thiết kế di động

Tốt nhất là nên tránh sử dụng phương thức cho các thiết bị di động bởi vì màn hình nhỏ một phương thức sẽ cần toàn bộ chiều rộng màn hình, vậy tại sao không sử dụng một trang riêng? . Vì vậy cần đảm bảo mọi phương thức được sử dụng sẽ thân thiện với di động. Ví dụ (hình bên dưới) làm việc tốt trên cả máy tính để bàn và di động. Khi sử dụng phương thức trên thiết bị di động, người dùng thường phải cuộn lên và xuống, một ý tưởng hay là bao gồm hành động đóng/hủy ở cả trên và dưới

Bảo đảm tất cả modal đều thân thiện với di động, giống như modal của Bootstrap

10. Phương thức bảo đảm có thể truy cập

Khả năng truy cập rõ ràng là một yếu tố quan trọng cần xem xét cho mọi thiết kế vì điều quan trọng là đảm bảo rằng mọi phương thức được sử dụng đều có thể truy cập. Ví dụ, chắc chắn rằng tập trung chính xác vào các đối tượng trong phương thức khi mở (thay vì trang bên dưới) bởi vì người dùng có thể điều hướng bằng cách sử dụng bàn phím. Cũng cần đảm bảo rằng tùy chọn đóng có nhãn phù hợp với thiết bị đọc. Một bài biết khá hay về chủ đề này là Làm thế nào cải thiện khả năng truy cập của các phương thức, tôi khuyên bạn nên đọc nó