Hãy xây dựng hoặc nâng cấp trang web vào những năm 202X

Bạn có biết rằng 75% độ tin cậy của trang web của bạn là do thiết kế của nó không? Khách truy cập có thể cảm thấy công ty của bạn kém tin cậy hơn nếu có nhiều lỗi thiết kế trang web. Cho dù bạn đang xây dựng một trang web từ đầu hay làm mới trang web hiện tại của mình, việc tránh những lỗi này sẽ giúp doanh nghiệp của bạn nổi bật trên mạng vì những lý do chính đáng.

Trong bài đăng này, bạn sẽ được nghe từ năm HubSpotters đã chia sẻ thông tin chi tiết về các lỗi thiết kế trang web phổ biến nhất. Bạn cũng sẽ tìm hiểu các cách khả thi để khắc phục hoặc tránh những lỗi này hoàn toàn.

8 lỗi thiết kế web phổ biến

Không ưu tiên khả năng tiếp cận.
Quên tầm quan trọng của thiết kế đáp ứng.
Làm ảnh hưởng đến trải nghiệm người dùng vì tính thẩm mỹ.
Không đầu tư vào tùy biến.
Sử dụng các tính năng không chuyển đổi.
Thiếu thứ bậc.
Có điều hướng không rõ ràng.
Không truyền đạt hiệu quả mục đích kinh doanh của bạn.

1. Không ưu tiên khả năng tiếp cận.

Đối xử với khả năng truy cập như một suy nghĩ lại là lỗi thiết kế trang web số một mà bạn có thể mắc phải. Theo Maria Kelly, Giám đốc Phát triển Web của Nhóm Web Tiếp thị HubSpot, đây là bốn lỗi chính liên quan đến khả năng truy cập:

Độ tương phản màu không đủ
Văn bản thay thế bị thiếu hoặc không phù hợp cho hình ảnh hoặc đồ họa
Không đủ hoặc thiếu các chỉ báo tiêu điểm trực quan
Nhìn ra tên hoặc nhãn có thể truy cập

Hãy đi sâu hơn vào từng vấn đề này.

Độ tương phản màu không đủ

Độ tương phản màu sắc là một lỗi trợ năng thường bị bỏ qua. Thông thường, lỗi này xảy ra do các công ty tạo trang web có bảng màu thương hiệu của họ — điều này thường không được tạo ra với thiết kế dễ tiếp cận.

Kelly chia sẻ: “Khi sự kết hợp màu sắc được sử dụng trên trang web thiếu độ tương phản màu giữa màu nền và màu nền trước, văn bản và biểu tượng có thể khó nhận biết, đặc biệt đối với những người khiếm thị như mù màu”. “Theo báo cáo thường niên của WebAIM Million năm 2022, các vấn đề về độ tương phản màu sắc đã được tìm thấy trên hơn 80% trang chủ!”

Văn bản thay thế bị thiếu hoặc không phù hợp

Khách truy cập trang web sử dụng trình đọc màn hình dựa vào văn bản thay thế hình ảnh để mô tả nội dung mà hình ảnh hoặc đồ họa truyền tải. Nếu nó bị thiếu hoặc không mô tả đầy đủ hình ảnh, thì bạn đang cô lập những độc giả cần nó để lướt qua trang web của bạn.

“Hình ảnh là một phần nội dung trang web của bạn, vì vậy, điều quan trọng là phải nghĩ về chúng giống như cách bạn nghĩ về bản sao trang web truyền thống: Thông tin nào đang được truyền tải bằng cách đưa hình ảnh vào trang của bạn? Hãy chắc chắn rằng văn bản thay thế mà bạn sử dụng truyền đạt cùng một ý nghĩa,” Kelly nói.

Không đủ hoặc thiếu các chỉ báo tập trung trực quan

Nếu không có các chỉ số tập trung trực quan, khách truy cập sẽ không thể trải nghiệm trang web của bạn với tiềm năng tối đa. Kelly chia sẻ: “Các chỉ báo tiêu điểm thường xuất hiện dưới dạng đường viền xung quanh các thành phần tương tác như liên kết và nút. “Điều quan trọng là phải có chỉ báo trực quan rõ ràng về phần tử nào trên trang hiện đang là tiêu điểm để người dùng đang điều hướng bằng bàn phím và có thể nhìn thấy màn hình biết chính xác họ đang ở đâu trên trang và điều gì sẽ xảy ra khi họ tương tác với phần đó. yếu tố tích cực.”

Nhìn ra tên hoặc nhãn có thể truy cập

Nếu trang web của bạn truyền tải thông tin một cách trực quan, hãy chú ý đến những trang sử dụng công nghệ hỗ trợ. Kelly cho biết: “Khi thiết kế các trang và thành phần trong đó thông tin được truyền tải một cách trực quan, thông tin tương tự đó sẽ được truyền tải bằng cách sử dụng các nhãn có thể truy cập được dành cho công nghệ hỗ trợ.

“Ví dụ: một xu hướng phổ biến trong thiết kế web là các thành phần thẻ có nút hoặc liên kết ‘Đọc thêm’ xuất hiện ở cuối mỗi thẻ. Thông tin về mục mà mỗi nút được liên kết với được thiết kế truyền tải một cách trực quan, tuy nhiên, đối với trình đọc màn hình, các nút này thường khó phân biệt nếu chúng thiếu nhãn có thể truy cập với các chi tiết có liên quan, ví dụ: 'Đọc thêm về Trung tâm tiếp thị. '”

2. Quên tầm quan trọng của thiết kế đáp ứng

Trong quý 2 năm 2022, thiết bị di động chiếm hơn 58% lưu lượng truy cập trang web toàn cầu — thậm chí không bao gồm máy tính bảng. Nếu trang web của bạn không dễ điều hướng trên thiết bị di động như trên máy tính để bàn, bạn có nguy cơ làm phiền khách truy cập và tăng tỷ lệ thoát.

“Hơn bao giờ hết, người dùng đang truy cập các trang web từ nhiều thiết bị; điện thoại, máy tính bảng, máy tính xách tay hoặc thậm chí cả TV. Juan Manuel Devia Pinzon, Trưởng nhóm thiết kế tại HubSpot chia sẻ: “Bây giờ là thời đại của các điểm dừng!”

3. Ảnh hưởng đến trải nghiệm người dùng vì tính thẩm mỹ.

Một trong những lỗi thiết kế trang web phổ biến trong vài năm qua là ưu tiên tính thẩm mỹ hơn chức năng. Khi internet đã trở nên bão hòa với mo “Với sự bùng nổ lớn của các phương tiện truyền thông và thiết kế mới trong những năm qua, sự xuất sắc gần như là điều bắt buộc để thành công. Thật không may, điều này đã kết thúc bằng việc sử dụng quá nhiều các yếu tố thiết kế và đồ họa giúp nâng cao cảm giác của người dùng nhưng lại thiếu hoặc cảm thấy bị ngắt kết nối với mục đích thực sự của một trang web,” Sergio Martinez, Giám đốc Trải nghiệm Thiết kế tại HubSpot chia sẻ.

4. Không đầu tư vào tùy biến.

Đi bộ vào trung tâm thành phố, bạn đi ngang qua một cửa hàng quần áo với màn hình cửa sổ sáng tạo, bắt mắt. Nó có nhiều loại quần áo được bán và kể một câu chuyện với bối cảnh và nội dung hấp dẫn. Sau đó, bạn đi ngang qua một cửa hàng chỉ với vài bộ quần áo trên ma-nơ-canh trên cửa sổ - không có gì bắt mắt bạn.

Hãy coi trang web của bạn là cửa hàng trực tuyến của doanh nghiệp bạn. Nó sẽ phản ánh thương hiệu của bạn và cảm thấy độc đáo cho công ty của bạn. Một trong những lỗi thiết kế trang web quan trọng nhất là chọn mẫu cắt cookie và không tùy chỉnh nó.

Chẳng hạn, việc đặt mặc định cho biểu ngữ anh hùng tiêu chuẩn có thể phản tác dụng. Lindsay Derby, Nhà thiết kế sản phẩm cao cấp của nhóm SAPG tại HubSpot cho biết: “Tất cả chúng ta đều đã nhìn thấy chúng - hình ảnh có chiều rộng đầy đủ ngay bên dưới điều hướng thường có văn bản màu trắng hoặc đen và một nút ở trên cùng.

“Hình ảnh có thể rất sáng, rất tối hoặc được cắt xén một cách thông minh để làm cho văn bản dễ đọc. Có một vài lý do tại sao tôi nghĩ rằng đây là một sai lầm như vậy. Đầu tiên là nó phổ biến đến mức trở nên công thức và nhàm chán. Những gì từng là một quyết định thiết kế bắt mắt giờ đây trở nên đơn điệu.”

5. Sử dụng các tính năng không chuyển đổi.

Một lỗi phổ biến khác là sử dụng các tính năng không hiệu quả. Cho dù một yếu tố có thể hấp dẫn trực quan đến mức nào, hãy nhớ rằng ưu tiên chính là tính hiệu quả của trang web của bạn. “Một sai lầm phổ biến khác là dựa vào các băng chuyền xoay vòng để làm nổi bật nhiều phần nội dung ở cùng cấp độ,” Derby chia sẻ.

“Đã có vô số nghiên cứu được thực hiện để chỉ ra rằng người dùng không thường xuyên tương tác với băng chuyền, đặc biệt là trên thiết bị di động nơi chi phí tương tác cao.”

6. Thiếu thứ bậc.

Bạn đã bao giờ truy cập một trang web và thấy mình không biết nên tập trung sự chú ý của mình vào đâu chưa? Nếu vậy, bạn có thể đã truy cập vào một trang web thiếu thứ bậc. Landry nói: “Giống như cách một tờ báo sử dụng tiêu đề và tiêu đề phụ để biểu thị tầm quan trọng, kiểu chữ trang web của bạn cũng vậy.

Đặt hàng trên trang web của bạn có tính thẩm mỹ, nhưng nó cũng có chức năng. Martinez cho biết: “Tổ chức các yếu tố trang web… cung cấp cho trang web của bạn một cấu trúc gắn kết thúc đẩy người dùng hoàn thành các hành động rõ ràng, đạt được mục tiêu chính và sau đó tạo ra trải nghiệm liền mạch”.

Khắc phục điều này không đơn giản, đặc biệt khi công ty của bạn có nhiều đối tượng với các mục tiêu khác nhau. Tuy nhiên, theo Martinez, tốt nhất là bạn nên làm điều đó vì vấn đề này có thể ảnh hưởng đáng kể đến cách người dùng trải nghiệm trang web của bạn. Anh ấy chia sẻ: “Việc thiếu hệ thống phân cấp sẽ đánh lừa người dùng và ngăn họ đạt được mục tiêu của mình.

7. Điều hướng không rõ ràng.

Điều hướng rõ ràng có thể làm giảm trải nghiệm ma sát của khách truy cập khi họ truy cập vào trang web của bạn, đó là lý do tại sao điều hướng không rõ ràng là một tình trạng khó khăn như vậy.

“Khi ngày càng có nhiều doanh nghiệp tham gia vào thế giới kỹ thuật số, nội dung trên trang web trở nên đông đúc và phức tạp hơn, việc có một điều hướng rõ ràng và nhất quán trên nhiều điểm tiếp xúc và hành trình của người dùng sẽ đảm bảo quá trình chuyển đổi suôn sẻ từ khách truy cập đầu tiên sang người ủng hộ,” Devia Pinzon chia sẻ .

8. Không truyền đạt hiệu quả mục đích kinh doanh của bạn.

Khi khách truy cập vào trang web của bạn, họ sẽ có thể có được một bức tranh rõ ràng về những gì công ty của bạn làm. Và nếu hình ảnh đó thậm chí còn hơi mờ? Bạn đã đoán được — khách truy cập có thể từ bỏ trang web của bạn.

Landry nói: “Điều đầu tiên mà khách truy cập trang web làm khi họ tải trang web của bạn là xác định xem họ có đến đúng đích hay không. “Trang web của bạn có nêu rõ sản phẩm hoặc dịch vụ mà nó cung cấp trong màn hình đầu tiên không?”

Trang web của bạn nên nâng cao uy tín của doanh nghiệp của bạn. Nếu nó không truyền đạt mục đích kinh doanh của bạn và khẳng định với khách truy cập rằng họ đang ở đúng vị trí, thì có thể nên thiết kế lại trang web.

Cách khắc phục các lỗi thiết kế trang web phổ biến

Bây giờ chúng ta đã xem xét các lỗi thiết kế trang web phổ biến nhất, hãy thảo luận về cách khắc phục chúng. Đừng lo lắng: nhận thức là một nửa trận chiến. Bây giờ bạn đã biết những điều cần tránh, bạn có thể bắt đầu tạo một trang web có các phương pháp hay nhất về thiết kế trang web.

1. Đặt khả năng tiếp cận là ưu tiên hàng đầu của bạn.

Kelly cho biết: “Khả năng truy cập web có nghĩa là làm cho các trang web và thông tin trên đó có thể truy cập được đối với mọi người, vì vậy điều cực kỳ quan trọng là phải làm đúng khi thiết kế trang web. “Khi mắc phải những lỗi phổ biến về khả năng truy cập này trong thiết kế trang web, chúng tôi đã tạo ra các rào cản về khả năng sử dụng cho hàng triệu người đang sống với một dạng khuyết tật nào đó. Ngay cả khi trang web của bạn trông tuyệt vời, nếu một số nội dung hoặc hành động nhất định không thể truy cập được đối với một bộ phận khách truy cập, thì nó sẽ không phát huy hết tiềm năng để đáp ứng mục tiêu và nhu cầu kinh doanh của bạn.”

2. Đảm bảo trang web của bạn có thiết kế đáp ứng.

Với thiết kế web đáp ứng, bạn có thể yên tâm rằng bất kể khách truy cập trang web của bạn bằng cách nào, họ sẽ có trải nghiệm liền mạch. May mắn thay, tạo một trang web đáp ứng không khó như vẻ ngoài của nó — và nếu bạn đang sử dụng một hệ thống quản lý nội dung như CMS Hub, bạn thậm chí có thể sử dụng các mẫu đã thân thiện với thiết bị di động.

Khi bạn đã tạo phiên bản di động cho trang web của mình, công việc của bạn vẫn chưa hoàn thành. “Hãy đảm bảo luôn kiểm tra trang web của bạn trên điện thoại,” Landry nhắc nhở. Việc kiểm tra trang web có thể phát hiện ra các trục trặc mà bạn không nhận thấy trước đây.

Nếu bạn có thể sử dụng một số nguồn cảm hứng, chúng tôi đã tổng hợp 21 ví dụ tốt nhất về thiết kế trang web dành cho thiết bị di động.

3. Cân bằng tính thẩm mỹ với trải nghiệm người dùng liền mạch.

Chúng tôi biết điều gì sẽ xảy ra khi một trang web đặt tính thẩm mỹ lên hàng đầu và chức năng đứng thứ hai. Trên một trang web thành công, có thể cân bằng sự hấp dẫn trực quan với trải nghiệm người dùng liền mạch cho phép khách truy cập điều hướng qua các trang và tìm thấy những gì họ đang tìm kiếm.

Các nhóm thiết kế nên trung thành với chiến lược, đảm bảo thiết kế hỗ trợ các mục tiêu chính của người dùng và có sự liên kết tốt với các nhóm Phát triển, Nội dung và SEO.

4. Hãy chủ ý về thiết kế trang web và đừng ngại sáng tạo.

Chỉ vì bạn thấy nhiều trang web có thiết kế hoặc bố cục cụ thể không có nghĩa là trang web của bạn cần phải như vậy. “Hãy suy nghĩ có chủ ý thực sự về những gì nên được đặt ở vị trí có giá trị cao này,” Derby chia sẻ về khu vực bên dưới điều hướng.

Tự đặt câu hỏi về ý định của bạn cho không gian là một cách hiệu quả khác để hiểu điều gì sẽ phù hợp nhất với nó. “Hình ảnh có ý nghĩa hay chỉ mang tính trang trí? Bố cục có được thiết kế theo cách khuyến khích người dùng đọc hoặc thực hiện hành động không? Có điều gì thú vị có thể thu hút sự chú ý của họ trong vài giây không?

Tương tự như hiệu ứng mù biểu ngữ với quảng cáo, người dùng bắt đầu bỏ qua ngay các phần anh hùng lớn này để cố gắng đi sâu vào nội dung thực sự có ý nghĩa bên dưới. Đây là một cơ hội bị bỏ lỡ cho các nhà thiết kế web và nhà tiếp thị, những người thường đặt CTA có giá trị nhất của họ trong biểu ngữ anh hùng.”

Ngoài ra, bạn có thể quyết định thay đổi hoàn toàn bố cục trang web của mình để trang web không có hình ảnh bên dưới điều hướng. Hơn 70% doanh nghiệp đầu tư vào thiết kế để giúp công ty của họ khác biệt với các đối thủ cạnh tranh, vì vậy đừng ngại làm điều gì đó mà không ai khác trong ngành của bạn làm được.

5. Đừng bỏ quên tính năng chuyển đổi.

Nếu bạn biết một tính năng không chuyển đổi hoặc khách truy cập lướt qua nó, hãy chắc chắn rằng bạn không chôn thông tin quan trọng về nó. (Hoặc tốt hơn là loại bỏ nó hoàn toàn.) Nếu trang web của công ty bạn có băng chuyền, hãy chắc chắn rằng bạn xem xét các phương pháp hay nhất.

“Một số điều có thể được cải thiện về trải nghiệm băng chuyền là sử dụng các điều khiển dễ thấy, giới hạn số lượng trang chiếu và đặt phần thông tin quan trọng nhất lên trước,” Derby nói. “Không nên ẩn nội dung quan trọng nào ngoài trang trình bày đầu tiên để người dùng chắc chắn có được trải nghiệm hoàn chỉnh nếu họ không tương tác với thành phần.”

6. Đảm bảo rằng trang web của bạn có hệ thống phân cấp.

Nếu không có hệ thống phân cấp, trang web của bạn sẽ quá tải, khó hiểu và khó hiểu. Tuy nhiên, với hệ thống phân cấp, khách truy cập hiểu rõ nơi cần tìm và đọc gì. May mắn thay, có một số cách khắc phục nhanh mà bạn có thể thực hiện để triển khai hệ thống phân cấp trên trang web của mình. Để có được một số ý tưởng, bạn nên nghiên cứu một số dịch vụ thiết kế trang web chuyên về kiến trúc phân cấp trong thiết kế web hiện đại.

7. Đảm bảo điều hướng trang web của bạn trực quan.

Nếu trang web của bạn có điều hướng trục trặc, bạn có thể thấy điều đó được phản ánh trong tỷ lệ thoát của trang web. Hãy coi điều hướng hiệu quả là điều bắt buộc phải có để có trải nghiệm người dùng liền mạch.

Martinez cho biết: “Điều hướng trực quan đảm bảo trải nghiệm người dùng mượt mà và hỗ trợ hành trình của người dùng, cung cấp khả năng khám phá thông tin dễ dàng hoặc cách quay lại một điểm nhất định. “Để đảm bảo điều này, các nhóm nên xác định các cấp độ điều hướng (lý tưởng là không quá ba) và cách các trang ở các cấp độ khác nhau liên kết trở lại cấp độ gốc của chúng. Ngoài ra, hãy xác thực việc gắn nhãn chính xác để giúp mọi người dùng dễ hiểu và xác nhận rằng điều hướng hoạt động trên các kích thước màn hình khác nhau vì chúng có thể hoạt động khác nhau.”

8. Đảm bảo rằng bạn truyền tải được mục đích kinh doanh của mình thông qua thiết kế và nội dung.

Bạn sẽ sử dụng bản sao hấp dẫn và các yếu tố hình ảnh để đạt được điều này. Trước khi bạn bắt đầu, hãy tự hỏi mục đích trang web của bạn là gì. Bạn có đang tạo trang web thương mại điện tử nơi khách truy cập có thể mua các mặt hàng từ công ty của bạn không? Hay mục tiêu chính của trang web của bạn là thông báo những dịch vụ mà nhóm của bạn cung cấp?

Làm rõ nhiệm vụ của trang web của bạn là gì. Mọi tính năng và nội dung mà bạn thêm vào trang web sẽ đóng góp cho mục đích đó. Bạn có thể cần sử dụng các dịch vụ CNTT cho doanh nghiệp của mình để tối đa hóa mức độ tương tác của khán giả.

Tránh các lỗi thiết kế trang web phổ biến để tăng độ tin cậy của trang web

Bằng cách tránh các lỗi thiết kế trang web phổ biến, bạn sẽ tăng độ tin cậy cho trang web của mình và mang đến cho khách truy cập trải nghiệm mà họ sẽ muốn quay lại.

Thiết kế web là một môn thể thao đồng đội và yêu cầu một cách tiếp cận vòng tròn để đảm bảo sự liên kết tốt giữa các nhóm, các bên liên quan và kiến thức của người dùng. Không có cách nào tốt hơn là thử nghiệm và lặp lại, bao gồm nghiên cứu người dùng và thử nghiệm khả năng sử dụng, để đảm bảo trang web của bạn đang đi đúng hướng.