Học cách thiết kế với sự chú trọng đến nhu cầu và kỳ vọng của người dùng bằng cách áp dụng Mười Nguyên Tắc Giao Diện Người Dùng của Jakob Nielsen và Rolf Molich. Những tiêu chí này đã được phản ánh trong nhiều sản phẩm được thiết kế bởi một số công ty thành công nhất trên thế giới như Apple, Google và Adobe. Bằng chứng tiếp tục cho thấy làm thế nào các nhóm thiết kế của họ tích hợp những quy tắc này vào quy trình thiết kế của họ được phản ánh trong các hướng dẫn giao diện người dùng được công bố và chia sẻ bởi các công ty này. Bài viết này sẽ hướng dẫn bạn cách tuân thủ mười quy tắc chung trong công việc thiết kế của bạn để bạn có thể cải thiện khả năng sử dụng, tính hữu ích và sự khao khát của thiết kế của bạn.
10 Nguyên tắc thiết kế giao diện người dùng của Nielsen và Molich
Jakob Nielsen, một chuyên gia hàng đầu về khả năng sử dụng trang web và là đối tác của Nielsen Norman Group, cùng với Rolf Molich, một chuyên gia khả năng sử dụng khác, đã thiết lập một danh sách gồm mười nguyên tắc thiết kế giao diện người dùng vào những năm 1990. Lưu ý rằng có sự trùng lặp đáng kể giữa các nguyên tắc của Nielsen và Molich và ‘tám quy tắc vàng’ của Ben Shneiderman. 10 nguyên tắc này tiếp tục phát triển từ tám quy tắc vàng của Shneiderman 4 năm sau khi Shneiderman công bố ban đầu.
1. Hiển thị trạng thái hệ thống: Người dùng luôn được thông báo về hoạt động của hệ thống thông qua trạng thái dễ hiểu và dễ nhìn thấy được hiển thị trên màn hình trong một khoảng thời gian hợp lý.
2. Sự phù hợp giữa hệ thống và thế giới thực: Nhà thiết kế cần cố gắng phản ánh ngôn ngữ và khái niệm mà người dùng sẽ gặp trong thế giới thực dựa trên đối tượng người dùng mục tiêu của họ. Trình bày thông tin theo thứ tự logic và dựa trên kỳ vọng của người dùng dựa trên kinh nghiệm thực tế của họ sẽ giảm căng thẳng nhận thức và làm cho hệ thống dễ sử dụng hơn.
3. Sự kiểm soát và tự do của người dùng: Cung cấp cho người dùng không gian kỹ thuật số cho phép các bước lùi lại, bao gồm việc hoàn tác các hành động trước đó.
4. Sự nhất quán và tiêu chuẩn: Nhà thiết kế giao diện cần đảm bảo cả yếu tố đồ họa và thuật ngữ được duy trì trên các nền tảng tương tự. Ví dụ, một biểu tượng đại diện cho một danh mục hoặc khái niệm cụ thể không nên đại diện cho một khái niệm khác khi sử dụng trên một màn hình khác.
5. Ngăn chặn lỗi: Khi có thể, thiết kế hệ thống sao cho số lượng lỗi tiềm ẩn được giữ ở mức tối thiểu. Người dùng không thích phải phát hiện và khắc phục các vấn đề, có thể vượt quá khả năng chuyên môn của họ. Loại bỏ hoặc đánh dấu các hành động có thể dẫn đến lỗi là hai phương pháp có thể đạt được mục tiêu ngăn chặn lỗi.
6. Sự nhận dạng thay vì nhớ: Giảm tải trí tuệ bằng cách duy trì thông tin liên quan đến nhiệm vụ trong giao diện khi người dùng khám phá. Sự chú ý của con người có giới hạn và chúng ta chỉ có thể duy trì khoảng năm mục trong bộ nhớ ngắn hạn của chúng ta cùng một lúc. Do hạn chế của bộ nhớ ngắn hạn, nhà thiết kế cần đảm bảo người dùng có thể đơn giản sử dụng sự nhận dạng thay vì phải nhớ thông tin qua các phần của cuộc trò chuyện. Nhận dạng một cái gì đó luôn dễ hơn việc nhớ vì nhận dạng liên quan đến việc nhận biết các tín hiệu giúp chúng ta tiếp cận bộ nhớ rộng lớn và cho phép thông tin liên quan nổi lên. Ví dụ, chúng ta thường thấy định dạng câu hỏi trắc nghiệm dễ dàng hơn câu trả lời ngắn trong một bài kiểm tra vì nó chỉ yêu cầu chúng ta nhận dạng câu trả lời chứ không phải nhớ nó từ bộ nhớ của chúng ta.
7. Tính linh hoạt và hiệu quả trong việc sử dụng: Với việc sử dụng nhiều hơn, người dùng yêu cầu ít hơn các tương tác cho phép điều hướng nhanh hơn. Điều này có thể được đạt được bằng cách sử dụng viết tắt, phím chức năng, các lệnh ẩn và các cơ sở dữ liệu macro. Người dùng nên có khả năng tùy chỉnh hoặc điều chỉnh giao diện để phù hợp với nhu cầu của họ để các hành động thường xuyên có thể được đạt được thông qua các phương tiện thuận tiện hơn.
8. Thiết kế thẩm mỹ và tối giản: Giữ rác rưởi ở mức tối thiểu. Tất cả thông tin không cần thiết cạnh tranh với tài nguyên chú ý hạn chế của người dùng, điều này có thể làm trở ngại cho việc ghi nhớ thông tin liên quan của người dùng. Do đó, màn hình phải được giảm xuống chỉ còn các thành phần cần thiết cho các nhiệm vụ hiện tại, đồng thời cung cấp các phương tiện điều hướng rõ ràng và không đồng nghĩa để điều hướng đến nội dung khác.
9. Giúp người dùng nhận ra, chẩn đoán và khắc phục lỗi: Nhà thiết kế nên giả định rằng người dùng không thể hiểu thuật ngữ kỹ thuật, do đó, thông báo lỗi hầu như luôn luôn phải được diễn đạt bằng ngôn ngữ thông thường để đảm bảo không có gì bị mất trong quá trình dịch.
10. Trợ giúp và tài liệu hướng dẫn: Lý tưởng nhất, chúng ta muốn người dùng điều hướng hệ thống mà không cần sử dụng tài liệu hướng dẫn. Tuy nhiên, tùy thuộc vào loại giải pháp, tài liệu có thể là cần thiết. Khi người dùng cần trợ giúp, đảm bảo nó dễ tìm thấy, cụ thể cho công việc hiện tại và được sắp xếp bằng cách sẽ hướng dẫn họ qua các bước cần thiết để giải quyết vấn đề đang gặp phải.
Công ty Google Inc., một công ty công nghệ đa tỷ đô, chắc chắn tạo ra những thiết kế phản ánh những nguyên tắc trên. Jon Wiley, người thiết kế trưởng của Google Search vào năm 2012 đã từng nói:
“Khi tôi nghĩ về thiết kế và tạo ra những trải nghiệm người dùng tuyệt vời, tôi thường nghĩ đến nó dưới ba khía cạnh: khả năng sử dụng, tiện ích và sự hấp dẫn.”
10 nguyên tắc thiết kế giao diện người dùng của Nielsen và Molich đáp ứng ba yếu tố quan trọng của trải nghiệm người dùng một cách rất tốt, điều này có nghĩa là bạn có thể cải thiện trải nghiệm người dùng của mình bằng cách tuân thủ những nguyên tắc này!
Tìm hiểu cách Adobe tích hợp các nguyên tắc thiết kế giao diện người dùng của Nielsen và Molich
Adobe Systems Incorporated, công ty phần mềm máy tính lớn của Bắc Mỹ, là một ví dụ tuyệt vời về cách thiết kế phản ánh các nguyên tắc giao diện người dùng của Nielsen và Molich có thể dẫn đến thành công cho một công ty. Một trong những sản phẩm phổ biến nhất của họ, Adobe Photoshop, một trình chỉnh sửa đồ họa raster, thể hiện những đặc điểm của một giao diện người dùng được thiết kế tốt phản ánh các nguyên tắc này.
Chúng tôi sẽ xem xét kỹ hơn cách Adobe Photoshop phản ánh mỗi nguyên tắc này để truyền cảm hứng cho bạn để cải thiện tính sử dụng, tính hữu ích và tính hấp dẫn của thiết kế của riêng bạn bằng cách kết hợp 10 quy tắc cơ bản vào công việc của bạn.
1. Tính hiển thị của trạng thái hệ thống
Photoshop làm rất tốt việc cho phép người dùng biết điều gì đang xảy ra với chương trình bằng cách cho thấy một cách hình ảnh những gì hành động của họ đã dẫn đến trong mọi trường hợp có thể. Ví dụ, khi người dùng di chuyển các lớp trong bảng Layers, họ có thể thấy được lớp được đại diện như thể được kéo theo vật lý trong không gian.
2. Phù hợp với thế giới thực
Một ví dụ về Photoshop bắt chước thế giới thực trong thuật ngữ và biểu tượng mà người dùng mục tiêu của họ sẽ hiểu, là nơi họ thiết kế cấu trúc thông tin và thuật ngữ để phản ánh cùng cách chúng ta sẽ sử dụng trong lĩnh vực nhiếp ảnh hoặc truyền thông in ấn. Các khái niệm và thuật ngữ quen thuộc như RGB, Hue/Saturation/Brightness và CMYK được sử dụng để đại diện cho màu sắc, trong khi các công cụ khác như công cụ dodge và công cụ burn bắt chước kỹ thuật phòng xử ánh sáng truyền thống cho ảnh.
3. Kiểm soát và tự do của người dùng
Photoshop rất tốt trong việc cung cấp cho người dùng kiểm soát ở mọi bước. Khi người dùng thay đổi hình ảnh hoặc thêm các hiệu ứng nghệ thuật khác nhau, họ có thể nhanh chóng và dễ dàng quay trở lại bước trước nếu có lỗi xảy ra, ví dụ.
4. Sự nhất quán và tiêu chuẩn
Photoshop duy trì một bố cục và giao diện tiêu chuẩn khi đến thanh menu. Họ cũng sử dụng thuật ngữ phổ biến như “New…”, “Open…”, “Save As…”, vv.
5. Ngăn chặn lỗi
Để ngăn ngừa người dùng mắc lỗi, Photoshop cung cấp mô tả hoặc nhãn ngắn cho các công cụ khi người dùng di chuột qua để đảm bảo họ sử dụng công cụ phù hợp cho công việc hiện tại.
6. Nhận dạng thay vì ghi nhớ
Cho dù đó là chọn một bộ lọc nghệ thuật từ menu hoặc mở tệp hình ảnh mới, Photoshop cung cấp một xem trước cho người dùng để chọn đúng. Điều này cho phép người dùng nhìn thấy một cách trực quan những gì họ đang tìm kiếm thay vì phải ghi nhớ tên hoặc gõ để tìm kiếm. Có lẽ bạn đã gặp các chương trình chỉnh sửa ảnh khác yêu cầu bạn ghi nhớ và gõ tên tệp bạn muốn làm việc. Điều này thật khó để nhớ vì thường là một cái gì đó như: 29412_09342.JPG.
7. Tính linh hoạt và hiệu quả sử dụng
Một trong những lý do mà người dùng thường xuyên yêu thích Photoshop là tính linh hoạt và hiệu quả của nó. Người dùng có thể tận dụng tính linh hoạt bằng cách tổ chức và thêm vào không gian làm việc của mình, cũng như làm cho mọi thứ hiệu quả hơn bằng cách lưu lại cho sử dụng trong tương lai.
8. Thiết kế thẩm mỹ và tối giản
Thanh công cụ trong Photoshop chỉ hiển thị các biểu tượng và được sắp xếp gọn gàng để giúp giữ gìn tối thiểu rác rối và duy trì một thiết kế tối giản.
9. Giúp người dùng nhận diện, chẩn đoán và khắc phục lỗi
Khi có lỗi xảy ra, Photoshop cung cấp hộp thoại cho người dùng biết đã xảy ra lỗi gì và cách khắc phục nó.
10. Trợ giúp và tài liệu
Trợ giúp và tài liệu có thể được truy cập dễ dàng qua thanh menu chính. Từ đó, bạn có thể tìm thấy nhiều chủ đề trợ giúp và hướng dẫn về cách sử dụng đầy đủ chương trình.
10 Bước để Cải thiện Khả năng Sử dụng, Tính hữu ích và Sự hấp dẫn bằng việc Áp dụng Nguyên tắc Thiết kế Giao diện Người dùng của Nielsen và Molich
Là một nhà thiết kế, bạn nên có khả năng phê phán các thiết kế của chính mình cũng như công việc của người khác với lý do được hỗ trợ tốt. Áp dụng 10 nguyên tắc của Nielsen và Molich trong đánh giá thiết kế giao diện sẽ giúp bạn nhận ra bất kỳ vấn đề tiềm năng nào cũng như hướng dẫn bạn và nhóm của bạn trong việc tạo ra những trải nghiệm tốt hơn cho người dùng của bạn. Đây là một bảng làm việc để bạn thực hành khi bạn học cách nhận biết xem liệu những quy tắc này đã được áp dụng hay chưa và khi nào những quy tắc này đã bị vi phạm. Cuối cùng, đến lúc cải thiện trang web hoặc ứng dụng bằng cách thực hiện thêm 10 nguyên tắc này.
Download PDF tại đây.
Ý nghĩa chính
Khi bạn tuân thủ 10 nguyên tắc giao diện người dùng của Nielsen và Molich, bạn sẽ thiết kế với khả năng sử dụng, tiện ích và sự hấp dẫn trong tâm trí. Giống như các nhà thiết kế của các công ty thành công như Apple, Google và Adobe, bạn sẽ có thể hỗ trợ quyết định thiết kế của mình bằng các tiêu chí đánh giá đã được nghiên cứu kỹ càng và tự tin tạo ra những thiết kế vừa sử dụng được vừa đẹp mắt. Để rèn kỹ năng nhận diện 10 quy tắc này, hãy tiến hành làm bài tập được mô tả trong tệp đính kèm ở phần trên.
Tài liệu tham khảo và Nơi tìm hiểu thêm
Để tìm hiểu thêm về ‘Nâng cao khả năng giải thích của các tiêu chuẩn sử dụng’, xin vui lòng xem
Khóa học: Các mẫu thiết kế giao diện người dùng cho phần mềm thành công
Hình ảnh chính: Barry Schwartz. Flickr, CC BY-NC 2.0
Nguồn tham khảo: https://www.interaction-design.org/literature/topics/ui-design
Tìm hiểu thêm về chúng tôi tại: TRANHUNG Digital
