Vui lòng gọi 0917.212.969 - 0908.744.256 (Gặp Thanh)

10 quy tắc thiết kế giao diện người dùng tốt cần tuân theo trong mọi dự án thiết kế web

Đã qua rồi thời của các trang web Geocities với HTML không bao giờ thay đổi, được mã hóa cứng. Các trang web và ứng dụng ngày nay rất năng động và có tính tương tác. Công việc của chúng tôi với tư cách là nhà thiết kế là làm cho giao diện mà họ tương tác với thiết kế giao diện người dùng web của chúng tôi gần với lý tưởng nhất có thể.

May mắn thay, có một số quy tắc gần như phổ biến có thể hữu ích. Chúng tôi đã tổng hợp những gì chúng tôi nghĩ là các nguyên tắc thiết kế tốt nhất để bạn có thể nâng cao tất cả các dự án thiết kế web trong tương lai của mình.

1. Làm cho mọi thứ người dùng cần có thể truy cập dễ dàng

Cho dù đó là một loạt công cụ thiết kế dành cho ứng dụng thiết kế web, kho đồ cho nhân vật trong trò chơi điện tử, bảng tính hay bất kỳ thứ gì khác, nếu người dùng không thể tìm thấy thứ họ muốn, họ sẽ thoát khỏi phần mềm của bạn. Các tab làm cho mọi thứ có thể truy cập được. Các phím tắt và chú giải công cụ di chuột cũng vậy.

Chẳng hạn, chúng tôi đã chọn sử dụng các tab để sắp xếp Divi. Tất cả các công cụ bạn cần đều có ngay trong trình tạo, được phân tách theo danh mục. Thanh công cụ có thể truy cập tương tự. Nếu bạn sử dụng WordPress, thanh công cụ quản trị cung cấp cho bạn khả năng truy cập nhanh vào trình chỉnh sửa bài đăng, tùy biến chủ đề, cài đặt plugin, v.v. Các tùy chọn được dán nhãn rõ ràng và bạn không cần phải tìm kiếm chúng.

Một ví dụ khác là các tùy chọn Trợ giúp/Hỗ trợ/Liên hệ. Khi thiết kế giao diện người dùng, cho dù đó là ứng dụng dành cho thiết bị di động, ứng dụng web, trang web WordPress hay bất kỳ thứ gì khác, người dùng của bạn sẽ luôn cần tìm nút Trợ giúp (hoặc nút Liên hệ với bộ phận Hỗ trợ).

Họ sẽ hoàn toàn cần phải liên lạc với bạn tại một số điểm. Đó là lý do tại sao bạn phải luôn đảm bảo đặt các nút trợ giúp ở phía trước và chính giữa. Hãy nhìn Divie. Trong mọi mô-đun, chúng tôi có nút hỗ trợ sẵn sàng cho bạn, trong tầm tay của bạn, bất cứ khi nào bạn cần.

Trên hết, cửa sổ trợ giúp bật lên với video hướng dẫn về bất kỳ tính năng nào bạn đang làm việc. Bằng cách đưa tính năng này vào mô-đun, Divi trở nên dễ tiếp cận hơn và ít gây khó chịu hơn. Ngoài ra, là một phần của giao diện người dùng, vị trí trợ giúp nhất quán trên toàn bộ sản phẩm. Điều này đưa chúng ta đến điểm tiếp theo…

2. Nhất quán

Giống như chúng tôi vừa mới nói, tính nhất quán trong vị trí tính năng trong giao diện người dùng của bạn là rất quan trọng. Nhưng bạn cũng nên lo lắng rằng giao diện người dùng của bạn cũng hoạt động và trông nhất quán trên toàn bộ sản phẩm. Không để menu ở đầu trang này và ở cuối trang khác.

Không sắp xếp lại các mục menu mỗi khi tải. Đảm bảo rằng người dùng của bạn biết mọi thứ ở đâu trên trang web của bạn. Nếu bạn giữ một biểu mẫu liên hệ bên dưới các bài đăng trên blog của mình, đừng quyết định bỏ nó đi. Người dùng sẽ nhận thấy và bị bối rối.

Tính nhất quán cũng bao gồm phông chữ của bạn và thiết kế phải hoạt động từ trang này sang trang khác. Đừng hoán đổi phông chữ tiêu đề/nội dung từ trang này sang trang khác.

Có một ý tưởng thú vị gọi là nguyên tắc ít ngạc nhiên nhất nói rằng nếu bạn khiến người dùng của mình ngạc nhiên về cách thức hoạt động của một thứ gì đó…hãy làm lại nó để nó trực quan hơn.

Ngoài ra, bạn nên đảm bảo rằng giao diện người dùng phù hợp với nền tảng của mình — ứng dụng iOS hoạt động khác trong một số trường hợp so với Android. Các trang web dành cho máy tính để bàn có các nhu cầu khác với các trang web dành cho thiết bị di động về menu, phòng trưng bày và thậm chí cả phần kiểm tra sản phẩm. Tính nhất quán có nghĩa là bạn không làm người dùng thất vọng bằng cách khiến họ phải tìm ra những việc cần làm trên trang web của bạn.

3. Rõ ràng

Điều này có vẻ giống như sự lặp lại ở trên, nhưng sự rõ ràng và nhất quán thì khác. Rõ ràng có nghĩa là bạn muốn người dùng của mình luôn biết phải làm gì. Theo một số cách, điều này cũng được đưa vào thiết kế UX vì nó làm giảm sự thất vọng đối với người dùng của bạn, đồng thời tăng tỷ lệ giữ chân và giảm tỷ lệ thoát.

Sự rõ ràng là lý do khiến thiết kế web tối giản (và ở một mức độ nào đó theo chủ nghĩa thô bạo) trở nên phổ biến. Mọi người không nhầm lẫn về mục đích của bất kỳ trang hoặc trang nào vì không có (hoặc ít) sự lộn xộn. Bạn muốn cung cấp trải nghiệm ngược lại với Ling's Cars.

Một cách để đạt được sự rõ ràng là chuyển từ bước này sang bước khác trên các trang khác nhau. Thay vì yêu cầu quy trình thanh toán cuộn xuống trang — hoặc nằm trong một phần hoặc hộp — yêu cầu người dùng của bạn điều hướng từ Trang Sản phẩm đến trang Giỏ hàng đến Trang Thanh toán đến trang Chọn Thanh toán của bạn đến trang Đặt hàng để một trang Xác nhận. (Amazon làm điều này, như bạn có thể thấy trong hình bên dưới).

Họ sẽ biết chính xác vị trí của họ trong quá trình này, loại bỏ mọi sự mơ hồ. Điều này đặc biệt quan trọng đối với người dùng di động, vì diện tích màn hình ở mức cao.
Tìm hiểu thêm Công ty thiết kế website uy tín nhất hiện nay

4. Đưa ra phản hồi

Điều cuối cùng mà người dùng muốn là không hiểu chuyện gì đang xảy ra. Nếu họ nhấn một nút, hãy cung cấp dấu hiệu cho thấy nút đó đã được nhấn. Bạn có thể làm điều đó theo nhiều cách. Bạn có thể tạo hiệu ứng động cho nút, làm cho nút có vẻ chìm vào trong trang. Các biểu tượng đang tải (như Bánh xe cầu vồng của MacOS) cung cấp phản hồi, “Chúng tôi đang làm việc theo yêu cầu của bạn” mà không cần phải nói ra.

Nếu bạn cho phép người dùng tải tệp lên (chẳng hạn như với Dropbox hoặc Google Drive), hãy cho biết thời gian còn lại. Cung cấp cửa sổ bật lên hoặc phương thức cho họ biết hành động của họ đã thành công giúp giảm bớt sự thất vọng và nhầm lẫn.

Thực sự, bất cứ khi nào người dùng thực hiện bất kỳ hành động nào trong giao diện của bạn, chỉ cần một xác nhận nhỏ cũng có thể tạo nên sự khác biệt về trải nghiệm tốt và trải nghiệm mờ nhạt.

5. Sử dụng nhận biết, không gửi nhớ

Ngược lại với kỹ năng làm bài kiểm tra tốt, bạn muốn người dùng của mình nhận ra mọi thứ về trang web của bạn khi họ nhìn thấy nó. Họ không cần phải suy nghĩ về nó và nhớ lại thông tin. Hơn bất cứ điều gì, bạn đang hợp lý hóa giao diện của mình để mọi phần đều trực quan và di chuyển từ điểm này sang điểm khác.

Điều này có thể được thực hiện bằng cách sử dụng các biểu tượng dễ nhận biết như chúng tôi đã đề cập ở trên. Mọi người nhận ra các biểu tượng nhất định cho những thứ nhất định.

Nó cũng có thể được thực hiện bằng cách sử dụng các chuyến tham quan ảo để hướng dẫn người dùng thông qua một quy trình, ngay cả khi đó không phải là lần đầu tiên của họ. Họ sẽ nhận ra quy trình khi phương thức đầu tiên xuất hiện và họ sẽ không phải tiêu tốn năng lượng để nhớ lại chính xác cách thực hiện những hành động đó.

Bạn cũng có thể thực hiện điều này thông qua thông báo được sắp xếp hợp lý để nhắc nhở người dùng của bạn về những gì trên trang web của bạn làm những gì. Chúng tôi thực hiện điều này trong Divi bằng chú giải công cụ di chuột đơn giản — ngay cả khi ai đó không nhớ chức năng của biểu tượng, chúng tôi sẽ hướng dẫn họ đến chức năng của nó. Sau đó, họ sẽ nhận ra biểu tượng. Hoặc ít nhất là chú giải công cụ nếu họ di chuột lại. Hoặc thậm chí là quá trình di chuột để lấy thông tin.

6. Chọn cách mọi người sẽ tương tác trước

Bạn biết điều tồi tệ nhất là gì không? Đẩy vào một cửa kéo. Đặc biệt là khi bạn vừa đẩy vào cái trước để đến cái đó. Nhà thiết kế của tòa nhà đó đã làm cho giao diện người dùng không nhất quán, vì vậy bạn không biết phải làm những gì mình cần làm như thế nào.

Điều gì về việc nhấn một cái gì đó trông giống như một nút không phải, nhưng vẫn chờ phản hồi? Chà, đó là bởi vì những nhà thiết kế đó đã không tính đến cách người dùng của họ sẽ tương tác với sản phẩm của họ. Vì vậy, khi bạn đang thiết kế giao diện người dùng của mình, hãy chọn một chuyển động (có thể là hai) và gắn bó với nó.

Trên thiết bị di động, điều đó có xu hướng được vuốt. Nhìn vào Snapchat. Gần như mọi hành động đều được thực hiện bằng cách vuốt, bao gồm cả việc truy cập cài đặt và hồ sơ của bạn. Bạn có thể vuốt xuống trên Snapchat để nhìn thấy chính mình, vuốt sang trái để đến các cuộc trò chuyện, vuốt sang phải để đến các câu chuyện và vuốt lên để xem những kỷ niệm của bạn (hoặc bất kỳ thứ gì chúng được gọi trong tuần này). Họ đã chọn cách họ muốn người dùng tương tác với sản phẩm của họ và thiết kế giao diện người dùng của họ để phù hợp với điều đó. Không phải hướng ngược lại.

Khi bạn đang thiết kế giao diện người dùng của mình, hãy chọn xem bạn sẽ sử dụng menu và vòi, biểu tượng, thao tác vuốt và cử chỉ hay thứ gì khác hoàn toàn. Alexa và Siri sử dụng đầu vào bằng giọng nói làm tương tác giao diện người dùng chính của họ.

Cách họ cung cấp thông tin và thực hiện các nhiệm vụ của mình được thiết kế xung quanh đầu vào cụ thể đó. Và với tư cách là người dùng, bạn biết phải làm gì bằng trực giác vì thông tin đó đã được đặt ra cho bạn ngay từ đầu. Các nhà thiết kế bảo bạn phải làm gì, và bạn đã làm. Người dùng của bạn sẽ đánh giá cao việc bạn làm điều tương tự cho họ.

7. Tuân theo tiêu chuẩn thiết kế

Câu nói cũ nếu nó không bị hỏng, đừng sửa nó được áp dụng ở đây. Thực sự không cần phải cố gắng hồi sinh một cái gì đó nếu tiêu chuẩn hoạt động. Điều đó đi từ việc sử dụng biểu tượng đến vị trí tiêu chuẩn của các yếu tố. Bạn không muốn đi ngược lại những gì người dùng của bạn mong đợi.

Mọi người biết rằng dấu hỏi (?) biểu thị sự giúp đỡ. Vì vậy, đừng sử dụng dấu chấm than (!). Nếu bạn muốn người dùng tìm thấy menu trên thiết bị di động của mình, hãy sử dụng biểu tượng bánh hamburger (ba dòng xếp chồng lên nhau), không phải dạng lưới.

Hãy nghĩ về các thanh tìm kiếm. Chúng có xu hướng ở những vị trí giống nhau trên hầu hết các trang web: đầu thanh bên hoặc cuối menu tiêu đề. Nếu không có, trung tâm của phần trên cùng của trang. Nếu bạn quyết định bao gồm trường tìm kiếm duy nhất ở cuối thanh bên, chân trang hoặc bên dưới văn bản của các bài đăng trên blog của bạn, mọi người sẽ không biết tìm ở đâu. Ngay cả khi bạn xác định nó bằng biểu tượng kính lúp tiêu chuẩn.

Không có gì sai khi suy nghĩ sáng tạo và tìm kiếm một thiết kế mới và sáng tạo, nhưng điều đó không có nghĩa là thiết kế đó khó sử dụng.

8. Các vấn đề về thứ bậc các mục

Không, chúng tôi không có ý nói rằng Đất, Gió, Nước hay Lửa là ông chủ của những thứ khác. Ý chúng tôi là các thành phần trên trang của bạn cần phải có một hệ thống phân cấp rõ ràng cho cả tiện ích và cách người dùng xem trang.

Về cơ bản, bạn muốn đảm bảo rằng các chức năng quan trọng nhất nằm ở đầu trang tương ứng của chúng. Ngoài ra, loại phân cấp này có thể dẫn người dùng xuống trang một cách hữu cơ, dẫn người dùng qua dịch vụ của bạn.

Các yếu tố lớn giảm kích thước khi bạn di chuyển qua quy trình là dấu hiệu cho thấy mức độ quan trọng và thứ tự. Màu sắc và độ tương phản cũng vậy. Việc sử dụng khoảng trắng cũng rất quan trọng, vì sự lộn xộn có thể cản trở tiến trình của người dùng và khiến người dùng không chú ý đến mục đích của trang. Đường kẻ rõ ràng, nhiều khoảng trống và các yếu tố được xác định rõ ràng có thể chỉ dẫn trực quan cho người dùng của bạn cách di chuyển qua giao diện người dùng của bạn mà không cần bất kỳ tài liệu hoặc chú thích nào.

Một nguyên tắc nhỏ là bạn muốn giữ cho mọi thứ trôi chảy từ trái sang phải, từ trên xuống dưới.

9. Giữ mọi thứ đơn giản

Nhìn vào mẫu liên hệ này:



Cả hai đều là hình thức liên lạc để thực hiện một yêu cầu. Một trong số này không có vấn đề gì để điền vào, trong khi cái còn lại hơi đau đầu hơn một chút. Bên ngoài biểu mẫu của chính phủ, thiết kế của biểu mẫu dưới cùng không dành cho người dùng mà dành cho quản trị viên.

Đó không phải là công việc của bạn. Công việc của bạn là làm cho mọi thứ trở nên trơn tru nhất có thể cho người dùng. Và một trong những cách tốt nhất để làm điều đó là cắt bỏ bất cứ thứ gì không thực sự cần thiết.

10. Giữ cho người dùng của bạn tự do và kiểm soát

Điều cuối cùng chúng tôi muốn chạm vào — và điều cuối cùng bạn muốn làm với giao diện người dùng của mình — là giành quyền kiểm soát từ người dùng. Hoặc để làm cho họ cảm thấy bị hạn chế hoặc hạn chế bởi thiết kế của bạn. Bạn muốn trao quyền cho họ và giao diện người dùng của bạn phải cho phép họ thực hiện các hành động họ muốn. Có hai phần của quy tắc này: bối cảnh và sự cho phép.

Đầu tiên, bất kỳ hành động nào người dùng cần thực hiện phải được đặt gần những gì họ muốn hành động. Nếu họ cần chỉnh sửa bài đăng, nút chỉnh sửa phải ở gần nút lưu, xuất bản/gửi, xem trước. Trên thực tế, tùy chọn tốt hơn là dành cho menu ngữ cảnh cho tất cả các hành động mà người dùng có thể thực hiện đối với bất kỳ mục (hoặc trang) cụ thể nào.

Nếu bạn nhất quán trong giao diện người dùng của mình, như chúng ta đã nói ở trên, người dùng của bạn sẽ hiểu rằng các menu ngữ cảnh hoặc thanh công cụ này sẽ luôn có toàn bộ danh sách hành động cho bất kỳ phần tử cụ thể nào.



Ngoài ra, giao diện người dùng của bạn phải luôn khiến người dùng cảm thấy như thể họ có thể thoát ra hoặc hoàn nguyên bất kỳ hành động nào họ thực hiện. Trong khi bạn thiết kế giao diện người dùng, họ sẽ sử dụng nó. Vì vậy, họ cần được phép (hoặc thậm chí có thể là tự do) để làm những gì họ cần để hoàn thành công việc.

Làm điều này có thể đơn giản như thêm nút hủy vào mọi trang thanh toán thương mại điện tử của bạn (vì việc nhấn nút quay lại của trình duyệt có thể khiến mọi thứ trở nên rắc rối). Có thể đó là một tính năng hoàn tác để họ cảm thấy rằng việc thử nghiệm là ổn. Hoặc lịch sử sửa đổi cho các dự án quy mô lớn (chẳng hạn như trong Google Drive hoặc WordPress hoặc Git).



Khi người dùng của bạn cảm thấy tự do và không bị ràng buộc, rõ ràng là bạn đã tuân theo một số nguyên tắc thiết kế giao diện người dùng tốt. Giao diện người dùng đã sẵn sàng chưa?

Chơi xấu. Tôi biết, xin lỗi. Nhưng với các quy tắc giao diện người dùng này, bạn hoàn toàn sẵn sàng để thực hiện dự án thiết kế web tiếp theo của mình. Mặc dù một số trong số này có thể áp dụng nhiều hơn cho một số dự án so với các dự án khác, nhưng giao diện người dùng tốt là giao diện người dùng tốt và giao diện người dùng tốt dẫn đến trải nghiệm người dùng tốt. Nhưng đó là một chủ đề cho một bài viết hoàn toàn khác.