Trang Đích Di Động Cho Quảng Cáo Native: Quy Tắc Thiết Kế Tăng Chuyển Đổi

Lưu lượng quảng cáo native chủ yếu là di động, vì nó bắt nguồn từ các nguồn cấp nội dung mà mọi người cuộn trên điện thoại, vì vậy một pre-lander được xây dựng desktop-first và điều chỉnh xuống sẽ hoạt động kém hơn một trang được thiết kế mobile-first ngay từ đầu. Các quy tắc thiết kế quan trọng nhất là trọng lượng trang, vị trí đặt CTA trong tầm với của ngón tay cái, bố cục một cột và tránh bất cứ điều gì mà quá trình xem xét tuân thủ của mạng coi là quảng cáo xen kẽ hoặc tương tác bắt buộc.

Tại sao cách tiếp cận desktop-first-then-adapt thường thất bại#

Các nhóm thiết kế pre-lander trên màn hình desktop trước thường đưa ra các giả định không tồn tại khi thu nhỏ xuống điện thoại: bố cục nhiều cột bị ép thành một cột duy nhất không thể đọc được vào phút cuối, hình ảnh hero được cắt cho tỷ lệ khung hình rộng mất đi tiêu điểm khi bị cắt lại cho tỷ lệ hẹp, và vị trí đặt CTA được quyết định bởi những gì trông cân đối trên màn hình lớn thay vì những gì ngón tay cái thực sự có thể chạm tới. Không có điều nào trong số này xuất hiện như một "lỗi" mà bạn sẽ phát hiện trong quá trình xem xét nhanh trên desktop, chúng chỉ xuất hiện khi bạn xem trang theo cách mà khách truy cập thực sự của bạn sẽ xem, đó là lý do tại sao việc xây dựng mobile-first từ bản nháp đầu tiên, sau đó tùy chọn điều chỉnh lên desktop, tạo ra ít bất ngờ hơn so với cách làm ngược lại.

Thiết kế cho ngón tay cái, không phải cho chuột#

Mọi phần tử yêu cầu nhấn chính xác đều làm giảm chuyển đổi trên điện thoại. Các nút CTA cần đủ lớn để nhấn chính xác, được đặt ở nơi ngón tay cái tự nhiên đặt (phần giữa dưới đến một phần ba dưới của màn hình hoạt động tốt hơn một nút yêu cầu vươn lên trên), và cách xa các phần tử có thể nhấn khác để việc nhấn nhầm không đưa ai đó đến nơi bạn không mong muốn. Một thanh CTA cố định luôn hiển thị khi người đọc cuộn qua một bài quảng cáo dài hơn loại bỏ nhu cầu cuộn lại lên trên một khi họ đã bị thuyết phục, điều này quan trọng hơn khi trang của bạn càng dài và định dạng của bạn càng nghiêng về một câu chuyện đầy đủ thay vì một trang cầu nối ngắn.

Trọng lượng trang là một đòn bẩy chuyển đổi, không chỉ là mối quan tâm kỹ thuật#

Mỗi giây tải thêm trên kết nối di động là một cơ hội để mất đi một người đã nhấp chuột theo cảm hứng từ nguồn cấp nội dung và không có chút kiên nhẫn nào cho một trang chậm. Nén hình ảnh hero một cách mạnh mẽ, tránh video tự động phát (cũng có xu hướng thu hút sự chú ý xem xét tuân thủ trên một số mạng và đốt dữ liệu di động mà người đọc không đồng ý chi tiêu), tải lười mọi thứ bên dưới đường gấp, và giữ DOM đơn giản. Điều này kết hợp với các lựa chọn về tên miền và hosting; một trang được lưu trữ phía sau một máy chủ dùng chung chậm, quá tải, hoặc một trang định tuyến qua một bước chuyển hướng thừa không cần thiết, sẽ phá hỏng công việc thiết kế tốt trước khi một pixel nào được hiển thị. Hosting tốt là điều kiện tiên quyết cho thiết kế di động tốt, không phải là mối quan tâm riêng biệt mà bạn có thể sửa sau.

Bố cục: một cột, luồng dọc, không có bất ngờ ngang#

Các bố cục nhiều cột hoạt động trên desktop thường sụp đổ trên di động trừ khi chúng được thiết kế mobile-first. Hãy tuân thủ một cột dọc duy nhất: khối hình ảnh hero hoặc tiêu đề, nội dung hỗ trợ trong các đoạn văn ngắn, một điểm ngắt trực quan rõ ràng trước CTA, sau đó là chuyển tiếp đề xuất hoặc khối nội dung tiếp theo. Tránh hoàn toàn việc cuộn ngang, nó gây mất phương hướng trên điện thoại và hiếm khi là cố ý khi xảy ra.

Những điều cần tránh vì các mạng sẽ đánh dấu chúng#

• Quảng cáo xen kẽ hoặc pop-up bắt buộc chặn nội dung trước một hành động thực sự của người dùng. Chính sách biên tập của hầu hết các mạng native coi đây là trải nghiệm người dùng kém và là nguyên nhân phổ biến dẫn đến việc từ chối sáng tạo; hãy kiểm tra tài liệu hiện tại của mạng cụ thể trước khi dựa vào bất kỳ mẫu quảng cáo xen kẽ nào.
• Âm thanh hoặc video tự động phát. Lý do tương tự: nó làm người đọc bất ngờ, đốt dữ liệu của họ và thu hút sự chú ý xem xét.
• Các phần tử giao diện hệ thống giả (cảnh báo "pin yếu" giả, biểu ngữ thông báo giả, nút đóng giả không đóng bất cứ thứ gì). Những điều này gần với lãnh thổ cloaking theo cách các nhóm tuân thủ hiểu chúng, ngay cả khi không có cloaking kỹ thuật nào xảy ra, bởi vì chúng đánh lừa người đọc về những gì họ đang xem.
• Tiết lộ bị chôn vùi hoặc ẩn sau một lần nhấn. Các tiết lộ về tài trợ và quảng cáo cần được hiển thị mà không cần thêm tương tác từ phía người đọc; xem Quy Tắc Tiết Lộ FTC Cho Bài Quảng Cáo & Quảng Cáo Native để biết "hiển thị" thực sự có nghĩa là gì theo hướng dẫn hiện tại.

Kiểu chữ và nhịp đọc trên màn hình nhỏ#

Văn bản chính thoải mái trên màn hình desktop thường quá nhỏ trên điện thoại trừ khi bạn đặt nó một cách có chủ đích cho di động: kích thước phông chữ cơ bản đủ lớn để đọc mà không cần phóng to bằng ngón tay, chiều cao dòng hào phóng và các đoạn văn được giữ ngắn, tối đa ba đến bốn dòng trước khi ngắt. Các đoạn văn dài không ngắt là một trong những cách nhanh nhất để mất người đọc di động giữa trang, vì không có điểm nghỉ trực quan nào để báo hiệu tiến trình. Hãy chia nhỏ nội dung quảng cáo dài hơn bằng các tiêu đề phụ, trích dẫn nổi bật hoặc một hình ảnh liên quan sau mỗi vài đoạn văn, vừa để hỗ trợ nhịp độ vừa để cho người đọc lý do tiếp tục cuộn thay vì thoát ra ở bức tường văn bản đầu tiên.

Mục tiêu chạm ngoài chỉ CTA#

CTA chính nhận được sự chú ý thiết kế, nhưng các phần tử có thể nhấn thứ cấp (liên kết "tìm hiểu thêm", nút đóng trên bất kỳ phần tử nào có thể bỏ qua, điều hướng nếu trang có) cần cùng kích thước và khoảng cách thân thiện với ngón tay cái. Một nút đóng về mặt kỹ thuật có mặt nhưng quá nhỏ để nhấn chính xác, trên thực tế, hoạt động như không có nút đóng nào cả, và được coi là gây khó chịu hoặc thao túng đối với người đọc đang cố gắng bỏ qua một cái gì đó. Hướng dẫn thiết kế di động của chính Apple và Google đều chỉ định kích thước mục tiêu chạm tối thiểu chính xác vì lý do này, và tuân theo chúng là một đường cơ sở hợp lý ngay cả bên ngoài các ứng dụng nền tảng native.

Biểu mẫu: ít trường hơn, loại đầu vào native#

Nếu pre-lander hoặc bước đề xuất phía sau nó thu thập bất kỳ thông tin nào, mỗi trường bổ sung là một điểm rơi rớt trên di động, nơi việc nhập liệu chậm hơn và dễ mắc lỗi hơn so với trên desktop. Sử dụng loại đầu vào đúng cho mỗi trường (bàn phím số cho số điện thoại, bàn phím email cho trường email) để bàn phím của chính điện thoại giúp khách truy cập thay vì buộc họ phải tìm kiếm ký tự trên bàn phím chung. Nếu bạn có thể hoãn một trường đến bước sau trong phễu thay vì yêu cầu nó trên chính pre-lander, hãy làm điều đó.

Chi tiết địa lý và ngôn ngữ đặc biệt gây rắc rối cho trang di động#

Biểu tượng tiền tệ, định dạng ngày tháng và định dạng số điện thoại thay đổi theo địa lý, và việc sai sót chúng được coi là không đáng tin cậy nhanh hơn trên màn hình nhỏ so với màn hình lớn, nơi khách truy cập có ít kiên nhẫn hơn để phân tích định dạng không quen thuộc trong khi cũng đang cố gắng đọc đề xuất. Nếu bạn đang chạy cùng một mẫu pre-lander trên nhiều cấp độ địa lý, hãy bản địa hóa các chi tiết này một cách chính xác thay vì mặc định theo quy ước của một địa lý ở mọi nơi.

Xử lý giao diện người dùng do mạng tiêm vào trên cùng trang của bạn#

Một số mạng native hiển thị các phần tử của riêng họ xung quanh hoặc trên cùng nội dung của bạn, một nhãn được tài trợ, một điều khiển đóng hoặc quay lại, đôi khi là một tiện ích bình luận hoặc tương tác được tạo kiểu native mà chính mạng đó kiểm soát. Hãy thiết kế trang của bạn với giả định rằng lớp phủ đó tồn tại thay vì chỉ kiểm tra trong môi trường xem trước sạch, vì một CTA hoặc tiêu đề được đặt ngay nơi phần tử giao diện người dùng của chính mạng hiển thị trên thiết bị thực tế về cơ bản là vô hình đối với người đọc. Kiểm tra cách trang của bạn thực sự trông như thế nào bên trong kết xuất trong nguồn cấp thực tế của mạng, không chỉ là một URL độc lập, trước khi hoàn thiện các quyết định bố cục phụ thuộc vào vị trí dọc chính xác gần đầu trang.

Kiểm tra những gì đang hoạt động trên các mạng tập trung di động#

Một số mạng trong thực tế nghiêng về di động nhiều hơn những mạng khác, và các mẫu pre-lander chiến thắng khác nhau tương ứng. Xem xét các sáng tạo đang chạy trực tiếp, hiện tại và các lander được theo dõi của chúng trên công cụ gián điệp quảng cáo native của OpenAdLibrary cho bạn thấy những lựa chọn định dạng và bố cục nào thực sự tồn tại trên một mạng nhất định ngay bây giờ, thay vì áp dụng lời khuyên UX di động chung chung không tính đến cách đối tượng của một mạng cụ thể hành xử. Quảng Cáo Native MSN: Hướng Dẫn Cho Nhà Quảng Cáo và Cách Quảng Cáo Taboola Hoạt Động đều bao gồm vị trí đặt cụ thể theo mạng và hành vi đối tượng ảnh hưởng đến các quyết định bố cục này.

Khả năng tiếp cận trùng lặp với chuyển đổi nhiều hơn mọi người nghĩ#

Độ tương phản màu sắc đủ giữa văn bản và nền, kích thước phông chữ dễ đọc mà không cần phóng to và các nút CTA có thể phân biệt được bằng nhiều hơn chỉ màu sắc đều giúp khách truy cập có thị lực kém, nhưng chúng cũng giúp mọi khách truy cập đọc màn hình điện thoại ngoài trời dưới ánh sáng mặt trời chói chang hoặc trên màn hình cũ, mờ hơn. Hãy coi thực hành khả năng tiếp cận cơ bản như một đầu vào chuyển đổi, không phải một hộp kiểm tuân thủ riêng biệt, vì dân số mà nó giúp đỡ lớn hơn nhiều so với dân số mà nó nhắm mục tiêu chính thức.

Bài kiểm tra thực sự quan trọng#

Trước khi triển khai bất kỳ thiết kế pre-lander di động nào, hãy tải nó trên một điện thoại thực tế qua kết nối bị giới hạn tốc độ, không chỉ trong trình giả lập di động của trình duyệt desktop. Trình giả lập đúng viewport nhưng hiếm khi tái tạo thời gian tải thực, độ chính xác của mục tiêu nhấn hoặc cách một phần tử cố định hoạt động dưới động lượng cuộn thực. Năm phút trên thiết bị thực tế phát hiện ra các vấn đề mà hàng tuần lặp lại dựa trên desktop sẽ bỏ lỡ hoàn toàn.