Tự vấn 15 câu hỏi trước khi xuất bản một Landing Page mới

Thiết kế landing page chính là một cách truyền đạt các thông tin cụ thể và rõ ràng về những gì mà bạn cung cấp đến khách hàng. Phần quan trọng của việc truyền tải thông tin như thế này là liệu bạn có thể tác động đến khách hàng để họ chú ý sản phẩm của bạn thông qua thiết kế của mình hay không. Sử dụng các khoảng trắng, làm tương phản các nút CTA là một trong những cách gây sự chú ý người dùng. Tóm lại, thiết kế landing page không phải chỉ để hiển thị các thành phần và chức năng, mà là để hiển thị thông điệp thực sự bạn muốn truyền tải đến khách hàng là gì.

Sự hấp dẫn trực quan chỉ là một khía cạnh của việc thiết kế landing page, tức là cách mà các yếu tố, thành phần của trang đích có thể tương tác, liên kết và ăn khớp với nhau như thế nào sẽ giúp bạn xác định xem liệu trang web của bạn có thu hút khách truy cập thành công hay không.

1. Phân cấp trực quan là gì?

Phân cấp trực quan trong thiết kế landing page tức là xác định xem những thành phần nào của trang có thể thu hút khách hàng ngay từ lần đầu tiếp xúc và thành phần nào họ sẽ tương tác nhiều nhất mỗi khi truy cập trang. Bạn có thể đảm bảo rằng sự tương tác giữa người dùng và landing page có liền mạch hay không bằng cách thiết lập sự phân cấp trực quan.

Thực hiện phân cấp thị giác như thế nào?

Phân cấp thị giác có thể được thực hiện bởi một số cách sau:

• Tỷ lệ: Từng yếu tố có từng kích cỡ khác nhau sẽ thu hút sự chú ý của người dùng. Những yếu tố có kích thước lớn hơn có khả năng thu hút chú ý nhiều hơn, so với những thành phần có kích thước nhỏ hơn.
• Màu sắc: Mọi người sẽ bị thu hút bởi sự in đậm và những màu sắc tương phản.
• Tương phản: Sự thay đổi dải màu có thể được dùng để thu hút sự chú ý. Tương phản màu sắc của một thành phần nào đó sẽ khiến người dùng có xu hướng tập trung nhiều hơn.
• Căn chỉnh: Cột và lưới có thể tạo sự cân đối giữa các thành phần và gây sự chú ý.
• Sự thân thiện: Điều này giúp phân tách và nhóm các thành phần của landing page với nhau để giúp bạn dễ dàng phân biệt.
• Các mẫu quét trang: Các nghiên cứu theo dõi bằng mắt cho thấy những vùng mà khách truy cập thường tập trung ánh mắt vào là những vùng mà họ sẽ tiến hành những thao tác truy cập tiếp theo.

Tất cả các yếu tố trên đều quan trọng trong thiết kế landing page. Nhưng bài viết này chỉ tập trung vào các mẫu quét trang mà các nghiên cứu bằng mắt đã cho thấy sự liên quan giữa các mẫu này đến nội dung mà người dùng có thể đọc trên trang web, đặc biệt là các mẫu F và Z.

2. Mẫu F

Vào năm 2006, tập đoàn Nielsen Norman đã tiến hành những nghiên cứu bằng mắt mà đến ngày nay được coi mà một trong những nghiên cứu giá trị và được trích dẫn nhiều nhất. Trong quá trình nghiên cứu, họ đã theo dõi 232 người đã xem hàng ngàn trang web khác nhau. Các kết quả cho thấy hành vi đọc bài của người dùng tương đối nhất quán trên các trang và nhiệm vụ khác nhau. Cụ thể hơn, người dùng thường đọc bài trong mẫu F.

Mẫu F cho thấy rằng khách truy cập thường đọc bài theo phương ngang, chủ yếu là những phần trên của toàn nội dung, sau đó kéo xuống và đọc trên phương ngang ở nội dung tiếp theo. Cuối cùng, khách truy cập lướt sang phần bên trái của nội dung để đọc theo phương dọc.

Đây là một dạng hành vi tiêu biểu của khách truy cập

Ba bản đồ nhiệt bên trên được lấy từ các nghiên cứu theo dõi bằng mắt với ba người trên ba trang web khác nhau. Điều đáng nói là mẫu F lại không tuân theo chuẩn mẫu 2 thân (Xem bản đồ nhiệt bên phải)

Các màu chủ đạo của bản đồ:

• Đỏ = Vùng được xem nhiều và ổn định nhất.
• Vàng = Chỉ có một vài lần xem, nhưng lại không cố định.
• Xanh = Ít xem nhất và ít cố định hơn.
• Xám = Rất ít lượt xem và không có bản sửa.

Mấu chốt của mẫu F là gì?

Điều mấu chốt cần quan tâm ở đây là chuyển động của mắt người dùng thường bắt đầu từ phía trên bên trái và di chuyển khắp trang trước khi kéo xuống dưới để tìm kiếm các yếu tố mà họ thấy hấp dẫn. Với các yếu tố mà bạn muốn khách truy cập chú ý trên một trang nhiều văn bản, hãy đặt chúng vào mẫu F để đảm bảo các yếu tố trông rõ ràng hơn.

Hootsuite sử dụng mẫu F trên các landing page của họ để làm nổi bật các yếu tố quan trọng:

• Trước tiên, mắt của khách truy cập sẽ chú ý vào tiêu đề chính và tiêu đề phụ.
• Sau đó, họ sẽ quét qua các dấu gạch đầu dòng.
• Tiếp theo họ sẽ thấy tất cả các nút CTA.

BigCommerce cũng sử dụng mẫu F trên landing page của họ:

• Tiêu đề là phần có phông chữ lớn nhất trên trang để có khả năng đập vào mắt cao nhất.
• Sau đó là tiêu đề phụ đến hình ảnh.
• Tiếp theo là các dấu gạch đầu dòng.
• Cuối cùng người dùng sẽ quét từ trái sang phải để xem cả 2 nút CTA.

Sắp xếp các yếu tố trên landing page của bạn để chúng đảm bảo được thứ tự trực qua thị giác nhằm chắc chắn rằng khách hàng sẽ lướt trên trang của bạn và nhấn nút CTA.

Mẫu F thường thích hợp cho các trang có nhiều văn bản, nhưng áp dụng cho những trang ít nội dung cũng không phải là ý tồi.

3. Mẫu Z  

Mẫu Z lại được chuộng hơn trên các trang ít nội dung văn bản. Thiết kế của nó bắt chước tuyến đường mà mắt người người dùng quét qua khi đọc: từ trái sang phải, ngoằn ngoèo từ trên xuống dưới:

• Trước tiên, mắt người dùng quét từ trái sang phải ở phần trên cùng, tạo thành một đường căn ngang.
• Tiếp theo, họ quét xuống dưới về phía bên trái, tạo thành một đường chéo.
• Cuối cùng, họ nhìn lại bên phải một lần nữa, tạo thành đường ngang thứ 2.

Đây là hình ảnh mô phỏng về cách mắt người dùng hoạt động:

Mấu chốt của Mẫu Z là gì?

Cũng giống mẫu F, mẫu Z cũng không hoàn toàn theo chính xác chữ Z. Các đường ngang không nhất thiết phải ngang hoàn toàn, chúng vẫn có thể trông góc cạnh và ít cân xứng. Hơn nữa, có thể có rất nhiều dạng chữ Z trên trang. Nhưng chỉ cần chắc rằng:

• Đường ngang trên cùng: bao gồm các thành phần chính mà bạn muốn khách truy cập tập trung đầu tiên.
• Chéo: phải có những mẩu thông tin có thể dẫn đến nút CTA.
• Đường ngang cuối cùng: sẽ làm nổi bật CTA tại bất kỳ điểm nào dọc theo đường này.

Landing page của trang Lyft là một ví dụ hay để nói về mẫu Z:

• Khách truy cập sẽ tập trung vào logo và nút đăng ký tại đường ngang trên cùng đầu tiên.
• Tiếp theo họ sẽ kéo tiến hành xuống đường chéo và quét qua tiêu đề.
• Cuối cùng, họ nhìn vào đường ngang cuối cùng có phần tiêu đề Lyft vs. Uber” và phần phụ đề sẽ dẫn đến nút CTA.

Ví dụ cuối cùng về mẫu Z đó là trang Linkedln

• Đường ngang đầu tiên bao gồm tiêu đề “Start hiring” và khuôn mặt của một người phụ nữ.
• Quét xuống bên trái, khách truy cập sẽ thấy 2 nút CTA màu xanh.
• Trong đường chéo thứ 2, mắt di chuyển đến thống kê 40%, và di chuyển từ trái sang phải để xem 2 thông số thống kê khác.

Cuối cùng, bạn có thể sử dụng mẫu Z để chi phối sự tập trung của khách truy cập vào những yếu tố có thể thuyết phục họ tiến gần hơn đến mục tiêu chuyển đổi.

4. Sử dụng mẫu F và Z để thiết kế landing page nhiều trải nghiệm hấp dẫn

Hãy đặt các yếu tố trang đích quan trọng nhất dọc theo đường mắt tự nhiên của khách truy cập, cho dù là theo mẫu F hay Z. Và đảm bảo rằng thiết kế landing page đủ hấp dẫn và thu hút khách hàng.

Sử dụng sức mạnh của phân cấp trực quan khi thiết kế landing page của bạn để đảm bảo khách truy cập tiếp nhận thông điệp và hành động theo những gì mà bạn đã sắp xếp.

Tìm hiểu thêm về Chinmedia TẠI ĐÂY.