Có lẽ bạn đã từng ở đó trước đây. Làm cách nào để chúng tôi chọn giữa việc hiển thị một phương thức cho người dùng và khi nào chúng tôi điều hướng họ đến một trang mới, riêng biệt? Và nó có quan trọng không? Trên thực tế, nó có. Quyết định này ảnh hưởng đến luồng của người dùng, bối cảnh của họ, khả năng tra cứu chi tiết cũng như tần suất lỗi và việc hoàn thành nhiệm vụ. Cả hai lựa chọn đều có thể gây rối và bực bội - không đúng lúc và không đúng chỗ. Vì vậy, tốt hơn hết chúng ta nên làm cho đúng. Chà, hãy xem cách thực hiện điều đó. Phương thức so với hộp thoại so với lớp phủ so với hộp đèn Mặc dù chúng ta thường nói về một thành phần giao diện người dùng phương thức duy nhất, nhưng chúng ta thường bỏ qua các sắc thái phức tạp, tinh tế giữa tất cả các loại phương thức khác nhau. Trên thực tế, không phải phương thức nào cũng giống nhau. Phương thức, hộp thoại, lớp phủ và hộp đèn - tất cả đều nghe có vẻ giống nhau nhưng thực tế chúng khá khác nhau:
DialogMột thuật ngữ chung cho “cuộc trò chuyện” (người dùng ↔ hệ thống). Lớp phủMột bảng nội dung nhỏ được hiển thị ở đầu trang. ModalUser phải tương tác với lớp phủ + nền bị tắt. NonmodalUser phải tương tác với lớp phủ + nền được bật. Hộp đènNền mờ để tập trung sự chú ý vào phương thức.
Như Anna Kaley nhấn mạnh, hầu hết các lớp phủ đều xuất hiện không đúng lúc, làm gián đoạn người dùng khi thực hiện các nhiệm vụ quan trọng, sử dụng ngôn ngữ kém và làm gián đoạn dòng chảy của người dùng. Bản chất của chúng là gây gián đoạn và thường có mức độ nghiêm trọng cao mà không cần thiết phải làm như vậy.
Chắc chắn người dùng phải chậm lại và bị gián đoạn nếu hậu quả hành động của họ có tác động lớn, nhưng đối với hầu hết các trường hợp, các phương thức không theo phương thức sẽ tinh tế hơn nhiều và là một lựa chọn thân thiện hơn để thu hút sự chú ý của người dùng. Nếu có bất cứ điều gì, tôi luôn đề nghị nó là mặc định. Phương thức → Dành cho các nhiệm vụ đơn lẻ, khép kín Với tư cách là nhà thiết kế, chúng ta thường coi các phương thức là không liên quan và khó chịu - và thường là như vậy! - nhưng chúng cũng có giá trị của chúng. Chúng có thể rất hữu ích để cảnh báo người dùng về những lỗi tiềm ẩn hoặc giúp họ tránh mất dữ liệu. Họ cũng có thể giúp thực hiện các hành động liên quan hoặc đi sâu vào chi tiết mà không làm gián đoạn trạng thái hiện tại của trang. Nhưng ưu điểm lớn nhất của modal là giúp người dùng giữ nguyên bối cảnh của màn hình hiện tại. Nó không chỉ có nghĩa là giao diện người dùng mà còn có đầu vào được chỉnh sửa, vị trí cuộn, trạng thái sắp xếp, lựa chọn bộ lọc, sắp xếp, v.v.
Đôi khi, người dùng cần nhanh chóng xác nhận lựa chọn (ví dụ: các bộ lọc như hiển thị ở trên) rồi tiếp tục ngay từ đó. Tất nhiên, tính năng tự động lưu có thể đạt được hiệu quả tương tự nhưng không phải lúc nào cũng cần thiết hoặc mong muốn. Và việc chặn giao diện người dùng thường không phải là một ý tưởng hay. Tuy nhiên, các phương thức không được sử dụng cho bất kỳ nhiệm vụ nào. Thông thường, chúng tôi sử dụng chúng cho các nhiệm vụ đơn lẻ, khép kín trong đó người dùng nên tham gia, hoàn thành nhiệm vụ và sau đó quay lại vị trí cũ. Không có gì đáng ngạc nhiên, chúng hoạt động tốt đối với các tương tác ngắn, có mức độ ưu tiên cao (ví dụ: cảnh báo, hành động phá hoại, xác nhận nhanh). Khi phương thức giúp: 🚫 Các phương thức thường gây rối, xâm lấn và khó hiểu.🚫 Chúng gây khó khăn cho việc so sánh và sao chép-dán. ✅ Tuy nhiên, các phương thức cho phép người dùng duy trì nhiều ngữ cảnh. ✅ Hữu ích để ngăn chặn các lỗi không thể khắc phục và mất dữ liệu. ✅ Hữu ích nếu việc đưa người dùng đến một trang mới sẽ gây gián đoạn. ✅ Chỉ hiển thị một phương thức nếu người dùng coi trọng sự gián đoạn. ✅ Theo mặc định, thích các hộp thoại không chặn ("không phải phương thức"). ✅ Cho phép người dùng thu nhỏ, ẩn hoặc khôi phục hộp thoại sau. ✅ Sử dụng một phương thức để làm chậm người dùng, ví dụ: xác minh đầu vào phức tạp. ✅ Thoát ra bằng phím “Đóng”, ESC hoặc nhấp vào bên ngoài hộp. Trang → Dành cho quy trình làm việc phức tạp, nhiều bước Trình hướng dẫn hoặc điều hướng theo tab trong các chế độ không hoạt động tốt, ngay cả trong các sản phẩm doanh nghiệp phức tạp - ở đó, các bảng bên hoặc ngăn kéo thường hoạt động tốt hơn. Rắc rối bắt đầu khi người dùng cần so sánh hoặc tham chiếu các điểm dữ liệu - tuy nhiên các phương thức chặn hành vi này, vì vậy thay vào đó, họ mở lại cùng một trang trong nhiều tab.
Đối với các quy trình phức tạp hơn và nhiều bước, các trang độc lập hoạt động tốt nhất. Các trang cũng hoạt động tốt hơn khi chúng yêu cầu sự chú ý hoàn toàn của người dùng và việc tham chiếu đến màn hình trước đó không hữu ích lắm. Và ngăn kéo hoạt động cho các tác vụ phụ quá phức tạp đối với một phương thức đơn giản nhưng không cần điều hướng toàn trang. Khi nào cần tránh các phương thức: 🚫 Tránh các phương thức cho thông báo lỗi.🚫 Tránh các phương thức cho thông báo tính năng.🚫 Tránh các phương thức cho trải nghiệm làm quen.🚫 Tránh các phương thức cho các tác vụ nhiều bước phức tạp, dài dòng.🚫 Tránh nhiều phương thức lồng nhau và thay vào đó hãy sử dụng prev/next.🚫 Tránh các phương thức tự động kích hoạt trừ khi thực sự cần thiết. Tránh cả haiĐối với các nhiệm vụ lặp đi lặp lại Trong nhiều sản phẩm phức tạp, nặng về nhiệm vụ, người dùng sẽ thấy mình thực hiện cùng một nhiệm vụ lặp đi lặp lại. Ở đó, cả phương thức và điều hướng trang mới đều gây thêm xung đột vì chúng làm gián đoạn luồng hoặc buộc người dùng thu thập dữ liệu bị thiếu giữa tất cả các tab hoặc chế độ xem khác nhau. Thông thường, người dùng sẽ có trải nghiệm không tốt, chứa đầy những xác nhận không ngừng nghỉ, cảnh báo phóng đại, hướng dẫn dài dòng hoặc chỉ thiếu điểm tham chiếu. Như Saulius Stebulis đã đề cập, trong những trường hợp này, các phần có thể mở rộng hoặc chỉnh sửa tại chỗ thường hoạt động tốt hơn — chúng giữ nhiệm vụ cố định trên màn hình hiện tại. Trên thực tế, trong nhiều trường hợp, người dùng không hoàn thành nhiệm vụ của mình một cách cô lập. Họ cần tra cứu dữ liệu, sao chép-dán các giá trị, tinh chỉnh các mục nhập ở những vị trí khác nhau hoặc chỉ xem lại các bản ghi tương tự khi họ thực hiện nhiệm vụ của mình. Lớp phủ và ngăn kéo hữu ích hơn trong việc duy trì quyền truy cập vào dữ liệu nền trong khi thực hiện tác vụ. Kết quả là, ngữ cảnh luôn ở đúng vị trí của nó, có sẵn để tham khảo hoặc sao chép-dán. Lưu các phương thức và điều hướng trang vào những thời điểm mà sự gián đoạn thực sự mang lại giá trị — đặc biệt là để ngăn ngừa các lỗi nghiêm trọng. Phương thức so với trang: Cây quyết định Cách đây không lâu, Ryan Neufeld đã đưa ra một hướng dẫn rất hữu ích để giúp các nhà thiết kế lựa chọn giữa các phương thức và trang. Nó đi kèm với một bảng tính PNG tiện dụng và một mẫu Google Doc với các câu hỏi được chia thành 7 phần. Nó dài, cực kỳ kỹ lưỡng nhưng rất dễ theo dõi:
Việc này có vẻ khó thực hiện nhưng đó là một quy trình gồm 4 bước khá đơn giản:
Ngữ cảnh của màn hình. Đầu tiên, chúng tôi kiểm tra xem người dùng có cần duy trì ngữ cảnh của màn hình bên dưới hay không. Độ phức tạp và thời lượng của nhiệm vụ. Các nhiệm vụ đơn giản, tập trung, không gây mất tập trung có thể sử dụng một phương thức, nhưng các luồng phức tạp, dài cần có một trang. Tham chiếu đến trang cơ bản. Sau đó, chúng tôi kiểm tra xem người dùng có thường xuyên cần tham khảo dữ liệu ở chế độ nền hay không hay tác vụ chỉ là một xác nhận hoặc lựa chọn đơn giản. Chọn lớp phủ phù hợp. Cuối cùng, nếu lớp phủ thực sự là một lựa chọn tốt, nó sẽ hướng dẫn chúng ta lựa chọn giữa phương thức hoặc phi phương thức (nghiêng về phương thức không theo phương thức).
Kết thúc Bất cứ khi nào có thể, hãy tránh chặn toàn bộ giao diện người dùng. Có một hộp thoại nổi, che một phần giao diện người dùng nhưng cho phép điều hướng, cuộn và sao chép-dán. Hoặc hiển thị nội dung của phương thức dưới dạng ngăn kéo bên. Hoặc thay vào đó hãy sử dụng đàn accordion dọc. Hoặc đưa người dùng đến một trang riêng nếu bạn cần hiển thị nhiều chi tiết. Nhưng nếu bạn muốn nâng cao hiệu quả và tốc độ của người dùng, hãy tránh các phương thức bằng mọi giá. Sử dụng chúng để làm người dùng chậm lại, thu hút sự chú ý của họ và ngăn ngừa sai sót. Như Therese Fessenden đã lưu ý, không ai thích bị làm phiền, nhưng nếu phải làm vậy, hãy đảm bảo rằng điều đó hoàn toàn xứng đáng với chi phí bỏ ra. Gặp gỡ “Mẫu thiết kế giao diện thông minh” Bạn có thể tìm thấy toàn bộ phần về các phương thức và lựa chọn thay thế trong Mẫu thiết kế giao diện thông minh, khóa học video dài 15 giờ của chúng tôi với 100 ví dụ thực tế từ các dự án thực tế - cùng với khóa đào tạo UX trực tiếp vào cuối năm nay. Mọi thứ từ danh sách thả xuống lớn đến các bảng doanh nghiệp phức tạp — với 5 phân khúc mới được thêm vào mỗi năm. Chuyển đến bản xem trước miễn phí. Sử dụng mã BIRDIE để tiết kiệm 15%. Gặp gỡ các Mẫu thiết kế giao diện thông minh, khóa học video của chúng tôi về thiết kế giao diện & UX.
Đào tạo Video + UX Chỉ Video + Đào tạo UX$ 495,00 $ 699,00
Nhận Video + Đào tạo về trải nghiệm người dùng25 bài học video (15 giờ) + Đào tạo về trải nghiệm người dùng trực tiếp. Đảm bảo hoàn tiền trong 100 ngày. Chỉ video$ 300,00$ 395,00
Nhận khóa học video40 bài học video (15h). Được cập nhật hàng năm. Cũng có sẵn dưới dạng Gói UX với 2 khóa học video.
Tài nguyên hữu ích
Các loại cửa sổ bật lên khác nhau của Anna Kaley Các phương pháp hay nhất để thiết kế các phương thức giao diện người dùng, của Uxcel Chúng ta sử dụng quá nhiều phương thức chết tiệt: Nguyên tắc UX của Adrian Egger Đối thoại phương thức và phi phương thức, bởi Therese Fessenden Thiết kế giao diện người dùng doanh nghiệp hiện đại: Hộp thoại phương thức, của James Jacobs Phương thức trong hệ thống thiết kế
