Tỷ lệ chuyển đổi landing page trung bình dao động trong khoảng 10%. Không tệ, vì tỷ lệ chuyển đổi trang web trung bình dao động khoảng 3%. Vẫn… 10%?
Chúng ta có thể làm tốt hơn. Và tất cả bắt đầu với bố cục landing page tốt hơn. Điều này có đúng?
Mặc dù việc thiết kế bố cục landing page có khả năng chuyển đổi cao có thể đòi hỏi một chút khoa học nhưng nó chắc chắn không phải là khoa học tên lửa.
Và trong bài viết này, chúng tôi sẽ chứng minh điều đó. Làm sao?
Bằng cách làm sáng tỏ thiết kế landing page một lần và mãi mãi và bằng cách chắt lọc bố cục trang đích thành 11 bước đơn giản.
Chúng tôi cũng sẽ chia sẻ 15 bố cục landing page có độ dài đầy đủ yêu thích của chúng tôi để lấy cảm hứng cho bạn (và vuốt tệp).
Bắt đầu nào.
Cách tạo bố cục và thiết kế landing page
Các bố cục landing page có khả năng chuyển đổi cao đều kết hợp tối thiểu 11 bước sau:
- Bắt đầu với một bản tóm tắt sáng tạo
- Thu thập bản thảo quảng cáo
- Xác định kiến trúc (cấu trúc) thông tin của bạn
- Thiết lập hệ thống phân cấp trực quan
- Giữ tỷ lệ chú ý càng gần 1:1 càng tốt
- Tạo ấn tượng đầu tiên không thể xóa nhòa (trong màn hình đầu tiên)
- Đưa nội dung khác biệt vào thiết kế của bạn
- Thêm ngữ cảnh bằng các phương tiện trực quan
- Hỗ trợ lợi ích với các tính năng
- Xác thực các yêu cầu bằng bằng chứng xã hội
- Nói lại lần nữa nhưng khác đi (cuối trang)
Tùy thuộc vào loại landing page, bố cục sẽ khác nhau. Nhưng hãy xem xét 11 điều kiện tiên quyết về phương pháp hay nhất về thiết kế trang đích này để tạo ra trải nghiệm người dùng landing page chất lượng cao, bất kể loại trang nào.
1. Bắt đầu với một bản tóm tắt sáng tạo
Giống như bất kỳ thứ gì có yếu tố thiết kế, thiết kế landing page của bạn cũng cần có một chiếc hộp để sáng tạo bên trong.
Nhập: bản tóm tắt sáng tạo.
Hầu hết các cơ quan và doanh nghiệp đều làm không tập bản tóm tắt sáng tạo hoặc loại trừ nó hoàn toàn.
Sai lầm lớn.
Hãy nghĩ về một bản tóm tắt sáng tạo giống như một bản thiết kế chi tiết. Nó tạo ra các rào chắn, soi sáng con đường phía trước, xác định mục tiêu và hoạt động như một nguồn thông tin đáng tin cậy duy nhất cho các nhà thiết kế, người viết quảng cáo và người quản lý dự án.
Bản tóm tắt sáng tạo của bạn nên bao gồm những gì?
Get / Who / To / By
Hầu hết đều sử dụng mẫu tóm tắt quảng cáo Get / Who / To / By cho quảng cáo.
Nhưng nó cũng hoạt động hoàn hảo cho quảng cáo trang web hoặc landing page.
- Get: mô tả đối tượng mục tiêu sẽ gặp trang đích của bạn
- Who: mô tả vấn đề cốt lõi mà khán giả mục tiêu của bạn gặp phải (không phải suy đoán hay cảm tính mà là những vấn đề thực sự của người tiêu dùng được phát hiện trong quá trình nghiên cứu)
- To: mô tả cách bạn muốn đối tượng mục tiêu phản hồi khi họ gặp landing page của bạn (tức là họ sẽ cảm thấy thế nào? Và mục tiêu chuyển đổi của bạn là gì? Dùng thử miễn phí? Tạo khách hàng tiềm năng? Bán hàng ngay lập tức? Thêm lượt tải xuống?)
- By: mô tả thông điệp bạn muốn truyền đạt và đề xuất giá trị sẽ thúc đẩy hành động
Ví dụ: chúng tôi muốn…
- Get: thu hút các doanh nghiệp SaaS vừa và nhỏ với ngân sách tiếp thị hàng năm từ 300 nghìn đô la trở xuống…
- Who: những người đã thất bại trong việc mở rộng quy mô tiếp thị hiệu suất do hạn chế về ngân sách và khả năng tiếp cận nhân tài…
- To: để đăng ký tư vấn miễn phí…
- By: bằng cách cho họ thấy rằng đại lý của chúng tôi có thể tăng chuyển đổi lên 25%, giảm giá mỗi chuyển đổi (CPA) xuống 25% và giảm 18% nhân sự
Chỉ sau khi bạn đã trình bày rõ ràng về đối tượng, vấn đề, mục tiêu và đề xuất giá trị thì mọi người tham gia mới có thể cộng tác làm việc để hướng tới một thiết kế landing page có ý nghĩa. Bây giờ là lúc bắt đầu thiết kế.
2. Thu thập bản thảo quảng cáo
Tôi sẽ không tin vào điểm này vì bài viết này nói về việc thiết kế bố cục landing page có khả năng chuyển đổi cao chứ không phải dòng tiêu đề hoặc đoạn nội dung có khả năng chuyển đổi cao. (Thay vào đó, bạn có thể đọc cách thực hiện điều đó trong blog của chúng tôi về tiêu đề landing page hoặc bản nội dung landing page.)
Nhưng tôi đặt bước này ở vị trí thứ hai để nhắc bạn rằng từ ngữ hầu như luôn phải đến trước thiết kế (xin lỗi, các nhà thiết kế đồ họa).
Tại sao?
Bạn có nhớ chúng ta đã nói về việc tạo ra một chiếc hộp để sáng tạo bên trong không? Nếu bản tóm tắt sáng tạo của bạn (đối tượng mục tiêu, tuyên bố vấn đề, mục tiêu, thông điệp) đóng vai trò là khung của chiếc hộp thì bản thảo nội dung quảng cáo của bạn có chức năng như những chiếc đinh và ốc vít giữ nó lại với nhau.
Bản thảo nội dung quảng cáo quyết định kích thước, cấu trúc, không gian và hướng nghệ thuật.
Việc nhà thiết kế điều chỉnh kích thước hoặc vị trí của văn bản sẽ dễ dàng hơn nhiều (và hợp lý hơn so với việc người viết quảng cáo điều khiển thông điệp của bạn cho phù hợp với thiết kế).
Đây là lý do tại sao các mẫu landing page miễn phí từ các nền tảng thiết kế landing page dễ bị hoạt động kém hơn. Bạn cần nắm rõ các đoạn bản thảo nội dung của mình trước khi quyết định tuỳ chỉnh thiết kế, như thế bạn sẽ có một Landing page hiệu quả.
3. Xác định cấu trúc thông tin của thiết kế của bạn (bố cục landing page)
Với các từ sau, giờ là lúc chọn cấu trúc tổng thể của bố cục, kiến trúc thông tin của bạn.
Khi sắp xếp thông tin trên trang của mình, bạn có hai tùy chọn chính:
- hình chữ F
- hình chữ Z
Mẫu hình chữ F
Mẫu hình chữ F là hệ thống phân cấp thông tin phổ biến nhất trên mạng. Và vì lý do tốt.
Theo một nghiên cứu sử dụng phần mềm theo dõi mắt, hầu hết mọi người đều đọc một trang một cách tự nhiên, từ trên xuống dưới, theo hình chữ F.
Sử dụng hệ thống phân cấp hình chữ F cho các landing page có nhiều văn bản. hoa văn
Mẫu hình chữ Z
Mẫu hình chữ Z chiếm vị trí thứ hai nhờ mẫu zig-zag dễ thực hiện từ trên xuống dưới.
Để mô hình hình chữ Z hoạt động, nó sử dụng khoảng trắng làm con đường gạch màu vàng hướng mắt khách truy cập xuống trang.
Sử dụng hệ thống phân cấp hình chữ Z cho các trang đích có hình ảnh phong phú.
4. Thiết lập hệ thống phân cấp trực quan
Hệ thống phân cấp trực quan hỗ trợ kiến trúc thông tin của bạn bằng cách giúp khách truy cập điều hướng landing page của bạn một cách dễ dàng và thêm điểm nhấn vào một số phần nhất định so với các phần khác.
Làm thế nào?
- Độ tương phản: sử dụng màu sắc hoặc sắc thái tương phản sẽ tạo ra những lời nhắc nhở tinh tế rằng một số đồ vật nhất định quan trọng hơn những đồ vật khác
- Tỷ lệ: dòng tiêu đề lớn, in đậm so với tiêu đề phụ vừa, nửa đậm so với văn bản đoạn văn nhạt
- Cân bằng: phần cân bằng báo hiệu sự bình đẳng giữa các bộ phận; phần không cân bằng báo hiệu một phần (phần chiếm nhiều không gian hơn) quan trọng hơn phần kia
- Sự lặp lại: giữ cho nó nhất quán (bất kể bạn chọn gì, hãy làm cho bố cục landing page của bạn có thể học được bằng cách lặp lại thứ bậc hình ảnh của bạn trên toàn bộ trang)
Không có thiết kế landing page nào hoàn thiện nếu không có hệ thống phân cấp trực quan được xác định rõ ràng.
Cách tốt nhất để phát triển hệ thống phân cấp trực quan cho bố cục landing page của bạn là áp dụng hệ thống phân cấp trực quan tương tự mà website hoặc thương hiệu của bạn đã sử dụng.
5. Giữ tỷ lệ chú ý càng gần 1:1 càng tốt
Tỷ lệ chú ý đề cập đến số lượng liên kết trên trang so với số lượng mục tiêu chuyển đổi.
Ví dụ: nếu landing page của bạn chỉ có một mục tiêu chuyển đổi (ví dụ: bản dùng thử miễn phí) và một liên kết (nút CTA), thì đó là tỷ lệ chú ý 1:1.
Tại sao 1:1 là tối ưu?
Không có phiền nhiễu.
Mỗi chiến dịch gửi lưu lượng truy cập đến trang đích của bạn phải có một mục tiêu duy nhất, giống như trang đích của bạn phải có một mục tiêu duy nhất. Đó là nó.
Việc thêm các liên kết điều hướng, liên kết chân trang hoặc biểu tượng mạng xã hội không cần thiết có khả năng tạo ra đường ống bị rò rỉ.
Khi thiết kế landing page của bạn, hãy giữ cho đầu trang và chân trang của bạn sạch sẽ; không bao gồm các liên kết điều hướng hoặc liên kết chân trang (ngoại trừ các điều khoản và chính sách bảo mật).
Giữ sự chú ý của khách truy cập tập trung vào một mục tiêu.
Ví dụ: hãy chú ý rằng trang Spotify này chỉ có một liên kết chính: liên kết để chuyển đổi trên CTA của họ. Đó là nó.
6. Tạo ấn tượng đầu tiên không thể xóa nhòa (trong màn hình đầu tiên)
Một thiết kế landing page chất lượng sẽ có phần giới thiệu: trong màn hình đầu tiên.
Trong màn hình đầu tiên đề cập đến phần landing page mà khách truy cập nhìn thấy khi họ truy cập trang của bạn lần đầu tiên trước khi họ cuộn xuống.
Ví dụ: hãy xem phần trong màn hình đầu tiên trên trang chủ bên dưới:
Mặc dù nhiều khách truy cập sẽ không chuyển đổi chỉ ở phần trong màn hình đầu tiên (họ sẽ cần cuộn xuống để thu thập thêm thông tin), hãy thiết kế nó như thể họ có thể bằng cách bao gồm tất cả các yếu tố cần thiết:
Tiêu đề: Tiêu đề landing page của bạn phải giải thích ưu đãi của bạn, xác định vị trí thích hợp và thu hút khách truy cập.
Tiêu đề phụ: Tiêu đề phụ landing page của bạn phải thêm ngữ cảnh và chi tiết vào dòng tiêu đề của bạn. Nếu dòng tiêu đề của bạn mô tả giá trị bạn dự định tạo ra thì dòng tiêu đề phụ của bạn sẽ giải thích cách bạn dự định tạo ra giá trị đó.
Hình ảnh chính: Hình ảnh nổi bật trên landing page của bạn (hình ảnh chính) sẽ thêm ngữ cảnh vào ưu đãi của bạn. Đừng sử dụng các hình dạng hoặc thiết kế trừu tượng để lấp đầy không gian; thay vào đó, hãy cho khách truy cập thấy sản phẩm hoặc dịch vụ của bạn trong đời thực
CTA: Bản sao CTA trên landing page của bạn phải thu hút các nhấp chuột.
Biểu mẫu (nếu có): Biểu mẫu landing page của bạn cần làm được nhiều việc chỉ với một chút (vì vậy hãy nhấp vào siêu liên kết và đọc toàn bộ bài viết). Chỉ cần biết rằng mọi trang thu thập khách hàng tiềm năng đều cần đặt biểu mẫu ở phía trước và giữa, trong màn hình đầu tiên, nơi mọi người có thể dễ dàng điền vào.
7. Đưa nội dung khác biệt vào thiết kế của bạn
Nội dung khác biệt đề cập đến hiển thị duy nhất của thương hiệu của bạn: logo, màu sắc, linh vật, kiểu dáng, âm thanh, phông chữ, v.v.
Tại sao chúng lại quan trọng đến vậy?
Những đặc điểm nhận dạng thương hiệu tự nhiên đã là sự khác biệt cho thiết kế của bạn. Bạn cần làm nó nổi bật để người đọc hình dung ra bạn dù trong trường hợp nào.
Hơn nữa, điểm khác biệt này còn là yếu tố thu hút sự chú ý trên landing page của bạn
Rất có thể ai đó nhìn thấy thiết kế của bạn có thể không nhớ tên thương hiệu của bạn nhưng sẽ nhớ lại những đặc điểm riêng biệt của bạn khi họ nhìn thấy chúng.
Vì vậy, hãy đưa chúng vào bố cục thiết kế landing page của bạn.
Điều đó rõ ràng có nghĩa là bạn cần phải có cá tính riêng biệt ngay từ đầu, điều mà nhiều người trong số các bạn có thể không có.
Trong trường hợp đó, hãy tham khảo ý kiến của người quản lý thương hiệu và bắt đầu hệ thống hóa thương hiệu của bạn. js
8. Thêm ngữ cảnh bằng các phương tiện trực quan
Quá nhiều bố cục landing page sử dụng hình ảnh làm khoảng trống.
Cho dù là đồ họa gốc, ảnh chụp màn hình hay hình minh họa, đừng lãng phí thời gian và nguồn lực để tạo ra hình ảnh chỉ để lấp đầy khoảng trắng. Thay vào đó, hãy sử dụng chúng để thêm ngữ cảnh và ý nghĩa cho lời nói của bạn.
Tốt hơn hết, hãy sử dụng hình ảnh để cho khách truy cập thấy sản phẩm hoặc dịch vụ của bạn trong đời thực. Làm cho cái vô hình trở nên hữu hình.
Ví dụ: hãy chú ý cách Webflow sử dụng ảnh GIF động để minh họa quan điểm họ đưa ra trong bản thảo quảng cáo của mình?
9. Hỗ trợ lợi ích bằng các tính năng
Bạn đã đọc đúng: hỗ trợ lợi ích bằng các tính năng. Không phải hướng ngược lại.
Mỗi bố cục landing page đều cần một phần dành riêng cho những lợi ích cụ thể mà khách hàng có thể mong đợi đạt được khi sử dụng dịch vụ hoặc sản phẩm của bạn.
Và những lợi ích đó phải gắn liền với những tính năng cốt lõi.
Bạn không cần phần giải thích chức năng của sản phẩm hoặc dịch vụ mà không giải thích những lợi ích mà các tính năng đó mang lại.
Ví dụ: hãy chú ý cách Jasper (trước đây là Jarvis) không bao giờ đề cập đến các tính năng như AI hoặc học máy, mặc dù chúng là những tính năng cốt lõi mang lại lợi ích cho từng lợi ích của chúng:
Hoặc ClickUp, người khám phá thành thạo các lợi ích của chúng bằng cách sử dụng các tab có tiêu đề với các tính năng của chúng:
10. Xác thực các yêu cầu bằng bằng chứng xã hội
Bạn nên rắc bằng chứng xã hội hoặc xác nhận của bên thứ ba về sản phẩm hoặc dịch vụ của bạn ở mọi nơi trên bố cục trang đích của bạn.
Điều gì được coi là bằng chứng xã hội?
- Lời chứng thực
- Đánh giá
- Xếp hạng sao
- Logo của khách hàng
- Huy hiệu tin cậy
- Giải thưởng
- Dữ liệu khách hàng hoặc
- Số liệu thống kê người dùng
- Số lượng khách hàng
- Năm kinh doanh
- Nội dung do người dùng tạo
- Xác nhận (người nổi tiếng hoặc người có ảnh hưởng)
Và nhiều hơn nữa. Bạn nên đặt bằng chứng xã hội ở đâu? Rất tiếc, hãy đặt nó trong màn hình đầu tiên, gần các nút CTA, bên cạnh bản sao lợi ích của bạn và trên các biểu mẫu đăng ký của bạn. Theo nghĩa đen, ở khắp mọi nơi. Nhưng bất kể bạn đặt nó ở đâu, hãy luôn cố gắng xây dựng một phần bằng chứng xã hội chuyên dụng vào thiết kế của bạn. Nhiều khách truy cập trang web sẽ tìm kiếm nó.
Ví dụ: trang đích Jasper peppers bằng chứng xã hội từ trên xuống dưới, nhưng họ cũng thiết kế phần riêng vào bố cục của mình:
11. Lặp lại nhưng khác (cuối trang)
Bố cục landing page được thiết kế tốt sẽ bao gồm nhiều trường hợp CTA trên toàn trang.
Nhưng cũng giống như phần trong màn hình đầu tiên của bạn sẽ để lại ấn tượng đầu tiên không thể xóa nhòa, phần CTA cuối cùng của bạn sẽ để lại ấn tượng cuối cùng đáng nhớ.
Lần này, hãy trình bày lại giá trị bạn dự định cung cấp và cách bạn dự định cung cấp giá trị đó, chỉ bằng những từ khác nhau.
Ví dụ: sử dụng cùng một ví dụ về Jasper ở trên, hãy chú ý cách CTA trong màn hình đầu tiên và CTA dưới màn hình đầu tiên của họ đều truyền đạt cùng một lời kêu gọi hành động nhưng theo những cách khác nhau:
