16 nguyên tắc nhỏ trong thiết kế UI, mà có thể ảnh hưởng lớn đến giao diện

Tuy nhiên, đứng ở vai trò là người thiết kế, chúng ta cần có các nguyên tắc cơ bản để nương theo, để áp dụng và tạo ra những sản phẩm đẹp mặt. Bài viết này sẽ giới thiệu đến các bạn 16 nguyên tắc nhỏ trong thiết kế UI nhưng có thể ảnh hưởng lớn đến giao diện.

Đây là 16 nguyên tắc được tác giả Adham Dannaway đưa ra, các bạn có thể xem bài viết gốc ở đây: 16-ui-design-rules

1. Sử dụng khoảng trống để phân cách giữa các nhóm đối tượng

Một thiết kế thiếu khoảng trống giữa các nhóm nội dung sẽ làm cho giao diện trở nên lộn xộn và khó hiểu. Khi các yếu tố trong thiết kế bị chèn ép quá gần nhau, mắt người dùng sẽ gặp khó khăn trong việc phân biệt các phần thông tin khác nhau, dẫn đến cảm giác bối rối và khó chịu khi tiếp nhận thông tin. Việc không có đủ khoảng trống sẽ làm cho giao diện trông rối rắm, khiến người dùng phải tốn nhiều thời gian và công sức hơn để tìm kiếm thông tin họ cần.

Do đó, việc tăng cường các không gian, khoảng trống trong thiết kế là rất cần thiết. Khoảng trống, hay còn gọi là "khoảng trắng" (white space), không chỉ giúp tạo ra sự thoáng đãng, mà còn giúp nhóm các nội dung liên quan lại với nhau, làm nổi bật các phần quan trọng và cải thiện trải nghiệm người dùng. Khi các yếu tố trong thiết kế được bố trí một cách có tổ chức với khoảng trống hợp lý, người dùng sẽ dễ dàng theo dõi và tiếp nhận thông tin hơn.

Khoảng trống cũng đóng vai trò quan trọng trong việc tạo ra sự cân đối và hài hòa cho toàn bộ thiết kế. Nó giúp giảm bớt cảm giác ngột ngạt, tạo ra sự thoải mái và dễ chịu cho người dùng khi tiếp xúc với giao diện. Bên cạnh đó, việc sử dụng khoảng trống hợp lý còn giúp hướng dẫn người dùng qua giao diện một cách tự nhiên, dẫn dắt họ đến các nội dung quan trọng một cách hiệu quả hơn.

Bạn có thể nhóm các phần tử liên quan bằng các phương pháp sau:

• Đặt các phần tử liên quan vào cùng một vùng chứa
• Giữ khoảng cách giữa các phần tử liên quan gần nhau
• Làm cho các phần tử liên quan trông giống nhau
• Căn chỉnh các phần tử liên quan theo một đường liên tục

Như hình ví dụ, bạn có thấy sự khác nhau rõ rệt giữ hình bên trái và bên phải, khi hình bên phải được bố trí khoảng trông tốt hơn sẽ giúp thiết kế trông thoáng và dễ nhìn hơn.

2. Đảm bảo tính nhất quán

Khi các thành phần trong một thiết kế trông tương tự nhau, người dùng sẽ tự nhiên hiểu rằng chúng hoạt động theo cách giống nhau. Điều này không chỉ giúp duy trì tính nhất quán về mặt giao diện mà còn đảm bảo sự đồng bộ trong cách thức tương tác. Sự nhất quán trong thiết kế là yếu tố then chốt giúp người dùng cảm thấy thoải mái và tự tin khi sử dụng sản phẩm.

Khi người dùng nhận thấy các thành phần có cùng kiểu dáng, họ sẽ dựa vào những kinh nghiệm đã có để dự đoán cách thức hoạt động của những thành phần đó, giảm bớt thời gian và nỗ lực học hỏi.

Việc duy trì tính nhất quán còn giúp tạo ra một trải nghiệm người dùng mượt mà và liền mạch. Khi người dùng không phải liên tục học lại cách hoạt động của các thành phần khác nhau, họ sẽ cảm thấy tự tin hơn khi tương tác với sản phẩm. Điều này không chỉ làm tăng hiệu quả sử dụng mà còn nâng cao mức độ hài lòng của người dùng.

Ngoài ra, tính nhất quán còn mang lại lợi ích trong việc xây dựng thương hiệu và nhận diện sản phẩm. Một giao diện đồng bộ với các yếu tố thiết kế nhất quán sẽ giúp tạo nên một bản sắc thương hiệu rõ ràng và chuyên nghiệp. Người dùng sẽ dễ dàng nhận diện và ghi nhớ sản phẩm, từ đó tạo nên một ấn tượng mạnh mẽ và tích cực về thương hiệu.

Ví dụ: như hình trên là 2 kiểu sử dụng khác nhau, dòng trên sử dụng ko đồng nhất, có lúc dùng icon kết hợp với số, có lúc dùng icon kết hợp với chữ, icon lúc thì dùng dạng line hoặc fille, ko có sự đồng nhất như ở dòng thứ 2

Nếu tất cả các nút bấm trên một giao diện hoặc một khu vực chức năng cụ thể có cùng màu sắc, kích thước, và hình dạng, người dùng sẽ dễ dàng nhận biết và sử dụng chúng mà không cần phải dừng lại để suy nghĩ hoặc thử nghiệm. Điều này giúp giảm thiểu các sai sót và lỗi trong quá trình sử dụng sản phẩm.

3. Các thành phần trông tương tự nhau cần có chức năng và cách hoạt động giống nhau

Trong cùng một thiết kế, khi các thành phần có kiểu dáng tương tự nhau về màu sắc, kích thước, màu nền, và các yếu tố thị giác khác, người dùng sẽ dễ dàng hình dung rằng chúng thuộc về cùng một cụm chức năng hoặc có cùng một mục đích sử dụng. Ví dụ, nếu tất cả các nút bấm trên giao diện đều có màu xanh và kích thước giống nhau, người dùng sẽ mặc nhiên hiểu rằng tất cả chúng thực hiện các hành động tương tự hoặc liên quan đến nhau.

Tuy nhiên, việc sử dụng cùng một kiểu dáng cho các thành phần khác nhau có thể dẫn đến sự nhầm lẫn nếu chúng thực hiện các chức năng khác nhau. Khi đó, người dùng có thể bị lúng túng, không biết chính xác mỗi thành phần thực hiện nhiệm vụ gì, và dễ dàng mắc phải những sai lầm khi sử dụng giao diện.

Để tránh những nhầm lẫn này, người thiết kế cần phải tạo ra sự phân biệt rõ ràng giữa các thành phần có chức năng khác nhau. Điều này có thể được thực hiện bằng cách sử dụng các yếu tố thiết kế khác biệt. Ví dụ, sử dụng màu sắc khác nhau cho các nút có chức năng khác nhau, thay đổi kích thước hoặc hình dạng của các biểu tượng, hoặc áp dụng các kiểu nền khác nhau để phân biệt các nhóm chức năng.

Ngoài ra, việc sử dụng các nhãn (label) rõ ràng và mô tả ngắn gọn cũng là một cách hiệu quả để giúp người dùng hiểu được chức năng của từng thành phần. Các nhãn này nên được đặt gần các thành phần tương ứng, sử dụng ngôn ngữ dễ hiểu và trực quan để người dùng không cần phải đoán chức năng của chúng.

Việc tạo ra sự khác biệt rõ ràng giữa các thành phần trong thiết kế không chỉ giúp tránh nhầm lẫn mà còn cải thiện trải nghiệm người dùng. Người dùng sẽ dễ dàng nhận biết và sử dụng các chức năng một cách hiệu quả hơn, giảm thiểu thời gian học cách sử dụng giao diện và tăng cường sự hài lòng khi tương tác với sản phẩm.

Như hình trên, khung viền bao quanh các biểu tượng đặt cùng màu nền với nút “Book Now” -> sẽ dễ làm cho người dùng hiểu là cùng chức năng -> nhưng thực tế ko phải, do đó cần tách biệt, tránh trùng nhau

4. Tính phân cấp thông tin rõ ràng

Trong một thiết kế, thông tin thường được chia thành hai loại chính: thông tin chính và thông tin phụ. Thông tin chính là những yếu tố quan trọng nhất, mang tính cốt lõi và cần được người dùng chú ý ngay lập tức. Thông tin phụ, ngược lại, là những chi tiết bổ sung, cung cấp thêm ngữ cảnh hoặc hỗ trợ cho thông tin chính.

Nhiệm vụ của người thiết kế là làm nổi bật thông tin chính để người dùng có thể dễ dàng nhận ra và tiếp cận. Điều này có thể được thực hiện bằng nhiều cách khác nhau. Sử dụng kích thước lớn hơn cho văn bản, màu sắc tương phản, và vị trí trung tâm trên giao diện là một số phương pháp phổ biến. Ví dụ, tiêu đề bài viết, giá sản phẩm, hoặc nút gọi hành động (call-to-action) thường được làm nổi bật để thu hút sự chú ý của người dùng.

Trong khi đó, thông tin phụ cần được thiết kế sao cho không chiếm quá nhiều sự chú ý, nhưng vẫn dễ dàng truy cập khi cần. Thông tin này thường được trình bày bằng cỡ chữ nhỏ hơn, màu sắc nhẹ nhàng hơn, hoặc đặt ở những vị trí ít nổi bật hơn trên trang. Điều này giúp đảm bảo rằng thông tin phụ không làm phân tán sự chú ý của người dùng khỏi thông tin chính, nhưng vẫn ở đó để cung cấp thêm chi tiết khi người dùng muốn tìm hiểu thêm.

Việc cân bằng giữa thông tin chính và thông tin phụ là một yếu tố quan trọng trong thiết kế, vì nó ảnh hưởng trực tiếp đến cách người dùng tương tác với sản phẩm. Một thiết kế tốt sẽ dẫn dắt người dùng một cách tự nhiên qua các phần khác nhau của giao diện, giúp họ dễ dàng tìm thấy những gì họ cần mà không cảm thấy bị quá tải thông tin.

So sánh 2 ảnh trên để thấy -> ảnh trên ko có sự phân cách thông tin rõ ràng, mọi yếu tố màu sắc tương tự nhau -> ảnh dưới thể hiện rõ những thông tin nổi bật như tiêu đề, nút hành động

5. Giản lược những đồ hoạ không cần thiết

Giản lược những yếu tố đồ họa không thực sự cần thiết trong thiết kế là một cách hiệu quả để tránh gây phức tạp cho người dùng. Thường thì, những yếu tố đồ họa dư thừa có thể làm mất đi sự tập trung vào nội dung chính và tạo ra cảm giác rối mắt. Ví dụ, việc sử dụng quá nhiều khoảng trắng hoặc các đường viền bao quanh ảnh bìa có thể làm phân tán sự chú ý của người dùng khỏi thông tin quan trọng. Những đường viền không cần thiết và khoảng trắng không hợp lý có thể làm cho thiết kế trông rối rắm, khiến người dùng mất nhiều thời gian hơn để tìm kiếm thông tin mà họ cần.

Việc loại bỏ những yếu tố đồ họa không cần thiết giúp đơn giản hóa thiết kế, từ đó làm cho giao diện trở nên sạch sẽ và dễ hiểu hơn. Khi người dùng không bị phân tâm bởi những chi tiết thừa, họ sẽ tập trung hơn vào nội dung chính và tương tác với sản phẩm một cách hiệu quả hơn. Chẳng hạn, một ảnh bìa không có đường viền hoặc khoảng trắng quá lớn sẽ giúp người dùng tập trung vào hình ảnh và thông điệp mà nó truyền tải, thay vì bị phân tâm bởi những chi tiết không quan trọng xung quanh.

Ngoài ra, việc giản lược các yếu tố đồ họa còn giúp tối ưu hóa tốc độ tải trang và hiệu suất của sản phẩm. Những yếu tố đồ họa không cần thiết không chỉ làm cho giao diện phức tạp hơn mà còn có thể làm chậm quá trình tải trang, gây khó chịu cho người dùng.

6. Sử dụng màu sắc có chủ đích

Như hình dưới, phần tiêu đề của hình bên trái sử dụng màu -> sẽ làm cho người dùng nhầm lẫn là đối tượng có thể tương tác được, trong khi đây là text ko tương tác

Do vậy, việc sử dụng màu sắc cần có tính chủ đích

• Thường sử dụng màu đen và trắng, kết hợp màu chủ đạo của thiết kế
• Sử dụng màu sắc ko chỉ nên dùng để trang trí, mà nên cho nó 1 ý nghĩa

Những đối tượng truyền tải thông tin cần được biểu thị khác với các đối tượng có thể tương tác được, tránh gây sự phức tạp và khó hiểu cho người dùng.

7. Đảm bảo tỷ lệ tương phản tối thiểu 3:1

Độ tương phản là thước đo sự khác biệt về độ sáng được cảm nhận giữa hai màu. Nó được thể hiện dưới dạng tỷ lệ từ 1:1 đến 21:1. Ví dụ, văn bản màu đen trên nền đen có tỷ lệ tương phản 1:1 thấp nhất, trong khi văn bản màu đen trên nền trắng có tỷ lệ 21:1 cao nhất. Có nhiều công cụ trực tuyến giúp bạn đo tỷ lệ tương phản giữa các màu khác nhau.

Để giúp đảm bảo những người khiếm thị có thể nhìn rõ các chi tiết giao diện, hãy cố gắng đáp ứng ít nhất các yêu cầu về độ tương phản màu cấp độ AA của Nguyên tắc trợ năng nội dung web (WCAG). Xem thêm chi tiết về cấp độ AA tại mục 2.1 của WCAG 

Điều này có nghĩa là các thành phần giao diện người dùng, cần có tỷ lệ tương phản ít nhất là 3:1.

Độ tương phản của button trong ví dụ trên ở bên trái cũng quá thấp. Khi sửa lại bằng button bên phải sẽ trực quan hơn rất nhiều, và rõ ràng độ tương phản là rất tốt

8. Đảm bảo thành phần chữ có tỷ lệ tương phản tối thiểu 4.5:1

Để giúp những người nhược thị có thể đọc được các nội dung văn bản có kích thước nhỏ (khoảng 18px trở xuống), việc đảm bảo độ tương phản của văn bản là rất quan trọng. Theo tiêu chuẩn AA của Hướng dẫn Tiếp cận Nội dung Web (WCAG) 2.1, độ tương phản giữa văn bản và nền của nó phải đạt ít nhất 4.5:1. Điều này có nghĩa là màu sắc của văn bản và màu nền phải đủ khác biệt để văn bản trở nên dễ đọc đối với những người có thị lực kém.

Độ tương phản cao giúp tăng cường độ rõ ràng của văn bản, giảm căng thẳng mắt và giúp người dùng nhược thị tiếp nhận thông tin một cách dễ dàng hơn. Khi thiết kế nội dung văn bản có kích thước nhỏ, điều quan trọng là phải chọn màu chữ và màu nền sao cho chúng không hòa trộn vào nhau. Chẳng hạn, sử dụng văn bản màu đen trên nền trắng hoặc văn bản màu trắng trên nền đen thường sẽ đảm bảo độ tương phản tốt.

Việc tuân thủ tiêu chuẩn AA của WCAG 2.1 không chỉ hỗ trợ người nhược thị mà còn nâng cao trải nghiệm người dùng nói chung. Đảm bảo độ tương phản phù hợp giúp tất cả người dùng, bao gồm cả những người có thị lực bình thường, có thể đọc văn bản dễ dàng hơn trong các điều kiện ánh sáng khác nhau. Điều này đặc biệt quan trọng trong các thiết kế web và ứng dụng di động, nơi người dùng có thể truy cập nội dung từ nhiều thiết bị và môi trường khác nhau.

9. Đừng chỉ dựa vào màu sắc để xác định những thành phần nào có thể tương tác được

Để đảm bảo những người mù màu có thể tiếp cận nội dung một cách hiệu quả, bạn không thể chỉ dựa vào màu sắc để truyền đạt ý nghĩa hoặc phân biệt các thành phần trong thiết kế. Những người mù màu gặp khó khăn trong việc phân biệt giữa các màu sắc khác nhau, vì vậy việc chỉ sử dụng màu sắc để biểu thị thông tin có thể gây ra nhầm lẫn và khó khăn trong việc sử dụng.

Thay vào đó, bạn cần kết hợp sử dụng các dấu hiệu trực quan khác để giúp người dùng dễ dàng xác định các yếu tố tương tác. Một ví dụ phổ biến là sử dụng gạch chân dưới đoạn văn bản để chỉ ra rằng đó là một liên kết có thể nhấp vào. Gạch chân là một dấu hiệu trực quan rõ ràng, không phụ thuộc vào màu sắc và có thể dễ dàng nhận biết bởi tất cả người dùng, bao gồm cả những người mù màu.

Sử dụng các dấu hiệu trực quan kết hợp với màu sắc không chỉ hỗ trợ người mù màu mà còn cải thiện trải nghiệm người dùng tổng thể. Tất cả người dùng, bao gồm cả những người có thị lực bình thường, sẽ dễ dàng hơn trong việc nhận biết và tương tác với các thành phần trên giao diện.

10. Dùng một kiểu chữ không chân

Các kiểu chữ không chân thường được sử dụng vì chúng dễ đọc, trung tính và đơn giản. Do vậy, với những dự án quan trọng, để đảm bảo yếu tố an toàn lên hàng đầu, chúng ta thường sẽ sử dụng một kiểu chữ không chân duy nhất cho toà bộ dự án.

Tuy nhiên, với các ứng dụng đặc biệt, việc kết hợp các font chữ với nhau cũng có thể tạo ra các điểm nhấn riêng, tất nhiên rằng chỉ nên sử dụng tối đa 2-3 font chữ trong một thiết kế.

11. Chọn kiểu chữ có chiều cao X-Height cao hơn

Khi bạn phân vân giữ 2 kiểu chữ gần giống nhau thì nên chọn kiểu chữ có X-Height cao hơn, điều này giúp người dùng dễ đọc, nhìn thoáng hơn

Ví dụ của chúng ta sử dụng kiểu chữ Gill Sans, có chiều cao x tương đối thấp. Thay đổi kiểu chữ thành kiểu chữ có chiều cao x lớn hơn, như Lato, giúp cải thiện khả năng đọc.

12. Hạn chế sử dụng chữ viết hoa

Khi đọc, bạn nhìn vào hình dạng của một từ, thay vì nhìn vào từng chữ cái. Hình dạng giúp bạn nhận ra từ nhanh hơn. Tất cả các từ viết hoa đều có cùng hình chữ nhật. Điều này buộc bạn phải đọc từng chữ cái một.

Trong các thiết kế, việc sử dụng chữ viết hoa là không được khuyến kích, không có nhiều lý do và lợi ích cho việc sử dụng này. Vì vậy bạn nên hạn chế sử dụng chữ viết hoa.

13. Chỉ nên sử dụng kiểu chữ thường và đậm cho phần nội dung

Một kiểu chữ thường gồm nhiều kiểu chữ khác nhau, điều đó không có nghĩa là bạn cần sử dụng tất cả chúng trong thiết kế của mình. Sử dụng nhiều độ đậm phông chữ khác nhau có thể gây nhiễu và lộn xộn cho giao diện của bạn. Nó cũng khiến việc sử dụng từng độ đậm phông chữ một cách nhất quán trở nên khó khăn hơn.

Việc giữ cho hệ thống thiết kế của bạn đơn giản và súc tích bằng cách chỉ sử dụng độ đậm phông chữ thông thường và đậm là cách tối ưu nhất.

Mẹo sử dụng nhanh:

• Sử dụng độ đậm phông chữ đậm cho tiêu đề để nhấn mạnh chúng.
• Sử dụng độ đậm phông chữ thông thường cho các văn bản nhỏ khác.
• Nếu bạn quyết định sử dụng độ đậm phông chữ rất mỏng hoặc dày, hãy dành chúng cho tiêu đề và văn bản lớn hơn, vì chúng có thể khó đọc ở kích thước nhỏ hơn.

14. Tránh sử dụng màu đen tuyền

Nên tránh sử dụng màu đen tuyền (mã màu #000000) vì nó có độ tương phản rất cao. Độ tương phản cao có thể gây mỏi mắt khi đọc văn bản.

Màu đen có độ sáng màu 0% và màu trắng có độ sáng màu 100%. Sự chênh lệch lớn về độ sáng màu khiến mắt chúng ta phải làm việc nhiều hơn. Cách an toàn nhất là tránh màu đen tuyền so với màu trắng và thay vào đó hãy chọn màu xám đậm.

Một vấn đề khác là khi xem xét hệ thống phân cấp trực quan, để đảm bảo các thành phần giao diện được trình bày theo thứ tự quan trọng, chúng ta có thể sử dụng màu xám đậm nhạt khác nhau cho tiêu đề, văn bản một cách thích hợp.

15. Luôn canh trái nội dung chữ

Hầu hết các ngôn ngữ, đặc biệt là những ngôn ngữ phổ biến như tiếng Anh, tiếng Việt, và tiếng Pháp, đều được đọc từ trái sang phải và từ trên xuống dưới. Đây là mô hình đọc theo hình chữ F, nơi người đọc sẽ quét qua phần trên cùng của trang và sau đó là phần bên trái theo chiều dọc, tạo thành hình dạng giống chữ F.

Vì vậy, việc giữ cho văn bản được căn trái là rất quan trọng để tối ưu hóa trải nghiệm đọc. Khi văn bản được căn trái, mắt người đọc có thể dễ dàng tìm thấy điểm bắt đầu của mỗi dòng mới một cách tự nhiên và nhanh chóng. Điều này giúp giảm bớt sự căng thẳng và mệt mỏi cho mắt, giúp người đọc tiếp nhận thông tin một cách dễ dàng và thoải mái hơn.

Ngược lại, nếu văn bản được căn giữa, mắt người đọc sẽ phải làm việc nhiều hơn để tìm ra điểm bắt đầu của mỗi dòng. Việc này có thể gây ra sự gián đoạn trong quá trình đọc, làm giảm tốc độ đọc và tăng sự mệt mỏi. Mắt phải liên tục di chuyển qua lại để định vị điểm bắt đầu của mỗi dòng, gây khó khăn và làm giảm sự tập trung.

Đặc biệt, đối với các đoạn văn dài hoặc các tài liệu yêu cầu sự tập trung cao, việc căn giữa văn bản có thể khiến người đọc cảm thấy mất hứng thú và khó tiếp nhận thông tin một cách hiệu quả. Do đó, để đảm bảo rằng người đọc có thể dễ dàng và nhanh chóng tiếp thu nội dung, căn trái văn bản là lựa chọn tốt nhất.

16. Luôn thiết lập thông số chiều cao dòng bằng 1.5 so với kích thước chữ

Chiều cao dòng (Line height) là khoảng cách theo chiều dọc giữa hai dòng văn bản. Khoảng cách giữa các dòng giúp mọi người không phải đọc lại cùng một dòng văn bản. Nó cũng trông và cảm thấy thoải mái hơn khi đọc.

Để dễ tiếp cận và dễ đọc, đặc biệt là đối với văn bản dài, hãy đảm bảo chiều cao dòng ít nhất là 1,5 (150%) so với kích thước chữ. Giữ chiều cao dòng trong khoảng từ 1,5 đến 2 thường hiệu quả.

Như hình ví dụ dưới, bạn sẽ thấy rõ sự khác biệt khi sử dụng Line height đúng cách.

Trên đây là những mẹo nhỏ nhưng vô cùng hữu ích cho việc thiết kế UI trở nên đẹp mắt, logic. Bạn hoàn toàn có thể sáng tạo theo cách của riêng mình, hoặc sẽ có nhiều nguyên tắc thiết kế khác nữa. Tuy nhiên, việc hiểu rõ những nguyên tắc cơ bản và phổ biến sẽ giúp bạn tiếp cận nhanh hơn và tạo ra được những thiết kế đẹp mắt, giàu tính trải nghiệm người dùng hơn.