Top 10 lỗi sai vẫn tồn tại dai dẳng trong thiết kế web

bởi Nguyễn Đức Anh
lỗi sai trong thiết kế web

Tóm tắt: Một nghiên cứu trên quy mô lớn về tính khả dụng tiết lộ phần lớn những lỗi phổ biến làm hỏng thiết kế web ở thời điểm hiện tại. Chúng không mới và cũng chẳng gây bất ngờ – chúng là những vấn đề đã tồn tại dai dẳng từ lâu và vẫn tiếp tục gây tổn hại cho tính khả dụng của web.

Từ năm 1996, chúng tôi đã soạn ra danh sách 10 lỗi hàng đầu trong thiết kế web. Năm nay (2016), chúng tôi đã hoàn thành một nghiên cứu trên quy mô lớn về tính khả dụng với 215 người tham gia ở Hoa Kỳ và Anh Quốc để xem các lỗi trong thiết kế web ở thời điểm hiện tại là gì. Sau khi phân tích các kết quả qua 43 trang web ở nhiều dạng khác nhau, từ các trang nhỏ, trang kinh doanh địa phương cho tới các trang web giải trí, phi lợi nhuận, rồi các tổ chức toàn cầu, chúng tôi xác định 10 lỗi phổ biến nhất và nghiêm trọng nhất trong thiết kế web gây khó cho người dùng của chúng ta. (Và vì làm khó khăn cho người dùng, các thiết kế lỗi này gần như chắc chắn gây tổn hại cho các chỉ số kinh doanh của website.)

Tin quan trọng nhất là gì? Không vấn đề nào trong danh sách hiện là mới hoặc bất ngờ cả. Thiết kế web đã đi một chặng đường dài. Nhưng những vấn đề này vẫn tiếp tục tồn tại dai dẳng. Các mẫu thiết kế hiện đại và tính thẩm mỹ đều đã thay đổi, nhưng những nhu cầu cơ bản của người dùng (underlying user need) thì vẫn vậy. Người dùng vẫn cần tìm thông tin, có thể đọc được nó, biết cần click vào đâu và nó sẽ dẫn mình đến đâu.

Trang web của bạn có bao nhiêu các lỗi trong danh sách này?

1. Nội dung nằm ở các vị trí ngoài dự kiến

Mọi người không sử dụng thông tin khi mà bản thân họ không tìm thấy chúng. Nhiều trang cung cấp các tên thư mục nghèo nàn không mô tả đầy đủ hoặc chính xác nội dung nằm bên trong chúng. Các trang khác thì sắp xếp, cấu trúc dựa trên bản thân công ty mình hơn là ưu tiên cho người dùng – khi nghĩ về nội dung. Khi cấu trúc trang web không khớp khít với mô hình tinh thần của người dùng (users’ mental models) về cách thông tin phải được sắp xếp ra sao, mọi người không thể định vị được vị trí họ cần đến.

Để ý, cân nhắc đến người dùng trong quá trình tạo cấu trúc trang web của bạn. Với một chút thử nghiệm về tính khả dụng như sắp xếp thẻ, kiểm tra hình cây, hoặc kiểm tra tính khả dụng có thể đưa bạn đi một chặng đường dài trong việc tạo ra một cấu trúc trang có ý nghĩa với người dùng.

Trang của ATT

ATT.com: Thông tin về giao dịch điện thoại cũ nằm trong thư mục Existing Customers/Khách hàng hiện tại nhưng người dùng lại tìm thấy nó dưới thư mục Smartphones/Điện thoại thông minh.

2. Các liên kết và các thư mục cạnh tranh với nhau

Khi người dùng không thể phân biệt rõ ràng giữa các thư mục hoặc liên kết điều hướng tương tự nhau, họ gặp khó khăn để tìm ra được đúng lối vào nội dung. Tên của thư mục hoặc liên kết cần phải có ý nghĩa cho chính chúng, nhưng cũng cần phải kết hợp với các tùy chọn khác trên trang nữa. Nếu nhiều phần hoặc nhiều trang có thể giải quyết được cùng một nhu cầu thông tin cụ thể, người dùng phải khám phá từng cái hoặc đưa ra dự đoán tốt nhất của họ (để xem cái nào tốt nhất – chú thích của người dịch). Ngoài ra họ có thể chuyển sang tìm kiếm hoặc thậm chí rời khỏi trang.

BAM construction

Người dùng trên trang web Bam Constrcution muốn biết các dự án chi tiết về xây dựng của công ty, nhưng không biết chắc thông tin đó đang nằm dưới khu vực nào trong số các cái sau: Who We Are (Chúng Tôi Là Ai), What We Do (Chúng Tôi Làm Gì), hoặc How We Do It (Cách Chúng Tôi Làm Điều Đó). Hầu hết sẽ bắt đầu vào phần What We Do, nhưng phần này lại bao gồm thông tin tổng quan về các kiểu công việc mà tổ chức cung cấp cho khách hàng, hơn là các dự án chi tiết. Thông tin dự án và các case studies (nghiên cứu điển hình) lại nằm trong phần How We Do It.

Sắp xếp thẻ và kiểm tra tính khả dụng có thể giúp tên thư mục không bị trùng lắp ý nghĩa với nhau. Các vấn đề với liên kết quá giống nhau thường xuất phát từ chiến lược nội dung yếu kém (poor content strategy). Có khả năng hai nguyên nhân cho vấn đề đó là:

  • Nhãn mô tả kém: Các liên kết dẫn đến nội dung khác nhau, nhưng, vì một lý do nào đó, chúng có nhãn tương tự nhau. Nếu đây là trường hợp của bạn, thử đổi tên liên kết để phân biệt nó với những cái khác.
  • Có sự phân biệt nội dung kém: Nếu các liên kết dẫn đến các trang khác nhau với mức độ liên quan thông tin cao, giải pháp có thể không phải là đổi tên các liên kết, bạn cần sắp xếp và củng cố nội dung.

3. Các đảo thông tin cô lập

Một số trang cung cấp các mẩu thông tin nhỏ rải rác khắp trang web, với một ít hoặc không có sự kết nối nào giữa chúng với nhau.

Khi người dùng tìm ra một hòn đảo thông tin cách ly như vậy, tức là nó chẳng có liên kết nào với thông tin liên quan khác, họ sẽ không có lý do gì để nghĩ rằng khu vực khác của trang cung cấp thông tin bổ sung. Nếu mọi người cần thêm thông tin, họ có thể chuyển sang trang web của đối thủ cạnh tranh hoặc truy cập vào Google để đạt được mục tiêu đó.

Khi người dùng cố gắng xem lại thông tin, họ có thể lại kết thúc trên một khu vực hoàn toàn khác trên trang, với một nội dung khác thay vì trải nghiệm đầu tiên. Dù thế nào, họ rời đi với một ấn tượng tiêu cực về trang web.

Xét từ quan điểm của tổ chức, điều này không chỉ là một thất bại về trải nghiệm người dùng, mà còn là một ác mộng về quản trị nội dung: thông tin trong một khu vực nào đó của trang có thể bị trùng lắp, khác, hoặc thậm chí là mâu thuẫn thông tin ở nơi khác.

Một giải pháp là thêm các liên kết liên quan giữa các trang để cung cấp thông tin liên quan. Giải pháp tốt hơn là đánh giá vì sao thông tin lại rải rác qua toàn trang, hợp nhất nó khi thích hợp, và chọn vị trí tốt nhất cho nó. Các vị trí khác trên trang có thể liên quan đến vị trí chính cho nội dung về chủ đề đó, thay vì sao chép, lặp lại thông tin

4. Các liên kết lặp lại

Thậm chí nếu người dùng có thể xác định được vị trí chính xác trên trang cho thông tin mà họ cần, họ có thể vẫn bị cản trở bởi luồng công việc không mong muốn hoặc dài dòng.

Đội web thường hỏi cần bao nhiêu click phải thực hiện để đi đến nội dung. Không có con số bí mật ở đây – chất lượng của click quan trọng hơn nhiều so với số lượng. Người dùng phải đi đến gần thông tin mục tiêu hơn khi họ click qua các trang. Các click lặp lại ép buộc mọi người phải chọn cái họ muốn hết lần này đến lần khác làm người dùng khó chịu và yêu cầu họ bỏ ra các nỗ lực không cần thiết (unnecessary effort).

Đội đôi khi xây dựng các trang ở dạng cô lập và không xem xét tuyến đường đi đến nội dung mà họ đã tạo. Khi tạo các trang mới, hãy đánh giá cách người dùng sẽ đến đó và xem xem liệu có con đường nào trực tiếp hơn hay không.

NYC 1

NYC 2

NYC.gov: Người dùng thấy bực bội khi họ chọn liên kết có nhãn Find a Firehouse và rồi chỉ thấy một liên kết sai chính tả Find a fire house trên trang kế tiếp (họ vẫn chưa vào được nội dung chính, đây là lý do tại sao phần này có tên là liên kết lặp lại – chú thích của người dịch).

5. Giá và chi phí ẩn

Mọi người muốn biết giá, phí thuê bao, phí ưu đãi(*), và các chi phí bổ sung trước khi (hoặc tại lúc bắt đầu) quy trình mua hàng. Trên một số trang, người dùng phải trải qua quy trình tương tác phức tạp chỉ để tìm thấy thông tin cơ bản – lấy ví dụ, họ phải tiến hành mua gói thành viên trên trang AARP để tìm ra được chi phí thành viên (tức là giá chỉ được biết khi người ta tiến hành các bước đặt hàng, thông thường, người ta cần biết giá của nó trước khi thực hiện điều này – chú thích của người dịch). Người dùng phải có khả năng tìm được thông tin trước khi cam kết tham gia một quy trình phức tạp.

(*) convenience fees – số tiền giảm trừ cho người dùng, thí dụ nhờ việc thanh toán trực tuyến thay vì trả tiền mặt.

6. Người dùng bị mắc kẹt trên các trang microsites

Các trang tạo một trang riêng thứ hai cho một kiểu nội dung cụ thể cần cẩn thận về việc làm người dùng bị mắc kẹt trên những trang đó. Nhiều người tham gia nghiên cứu của chúng tôi chuyển sang trang mới hoặc trang phụ mà không nhận ra điều đó và gặp khó khăn khi muốn quay trở lại trang chính vì trang phụ không cung cấp tùy chọn quay lại. Một số có khả năng điều hướng về trang cha bằng cách sử dụng nhiều lần nút Back của trình duyệt hoặc gõ lại địa chỉ URL của trang, nhiều nhiều trang thậm chí không có lưu ý nào cho người dùng biết là họ chuyển sang trang khác (bởi vì có sự tương đồng giữa giao diện và tính năng (look-and-feel) của trang cha và trang con) và tự hỏi tại sao điều hướng mà họ có trước đó lại biến mất.

Hãy suy nghĩ cẩn thận trước khi tạo một trang con riêng biệt. Nếu bạn định xây dựng một cái, cần đảm bảo rằng người dùng có thể dễ dàng điều hướng trở lại trang cha khi cần thiết.

hội chữ thập đỏ Anh Quốc

trang con của hội chữ thập đỏ Anh Quốc

Trang chính của Hội Chữ Thập Đỏ Anh Quốc (www.redcross.org.uk – hình chụp màn hình phía trên) và trang con chuyên cho việc đào tạo (www.redcrossfirstaidtraining.co.uk – trang bên dưới) trông rất giống nhau, chúng sử dụng cùng logo để liên kết tới từng trang chủ tương ứng, và thư mục điều hướng đầu tiên giống nhau (What We Do / Chúng Tôi Làm Điều Gì). Người dùng tìm kiếm khóa học sơ cứu chuyển sang trang đào tạo mất phương hướng khi họ cố gắng quay lại trang chính.

7. Các kết quả tìm kiếm yếu kém

Người dùng chuyển qua tìm kiếm tùy chọn, như là một phương sách cuối cùng, hoặc khi họ biết được chính xác họ cần phải tìm điều gì. Trong bất cứ kịch bản nào, các trang cần hỗ trợ người dùng bằng cách cung cấp các kết quả tìm kiếm tốt.

Thật không may, tính năng tìm kiếm trên trang vẫn là điểm yếu lớn trên nhiều trang web. Một số trang trả về các kết quả không khớp với truy vấn của người dùng. Các tìm kiếm khác lại chỉ cho một số nội dung trên trang nhưng cũng không tiết lộ thông tin rõ ràng cho người dùng. Các kết quả có tên thiếu tính mô tả hoặc kết hợp với các tóm tắt vô dụng bỏ mặc người dùng phải phán đoán nội dung ẩn sau liên kết. Các quảng cáo xen kẽ với trang kết quả tìm kiếm gây bất ngờ cho người dùng và làm họ xa rời trang web.

Thường xuyên đánh giá các tìm kiếm trên trang để biết được nhiều hơn về hành vi tìm kiếm của người dùng và kết quả của máy tìm kiếm thành công hay thất bại. Sử dụng gán nhãn nội dung và các tính năng của công cụ tìm kiếm trên trang, cũng giống trang Best Bets, quảng bá kết quả phù hợp nhất cho các truy vấn cụ thể.

8. Bộ lọc và Facet yếu

Facet và các bộ lọc thường giúp cải thiện trải nghiệm người dùng. Người dùng có thể thu hẹp tìm kiếm vào nguồn, sản phẩm hoặc nội dung chính xác họ cần. Dù vậy, chỉ đơn giản thêm facets và bộ lọc là không đủ để đảm bảo tính khả dụng tốt hơn. Các công cụ này cần hỗ trợ người dùng thật và nhu cầu của người dùng thực.

Facet và các bộ lọc xác định không gian tìm kiếm cho người dùng, và các tiêu chí khác giúp đỡ trong bối cảnh khác. Một người muốn tìm kiếm một bản trình bày PowerPoint về chủ đề bền vững của ngày thứ Ba tuần trước có thể nhận được lợi ích từ việc thu hẹp định dạng và ngày tháng, chứ không chỉ có riêng về chủ đề. Một trang web thương mại điện tử có thể muốn cho người mua khả năng lọc sản phẩm theo chiều cao của gót chân và người mua áo khoác ngoài có thể muốn lọc theo đánh giá về mức độ giúp làm ấm.

Các trang tạo ra facet và bộ lọc thiếu sót khi họ cố gắng đi theo hướng tiếp cận một-kích-cỡ-phù-hợp-cho-tất-cả.  Các tiêu chí và đặc tính giống nhau có thể không áp dụng được cho tất cả kiểu nội dung. Bằng cách cẩn thận trong việc giới hạn các lựa chọn của người dùng cho một hoặc hai cách tiếp cận. Một người mua đồ nội thất có thể tìm kiếm ghế màu xanh hoặc chiếc ghế có bất cứ màu sắc nào khác, chứ không chỉ riêng màu xanh. Cả hai phải được hỗ trợ.

Nội dung phải được gán nhãn chính xác và có khả năng tạo ra được các kết quả liên quan. Lấy ví dụ, trên trang AARP người dùng tìm kiếm công thức nấu ăn cho gà sẽ khá bối rối khi thấy 6 trên 10 kết quả không bao gồm gà trong công thức.

Trang maplin

Maplin.com: Người dùng có thể không dễ xác định được vị trí loa Bluetooth từ trang Maplin có giá thấp hơn 50 bảng. Không có cách nào sử dụng bộ lọc của trang để xem tất cả các sản phẩm khớp với đặc điểm về giá của chúng; thay vì thế họ chạy các truy vấn riêng biệt cho một vài khoảng con về giá. Người dùng lựa chọn từng khoảng giá mỗi lần (chẳng hạn 40 bảng – 50 bảng và 30 bảng – 40 bảng) rồi sau đó ghi nhớ các sản phẩm nào hiện có trong mỗi khoảng giá. [Ý của phần này là tính năng lọc giá của trang Maplin không đa dạng – chú thích của người dịch.]

9. Làm người dùng quá tải thông tin

Thông tin sắp xếp kém làm người dùng gặp khó khăn trong việc tìm điều họ cần. Văn bản dày đặc như một bức tường gây khó khăn cho việc đọc quét thông tin mọi người quan tâm. Các trang quá tải tải lấp đầy với các sản phẩm cạnh tranh nhau để có được sự chú ý của người dùng.

Hãy nhớ rằng trên thế giới online, người dùng quét thông tin chứ không đọc. Hãy làm sao để người dùng dễ dàng chọn được thông tin mà họ muốn, bằng các kỹ thuật viết cho web: sử dụng các câu và đoạn ngắn thôi, tận dụng các danh sách chấm tròn, các tiêu đề và các từ khóa được bôi đậm.

Phần mô tả sản phẩm của trang headphone.com cho tai nghe chụp đầu Shure SRH440 Studio đưa ra được nội dung chất lượng cao, nhưng độ dài và cách trình bày thông tin (vài đoạn dài trong một cột hẹp), làm nó khó đọc quét được thông tin quan trọng, các tính năng khác biệt của headphone.

10. Các liên kết ẩn

Trong nhiều năm, các nghiên cứu về tính khả dụng của chúng tôi cho thấy người dùng thường bỏ qua hoặc làm ngơ các nội dung trông giống như quảng cáo hoặc được đặt ở một vị trí trên trang mà vị trí đó thường được sử dụng cho quảng cáo. Vấn đề này vẫn tồn tại và thậm chí còn tồi tệ hơn khi nội dung được liệt kê bên cạnh các quảng cáo thực sự.

Nhà thiết kế web đôi khi nghĩ rằng việc thêm nhiều thành phần đồ họa, chẳng hạn như một đường viền, nền màu sắc hoặc hình họa để trỏ tới một liên kết sẽ làm nó nổi bật hơn. Kết quả thường là ngược lại: bạn càng đổ nhiều công sức vào việc thiết kế liên kết, càng có khả năng là người dùng sẽ nhầm lẫn nó là quảng cáo.

các liên kết giống quảng cáo

Pitfield London bao gồm thông tin về giờ mở cửa, đóng cửa và một liên kết đến menu trong cột phải của trang, bên trên một hình động về cốc cà phê và một cột quảng cáo dẫn đến các trang web khác. Người dùng trên trang này sẽ gặp khó khăn trong chuyện định vị menu cà phê do vị trí và cách hiển thị của nó.  Trang tương tự cũng sử dụng thiết kế giống-banner để dẫn đến Pitfield London trong Press.

Kết luận

Chúng ta có thể có giả định an toàn là không ai muốn tạo ra một thiết kế website nghèo nàn cả. Nếu những vấn đề này đã được biết đến nhiều năm rồi, vậy thì tại sao nó vẫn tồn tại? Câu trả lời tiềm năng cho câu hỏi này có thể giống như việc điền vào một cuốn sách. Một vài lỗi trong số này phản ánh một chiến lược UX (trải nghiệm người dùng) sai lầm sâu hơn,  có tổ chức cụ thể. Lấy ví dụ:

  • Các vấn đề với cấu trúc thông tin có thể được gắn với cấu trúc của tổ chức hoặc một dạng chính trị nội bộ của công ty.
  • Các vấn đề nội dung nảy sinh khi các phòng ban khác nhau tạo nội dung mà không có nhận biết về phòng ban khác làm những gì và không theo sát một chiến lược nội dung bao quát.
  • Các kết quả tìm kiếm nghèo nàn có thể bắt nguồn từ một hệ thống quản trị nội dung nghèo nàn, nhãn nội dung bị thiếu hoặc mất, hoặc do công cụ tìm kiếm yếu.

Các lý do ẩn đằng sau những vấn đề này không quan trọng bằng việc sửa chữa chúng. Phần lớn, nếu không muốn nói là tất cả các lỗi được liệt kê ở trên có thể dễ dàng xác định được bằng cách thực hiện nghiên cứu người dùng và kiểm tra về tính khả dụng trong quá trình phát triển website và bỏ công chú ý vào các phát hiện từ nghiên cứu.

Website sẽ không bao giờ hoàn hảo cả. Không trang web nào như vậy. Lúc nào cũng có thêm một trường trong form cần phải sửa, một phần nội dung nào đó cần phải biên tập, một thư mục điều hướng cần phải xác định rõ. Nhưng biết được điều gì cần sửa là điều căn bản để chuyển sang đúng hướng đi.

Khi thực hiện nghiên cứu người dùng, giữ lại các phát hiện cũ. Sở thích về thiết kế thay đổi sau 5 năm kể từ bây giờ, các phát hiện cũ có thể giúp bạn không mắc sai lầm tương tự ở các vần đề quan trọng thuộc về tính khả dụng liên quan đến lỗi ở lần thứ hai, thứ ba hoặc thứ tư.

(Dịch từ bài viết Top 10 Enduring Web-Design Mistakes, tác giả: Amy Schade, Yunnuo Cheng, và Samyukta Sherugar, website: Nielsen Norman Group)

5 các bình luận

5
Khu vực bình luận

avatar
2 Số lượng chủ đề bình luận
3 Số lượng phản hồi cho các chủ đề bình luận
0 Người theo dõi
 
Bình luận được phản hồi nhiều nhất
Chủ đề bình luận sôi nổi nhất
3 Các tác giả bình luận
Hưng KTNguyễn Đức AnhKeniVinh Những người bình luận gần đây
mới nhất cũ nhất bình chọn nhiều nhất
KeniVinh
Khách
KeniVinh

Cái hình hơi bị ám ảnh, bác thay giúp em được không? Công nhận biết ngoại ngữ thích thiệt, đọc được rất nhiều bài viết chất lượng bằng tiếng Anh, cảm bạn bài dịch của bạn.

Hưng KT
Khách
Hưng KT

Ghét nhất web hiện ra pop up hoặc link ẩn hoặc gây khó khăn khi muốn click chổ nào đó. Gặp mấy trang này mình out ngay không cần dắn đo gì luôn.