Categories Tính khả dụng của web

Tuyên ngôn về đường fold: Tại sao màn hình đầu tiên vẫn là vấn đề

màn hình đầu tiên

Tóm tắt: Những gì xuất hiện ở phần đầu của trang và những gì ẩn ở bên dưới sẽ luôn luôn ảnh hưởng đến trải nghiệm người dùng – bất kể kích thước màn hình ra sao. Tính trung bình, sự khác biệt giữa cách người dùng đối xử với thông tin ở trên và ở dưới đường biên fold là 84%.

Kích cỡ màn hình liên tục thay đổi và thiết kế có thể đáp ứng với những kích cỡ đó, hơn là phù hợp với kích cỡ không đổi. Khi các khách hàng, người thiết kế, giới lập trình viên, hoặc dân marketing đề cập về nội dung “trên màn hình đầu tiên/above the fold” – một thuật ngữ được vay mượn từ ngành báo in và được sử dụng để đề cập đến những gì đang được hiển thị trên web mà không cần cuộn chuột – liệu nó có tạo ra bất kỳ ý nghĩa nào không?

Chú thích của người dịch. Trong khi “above the fold” đã được dịch khá thoát là “trên mình đầu tiên”, thì fold, tức là chỉ ranh giới giữa phần đang hiển thị và phần phải cuộn chuột mới thấy nội dung thì mình vẫn chưa tìm được từ tiếng Việt thích hợp, do vậy trong bản dịch này vẫn giữ nguyên từ chỉ khái niệm đó ở dạng tiếng Anh.

Có. Fold vẫn tồn tại và vẫn được áp dụng. Ngay cả khi vị trí chính xác của Fold sẽ khác nhau giữa các thiết bị, nó vẫn tồn tại với mọi người dùng trên từng thiết bị màn hình cụ thể. Xét từ quan điểm kỹ thuật, fold cho hầu hết các kích cỡ thiết bị phổ biến có thể được xác định bằng cách xem xét các thống kê về lưu lượng truy cập và về thiết bị và trình duyệt. Một thiết kế đáp ứng có thể có 2, 3, 4 hoặc nhiều fold khác nhau, tương ứng với từng thiết bị và kích cỡ màn hình mà nó được thiết kế để tối ưu. Mỗi thiết bị nhắm đến có fold của riêng nó để xem xét.

Nhưng fold không chỉ là chỉ số cân đong đo đếm, fold còn là một ý tưởng. Fold trở thành vấn đề bởi vì những gì xuất hiện ở đầu trang là vấn đề. Người dùng sẽ cuộn chuột, nhưng giả định đó chỉ đúng khi những gì xuất hiện trên fold (tức là màn hình đầu tiên) đem lại sự hứa hẹn đủ tầm (promising enough). Cái hiển thị trên trang mà không yêu cầu bất kỳ hành động nào là cái sẽ khuyến khích chúng ta cuộn chuột. Điều này đúng trên bất cứ kích cỡ màn hình nào, trên di động, máy tính bảng, hoặc máy để bàn: bất cứ điều gì ẩn bên dưới và người dùng sẽ chỉ khám phá nó nếu họ cảm thấy điều đấy đáng bỏ công.

Nó đơn giản là vấn đề của chi phí tương tác:

  • Hiển thị mà không cần thêm bất cứ hành động nào (ví dụ, ở trên màn hình đầu tiên) = chi phí tương tác thấp để xem
  • Đang ẩn và yêu cầu hành động để xem (ví dụ, nằm dưới màn hình đầu tiên, hoặc ẩn) = chi phí tương tác cao, điều này bao gồm (a) nỗ lực tinh thần để đoán xem điều gì đang ẩn và thực hiện một quyết định tích cực để khám phá nội dung, và (b) thực hiện một nỗ lực thể chất cần thiết để xem nội dung (ví dụ như cuộn chuột).

Chúng ta không đến một trang để xem nội dung vô dụng và không liên quan, chúng ta cũng không có hy vọng mù quáng rằng điều gì đó có thể sẽ có ích sau 5 lần cuộn chuột. Những gì mà chúng ta tìm thấy ở phần đầu của trang giúp chúng ta quyết định có tiếp tục cuộn chuột, chuyển sang trang khác (cùng web đó), hay thử tới tên miền khác, hoặc từ bỏ hoàn toàn nhiệm vụ đó. Vì thế các trang với nội dung dài có thể có được lợi ích từ các signpost tại vị trí đầu của trang, thông qua các liên kết hoặc thông qua nội dung, cho người dùng thấy họ sắp sửa được đọc/xem/nghe/… điều gì.

Khi màn hình nhỏ hơn, chúng ta bị ép phải cuộn chuột nhiều hơn, một cách không cần thiết. Khi chỉ có một ít nội dung xuất hiện ở đầu màn hình di dộng nhỏ bé, chúng ta muốn nhìn thấy nhiều hơn bên dưới. Nhưng chúng ta không làm thế vì chúng ta thích cuộn chuột. Chúng ta làm thế bởi vì chúng ta mong chờ rằng bên dưới fold sẽ có nhiều thông tin có giá trị cho chúng ta.


Khuyến khích cuộn chuột

Các trang web cần xây dựng một câu chuyện vững chắc. Người dùng có thể cảm thấy được khuyến khích cuộn chuột nếu bạn cho họ lý do hợp lý để làm điều đó. Các thành phần đồ họa có thể điều hướng ánh mắt xuống phía dưới trang. Nội dung hấp dẫn có thể thu hút người dùng tham gia. Nếu thông tin hấp dẫn nhất được hiển thị ở phần đầu của trang, người dùng có thể cảm thấy cuốn hút để ghé thăm đến phần cuối của trang.

Khi các trang với bất kỳ kích cỡ màn hình nào cung cấp ít nội dung ở phần đầu hơn, điều đấy làm khó người dùng ở khía cạnh họ không biết được liệu có nội dung gì khác đang có trên trang không. Điều đó có thể làm trang hấp dẫn hơn, nhưng điều đó có thể phải chịu tổn thất ở khía cạnh không khuyến khích (cost of discouraging) người dùng cuộn chuột.  Cũng như các thiết kế có thể làm người dùng hiểu nhầm là họ đã thấy toàn bộ nội dung của trang (nhưng thực ra còn nhiều nội dung ở phía bên dưới – chú thích thêm của người dịch).

trang web của Mod Notebooks

Trang web của Mod Notebook bắt đầu với hình ảnh toàn màn hình và một liên kết tới video. Chỉ có một yếu tố đồ họa chỉ ra rằng vẫn còn nội dung phía dưới đó là mũi trên chỉ xuống, cố gắng để không làm người xem hiểu nhầm rằng họ đã thấy hết nội dung rồi. Các thiết kế đáng ra phải không cần mũi tên để nói cho người dùng biết là họ có thể cuộn chuột.

cuộn chuột ở trang modnotebooks

Trái lại, một khi người dùng bắt đầu cuộn chuột, trang Mod Notebooks thực hiện tốt công việc của nó là khuyến khích người dùng khám phá thêm. Trang cung cấp các tùy chọn điều hướng dựa trên văn bản neo để giúp người dùng nhảy vào các chủ đề mà họ thích. Trên các màn hình có kích cỡ đa dạng, văn bản và hình ảnh trải rộng trên các trang, dẫn người dùng đến nhiều thông tin hơn. Nội dung được tổ chức tốt và xây dựng câu chuyện về sản phẩm, khuyến khích người đọc tiếp tục cuộn chuột.

Khi người dùng không thấy được thông tin có giá trị, họ ngừng cuộn chuột. Trong bài kiểm tra về tính khả dụng, thi thoảng người dùng sẽ cuộn chuột để xem có nội dung gì thú vị trên trang hay không trước khi họ thấy hấp dẫn, nhưng hành vi này còn lâu mới thành tiêu chuẩn. Người dùng chỉ cuộn chuột khi họ có lý do để làm điều đó.

Fold sẽ luôn luôn là vấn đề bởi vì cuộn chuột là hành vi bổ sung mà người dùng cần để truy cập vào nội dung. Nó cũng giống như việc đợi trang tải xong, click vào mũi tên next trong một chuỗi ảnh liên tiếp (carousel), hay click để mở một nội dung văn bản ẩn (accordion), cuộn chuột thêm một bước kế tiếp mà người dùng phải thực hiện để hoàn thành mục tiêu của họ.

Các thiết kế thành công khuyến khích nỗ lực thêm – họ cung cấp cái nhìn thoáng qua về nội dung hấp dẫn, một lời giới thiệu thuyết phục, hình ảnh hấp dẫn. Những nhà thiết kế này tạo các trang dài thuyết phục và thành công là những người có ý thức về fold – họ biết cách để tạo một trang khuyến khích người dùng khám phá, thay vì chuyển hướng sang chỗ khác. Họ ưu tiên nội dung khiến cho người dùng kéo xuống dưới để xem tiếp, những nội dung xứng đáng với nỗ lực bỏ thêm của người dùng.


Bằng chứng về ảnh hưởng của đường biên Fold

Trong các tính huống khó xử về thiết kế giao diện, thông thường có cả hai đối số, chúng yêu cầu đội phụ trách về trải nghiệm người dùng ước tính đối số nào là mạnh nhất. Trong trường hợp này, giả thuyết là rõ ràng một cách bất thường: chi phí tương tác là khác biệt đáng kể giữa các thành phần trên và dưới đường biên fold, vì thế có hai khu vực sẽ được người dùng đối xử khác biệt.

Sẽ tốt hơn khi có dữ liệu thực nghiệm hỗ trợ cho giả thuyết. Và chúng ta có bằng chứng đa dạng trong trường hợp về đường biên fold. Chúng ta đã quan sát vô số người dùng trong các nghiên cứu định tính về tính khả dụng trong đó hành vi của họ bị ảnh hưởng bởi fold – thường là ảnh hưởng xấu, bởi vì các trang web không ưu tiên nội dung trên màn-hình-đầu-tiên một cách thích hợp. Người dùng dừng cuộn chuột trước khi tìm thấy thông tin họ cần, hoặc tệ hơn nữa, không nhận ra rằng có nhiều thông tin hơn đang ở phía dưới đường biên fold.

Cũng có những bằng chứng định lượng: trong một phân tích tổng hợp từ 57 453 dữ liệu về eyetracking (theo dõi mắt người dùng trên trang web đang nhìn vào điểm nào – chú thích của người dịch), chúng tôi phát hiện ra rằng: sự chú ý của người dùng trên màn hình đầu tiên là rất lớn. Các thành phần trên đường biên fold được nhìn nhiều hơn so với các thành phần dưới đường biên fold: 100 pixel trên đường biên fold được xem nhiều hơn 102% so với 100 pixel ở ngay dưới đường biên đầu tiên.

Heatmap (bản đồ nhiệt) bên dưới tổng hợp tất cả các trang trong nghiên cứu của chúng tôi (ngoại trừ các trang tìm kiếm và công cụ tìm kiếm). Nội dung bên dưới đường fold có nhận được một số quan sát, nhưng không nhiều được như nội dung ở trên đường fold.

sự khác biệt về sức chú ý giữa trên và dưới đường fold

Một heatmap tổng hợp cho thấy 57 452 dữ liệu eyetracking trải ra trên các trang, không bao gồm các trang tìm kiếm và trang kết quả tìm kiếm. Màu đỏ chỉ ra nơi người dùng nhìn vào nhiều nhất; màu vàng cho thấy họ nhìn ít hơn. Khu vực màu trắng hầu như không được nhìn. Vạch màu đen đậm đầu tiên chỉ ra đường biên fold của trang trong nghiên cứu; các vạch đen đậm tiếp theo đại diện cho từng màn hình tiếp sau khi cuộn chuột.

Tập hợp dữ liệu thứ hai đến từ phân tích của Google về quảng cáo hiển thị (định dạng PDF) trên một số lượng khổng lồ website.  Nghiên cứu muốn tìm ra xem có bao nhiêu quảng cáo “được nhìn”, với khả năng được nhìn được định nghĩa là 50% lượng pixel của quảng cáo nằm trên màn hình trong thời gian một giây. Các quảng cáo nằm trên màn hình đầu tiên nhận được 73% khả năng được nhìn, trong khi quảng cáo ngay bên dưới đường biên fold chỉ có 44% khả năng được nhìn. Trong nghiên cứu của Google, đường biên fold tạo ra sự khác biệt 66% giữa trên và dưới, con số nói lên có bao nhiêu quảng cáo ở trên đường biên fold được xem nhiều hơn so với quảng cáo ở bên dưới đường biên fold.

Tại sao Google đo được ảnh hưởng của đườn biên fold là 66% trong khi chúng tôi đo được nó là 102%? Điều này được giải thích là vì có hai số liệu khác nhau được sử dụng. Google đo xem liệu có quảng cáo nào hiển thị trên màn hình hay không, do đó người dùng có thể nhìn thấy nó, nếu họ tình cờ nhìn vào chỗ đó. Chúng tôi lại đo xem liệu mọi người có thực sự nhìn vào màn hình hay không và họ dành bao nhiêu thời gian khi nhìn.

Hai nghiên cứu định lượng này cho thấy các ước tính khác nhau đôi chút về ảnh hưởng của đường biên fold đối với trải nghiệm người dùng. Nhưng cả hai con số đều lớn: chúng ta đang không nói về sự khác biệt 5% hoặc 10% giữa thông tin nằm trên và nằm dưới đường biên fold. Sự khác biệt là 66%-102%. Nếu bạn muốn một con số duy nhất đại diện như một ước tính tốt nhất, hãy lấy con số ở giữa khoảng giữa: trung bình có sự khác biệt 84% về cách người dùng đối xử với nội dung ở trên và dưới đường biên fold. Quá lớn. Hãy tin vào đường biên fold. Trải nghiệm người dùng thay đổi đáng kể ở đó.

Người dùng không cuộn chuột để cho vui. Họ cuộn chuột có mục đích. Vì thế nếu bàn về fold mà không đặt sự tập trung vào điều gì xuất hiện đầu tiên trên trang, thì không thể nói chuyện tiếp được.

(Dịch từ bài viết: The Fold Manifesto: Why the Page Fold Still Matters, tác giả: Amy Schade, trang web: Neilsen Norman Group)

Back to Top