Một người mua ngành sản xuất vào website của bạn và thấy hình hero là một dashboard SaaS bóng bẩy. Một khách hàng tiềm năng fintech đến và nhận cùng hình ảnh đó. Không ai cảm thấy trang được làm cho mình, và cả hai rời đi trong vài giây. Vấn đề không phải landing page thiếu hình ảnh. Vấn đề là cùng một hình ảnh được hiển thị cho tất cả mọi người, bất kể họ là ai hay cần gì.
Hình ảnh landing page thường được chọn một lần, thường là bởi người thiết kế trang, rồi hiển thị cho mọi khách truy cập. Trên một website B2B có nhiều ngành và vai trò người mua, điều đó nghĩa là phần lớn khách truy cập nhìn thấy hình ảnh về thế giới của người khác. Khớp hình ảnh chính với ngành, vai trò hoặc giai đoạn của khách truy cập là một trong những hình thức cá nhân hóa rẻ hơn, vì không cần nội dung mới, nhưng chỉ có ích khi hình ảnh nói lên điều gì đó cụ thể. Bài viết này trình bày mỗi loại hình ảnh dùng để làm gì, khi nào video đáng giá, cách ánh xạ hình ảnh với phân khúc, và các chi tiết về hiệu năng và khả năng truy cập quyết định mọi thứ có hiệu quả hay không.
Vì sao hình ảnh landing page chung chung thất bại trong B2B
Hình ảnh thường là thứ đầu tiên đập vào mắt khách truy cập, nên chúng định hình ấn tượng ban đầu trước cả khi tiêu đề được đọc. Bản thân một hình ảnh chung chung không gây hại nhiều; cái giá phải trả là bỏ lỡ cơ hội cho khách truy cập thấy điều gì đó quen thuộc với họ.
Với các công ty B2B có nhiều chân dung người mua, một bộ hình ảnh duy nhất tạo ra bất lợi mang tính cấu trúc. Một VP Engineering đánh giá nền tảng của bạn có kỳ vọng về hình ảnh khác với một CMO cũng đang làm điều đó. Người thứ nhất muốn thấy kiến trúc kỹ thuật, tích hợp hoặc luồng dữ liệu. Người thứ hai phản hồi với bảng điều khiển, chỉ số chiến dịch hoặc biểu đồ ROI. Khi cả hai cùng thấy một bức ảnh văn phòng chung chung, không ai nhận được tín hiệu liên quan khiến họ tiếp tục cuộn. Điều tương tự áp dụng cho quảng cáo đã đưa họ đến; hướng dẫn của chúng tôi về khi nào nên dùng quảng cáo hiển thị thích ứng trình bày cách giữ sáng tạo quảng cáo hiển thị nhất quán với trang.
Ảnh stock về những người bắt tay trong văn phòng kính là thủ phạm thường gặp. Chúng dễ bị nhận ra là ảnh stock, nên chẳng đóng góp gì, và chiếm chỗ của một ảnh chụp màn hình sản phẩm, một khách hàng thực hay một sơ đồ quy trình. Nếu bạn kiểm thử một thứ về hình ảnh trên landing page, hãy kiểm thử một hình ảnh thật (sản phẩm, khách hàng, đội ngũ của bạn) so với ảnh stock.
Khớp hình ảnh với phân khúc khách truy cập
Ý tưởng đằng sau hình ảnh cá nhân hóa là rút ngắn khoảng thời gian từ lúc đến trang đến lúc nghĩ “cái này dành cho mình”. Cách thực tế là ánh xạ các biến thể hình ảnh với những phân khúc bạn đã theo dõi. Nếu bạn dùng nhận diện khách truy cập để xác định ngành, quy mô hoặc vị trí địa lý của công ty, chính các dữ liệu đó có thể quyết định hình ảnh nào xuất hiện trên trang.
Các cách gán hình ảnh cho phân khúc:
Hình ảnh theo ngành. Hiển thị xưởng sản xuất cho khách truy cập ngành sản xuất. Hiển thị bàn giao dịch cho dịch vụ tài chính. Hiển thị quy trình bệnh viện cho ngành y tế. Sản phẩm bán ra vẫn vậy, nhưng bối cảnh hình ảnh thay đổi để khớp với thực tế hằng ngày của khách truy cập.
Hình ảnh theo vai trò. Người mua kỹ thuật phản hồi với sơ đồ kiến trúc, đoạn code và luồng tích hợp. Người mua phía kinh doanh phản hồi với bảng điều khiển, biểu đồ và chỉ số kết quả. Khớp ngôn ngữ hình ảnh với chuyên môn của người mua cho thấy bạn hiểu góc nhìn của họ.
Hình ảnh theo giai đoạn. Khách truy cập lần đầu được lợi từ hình minh họa lợi ích tổng quan để hiểu bạn làm gì. Khách truy cập quay lại đã xem nội dung sản phẩm phản hồi tốt hơn với ảnh chụp màn hình chi tiết, bảng so sánh hoặc bằng chứng từ khách hàng.
Quy mô công ty. Khách từ doanh nghiệp lớn có thể phản hồi tốt với hình ảnh thể hiện quy mô, chứng nhận bảo mật hoặc quy trình làm việc nhiều đội. Công ty nhỏ hơn gắn kết với hình ảnh thể hiện tốc độ, sự đơn giản và kết quả nhanh.
Các loại hình ảnh và khi nào mỗi loại hiệu quả nhất
Các thành phần hình ảnh khác nhau đảm nhận các chức năng khác nhau trên landing page. Hiểu những khác biệt này giúp bạn chủ động lựa chọn thứ gì cần cá nhân hóa và thứ gì giữ nguyên.
Ảnh hero tạo ấn tượng đầu tiên và định khung cho toàn bộ tuyên bố giá trị. Chúng chiếm vị trí giá trị nhất trên trang. Một ảnh hero cho thấy sản phẩm đang được sử dụng, lý tưởng là trên dữ liệu hoặc bối cảnh mà khách truy cập nhận ra, nói được nhiều hơn một hình đồ họa trừu tượng. Với các trang cá nhân hóa, hero là phần tử tự nhiên nhất để thay đổi đầu tiên, vì mọi người truy cập đều nhìn thấy nó.
Ảnh chụp màn hình sản phẩm là bằng chứng cụ thể về thứ bạn bán, nhưng có thể khiến trang trông rối mắt nếu dùng thiếu cân nhắc. Một ảnh chụp có chú thích làm nổi bật những tính năng liên quan nhất đến trường hợp sử dụng của khách truy cập hiệu quả hơn nhiều ảnh không chú thích. Nếu dữ liệu phân khúc cho thấy khách truy cập quan tâm đến phân tích, hãy hiển thị dashboard phân tích. Nếu họ quan tâm đến tích hợp, hãy hiển thị bảng tích hợp.
Hình minh họa và đồ họa tùy chỉnh rất giỏi đơn giản hóa sự phức tạp. Khi bạn cần giải thích một quy trình trừu tượng hoặc nhiều bước, hình minh họa tùy chỉnh truyền đạt trong vài giây điều mà phải mất nhiều đoạn văn mới nói hết. Chúng đặc biệt hữu ích cho các trang cá nhân hóa, nơi phần giải thích cần thay đổi theo trình độ kỹ thuật của khách truy cập. Ghi rõ mỗi phần cần hình ảnh nào trong brief nội dung landing page để thiết kế và nội dung được lên kế hoạch cùng nhau.
Hình ảnh bằng chứng xã hội gồm logo khách hàng, ảnh đội ngũ và ảnh thu nhỏ case study. Chúng có thể được cá nhân hóa bằng cách hiển thị logo cùng ngành hoặc cùng cấp quy mô với khách truy cập. Một công ty SaaS mid-market thấy logo của các công ty SaaS mid-market khác sẽ yên tâm hơn so với thấy logo Fortune 500 mà họ không liên hệ được. Ví dụ landing page B2B của chúng tôi cho thấy mỗi loại trang nên mở đầu bằng yếu tố bằng chứng nào.
Hình nền tạo không khí mà không giành lấy sự chú ý. Các dải màu chuyển nhẹ hoặc họa tiết hình học thường hiệu quả hơn ảnh chụp vì chúng thêm chiều sâu mà không gây phân tâm. Chúng hiếm khi cần cá nhân hóa vì vai trò của chúng là hỗ trợ, không phải báo hiệu sự liên quan.
Video trên landing page: khi nào nó xứng đáng có chỗ
Video là yếu tố hình ảnh nặng nhất bạn có thể thêm vào, cả về dung lượng trang lẫn sự chú ý nó đòi hỏi. Quan điểm của chúng tôi: video trên landing page nên trả lời một câu hỏi mà khách truy cập không thể trả lời từ ảnh chụp màn hình, thường là “trông nó thế nào khi có người thực sự sử dụng?” Nếu video chỉ lặp lại tiêu đề kèm nhạc nền, một ảnh chụp màn hình được chọn kỹ làm cùng việc đó nhanh hơn. Về video ngoài landing page, xem hướng dẫn video marketing B2B của chúng tôi.
Những chỗ video thường mang lại hiệu quả trên trang B2B:
- Video hướng dẫn sản phẩm trên trang demo và trang đăng ký. Sáu mươi đến chín mươi giây trình bày quy trình cốt lõi giúp khách truy cập tự đánh giá trước khi đặt lịch gọi. Hãy di chuyển con trỏ chậm và giữ giao diện dễ đọc ở kích thước video hiển thị.
- Câu chuyện khách hàng trên các trang giai đoạn cuối. Một khách hàng giải thích vấn đề bằng lời của chính họ là bằng chứng mà logo không thể mang lại. Hãy đặt nó cạnh luận điểm mà nó hỗ trợ, đừng để trong một thư viện video riêng.
- Trang webinar và sự kiện. Một đoạn clip 30 giây của diễn giả cho thấy phiên đáng để dành thời gian. Sau sự kiện, bản ghi hình thay thế nó.
Và nơi nó thường không hiệu quả: làm vòng lặp nền tự phát phía sau tiêu đề (cạnh tranh với nội dung và tốn thời gian tải), và làm cách duy nhất để nhận thông tin quan trọng (nhiều khách truy cập B2B duyệt web ở nơi làm việc với âm thanh tắt).
Thêm video mà không làm chậm trang
- Dùng ảnh poster và chỉ tải trình phát khi nhấp. Một mã nhúng YouTube hay Vimeo đầy đủ sẽ tải script trước khi có ai nhấn phát. Tài liệu Lighthouse của Google khuyến nghị tải chậm nội dung nhúng bên thứ ba phía sau một lớp mặt tiền (facade), tức một bản xem trước tĩnh được thay bằng trình phát thật khi có tương tác.
- Tải chậm (lazy-load) nội dung nhúng bên dưới phần đầu trang. Thêm
loading="lazy"vào iframe sẽ trì hoãn các trình phát nằm ngoài màn hình, như mô tả trong hướng dẫn lazy loading iframe của web.dev. - Thêm phụ đề cho mọi video. Phụ đề phục vụ người xem tắt tiếng và là yêu cầu về khả năng tiếp cận đối với video ghi sẵn có âm thanh.
- Giữ CTA hiển thị mà không phụ thuộc video. Biểu mẫu hoặc nút không bao giờ nên phụ thuộc vào việc ai đó xem hết video.
Đo lường xem video có giúp ích không
Đo lường nâng cao của GA4 ghi lại các sự kiện video_start, video_progress và video_complete cho video YouTube nhúng có bật hỗ trợ JS API. Có hai con số quan trọng hơn lượt xem: tỷ lệ phát (số lượt phát chia cho số khách truy cập trang) và tỷ lệ chuyển đổi của khách đã phát video so với khách không phát. Hãy cẩn thận với con số thứ hai. Người bấm phát vốn đã tương tác nhiều hơn, nên tỷ lệ chuyển đổi cao hơn ở người xem không chứng minh video là nguyên nhân. Phép thử công bằng là A/B test trang có và không có video, đánh giá bằng chuyển đổi chứ không phải thời gian xem.
Video cũng cá nhân hóa tốt. Khách từ ngành sản xuất và khách từ ngành phần mềm có thể xem cùng một video hướng dẫn được ghi trên hai bộ dữ liệu demo khác nhau, việc này rẻ hơn bạn nghĩ khi đã có kịch bản.
Thứ bậc thị giác trên các trang cá nhân hóa
Hình ảnh định hình cách khách truy cập di chuyển qua trang. Trên các trang nhiều chữ, người đọc thường lướt ngang phía trên rồi xuống dọc bên trái (mẫu chữ F); trên các trang thưa, mắt thường đi zigzag từ trên trái sang trên phải rồi xuống. Hãy đặt hình ảnh dựa trên những lộ trình đó.
Đặt hình hero cá nhân hóa ở đỉnh chữ F, nơi mắt nhìn đến đầu tiên. Hình ảnh hỗ trợ đặt dọc theo đường quét thẳng đứng. Nếu bạn dùng tín hiệu định hướng trong hình ảnh, như ánh nhìn của một người hoặc mũi tên trong sơ đồ, hãy hướng chúng về phía lời kêu gọi hành động thay vì ra xa.
Kích thước tạo ra thứ bậc. Hình ảnh lớn hơn báo hiệu tầm quan trọng. Nếu bạn muốn khách truy cập từ tài khoản mục tiêu tập trung vào một kết quả hay năng lực cụ thể, hãy để hình ảnh đó chiếm ưu thế trên trang. Hình ảnh phụ, như logo khách hàng hay ảnh chụp màn hình bổ trợ, nên nhỏ hơn để củng cố mà không cạnh tranh.
Dành không gian cho hình ảnh chính. Một hình ảnh rõ ràng, khớp phân khúc, có khoảng trống xung quanh được tiếp nhận nhanh hơn ba hình chật chội tranh nhau sự chú ý, và bạn chỉ phải duy trì một biến thể thay vì ba.
Quy trình từng bước để cá nhân hóa hình ảnh trên landing page
Triển khai cá nhân hóa hình ảnh không đòi hỏi xây dựng lại toàn bộ website. Đây là một quy trình thực tế, bắt đầu nhỏ rồi mở rộng.
Bước 1: Chọn các phân khúc đủ điều kiện lớn nhất. Lấy dữ liệu từ công cụ analytics hoặc nhận diện khách truy cập. Những ngành, quy mô công ty hay vai trò nào chiếm phần lớn lưu lượng đủ điều kiện của bạn? Hãy bắt đầu với các phân khúc đủ lớn để đo lường và đủ khác biệt để việc dùng hình ảnh khác nhau thực sự có ý nghĩa.
Bước 2: Rà soát hình ảnh trên landing page hiện tại. Liệt kê mọi hình ảnh trên các landing page có traffic cao nhất. Với mỗi hình, hãy hỏi: hình này có gây ấn tượng như nhau với cả ba phân khúc không? Nếu có, đó hoặc là một hình ảnh phổ quát mạnh, hoặc là hình chung chung chẳng gây ấn tượng với ai. Đánh dấu những hình mà một biến thể riêng cho phân khúc có thể tăng mức độ liên quan.
Bước 3: Tạo 2-3 biến thể hình ảnh cho mỗi vị trí đã đánh dấu. Bạn không cần thiết kế lại toàn bộ. Với hình hero, điều này có thể là ba phiên bản của cùng một bố cục với hình nền khác nhau, ảnh chụp sản phẩm khác nhau hoặc minh họa tình huống sử dụng khác nhau. Giữ nguyên bố cục và vị trí CTA để bạn đang thử nghiệm nội dung hình ảnh chứ không phải cấu trúc trang.
Bước 4: Thiết lập quy tắc hiển thị theo phân khúc. Trong nền tảng cá nhân hóa, gán mỗi biến thể với phân khúc mục tiêu của nó. Xác định phiên bản mặc định cho khách không khớp phân khúc nào. Kiểm tra xem đúng hình ảnh có hiển thị cho đúng khách truy cập không bằng cách xem trước với tài khoản thử nghiệm từ mỗi phân khúc.
Bước 5: Đo lường và cải tiến. Theo dõi tỷ lệ chuyển đổi theo phân khúc, không chỉ tổng thể. Một hình hero làm tăng chuyển đổi với khách từ ngành sản xuất có thể làm giảm hiệu quả với khách từ SaaS. Chạy A/B test trong từng phân khúc để tách tác động của việc thay hình ảnh khỏi các thành phần khác của trang. Xác định cỡ mẫu trước khi test bắt đầu (hướng dẫn cỡ mẫu A/B test của chúng tôi chỉ cách làm), chạy ít nhất hai tuần trọn vẹn, và đừng dừng sớm chỉ vì bảng điều khiển trông đẹp.
Hiệu năng kỹ thuật: Tốc độ và chất lượng hình ảnh
Một hero cá nhân hóa hiển thị muộn còn tệ hơn một hero chung chung hiển thị đúng lúc. Ảnh hero thường là thành phần Largest Contentful Paint, nên kích thước và thứ tự tải của nó quyết định trang có cảm giác nhanh đến đâu.
Dùng định dạng hiện đại. Tài liệu của Google cho biết ảnh WebP nén có mất dữ liệu nhỏ hơn 25-34% so với ảnh JPEG tương đương và ảnh WebP không mất dữ liệu nhỏ hơn 26% so với PNG. AVIF thường nén được nhiều hơn nữa. Hãy phục vụ AVIF hoặc WebP kèm JPEG dự phòng thông qua phần tử <picture>.
Thay vì sao chép giới hạn dung lượng của người khác, hãy đặt ngân sách cho chính các trang của bạn: kiểm tra dung lượng file và LCP của phần hero trong PageSpeed Insights ở cấu hình di động, và coi mọi biến thể nặng hơn rõ rệt so với mặc định là lỗi.
Sử dụng hình ảnh responsive với thuộc tính srcset. Gửi một hình rộng 2000px cho khách truy cập trên di động sẽ lãng phí băng thông và làm chậm hiển thị. Hãy để trình duyệt chọn kích thước hình phù hợp dựa trên chiều rộng khung nhìn. Với trang cá nhân hóa, điều này có nghĩa mỗi biến thể hình ảnh cần bộ kích thước responsive riêng, nhưng công cụ build có thể tự động hóa việc này.
Đừng lazy-load hero. Nó nằm ở màn hình đầu tiên, nên lazy loading sẽ làm nó tải chậm; thay vào đó hãy đánh dấu bằng fetchpriority="high" và chỉ lazy-load các hình ảnh phía dưới. Với biến thể theo phân khúc, cách thiết lập gọn nhất là quyết định biến thể trên server hoặc ở edge, để hình ảnh đúng có sẵn trong HTML ngay từ đầu. Nếu việc hoán đổi diễn ra ở phía client, hãy giữ trước kích thước của hình ảnh để bố cục không bị nhảy khi tải.
Khả năng tiếp cận cho mọi biến thể hình ảnh
Mỗi biến thể hình ảnh cá nhân hóa cần alt text riêng. Một ảnh hero thể hiện quy trình sản xuất nên có alt text mô tả cảnh đó, không phải alt text chung chung áp dụng cho bất kỳ biến thể nào. Trình đọc màn hình đọc lên những gì có trên trang, và alt text nên khớp với những gì khách truy cập nhìn thấy được trong phân khúc đó thực sự thấy.
Văn bản thay thế (alt text) tốt mô tả ngắn gọn nội dung hình ảnh đồng thời gắn với ngữ cảnh xung quanh. Giữ dưới 100 ký tự. Hình ảnh trang trí (nền, khoảng đệm) nên dùng thuộc tính alt rỗng để trình đọc màn hình bỏ qua. Hình ảnh có chức năng như đồ họa có liên kết cần alt text mô tả đích đến của liên kết.
Khi hình ảnh tải lỗi, alt text sẽ hiển thị thay thế, nghĩa là alt text đóng vai trò dự phòng ngay cả với người dùng bình thường có kết nối chậm. Khi bạn có các biến thể hình ảnh cá nhân hóa, đây là thêm một lý do mỗi biến thể cần alt text mô tả riêng thay vì dùng chung một nội dung giữ chỗ.
Các sai lầm thường gặp với hình ảnh cá nhân hóa
Các đội mới làm cá nhân hóa hình ảnh thường cá nhân hóa quá mức. Thay mọi hình ảnh trên trang theo phân khúc khách truy cập tạo ra gánh nặng bảo trì và làm loãng tác động của những thay đổi thực sự quan trọng. Hãy tập trung cá nhân hóa vào một hoặc hai vị trí hình ảnh có tác động lớn nhất (thường là hero và phần bằng chứng xã hội chính) và giữ phần còn lại nhất quán.
Một sai lầm phổ biến khác là dùng dữ liệu phân khúc để đưa ra những phỏng đoán gây cảm giác xâm phạm. Hiển thị logo công ty của khách truy cập trước khi họ tự giới thiệu là vượt quá giới hạn. Hiển thị hình ảnh liên quan đến ngành của họ là hữu ích. Hiển thị tòa nhà văn phòng của họ thì gây bất an. Ranh giới nằm giữa sự liên quan theo bối cảnh và sự theo dõi.
Kiểm thử quá nhiều biến thể cùng lúc là cạm bẫy thứ ba. Bốn phân khúc nhân ba vị trí hình ảnh, mỗi vị trí vài biến thể, đã cho ra hàng chục tổ hợp, nhiều hơn rất nhiều so với những gì lưu lượng B2B có thể kiểm thử. Hãy kiểm thử từng biến một trong mỗi phân khúc, chờ đạt ý nghĩa thống kê, và tạo sự tự tin vào từng thay đổi trước khi chồng thêm.
Với các đội đang triển khai kế hoạch tối ưu landing page B2B rộng hơn, cá nhân hóa hình ảnh là bước khởi đầu hợp lý vì cần ít nội dung mới hơn so với cá nhân hóa nội dung chữ. Điểm cần lưu ý là nó phụ thuộc vào việc có hình ảnh thật, dành riêng cho phân khúc; nếu tất cả những gì bạn làm được là một ảnh stock khác cho mỗi ngành, hãy dành thời gian cho nội dung chữ thay vào đó.
Bắt đầu từ đâu
Hãy lấy landing page có nhiều lưu lượng nhất và nhìn ảnh hero với một câu hỏi: khách truy cập từ phân khúc lớn nhất của bạn có nhận ra công việc của chính họ trong đó không? Nếu không, hãy thay bằng ảnh chụp màn hình sản phẩm hoặc ảnh khách hàng mà họ nhận ra được, rồi thử nghiệm so với ảnh hiện tại. Chỉ khi một hình ảnh thật thắng ảnh stock thì mới đáng sản xuất biến thể cho từng phân khúc. Markettailor kết nối dữ liệu nhận diện khách truy cập với nội dung trên trang, kể cả hình ảnh, nếu bạn muốn phân phối các biến thể đó mà không phải tự xây dựng quy tắc.
