Phương pháp tốt nhất để thiết kế và tăng khả năng sử dụng trang web

Khi nói đến việc thiết kế hoặc thiết kế lại một trang web, bạn rất dễ bị ảnh hưởng bởi tính thẩm mỹ. Màu xanh lam đó có đúng không? Logo nên ở bên phải màn hình hay bên trái? Điều gì sẽ xảy ra nếu chúng ta đặt một GIF động khổng lồ ở giữa trang?

Tuy nhiên, trong một thế giới mà mọi người có hơn 1,8 tỷ trang web mà họ có thể truy cập, bạn cần đảm bảo rằng trang web của bạn không chỉ có một khuôn mặt đẹp. Nó phải được thiết kế cho khả năng sử dụng, trang web của bạn dễ sử dụng như thế nào và trải nghiệm người dùng (UX), mức độ thú vị khi tương tác với trang web của bạn.

Giờ đây, bạn có thể dành nhiều năm để nghiên cứu thông tin chi tiết về các nguyên tắc này. Nhưng để cung cấp cho bạn điểm khởi đầu, chúng tôi đã tập hợp một danh sách các hướng dẫn cơ bản và các phương pháp hay nhất mà bạn có thể áp dụng cho trang web hoặc thiết kế lại trang web tiếp theo của mình phóng. Sau đó, chúng tôi sẽ xem xét 10 tính năng bạn sẽ cần trên trang web của mình để đưa những đề xuất này vào thực tế. Hãy đi sâu vào.

1. Đơn giản

Mặc dù sự xuất hiện của trang web của bạn chắc chắn là quan trọng, nhưng hầu hết mọi người không đến trang web của bạn để đánh giá mức độ bóng bẩy của thiết kế. Họ muốn hoàn thành một số hành động hoặc tìm một số thông tin cụ thể.

Do đó, các yếu tố thiết kế không cần thiết (nghĩa là những yếu tố không phục vụ mục đích chức năng) sẽ chỉ gây choáng ngợp và khiến khách truy cập khó hoàn thành những gì họ đang cố gắng thực hiện.

Từ góc độ khả năng sử dụng và UX, sự đơn giản là người bạn tốt nhất của bạn. Nếu bạn có tất cả các thành phần trang cần thiết, thật khó để trở nên quá đơn giản. Bạn có thể sử dụng nguyên tắc này dưới nhiều hình thức khác nhau, chẳng hạn như:

• Màu sắc: Về cơ bản, không sử dụng nhiều. Sổ tay Tương tác giữa Máy tính và Con người khuyến nghị sử dụng tối đa năm (cộng hoặc trừ hai) màu khác nhau trong thiết kế của bạn.
• Kiểu chữ: Kiểu chữ bạn chọn phải dễ đọc, vì vậy không có phông chữ nào quá nghệ thuật và rất tối thiểu, nếu có. Đối với màu văn bản, một lần nữa, hãy giữ nó ở mức tối thiểu và luôn đảm bảo rằng nó tương phản với màu nền. Một khuyến nghị phổ biến là sử dụng tối đa ba kiểu chữ khác nhau với tối đa ba kích cỡ khác nhau.
• Đồ họa: Chỉ sử dụng đồ họa nếu chúng giúp người dùng hoàn thành một tác vụ hoặc thực hiện một chức năng cụ thể (không chỉ thêm đồ họa tùy ý).

2. Hệ thống phân cấp trực quan

Gắn chặt với nguyên tắc đơn giản, hệ thống phân cấp trực quan có nghĩa là sắp xếp và tổ chức các yếu tố trang web để khách truy cập tự nhiên bị thu hút bởi các yếu tố quan trọng nhất trước tiên.

Hãy nhớ rằng, khi nói đến việc tối ưu hóa khả năng sử dụng và UX, mục tiêu là dẫn dắt khách truy cập hoàn thành một hành động mong muốn, nhưng theo cách cảm thấy tự nhiên và thú vị. Bằng cách điều chỉnh vị trí, màu sắc hoặc kích thước của các thành phần nhất định, bạn có thể cấu trúc trang web của mình theo cách mà người xem sẽ bị thu hút bởi các thành phần đó trước tiên.

Trong ví dụ dưới đây từ Spotify, bạn có thể thấy rằng tiêu đề chính “Nhận 3 tháng Premium miễn phí” nằm ở trên cùng của hệ thống phân cấp trực quan với kích thước và vị trí trang của nó. Nó thu hút sự chú ý của bạn đến nhiệm vụ của họ trước bất cứ điều gì khác. Tiếp theo là CTA "Nhận 3 tháng miễn phí", thúc đẩy hành động. Người dùng có thể nhấp vào CTA này hoặc quét các mục menu ở trên để biết thêm hành động.

3. Khả năng điều hướng

Lập kế hoạch điều hướng trực quan trên trang web của bạn là rất quan trọng để giúp khách truy cập tìm thấy những gì họ đang tìm kiếm. Lý tưởng nhất là khách truy cập nên truy cập vào trang web của bạn và không phải suy nghĩ nhiều về nơi sẽ nhấp vào tiếp theo. Di chuyển từ điểm A đến điểm B phải càng ít ma sát càng tốt.

Dưới đây là một số mẹo để tối ưu hóa điều hướng trang web của bạn:

• Giữ cấu trúc điều hướng chính của bạn đơn giản (và gần đầu trang của bạn).
• Bao gồm điều hướng ở cuối trang web của bạn.
• Cân nhắc sử dụng breadcrumb trên mọi trang (ngoại trừ trang chủ của bạn) để người dùng nhớ đường điều hướng của họ.
• Bao gồm thanh tìm kiếm ở gần đầu trang web của bạn để khách truy cập có thể tìm kiếm theo từ khóa.
• Không cung cấp quá nhiều tùy chọn điều hướng trên mỗi trang. Một lần nữa, sự đơn giản!
• Bao gồm các liên kết trong bản sao trang của bạn và làm rõ những liên kết đó đi đâu.
• Đừng bắt người dùng tìm hiểu quá sâu. Hãy thử tạo một bản đồ khung dây cơ bản của tất cả các trang trên trang web của bạn được sắp xếp giống như một kim tự tháp: Trang chủ của bạn ở trên cùng và mỗi trang được liên kết từ các trang trước tạo thành lớp tiếp theo. Trong hầu hết các trường hợp, tốt nhất là giữ bản đồ của bạn sâu không quá ba cấp độ. Lấy ví dụ về bản đồ trang web của HubSpot.

Một gợi ý nữa: Khi bạn đã quyết định điều hướng chính (trên cùng) của trang web của mình sẽ là gì, hãy giữ cho nó nhất quán. Các nhãn và vị trí điều hướng của bạn phải giữ nguyên trên mọi trang.

Điều này dẫn chúng ta đến nguyên tắc tiếp theo một cách độc đáo...

4. Tính nhất quán

Ngoài việc giữ cho điều hướng của bạn nhất quán, giao diện tổng thể của trang web của bạn phải giống nhau trên tất cả các trang của trang web của bạn. Hình nền, cách phối màu, kiểu chữ và thậm chí cả giọng điệu trong văn bản của bạn đều là những lĩnh vực mà tính nhất quán có tác động tích cực đến khả năng sử dụng và UX.

Điều đó không có nghĩa là mọi trang phải theo cùng một bố cục. Thay vào đó, hãy tạo các bố cục khác nhau cho các loại trang cụ thể (ví dụ: trang đích, trang thông tin, v.v.). Bằng cách sử dụng các bố cục đó một cách nhất quán, bạn sẽ giúp khách truy cập dễ dàng hiểu được loại thông tin mà họ có khả năng tìm thấy trên một trang nhất định.

Trong ví dụ bên dưới, bạn có thể thấy rằng Airbnb sử dụng cùng một bố cục cho tất cả các trang "Trợ giúp" của mình, đây là một thông lệ phổ biến. Hãy tưởng tượng mọi thứ sẽ như thế nào từ góc nhìn của khách truy cập nếu mỗi trang "Trợ giúp" đều có bố cục độc đáo của riêng nó. Có lẽ sẽ có rất nhiều cái nhún vai.

5. Khả năng đáp ứng

Theo Statista, 48% lượt xem toàn cầu của trang là từ các thiết bị di động như điện thoại thông minh và máy tính bảng. Và theo nghiên cứu của chúng tôi, 93% mọi người đã rời khỏi một trang web vì nó không hiển thị đúng trên thiết bị của họ.

Bài học rút ra ở đây: Để cung cấp trải nghiệm người dùng thực sự tuyệt vời, trang web của bạn phải tương thích với nhiều thiết bị khác nhau mà khách truy cập của bạn đang sử dụng. Trong thế giới công nghệ, đây được gọi là thiết kế đáp ứng.

Thiết kế đáp ứng có nghĩa là đầu tư vào một cấu trúc trang web rất linh hoạt. Trên một trang web đáp ứng, nội dung được tự động thay đổi kích thước và xáo trộn lại để phù hợp với kích thước của bất kỳ thiết bị nào mà khách truy cập đang sử dụng. Điều này có thể được thực hiện bằng các mẫu HTML thân thiện với thiết bị di động hoặc bằng cách tạo một trang web dành cho thiết bị di động đặc biệt.

Cuối cùng, điều quan trọng hơn là cung cấp trải nghiệm tuyệt vời trên các thiết bị khác nhau hơn là trông giống hệt nhau trên các thiết bị đó.

Bên cạnh tính thân thiện với thiết bị di động, bạn cũng nên kiểm tra khả năng tương thích giữa các trình duyệt của trang web của mình. Rất có thể, bạn chỉ xem trang web của mình trên một trình duyệt web, có thể là Google Chrome, Safari, Firefox hoặc trình duyệt khác.

Bây giờ là lúc để mở các trang của bạn trên từng trình duyệt này và đánh giá các yếu tố của bạn xuất hiện như thế nào. Lý tưởng nhất là sẽ không có nhiều khác biệt trong cách trình bày, nhưng bạn không thể biết chắc cho đến khi tận mắt chứng kiến.

6. Khả năng tiếp cận

Mục tiêu của khả năng truy cập web là tạo một trang web mà bất kỳ ai cũng có thể sử dụng, kể cả những người khuyết tật hoặc hạn chế ảnh hưởng đến trải nghiệm duyệt web của họ. Là một nhà thiết kế trang web, công việc của bạn là nghĩ đến những người dùng này trong kế hoạch UX của mình.

Giống như khả năng phản hồi, khả năng truy cập áp dụng cho toàn bộ trang web của bạn: cấu trúc, định dạng trang, hình ảnh và cả nội dung bằng văn bản và hình ảnh. Nguyên tắc về khả năng truy cập nội dung web (WCAG), được phát triển bởi Sáng kiến về khả năng truy cập web và World Wide Web Consortium, thiết lập các nguyên tắc cho khả năng truy cập web. Theo nghĩa rộng, các nguyên tắc này nêu rõ rằng các trang web phải:

• Có thể nhận biết: Khách truy cập nhận thức được nội dung trên trang web của bạn.
• Có thể hoạt động: Chức năng của trang web của bạn có thể hoạt động theo những cách khác nhau.
• Dễ hiểu: Tất cả nội dung và cảnh báo có thể dễ dàng hiểu được.
• Mạnh mẽ: Trang web của bạn có thể sử dụng được trên các công nghệ, thiết bị và trình duyệt hỗ trợ khác nhau.

Để tìm hiểu sâu hơn về chủ đề này, hãy xem Hướng dẫn cơ bản về khả năng truy cập web của chúng tôi.

7. Tính thông thường

Một thách thức lớn trong thiết kế web là cân bằng tính độc đáo với mong đợi của bạn. Hầu hết chúng ta đều là những người dùng internet thành thạo và có những quy ước cụ thể mà chúng ta đã quen dần theo thời gian. Những quy ước như vậy bao gồm:

• Đặt điều hướng chính ở trên cùng (hoặc bên trái) của trang.
• Đặt logo ở trên cùng bên trái (hoặc giữa) của trang.
• Làm cho logo có thể nhấp được, để nó luôn đưa khách truy cập trở lại trang chủ.
• Có các liên kết và nút thay đổi màu sắc/hình thức khi bạn di chuột qua chúng.
• Sử dụng biểu tượng giỏ hàng trên trang web thương mại điện tử. Biểu tượng này cũng có huy hiệu số biểu thị số lượng mặt hàng trong giỏ hàng.
• Đảm bảo các thanh trượt hình ảnh có các nút mà người dùng có thể nhấp để xoay các trang chiếu theo cách thủ công.

Mặc dù một số người có thể chọn loại bỏ những thứ này ra khỏi cửa sổ vì mục đích duy nhất, nhưng đây là một sai lầm. Vẫn còn nhiều chỗ cho sự sáng tạo trong những hạn chế của quy ước web.

Hãy xem xét ngắn gọn một lĩnh vực khác của thiết kế, kiến trúc. Các mã xây dựng được đưa ra để mọi người có thể sinh sống trong không gian dễ dàng và an toàn. Một kiến trúc sư không phàn nàn về những quy tắc này hoặc vi phạm chúng bởi vì, ngoài những hậu quả pháp lý, chúng đảm bảo an toàn và thoải mái cho khách. Không quan trọng tòa nhà trông rực rỡ như thế nào — nếu bạn vấp phải cầu thang không bằng phẳng hoặc bạn không thể thoát ra khỏi đám cháy, bạn có thể muốn ở bên ngoài hơn.

Theo cách tương tự, bạn có thể tạo ra trải nghiệm đáng nhớ trong khi đáp ứng mong đợi của người dùng. Nếu bạn vi phạm những gì người dùng dự đoán, họ có thể cảm thấy khó chịu hoặc thậm chí thất vọng với trang web của bạn.

8. Uy tín

Bám sát các quy ước web cho vay uy tín trang web của bạn. Nói cách khác, nó làm tăng mức độ tin cậy mà trang web của bạn truyền tải. Và nếu bạn đang cố gắng xây dựng một trang web cung cấp trải nghiệm người dùng tốt nhất có thể, thì uy tín sẽ đi một chặng đường dài.

Một trong những phương pháp tốt nhất để nâng cao uy tín của bạn là phải rõ ràng và trung thực về sản phẩm hoặc dịch vụ mà bạn đang bán. Đừng khiến khách truy cập phải tìm hiểu qua hàng chục trang để tìm ra những gì bạn làm. Hãy thẳng thắn trên trang chủ của bạn và dành một số bất động sản để giải thích giá trị đằng sau những gì bạn làm.

Một mẹo đáng tin cậy khác: Có một trang định giá, cũng được liên kết trên trang chủ. Thay vì buộc mọi người liên hệ với bạn để tìm hiểu thêm về giá cả, hãy liệt kê giá rõ ràng trên trang web của bạn. Điều này làm cho doanh nghiệp của bạn có vẻ đáng tin cậy và hợp pháp hơn.

9. Thiết kế web lấy người dùng làm trung tâm

Vào cuối ngày, khả năng sử dụng và trải nghiệm người dùng phụ thuộc vào sở thích của người dùng cuối. Xét cho cùng, nếu bạn không thiết kế cho họ thì bạn thiết kế cho ai?

Vì vậy, mặc dù các nguyên tắc được trình bày chi tiết trong danh sách này là điểm khởi đầu tuyệt vời, chìa khóa cuối cùng để cải thiện thiết kế trang web của bạn là tiến hành kiểm tra người dùng, thu thập phản hồi và triển khai các thay đổi dựa trên những gì bạn đã học được.

Và đừng bận tâm đến việc tự mình kiểm tra khả năng sử dụng. Bạn đã đầu tư rất nhiều thời gian vào thiết kế của mình, điều này mang lại những thành kiến của riêng bạn vào phương trình. Nhận những người thử nghiệm chưa từng thấy trang web của bạn trước đây, giống như bất kỳ khách truy cập lần đầu nào.

Dưới đây là một vài công cụ kiểm tra người dùng để giúp bạn bắt đầu:

• Công cụ chấm điểm trang web: Công cụ miễn phí của chúng tôi đánh giá trang web của bạn dựa trên một số yếu tố: thiết bị di động, thiết kế, hiệu suất, SEO và bảo mật. Sau đó, nó đưa ra các đề xuất phù hợp để cải thiện. Bạn có thể tìm hiểu thêm về Website Grader trong bài đăng trên blog chuyên dụng của chúng tôi.
• Crazy Egg: Theo dõi nhiều miền trong một tài khoản và khám phá thông tin chi tiết về hiệu suất trang web của bạn bằng bốn công cụ thông minh khác nhau -- bản đồ nhiệt, bản đồ cuộn, lớp phủ và confetti.
• Loop11: Sử dụng công cụ này để dễ dàng tạo các bài kiểm tra khả năng sử dụng -- ngay cả khi bạn không có bất kỳ kinh nghiệm HTML nào.
• Người dùng say rượu: Trả tiền cho Richard Littauer để say rượu và xem xét trang web của bạn. Không tin tôi? Chúng tôi đã thử nó.

Để biết thêm các tùy chọn hữu ích, hãy xem danh sách các công cụ kiểm tra người dùng tốt nhất của chúng tôi.

Hy vọng rằng những nguyên tắc này hữu ích trong việc thông báo cấu trúc của các trang web và toàn bộ trang web của bạn. Nhưng, làm thế nào để đưa những hướng dẫn này vào thực tế? Chúng ta hãy xem một số phương pháp hay nhất có thể thực hiện được mà bạn có thể làm theo trong quá trình thiết kế.

Thực hành tốt nhất về thiết kế trang web

1. Chọn kiểu chữ dễ đọc và dễ đọc lướt

Typography đề cập đến cách loại - nghĩa là các chữ cái và ký tự - được sắp xếp và trình bày trên trang. Vì kiểu chữ của trang web không chỉ ảnh hưởng đến cách chúng ta đọc mà cả cách chúng ta cảm nhận về văn bản trên trang web, nên điều quan trọng là phải chọn cẩn thận.

Lý tưởng nhất là bạn muốn một kiểu chữ:

• Dễ đọc
• Dễ đọc lướt
• Có thể truy cập cho tất cả người dùng
• Dễ đọc trên nhiều thiết bị và kích thước màn hình

Bạn cũng muốn nó phù hợp với giao diện của thương hiệu của bạn. Ví dụ, thương hiệu thời trang xa xỉ Burberry đã làm mới logo của mình lần đầu tiên sau 20 năm vào năm 2018. Nó đã thay thế kiểu chữ serif cũ bằng kiểu chữ sans serif in đậm, viết hoa toàn bộ và bỏ biểu tượng hiệp sĩ. Kết quả là một logo trông đơn giản và hiện đại hơn, dễ đọc hơn trên mọi màn hình — và điều đó phản ánh những thay đổi trong công ty để trở nên minh bạch hơn và thu hút thế hệ trẻ hơn.

2. Chọn cách phối màu phù hợp với thương hiệu của bạn

Giống như kiểu chữ, màu sắc không chỉ ảnh hưởng đến cách chúng ta hiểu và tương tác với nội dung mà còn cả cách chúng ta cảm nhận về nội dung đó. Do đó, bảng màu của bạn nên đánh dấu vào các ô giống như kiểu chữ trên trang web của bạn. Nó nên:

• Củng cố bản sắc thương hiệu của bạn
• Làm cho trang web của bạn dễ đọc và điều hướng
• Khơi gợi cảm xúc
• Trông ổn

Ví dụ, Buzzfeed sử dụng các màu cơ bản là vàng và đỏ để thu hút sự chú ý của người dùng và khiến họ hào hứng với nội dung. Nó bảo lưu việc sử dụng màu xanh lam cơ bản — được liên kết với sự tin cậy — dành riêng cho các liên kết và nút CTA. Cả hai cảm xúc đều lý tưởng để gợi lên cho một trang web truyền thông.

3. Sử dụng khoảng trắng để chia nhỏ văn bản và các yếu tố khác

Khoảng trắng đề cập đến các khu vực tiêu cực trong bất kỳ bố cục nào. Khoảng trắng cung cấp cho người dùng các điểm ngắt thị giác khi họ xử lý thiết kế hoặc nội dung của trang web, điều này không chỉ mang tính thẩm mỹ. Bằng cách giảm thiểu sự phân tâm, khoảng trắng giúp người dùng tập trung, xử lý thông tin dễ dàng hơn và hiểu điều gì là quan trọng.

Điều đó có nghĩa là bạn có thể sử dụng khoảng trắng để tránh gây quá tải thông tin hoặc tê liệt phân tích — và để nhấn mạnh các yếu tố quan trọng trên trang. Điều này có thể giúp thuyết phục người dùng thực hiện một hành động cụ thể, chẳng hạn như đăng ký nhận bản tin, mua bộ sưu tập mới nhất của bạn, v.v.

Ví dụ: Eb & flow Yoga Studio sử dụng khoảng trắng để hướng người dùng đến một hành động cụ thể: đăng ký lớp học trong ba tuần. Lưu ý rằng khoảng trắng không có nghĩa là không có màu sắc hoặc hình ảnh. Thay vào đó, điều đó có nghĩa là mọi yếu tố trên trang được định vị một cách chiến lược, với nhiều khoảng trống ở giữa, để tránh làm khách truy cập choáng ngợp hoặc bối rối.

4. Sử dụng kết cấu để thêm cá tính và chiều sâu

Giống như bề mặt xúc giác, ba chiều, kết cấu web nhằm mục đích tái tạo cảm giác vật lý khi chạm vào bằng một cảm giác khác — thị giác. Chúng là một thiết kế thay thế tuyệt vời cho nền màu đồng nhất, đặc biệt nếu bạn muốn thêm cá tính và chiều sâu cho trang web của mình.

Hãy xem kết cấu trên trang chủ của nhà hàng Mony's Tacos có trụ sở tại Santa Barbara dưới đây. Nó trông giống như phấn được vẽ trên bảng đen, phải không? Tôi không biết về bạn nhưng tôi gần như có thể cảm nhận được phấn trên ngón tay của mình khi nhìn vào nó. Đó là diện mạo hoàn hảo cho một nhà hàng nhằm mục đích trở thành lựa chọn Funk Zone ưa thích của California cho các món ăn ngon của Mexico.

5. Thêm hình ảnh để thu hút và thông báo cho người đọc

Tạo sự cân bằng giữa văn bản và hình ảnh là điều cần thiết trong thiết kế trang web. Kết hợp hình ảnh có thể làm cho nội dung của bạn nhiều thông tin, hấp dẫn và đáng nhớ hơn. Chắc hẳn bạn đã từng nghe thống kê rằng mọi người chỉ nhớ 20% những gì họ đọc, nhưng 80% những gì họ thấy? Mặc dù tỷ lệ phần trăm chính xác đang được tranh luận, nhưng ý tưởng cơ bản thì không. Một số người dễ dàng tìm hiểu và xử lý thông tin một cách trực quan hơn.

Đây là một ví dụ độc đáo về việc chia nhỏ văn bản bằng hình ảnh từ trang web của một công ty mỹ phẩm. Điều này cho thấy khả năng kết hợp hình ảnh vào thiết kế trang web của bạn là vô tận.

6. Đơn giản hóa việc điều hướng của bạn

Điều hướng là một trong những yếu tố thiết kế quan trọng nhất trên trang web. Nó ảnh hưởng đến việc khách truy cập đến trang chủ của bạn và duyệt hay nhấp vào nút “Quay lại”. Đó là lý do tại sao điều quan trọng là giữ cho nó đơn giản nhất có thể.

Nhiều trang web chọn thanh điều hướng nằm ngang. Kiểu điều hướng này liệt kê các trang chính cạnh nhau và được đặt trong tiêu đề trang web.

Lấy thanh điều hướng trên Blavity làm ví dụ. Các phần nổi bật bao gồm ba danh mục nội dung - “Tin tức”, “Op-Eds” và “Phong cách sống” - cũng như các liên kết đến trang gửi và trang đăng ký của họ. Điều này cung cấp cho khách truy cập dễ dàng truy cập vào các trang mà họ có thể đang tìm kiếm. Các mục điều hướng khác được đặt trong menu thả xuống có nhãn "Khác" để chúng vẫn dễ tìm nhưng không bị lộn xộn trong điều hướng cấp cao nhất. Cuối cùng, thanh điều hướng dính để khách truy cập không phải cuộn lên và xuống trang để duyệt trang web.

7. Làm cho CTA của bạn nổi bật

CTA là các yếu tố trên trang web, quảng cáo hoặc một phần nội dung khác khuyến khích khán giả làm điều gì đó. Lời kêu gọi hành động có thể là đăng ký, đăng ký, bắt đầu dùng thử miễn phí hoặc tìm hiểu thêm, trong số nhiều thứ khác.

Bạn muốn CTA xuất hiện trong thiết kế trang web của mình. Để thực hiện điều đó, hãy xem xét cách bạn đang sử dụng màu sắc cũng như các yếu tố khác như màu nền, hình ảnh xung quanh và văn bản xung quanh.

Square cung cấp một ví dụ kêu gọi hành động tuyệt vời. Sử dụng một hình ảnh duy nhất để thể hiện sự đơn giản trong việc sử dụng sản phẩm của họ, Square sử dụng kiểu chữ in đậm để cho thấy sản phẩm của họ độc đáo và hướng đến tương lai như thế nào. Trong bối cảnh ấn tượng này, CTA "Bắt đầu" màu xanh lam đang chờ bạn nhấp chuột.

8. Tối ưu hóa cho thiết bị di động

Chúng tôi đã thảo luận về tầm quan trọng của việc trang web của bạn phản hồi nhanh. Tuy nhiên, vì thiết bị di động chiếm 59% lượt truy cập của công cụ tìm kiếm không phải trả tiền vào năm 2021, nên chúng tôi đang nhấn mạnh tầm quan trọng của việc thiết kế trang web của bạn thân thiện với thiết bị di động. Điều đó có thể có nghĩa là thay đổi hoặc loại bỏ một số thành phần có thể làm lộn xộn kích thước màn hình nhỏ hơn hoặc ảnh hưởng tiêu cực đến thời gian tải.

Để biết ví dụ về một trong những thiết kế trang web dành cho thiết bị di động tốt nhất, hãy so sánh trang chủ của Etsy trên máy tính để bàn với thiết bị di động. Trên máy tính để bàn, bạn sẽ thấy một thanh điều hướng với các danh mục. Di chuột qua từng danh mục sẽ hiển thị menu thả xuống.

Trên thiết bị di động, phần này thu gọn phía sau nút bánh hamburger, giúp cải thiện giao diện và hiệu suất của trang web dành cho thiết bị di động. Bạn cũng sẽ nhận thấy rằng hình ảnh lớn hơn — hoàn hảo để chạm bằng ngón tay trên màn hình di động.

9. Giới hạn các tùy chọn hiển thị cho người dùng

Theo Định luật Hick, việc tăng số lượng và độ phức tạp của các lựa chọn sẽ làm tăng thời gian cần thiết để một người đưa ra quyết định. Đây là tin xấu trong thiết kế trang web. Nếu khách truy cập trang web được cung cấp quá nhiều tùy chọn, họ có thể cảm thấy thất vọng và thoát ra — hoặc họ có thể chọn một tùy chọn mà bạn không muốn, chẳng hạn như từ bỏ giỏ hàng của họ. Đó là lý do tại sao điều quan trọng là phải giới hạn số lượng tùy chọn được hiển thị cho người dùng.

Ví dụ: một khách truy cập vào trang chủ của Shawn Michelle's Ice Cream sẽ có ba tùy chọn: để tìm hiểu thêm về công ty, hương vị hoặc thành phần. Nhưng thay vì hiển thị cả ba tùy chọn cùng một lúc, chúng được hiển thị lần lượt trong một thanh trượt. Đây là một ví dụ tuyệt vời về việc triển khai Định luật Hick trong thiết kế UX.

Pro-Tip: Bạn không có thời gian để tuân theo các quy tắc? Bạn luôn có thể tải xuống mẫu trang web dựng sẵn sẽ cung cấp nền tảng vững chắc cho trang web của bạn.

Giờ đây, chúng tôi đã hiểu các nguyên tắc và phương pháp hay nhất sẽ hướng dẫn bạn trong suốt quá trình thiết kế. Trong phần tiếp theo, chúng ta hãy xem xét các thành phần thiết yếu của trang mà bạn nên xem xét cẩn thận để đưa vào kế hoạch thiết kế của mình.