20 quy tắc thiết kế web mà bạn cần tuân thủ (Phần 2)

Phần 2 của bài viết : 20 quy thiết kế web bạn cần tuân thủ

Đọc phần 1 của bài viết tại đây

11. Chú ý tiểu tiết :

Bố cục tổng thể là vô cùng quan trọng trong thiết kế web, bố cục tổng thể sẽ quyết định các yếu tố kết hợp với nhau thế nào, và quyết định giao diện bạn cần.

Tuy nhiên, bạn cũng không được bỏ qua các chi tiết nhỏ nhặt.

Các tiểu tiết ví dụ như biểu tượng chân trang web, khoảng cách văn bản, cũng như các tương tác vi mô, thực sự sẽ giúp hoàn thiện trang web và tăng tính chuyên nghiệp.

Chân trang web này của công ty mỹ phẩm thiên nhiên Carbon Beauty là một ví dụ tuyệt vời về việc chăm chút cho các tiểu tiết

Nó không chỉ phù hợp với thiết kế tối giản và đẹp mắt của thương hiệu, mà bản thân nó cũng là một tác phẩm nghệ thuật.

Họ đã kết hợp tính đối xứng, đường kẻ, nút và biểu tượng để giúp khán giả trải nghiệm trang web tốt hơn, giữ họ trên website lâu hơn và khuyến khích họ thực hiện chuyển đổi.

12. Quy tắc Fitt

Được phát hiện bởi nhà tâm lý học Paul Fitts vào năm 1954, quy tắc Fitt cho rằng thời gian cần thiết để di chuyển đến mục tiêu tương ứng không chỉ phụ thuộc vào khoảng cách mà còn phụ thuộc cả vào kích thước của mục tiêu.

Lấy ví dụ, việc di chuyển con trỏ chuột đến một nút bấm lớn có khoảng cách gần thì nhanh hơn việc di chuyển con trỏ chuột đến một nút bấm nhỏ hơn có khoảng cách xa hơn.

Mặc dù quy tắc này ban đầu liên quan đến lĩnh vực cơ khí, nhưng giờ đây nó còn được áp dụng rất nhiều vào việc thiết kế UX (trải nghiệm người dùng).

Quy tắc Fitt được vận dụng vào thiết kế nút kêu-gọi-hành-động, ý tưởng là các thông điệp mà bạn muốn khách hàng đáp ứng  (ví dụ: lời gọi hành động chính) phải lớn và được đặt gần với người dùng.

Như ví dụ trang web dưới đây của studio copywriter, Very Good Copy.

Giả sử con trỏ của người dùng sẽ ở đâu đó gần phía trên màn hình, nhà thiết kế đã đặt nút lớn ở giữa màn hình để khuyến khích họ nhấp chuột vào nút đó. Rất hiệu quả !

13. Tìm hình ảnh phù hợp

Có câu nói rằng 1 hình ảnh đẹp đáng giá hơn ngàn chữ viết và thực sự điều này đúng trong thiết kế web.

Hình ảnh có thể phục vụ rất nhiều mục đích trong thiết kế web, như là kể một câu chuyện, thể hiện cách thức sản phẩm hoạt động, gợi lên cảm xúc…

Tuy nhiên, điều quan trọng cần nhớ là hình ảnh phải phù hợp với mục đích của thương hiệu.

Hãy lựa chọn cẩn thận những bức ảnh bạn sử dụng trong thiết kế web.

Chúng bắt buộc phải có chất lượng chuyên nghiệp và độ phân giải cao, mà còn phải phù hợp với thẩm mỹ tổng thể và có một mục tiêu rõ ràng.

Lấy ví dụ, thiết kế trang web của công ty xe hơi Subaru.

Các ảnh stock phục vụ một mục đích rất cụ thể là gợi lên một cảm giác phiêu lưu và giúp người dùng tưởng tượng về mục đích sử dụng xe

Thông điệp là, họ không bán xe, họ bán 1 phong cách sống !

Điều này hiệu quả hơn nhiều so với việc sử dụng hình ảnh sản phẩm đơn thuần mà không có phối cảnh.

14. Ưu tiên trải nghiệm người dùng

Trải nghiệm người dùng không chỉ dành cho các nhà thiết kế UX.

Bất cứ ai muốn người dùng thực hiện hành động chuyển đổi trên trang web (như đăng ký email hoặc mua hàng) nên chú ý đến trải nghiệm người dùng

Thực ra, bạn không cần phải làm 1 trang web quá hoành tráng hoặc yêu cầu kỹ thuật phức tạp để tạo chuyển đổi

Đơn giản là chỉ cần làm cho người dùng dễ dàng thực hiện các bước bạn mong muốn.

Trang web này của Book & Travel giới thiệu thiết kế UX tối giản nhưng hiệu quả cao !

Họ biết chính xác người dùng đang ở đâu để tìm kiếm và đặt chuyến bay, vì vậy họ đã xây dựng chức năng này ngay trên trang chủ của họ.

Đây không phải là một tính năng phức tạp, nhưng cực kỳ hiệu quả !

15. Cân nhắc sử dụng hệ thống lưới

Sử dụng bố cục lưới là một cách dễ dàng để làm cho trang web của bạn trông gọn gàng, ngăn nắp và chuyên nghiệp.

Về cơ bản, đây là những đường ngang và dọc giao nhau để căn chỉnh các yếu tố trong bố cục đó

Đây là một công cụ trực quan mạnh mẽ tạo ra sự nhất quán và trật tự trong thiết kế, đặc biệt khi thiết kế cần tích hợp nhiều chi tiết.

Trong trang web của The Hilgart, nhà thiết kế Ruslan Siiz đã sử dụng bố cục dựa trên lưới để tạo cơ sở cho bố cục của mình.

Mặc dù có một số yếu tố bất đối xứng nhưng trang web vẫn cho thấy 1 bố cục gọn gàng và có cấu trúc.

16. Tránh các đoạn văn bản dài :

Bạn chỉ có một cơ hội để tạo ấn tượng đối với khách hàng truy cập trang web lần đầu

Đây là lý do tại sao rất quan trọng để làm cho thương hiệu của bạn đập ngay vào mắt khách hàng

Điều này phụ thuộc một phần thuộc vào nội dung văn bản trên web, và 1 phần vào thiết kế web

Vì lý do này, việc sử dụng các đoạn văn bản dài trên trang web của bạn là điều không nên, đặc biệt đối với trang chủ !

Các đoạn text dài dòng không những làm loãng thông điệp thương hiệu, mà còn làm cho trang web của bạn trông lộn xộn, rối rắm, gây xao nhãng !

Trang web của công ty tài chính Alpha Blue Ocean cho thấy bạn không cần nhiều văn bản để tạo ra sự chú ý :

Họ ngay lập tức thể hiện mục đích thương hiệu chỉ bằng một vài từ (sử dụng kiểu chữ trắng sắc nét nổi bật trên nền màu xanh)

Tuy nhiên, họ cũng cung cấp cho người dùng tùy chọn để đọc thêm thông tin bằng cách click vào nút phía dưới.

17. Sử dụng nguyên tắc nổi bật

Nguyên tắc nổi bật là khi bạn đặt một lựa chọn đáng chú ý giữa một nhóm các lựa chọn có thiết kế giống nhau.

Đây là một nguyên tắc phát huy hiệu quả khi thiết kế bảng giá trên trang web

Bảng giá này từ trang web Envato Modern Bootstrap 4 là một ví dụ tuyệt vời về nguyên tắc này

3 nhóm giá có thiết kế hộp màu trắng với văn bản màu đen và nút màu đỏ, tuy nhiên, màu được tương phản rõ ràng ở nhóm thứ 3

Một cách tự nhiên, mắt người nhìn thẳng vào nhóm giá khác biệt, đây là mẹo khi bạn muốn thu hút sự chú ý đến một lựa chọn cụ thể hoặc ưu đãi đặc biệt !

Bất biến cũng có thể được sử dụng trong menu điều hướng, khi bạn đang cố gắng khuyến khích người dùng click chuột vào menu bạn muốn.

18. Luật Hick

Bên ngoài thế giới thiết kế, nguyên tắc này thường được gọi là “quyết định mệt mỏi”

Được đặt theo 2 nhà tâm lý học người Anh-Mỹ William Edmund Hick và Ray Hyman, quy tắc này cho rằng : Bạn càng cho khách hàng nhiều lựa chọn, họ càng khó đưa ra quyết định

Vì vậy, bạn càng làm rối trí người dùng với quá nhiều tùy chọn khác nhau (như nút hoặc menu) thì sẽ càng mất nhiều thời gian hơn để lôi kéo họ thực hiện chuyển đổi (như mua hàng, đăng ký chương trình v.v…)

Tất nhiên, đây không phải là một điều tốt ! Đây là lý do tại sao việc giới hạn lời kêu gọi hành động của bạn là rất cần thiết để làm cho người dùng tập trung và dễ hiểu hết mức có thể

Trang web của công ty điện lực Green Mountain Energy rõ ràng đã được thiết kế phù hợp với Luật Hick.

Người dùng chỉ được cung cấp tùy chọn kêu gọi hành động chính (rõ ràng nổi bật, nhờ nút màu cam) phục vụ mục đích rất quan trọng để xác định xem họ là ai.

Vì vậy, đừng bao giờ chèn nhiều lời kêu gọi hành động hơn mức bạn thực sự cần.

19. Tính đối xứng :

Thiết kế đối xứng là 1 trong những dạng thiết kế an toàn nhất.

Tạo ra 2 nửa của một tổng thể phản chiếu lẫn nhau là cách dễ dàng để làm cho thiết kế trang web trông cân bằng, gọn gàng và chuyên nghiệp hơn ngay lập tức

Trang web của 1 công ty ba lô chứng minh rằng sự đối xứng không nhất thiết phải nhàm chán !

Nhà thiết kế Gabe Becker đã cho thấy sự đối xứng dọc và ngang bằng cách đặt hình ảnh của cô gái vào đầu trang

Sự đối xứng còn được thể hiện bởi hàng túi được sắp xếp hoàn hảo bên dưới.

Kỹ thuật hình ảnh hiệu quả này mang lại cảm giác gọn gàng cho thiết kế web.

20. Tương thích cho cả máy tính và thiết bị di động :

Nếu có một nguyên tắc thiết kế web mà bạn PHẢI tuân thủ, thì chính là nguyên tắc số 20 này.

Hiện nay, điện thoại thông minh và máy tính bảng  ngày càng cho thấy sự phổ biến và ảnh hưởng sâu sắc đến cách con người tiêu thụ nội dung trên internet

Đây là lý do tại sao vô cùng rất quan trọng để thiết kế web tương thích với cả máy tính để bàn và thiết bị di động.

Điều này có nghĩa là đảm bảo tiêu đề, văn bản hay hình ảnh hoạt động tốt trên mọi thiết bị, không có hình ảnh hoặc yếu tố nào bị cắt ra khỏi màn hình, và các nút của bạn hiển thị hoàn hảo dù là trên màn hình máy tính hay màn hình điện thoại.

Bạn cũng cần tối ưu tốc độ trang web khi truy cập trên cả máy tính và điện thoại

Trang web tương thích cho nhiều thiết bị nghĩa là bạn cần lập trình trang web với nhiều bố cục khác nhau

Như ví dụ dưới đây :

Kết luận :

Điều bạn cần nhớ : Quy tắc tạo ra để phá bỏ

Bạn không cần phải khư khư ép mình vào quy tắc, nhưng quy tắc là thứ bạn cần biết và dựa vào để thực hiện bất kỳ sáng tạo nào bạn muốn