22 tháng 08, năm nay – 3038 lượt xem
Overlays, dialog boxes, modal windows, light boxes, bạn hoàn toàn có thể gọi chúng là bất kể thứ gì bạn muốn, là một hành lang cửa số nhỏ hiện lên giữa màn hình hiển thị, để lôi cuốn sự quan tâm của người dùng là một mẫu phong cách thiết kế được sử dụng ( và lạm dụng khá nhiều ). Trong những ứng dụng, web và thậm chí còn trên mobile, modal được sử dụng để lôi cuốn sự quan tâm của người dùng vào những trách nhiệm con, mà không cần phải tách chúng ra một trang khác. Sử dụng modal một cách đúng mực hoàn toàn có thể rất tiện lợi và hiệu suất cao, nhưng giống như bia của Bỉ hoặc bánh rán Krispy Kreme 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 bảo vệ rằng người dùng của bạn sẽ không cảm thấy không dễ 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 tồi trong thế giới các mẫu thiết kế UI. 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ình tôi, HÃY NHÌN TÔI”. Người dùng sẽ phải xử lý modal 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 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ó là không cần thiết và chỉ gây phiền toái. Thay vì sử dụng modal 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 static popover hoặc bằng cách chuyển đổi giữa các thành phần UI. 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 cửa sổ modal.
Trang hồ sơ cá thể của LinkedIn là một ví dụ hay cho việc thay thế sửa chữa modal ( hình bên dưới ). Thay vì sử dụng modal nó được cho phép người dùng chỉnh sửa một trường khi họ click vào trường đó ngay trong website .
LinkedIn cho phép người dùng edit các trường ngay trên trang thay vì sử dụng modalThật là lạ khi Twitter sử dụng modal cho việc viết một tin mới họ cũng được cho phép người dùng nhập những tin nhắn trong trang của mình ( hình bên dưới ). Đây là một thưởng thức người dùng tốt hơn chính bới người dùng vẫn hoàn toàn có thể sử dụng trang ( ví dụ để copy và paste văn bản ) và không khóa trang web như khi sử dụng modal. Thay vì sử dụng modal tôi nghĩ sẽ tốt hơn nếu lan rộng ra thanh điều hướng ở phía trên ( xem mock-up ở bên dưới ) vì rằng người dùng luôn luôn hoàn toàn có thể nhập tin nhắn trong trang .
Twitter sử dụng modal để cho phép người dùng tạo ra 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ọModal hoàn toàn có thể hữu dụng trong một số ít trường hợp như khi bạn cần người sử dụng phải tương tác trước khi liên tục, hoặc khi cái giá phải trả cho sai lầm đáng tiếc 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 về một cuốn ebook .
2. Đừng đột nhiên mở modal.
Đột nhiên mở modal khi người dùng chưa làm gì giống như lẻn ra sau một ai đó và tự nhiên Open. Điều đó là không mưu trí và bạn không lên làm. Một modal luôn luôn mở ra khi bạn làm một điều gì đó. Đó hoàn toàn có thể là lựa chọn một nút, click vào một link hoặc lựa chọn một option. Điều này thậm chí còn vận dụng cho những modal mời khảo sát. Đừng sử dụng 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à gồm có lời mời trong chính trang hiện tại. Một modal cảnh báo nhắc nhở 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 hoàn toàn có 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 mở màn, chưa học lập trình hoặc cho những ai muốn ôn lại kỹ năng và 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 modal một điều quan trọng là website bên dưới phải hơi tối. Điều này có 2 tính năng. Đầu tiên nó làm cho người dùng quan tâm vào modal và thứ 2 là cho người dùng biết rằng website hiện tại không hoạt động giải trí. Hãy cẩn trọng với việc sử dụng màu. Quá tối, người sử dụng sẽ không hề xác lập được website hiện tại. Quá sáng, người sử dụng hoàn toàn có thể nghĩ là website đang hoạt động giải trí và thậm chí còn hoàn toàn có thể không quan tâm đến modal tiên phong .
4. Cho phép người dùng click (hoặc gõ) vào bất kỳ đâu
Modal có 2 thành phần chính. Đầu tiên lôi cuốn sự quan tâm vào modal cái buộc người sử dụng tương tác với chúng trước khi liên tục. Thứ 2 là phần phía ngoài modal cái được cho phép người dùng click hoặc gõ để đóng modal. Có một quy tắc chung là bạn sẽ chỉ sử dụng modal cho những tương tác quan trọng. Ví dụ khi nhu yếu người sử dụng xác nhận họ thực sự muốn xóa một thông tin tài khoản, hoặc họ thực sự chấp thuận đồng ý với lao lý và điều kiện kèm theo mà họ ĐK ( cái mà họ sẽ đọc thật kỹ, như toàn bộ tất cả chúng ta sẽ làm ). Trong hầu hết những trường hợp cách sử dụng tốt nhất phần phía ngoài modal là được cho phép người dùng click ( hoặc gõ ) để đóng / hủy bỏ nó .
5. Luôn luôn cung cấp một tùy chọn đóng rõ ràng
Tiếp theo phần trước, không nên chỉ sử dụng khả năng click (hoặc gõ) ở bên ngoài để đóng modal, cũng nên luô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 thêm tùy chọn đóng hoặc hủy trong modal, thường là một liên kết hoặc nút. Điều này giúp cho 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 modal
6. Đừng 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, nó cần một trang riêng, sẽ có thêm nhiều khoảng trống và linh động hơn so với một modal. Cố gắng tránh sử dụng modal với nhiều bước như hình dưới đây từ ngân hàng nhà nước Barclays Bank. Chia một trách nhiệm phức tạp thành nhiều bước là một sáng tạo độc đáo tuyệt vời, nhưng nói chung nó là một tín hiệu cho thấy một thứ gì đó quá phức tạp để nhu yếu người dùng triển khai xong trong khuôn khổ của modal .
Cố gắng tránh con quái vật modal với nhiều bước như của ngân hàng Barclays
7. Đừng nhồi nhét quá nhiều thứ
Bạn không nên cố gắng nỗ lực nhồi nhét quá nhiều thứ vào modal. Hãy giữ cho modal rõ ràng và đơn thuần. Nếu bạn nhận thấy mình đang cố gắng nỗ lực nhồi nhét quá nhiều thứ vào modal nó thường có nghĩa là modal không phải là giải pháp phong cách thiết 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à modal không che khuất những thông tin hoàn toàn có thể hữu dụng cho người dùng ví dụ điển hình như giá thành, ngày, và list. Trong trong thực tiễn nhiều thông tin quan trọng lên nằm trong modal. Ví dụ một modal nhu yếu người dùng xác nhận xóa một vài mục, nên liệt kê list những mục sẽ xóa .
9. Cố gắng tránh sử dụng modal cho các thiết kế di động
Tốt nhất là nên tránh sử dụng modal cho những phong cách thiết kế di động do tại với màn hình hiển thị nhỏ một modal sẽ cần hàng loạt chiều rộng màn hình hiển thị, vậy tại sao không sử dụng một trang riêng ? Nếu modal được sử dụng cho một phong cách thiết kế responsive sau đó sẽ thuận tiện hơn để giữ nguyên những hành vi trên nhiều thiết bị. Vì vậy cần bảo vệ mọi modal được sử dụng sẽ thân thiện với di dộng. Ví dụ Bootstrap modals ( hình bên dưới ) làm việc tốt trên cả desktop và di động. Khi sử dụng modal trên mobile người dùng thường phải cuộn lên và xuống, một ý tưởng sáng tạo hay là gồm có hành vi đóng / hủy ở cả trên và dưới .
Đảm bảo tất cả modal đều thân thiện với di động, giống như modal của Bootstrap
10. Đảm bảo modal có thể truy cập
Khả năng truy vấn rõ ràng là một yếu tố quan trọng cần xem xet cho mọi phong cách thiết kế do đó điều quan trọng là bảo vệ rằng mọi modal được sử dụng hoàn toàn có thể truy vấn. Ví dụ, bảo vệ rằng tập trung chuyên sâu đúng mực vào những đối tượng người dùng trong modal khi mở ( thay vì trang bên dưới ) vì người dùng hoàn toàn có thể điều hướng bằng cách sử dụng bàn phím. Cũng cần chắc như đinh rằng tùy chọn đóng có một nhãn tương thích với những thiết bị đọc. Một bài biết khá hay về chủ đề này là Làm thế nào cải tổ năng lực truy vấn của những modal, tôi khuyên bạn lên đọc nó .Bài viết được dịch từ :
