- Tập hợp các quy luật liên quan đến tính khả dụng trong thiết kế và tâm lý học nhận thức kèm định nghĩa ngắn gọn, hệ thống hóa tại một nơi những khái niệm ảnh hưởng đến cách con người hiểu và sử dụng giao diện
- Trong lĩnh vực lựa chọn và ra quyết định, các khái niệm như Hick’s Law, Cognitive Load cho thấy số lượng lựa chọn, độ phức tạp và lượng tài nguyên tinh thần có liên hệ trực tiếp đến phán đoán của người dùng và tốc độ tương tác
- Trong lĩnh vực nhận thức thị giác và tổ chức thông tin, các quy luật như Law of Proximity, Law of Similarity cho thấy sự gần nhau, tính tương đồng, sự kết nối và ranh giới chung khiến các yếu tố được cảm nhận như một nhóm
- Trong lĩnh vực tương tác và hành vi, bài viết đề cập các tiêu chí ảnh hưởng đến hiệu quả thao tác và thời gian đạt mục tiêu như phản hồi dưới 400ms của Doherty Threshold hay khoảng cách và kích thước trong Fitts’s Law
- Bao quát cả lĩnh vực trí nhớ và trải nghiệm, bài viết còn đưa ra các quy luật như Peak-End Rule, Zeigarnik Effect, cung cấp rộng rãi những khung tư duy được dùng lặp lại trong toàn bộ quá trình thiết kế UX
Cấu trúc các quy luật UX
- Laws of UX tổng hợp các quy luật liên quan đến tính khả dụng trong thiết kế và tâm lý học nhận thức, mỗi quy luật đi kèm một định nghĩa ngắn
- Mỗi mục liên kết đến một trang riêng cho từng quy luật, và được nhóm lại theo các khái niệm ảnh hưởng đến cách con người hiểu và sử dụng giao diện
- Bao quát rộng các chủ đề thường gặp trong thiết kế UX như lựa chọn, trí nhớ, sự chú ý, theo đuổi mục tiêu và nhóm hóa trực quan
Các quy luật chính
-
Nhận thức và ra quyết định
- Choice Overload: Khi có quá nhiều lựa chọn, cảm giác quá tải tăng lên, và khái niệm này thường được dùng gần như đồng nghĩa với paradox of choice
- Cognitive Bias: Những sai lệch tư duy có hệ thống ảnh hưởng đến tính hợp lý trong phán đoán, từ đó tác động đến cách nhìn nhận thế giới và khả năng ra quyết định
- Cognitive Load: Chỉ lượng tài nguyên tinh thần cần thiết để hiểu và tương tác với giao diện
- Hick’s Law: Thời gian đưa ra quyết định tăng lên khi số lượng lựa chọn và độ phức tạp tăng
- Mental Model: Là mô hình nội tại được nén lại từ những gì con người tin rằng họ biết về hệ thống và cách nó vận hành
- Miller’s Law: Một người trung bình chỉ có thể giữ khoảng 7 ± 2 mục trong trí nhớ làm việc
- Occam’s Razor: Trong số các giả thuyết có mức dự đoán tương đương, hãy chọn giả thuyết có ít giả định nhất
- Tesler’s Law: Bất kỳ hệ thống nào cũng luôn còn lại một mức độ phức tạp không thể giảm tiếp
- Working Memory: Là hệ thống nhận thức tạm thời lưu trữ và thao tác thông tin cần cho việc thực hiện nhiệm vụ
-
Nhận thức thị giác và tổ chức thông tin
- Aesthetic-Usability Effect: Người dùng có xu hướng cảm nhận thiết kế hấp dẫn về mặt thẩm mỹ hơn là thiết kế dễ sử dụng hơn
- Chunking: Quá trình chia nhỏ các mẩu thông tin riêng lẻ rồi nhóm lại thành các đơn vị có ý nghĩa
- Law of Common Region: Các yếu tố cùng chia sẻ một ranh giới rõ ràng sẽ được cảm nhận như cùng một nhóm
- Law of Proximity: Các đối tượng ở gần nhau được nhận thức là thuộc về cùng một nhóm
- Law of Prägnanz: Hình ảnh mơ hồ hoặc phức tạp được diễn giải theo dạng đơn giản nhất
- Law of Similarity: Các yếu tố giống nhau, dù ở cách xa nhau, vẫn dễ được nhận thức như một hình, dạng hoặc nhóm thống nhất
- Law of Uniform Connectedness: Các yếu tố được kết nối trực quan trông có liên quan với nhau hơn so với các yếu tố không được kết nối
- Von Restorff Effect: Trong số các đối tượng tương tự nhau, đối tượng khác biệt sẽ được ghi nhớ rõ nhất
-
Tương tác và hành vi
- Doherty Threshold: Khi máy tính và người dùng tương tác ở tốc độ dưới 400ms, hai bên không phải chờ nhau và năng suất tăng lên đáng kể
- Fitts’s Law: Thời gian đạt được mục tiêu là hàm của khoảng cách và kích thước
- Flow: Là trạng thái tinh thần khi một người hoàn toàn đắm chìm vào hoạt động, đồng thời cảm nhận năng lượng, sự tập trung, mức độ tham gia sâu và niềm vui
- Goal-Gradient Effect: Càng tiến gần mục tiêu, xu hướng muốn tiếp tục tiến đến mục tiêu đó càng mạnh hơn
- Jakob’s Law: Vì người dùng dành phần lớn thời gian trên các website khác, họ thích sản phẩm hoạt động theo cách tương tự với những website mà họ đã quen thuộc
- Paradox of the Active User: Người dùng bắt đầu sử dụng phần mềm ngay mà không đọc tài liệu hướng dẫn
- Parkinson’s Law: Bất kỳ công việc nào cũng sẽ phình ra cho đến khi tiêu hết toàn bộ thời gian sẵn có
- Postel’s Law: Hãy khoan dung với đầu vào bạn chấp nhận và thận trọng với đầu ra bạn gửi đi
- Selective Attention: Trong nhiều kích thích từ môi trường, con người thường chỉ tập trung chú ý vào một phần liên quan đến mục tiêu
-
Trí nhớ và trải nghiệm
- Pareto Principle: Trong nhiều sự kiện, khoảng 80% kết quả đến từ 20% nguyên nhân
- Peak-End Rule: Con người đánh giá một trải nghiệm dựa trên cảm xúc ở cao trào và đoạn kết hơn là tổng hay trung bình của toàn bộ trải nghiệm
- Serial Position Effect: Có xu hướng ghi nhớ tốt nhất mục đầu tiên và mục cuối cùng trong một chuỗi các mục liên tiếp
- Zeigarnik Effect: Con người nhớ các nhiệm vụ chưa hoàn thành hoặc bị gián đoạn tốt hơn các nhiệm vụ đã hoàn thành
1 bình luận
Ý kiến Hacker News
Tôi hay quay lại xem cái này. Thiết kế dạng poster cũng đẹp, và tôi luôn thấy ngạc nhiên vì khá nhiều “định luật” kiểu này xuất phát từ dữ liệu và nghiên cứu lâu năm của Nielsen Norman Group
Cũng có nhiều khái niệm UX được đặt tên như Jakob's Law hay Norman Door, và ngành UX chịu ảnh hưởng khá lớn từ nhóm quan sát nhỏ này
Tuy vậy, theo tôi thì lý thuyết UX/HCI hiện đại cũng đang ngày càng bị những quy tắc mềm kiểu này níu chân. Đặc biệt là có vẻ đang khái quát hóa quá mức các quy tắc rút ra từ hành vi người dùng trong phương tiện không tương tác như truyền hình
Trang của loạt trước đây khá ổn, nhưng bản này trông hơi thiếu tâm huyết
Ví dụ, chỉ định nghĩa Cognitive Bias theo kiểu từ điển rồi đăng lên như một “định luật” thì nó vừa không phải định luật, vừa không phải khái niệm thực dụng ở dạng đó
Cảm giác này giống một gói để bán poster hơn là một bộ quy tắc mà UI designer hay developer có thể áp dụng, kiểu chọn vài thuật ngữ rồi gắn định nghĩa vào
Mấy tài liệu kiểu này vẫn tốt, và dĩ nhiên cũng không phải quy tắc bất biến tuyệt đối
Tôi không phải designer truyền thống, nên có những bộ best practice hay tập hợp định luật như vậy khá hữu ích. Nó rất hợp làm điểm khởi đầu để AI rà soát hàng loạt theo từng màn hình những quy tắc khó mà luôn giữ hết trong đầu
Cá nhân tôi thấy cũng khá hữu dụng nếu dùng các bộ định luật này như một luồng tắt để sanity check khi xây dựng phần mềm doanh nghiệp, giống như phím tắt format source code
Thực tế tôi đã tải ảnh chụp màn hình UX Laws và ảnh chụp dashboard xuống, rồi bảo ChatGPT và Claude review theo các định luật đó và tạo mockup mới có áp dụng các khuyến nghị
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: Ứng dụng dự báo lướt sóng của https://swellslots.com
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
Vấn đề của các bộ định luật xung đột nhau kiểu này là designer giỏi sẽ trực giác đánh giá theo ngữ cảnh để biết nên bỏ qua quy tắc nào và dùng quy tắc nào
Tôi khá tò mò không biết trong prompt có nêu cụ thể mục đích hay vai trò không, hay cứ để mở như vậy rồi chạy
Định luật số 0 là đừng reflow hay di chuyển qua lại phần tử UI mà tôi đang định bấm
Tất nhiên, giải pháp tốt hơn là developer và designer phải có tay nghề thủ công và lòng tự hào với những chi tiết như vậy. Nhìn những giao diện tệ nhất thì thường có cảm giác chúng chỉ được test trong môi trường backend nối gigabit, nên mới bỏ sót các vấn đề kiểu này
Nếu một công ty được xem như biểu tượng của design mà còn bỏ lỡ cả điều cơ bản đó, thì rõ ràng ở đâu đó trong ngành này đang có vấn đề lớn
Tôi nghĩ đây là tài liệu rất tốt
Nhưng nếu nhìn vào mục số 2 là Choice Overload, trang nói rằng quá nhiều lựa chọn sẽ làm con người bị choáng ngợp, trong khi chính trang đó lại nhét cả 30 “định luật” dưới dạng văn bản và để 30 hình minh họa không liên quan chiếm mất nửa không gian thị giác
Trông đẹp đấy, nhưng đây không phải cấu trúc tốt để học
Với Doherty Threshold, nếu tương tác giữa máy tính và người dùng diễn ra dưới 400ms để không bên nào phải chờ bên nào, thì năng suất tăng lên đáng kể
Vì vậy khi lập trình tôi thích model nhỏ hơn nhiều. Nó đủ nhanh để luồng làm việc giữ được tính thời gian thực
Khi đó tôi sẽ chia việc thành các phần nhỏ hơn và liên tục kiểm chứng, nhờ vậy tôi vẫn chủ động tham gia và mental model cũng không bị lệch
Trước đây tôi từng giao cùng 3 thay đổi code đơn giản cho một model lớn và một model nhỏ, và cả hai đều làm được. Nhưng model lớn chậm hơn 3 lần và đắt hơn 10 lần
Từ đó, tiêu chí Best Model của tôi không còn là model đứng đầu benchmark nữa, mà là model nhỏ nhất, nhanh nhất và rẻ nhất có thể xử lý công việc thực tế một cách ổn định
Nên thêm cả tính ổn định nữa. Đừng thay đổi chỉ để thay đổi, hay cứ liên tục đổi theo mốt mới
Không nên dùng icon vô nghĩa
Hiển thị theo luồng tuyến tính sẽ tốt hơn là giấu thông tin theo dạng cây bắt người dùng phải mở từng hộp một
Cũng không nên trình bày ý kiến như thể đó là sự thật
Khi redesign một nền tảng e-commerce lớn ở châu Á, tôi đã thực sự dùng nhiều định luật ở đây vào chiến lược UX
Cảm ơn vì đã chia sẻ. Tôi làm full stack gần 10 năm rồi, và giờ mới bắt đầu đào sâu hơn vào UI, còn UX thì vẫn chỉ mới chạm bề mặt
Hơi lạc đề một chút, nhưng tôi muốn hỏi liệu có tài liệu nào tổng hợp các UI pattern thường dùng trên mobile hay web app không. Ví dụ như hamburger menu, toast notification và những thứ tương tự
Tôi đang tìm một trang có hệ thống, phạm vi rộng, và có cả ví dụ trực quan
Hồi đó smartphone vẫn đang ở giai đoạn đầu nên phần mobile chưa nhiều, nhưng có vẻ bản mới nhất đã đề cập mobile khá nhiều
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/