Sử dụng các mẫu F và Z để tạo thứ bậc trực quan trong thiết kế trang đích

Đôi khi các thiết kế được tạo ra một cách tỉ mỉ và cẩn thận, những lần khác, một cách ngẫu hứng và gần như vô thức. Cho dù chúng ta có cố ý hay không, mỗi khi chúng ta thiết kế một thứ gì đó, chúng ta sẽ tạo cho nó một dòng chảy. Chìa khóa là biết cách kiểm soát luồng để hoàn thành mục tiêu của chúng ta, đặc biệt là với một thứ gì đó tập trung như trang đích. Làm thế nào để bạn làm điều này? Tự hỏi bản thân ba câu hỏi quan trọng:

1. Ban đầu mắt của người xem sẽ đi về đâu để lấy nét?
2. Điều gì sẽ ảnh hưởng đến cách mắt họ di chuyển và nơi họ sẽ tập trung vào tiếp theo?
3. Chúng ta có thể thiết kế các trang của mình để kiểm soát sự tập trung của chúng nhằm hướng chúng đến mục tiêu của chúng ta không?

Có một số công cụ và lý thuyết có thể giúp chúng tôi tìm ra câu trả lời cho những câu hỏi này và giúp chúng tôi thiết kế trang đích với một luồng có chủ đích, dẫn người xem của bạn đến CTA và khiến họ có nhiều khả năng hành động hơn.

Quan trọng trong số các công cụ này, theo dõi bằng mắt đã làm sáng tỏ cách mọi người nhìn mọi thứ – cả trên trang in và trên web. Khi nói đến trang đích, điều đặc biệt quan trọng là phải hiểu cách mọi người sẽ nhìn nhận các trang mà chúng tôi tạo:

Đây là lúc các kiểu chuyển động của mắt xuất hiện.

Theo dõi mắt: nhìn nơi họ đang nhìn
–

Theo dõi bằng mắt đã làm sáng tỏ cách mọi người nhìn mọi thứ — cả trên trang in và trên web. Là một lĩnh vực nghiên cứu, nó ra đời vào những năm 1980, nhưng những quan sát đã được thực hiện về cách mắt di chuyển trên một trang ngay từ những năm 1800. Các nhà sử học ghi nhận Louis Émile Javal là người đầu tiên quan sát thấy điều đó thay vì lướt mắt qua một trang trôi chảy, việc đọc liên quan đến một loạt các định hình và dấu tích — dừng lại để tập trung vào một điểm sau đó di chuyển nhanh đến điểm lấy nét tiếp theo.

Đương nhiên, điều này đặt ra câu hỏi tại sao một người có thể tập trung vào một thứ thay vì một thứ khác, và làm thế nào một người quyết định nơi chuyển trọng tâm của mình sang việc tiếp theo. Những câu hỏi này đã hình thành cơ sở của hơn một thế kỷ nghiên cứu theo dõi mắt. Mặc dù đã đạt được những bước tiến quan trọng trong việc trả lời chúng, nhưng chúng vẫn là một điểm đáng chú ý cho đến ngày nay.

Mẫu F

Những phát hiện của Nielsen Norman Group, được tổng hợp trong nhiều báo cáo khác nhau, có lẽ vẫn là nguồn tài nguyên theo dõi mắt được trích dẫn nhiều nhất và hữu ích nhất trong cộng đồng thiết kế. Đứng đầu trong số các phát hiện của họ, báo cáo này mô tả F-Pattern nổi tiếng hiện nay:

1. Người dùng lần đầu tiên đọc trong một chuyển động ngang, thường ở phần trên của khu vực nội dung. Phần tử ban đầu này tạo thành thanh trên cùng của F.
2. Tiếp theo, người dùng di chuyển xuống trang một chút và sau đó đọc qua chuyển động ngang thứ hai thường bao gồm một khu vực ngắn hơn so với phong trào trước đó. Yếu tố bổ sung này tạo thành thanh dưới của F.
3. Cuối cùng, người dùng quét mặt trái của nội dung trong một chuyển động thẳng đứng. Phần tử cuối cùng này tạo thành gốc của F.

Các bản đồ nhiệt sau đây chứng minh mô hình F:

Trong trường hợp không có bất cứ thứ gì được đặt cố ý để thu hút sự chú ý của họ, F-Pattern mô tả cách mắt của một người di chuyển trên một trang dày đặc văn bản, khiến nó đặc biệt áp dụng cho các bài đăng trên blog và các trang kết quả tìm kiếm.

Điều quan trọng cần lưu ý là mắt sẽ bắt đầu ở trên cùng bên trái trước khi quét xuống trang để tìm kiếm điều gì đó thú vị hoặc có liên quan. Nếu bạn có điều gì đó mà bạn muốn ai đó chú ý đến (chẳng hạn như đề xuất giá trị) —và trang của bạn có nhiều văn bản — bạn nên đặt trang về phía trên cùng bên trái để đảm bảo rằng trang đó sẽ nhận được sự chú ý xứng đáng.

Cũng cần nhắc lại rằng F-Patterns không nhất thiết phải tuân theo chữ “F” truyền thống với hai thân ngang. Để chứng minh, trang đích của Fleetmatic hiển thị ba phần (logo, dòng tiêu đề, CTA), nhưng F-Pattern vẫn hiển thị rõ ràng:

Hình chữ Z

Các trang ít thông tin dày đặc hơn, hoặc như Jerry Cao viết, “có tổ chức lỏng lẻo”, có xu hướng gợi ra chuyển động của mắt giống với chữ ‘Z’. Cái gọi là Z-Pattern này có nhiều đặc điểm giống như F-Pattern. Nhưng như ông Cao đã chỉ ra, “nơi mà sự đơn giản là ưu tiên và lời kêu gọi hành động là phương pháp chính”, thì Z-Pattern sẽ xuất hiện thay vì F-Pattern.

Sự tập trung vào sự đơn giản này làm cho Z-Pattern phù hợp duy nhất với thiết kế trang đích, nơi bạn muốn một tiêu điểm duy nhất để thu hút mọi người và khuyến khích họ hành động. Để tận dụng Mô hình Z, Brandon Jones, hãy đặt lời kêu gọi hành động của bạn dọc theo đường dẫn Z để đảm bảo người xem của bạn nhìn thấy nó. Điều này sẽ dẫn đến nhiều chuyển đổi hơn.

Hãy xem trang đích của Offerpop và cách áp dụng Z-Pattern, thu hút nhiều sự chú ý hơn đến biểu mẫu và CTA:

Các ví dụ trên sử dụng trang đích — các trang tập trung với một mục tiêu duy nhất — để chứng minh việc sử dụng hiệu quả các mẫu F và Z. Hãy chú ý cách thành phần chính của mỗi trang, CTA trong ví dụ đầu tiên và biểu mẫu trong ví dụ thứ hai, được đặt chính xác dọc theo đường mà mắt ai đó sẽ nhìn vào trang một cách tự nhiên. Đặt các thành phần quan trọng nhất của bạn dọc theo đường dẫn tự nhiên như thế này và thực hiện một chút tối ưu hóa trang đích, sẽ đảm bảo bạn nhận được nhiều chuyển đổi nhất. Đôi khi con đường tự nhiên này phù hợp chính xác với mô hình F hoặc Z, nhưng cốt lõi của nó là chiến lược sử dụng hệ thống phân cấp trực quan để hướng dẫn mọi người.

Hệ thống phân cấp trực quan: chìa khóa để có thiết kế tốt
–

Cả hai kiểu chữ F và Z đều được ghi chép rất đầy đủ và đã được các nhà thiết kế sử dụng để tạo hiệu ứng tuyệt vời trên các trang trên web. Trong trường hợp không có bất kỳ dòng chảy có chủ đích nào khác, đây là những hình mẫu mà mắt mọi người sẽ nhìn theo. Và đó là kiến ​​thức cực kỳ hữu ích cần có khi ghép một trang lại với nhau.

Tuy nhiên, cuối cùng, thiết kế là hướng dẫn mọi người hướng tới mục tiêu mong muốn của bạn. F và Z-pattern chắc chắn là những công cụ mạnh mẽ, nhưng thậm chí còn mạnh hơn là ý tưởng thiết lập hệ thống phân cấp trực quan để hướng dẫn mọi người xem qua một trang.

Ngược lại với các trang có khuôn mẫu F và Z ở trên, hãy xem một ví dụ khác:

Khi bạn lần đầu tiên nhìn vào trang này, mắt bạn sẽ đi đâu?

• Khuôn mặt của người phụ nữ?
• Thẻ giá màu vàng?
• Đảm bảo lại tiền?
• Hình thức?
• Hình ảnh ở dưới cùng bên phải?

Mỗi phần tử của trang này đã được thiết kế để thu hút sự chú ý nhiều nhất có thể, với kết quả là không phần tử nào thành công. Nó giống như cố gắng trò chuyện với ai đó trong một căn phòng đầy những người đang hét vào mặt bạn. Với rất nhiều sự phân tâm, trang không thể tập trung sự chú ý của bạn vào mục tiêu duy nhất là nhận được “báo cáo kiểm tra SEO miễn phí”.

Lưu ý rằng việc thiếu hệ thống phân cấp trực quan — nó không tuân theo mô hình F hoặc Z — khiến việc tạo chuyển đổi trở nên khó khăn hơn. Hãy thử nghĩ xem: nếu bạn đến trang này, bạn có chuyển đổi không? Bạn thậm chí có biết những gì để chuyển đổi, ưu đãi là gì và nó có được biết ngay cho bạn không? Bạn sẽ làm gì để sửa hệ thống phân cấp và bố cục tổng thể?

Khoảng trắng

Trong bài đăng của mình trên WordStream, Fahad Muhammad giải thích cách khoảng trắng có thể là chìa khóa để thiết lập một hệ thống phân cấp trực quan hiệu quả:

“Tất cả các yếu tố xứng đáng có một vị trí đáng chú ý trên trang dành riêng của bạn bởi vì sự cân bằng giữa các yếu tố này giúp thuyết phục khách truy cập chuyển đổi thành khách hàng tiềm năng / khách hàng… Với sự trợ giúp của khoảng trắng, bạn có thể thiết lập hệ thống phân cấp trực quan cho khách truy cập bằng cách chỉ định yếu tố nào họ nên xem trước và yếu tố nào cần tuân theo. Khoảng trắng là lý do tại sao khách truy cập đầu tiên sẽ nhìn vào dòng tiêu đề của bạn, sau đó chuyển đến bản sao, tiếp tục biểu mẫu và cuối cùng là nút kêu gọi hành động của bạn. Khoảng trắng cho phép bạn cung cấp các mối quan hệ không gian giữa mỗi phần tử trang — cho phép bạn hướng dẫn khách truy cập của mình qua trang. ”

Sử dụng khoảng trắng để hướng dẫn khách truy cập của bạn qua trang tạo ra sự khác biệt giữa một hệ thống phân cấp trực quan hiệu quả và một trang không có cấu trúc hoặc chỉ dẫn rõ ràng về việc cần làm.

Trang đích đăng ký tài xế của Lyft cung cấp cho mỗi đề xuất giá trị một bộ đệm khoảng trắng khổng lồ, cho phép họ thu hút ánh nhìn của mỗi người. Một trang có hệ thống phân cấp trực quan rõ ràng sẽ chuyển đổi với tỷ lệ tốt hơn nhiều vì những người truy cập trang của bạn sẽ biết chính xác nơi để xem, đạt được cả mục tiêu của bạn và mang lại cho họ những gì họ đến.

Kiểm soát thiết kế của bạn
–

Thiết kế là sự kết hợp giữa nghệ thuật và khoa học. Hãy xem một ví dụ cuối cùng chứng minh cách theo dõi bằng mắt, hệ thống phân cấp thị giác và tâm lý con người có thể gợi ý cho khách truy cập tập trung vào những gì bạn muốn họ tập trung vào.

Bạn sẽ nhận thấy các bản đồ nhiệt ở trên là của cùng một trang, điểm khác biệt duy nhất là đường mắt của em bé. Ở bên trái, em bé đang nhìn thẳng vào bạn và phần nóng nhất của bản đồ nhiệt nằm trên khuôn mặt. Ở bên phải, em bé đang nhìn vào dòng tiêu đề, hướng mắt của chúng ta từ khuôn mặt của em đến dòng tiêu đề và sao chép. Biến thể này có thể sẽ hoạt động tốt hơn khi thử nghiệm A / B vì sự chú ý của khách truy cập sẽ tập trung vào các phần tử trang quan trọng nhất. Con người tự động muốn nhìn nơi những người khác đang nhìn. Bằng cách chuyển hướng nhìn của em bé, chúng tôi sau đó đã kiểm soát được ánh nhìn của khách truy cập và hướng nó về phía đề xuất giá trị.

Điều quan trọng không chỉ là hiểu các quy tắc cấu trúc mà còn phải nhạy cảm với nội dung của văn bản và hình ảnh của chúng ta. Mặc dù mô hình F và mô hình Z đóng vai trò là các công cụ hữu ích để cấu trúc một trang, bạn sẽ thấy thành công hơn (và có nhiều niềm vui hơn) nếu bạn nắm bắt được sức mạnh thực sự của thiết kế và tạo ra một hệ thống phân cấp trực quan để hướng dẫn mọi người những phần quan trọng nhất trên trang của bạn. Kiểm soát các thiết kế của bạn và sử dụng chúng để hoàn thành mục tiêu của bạn — bạn sẽ rất vui vì mình đã làm được.

–

Về tác giả: Nicolai Doreng-Stearns là Nhà thiết kế trải nghiệm người dùng tại Instapage và luôn cam kết sống cuộc sống tốt nhất của mình. Khi anh ấy không thiết kế những trải nghiệm trực quan, anh ấy đang tập luyện Brazilian Jiu Jitsu, đạp xe xuyên San Francisco và tạo ra những bản nhạc khủng.