Nội dung chính
Nếu bạn đang đọc blog này, bạn đã biết tầm quan trọng của việc có các landing page hiệu quả nhằm duy trì tính nhất quán của thông điệp và tăng tỷ lệ chuyển đổi của bạn.
Tuy nhiên, bạn đã bao giờ nghĩ về tất cả các quyết định thiết kế để làm cho landing page của mình trở nên hiệu quả chưa?
Cũng giống như nghệ thuật của các đại lý tối ưu hóa chuyển đổi và tối ưu hóa thiết kế hiệu quả đều là sự nhấn mạnh, dòng chảy và hướng khách hàng tiềm năng đến nơi chúng tôi muốn họ đến.
Tin vui là bạn không cần phải là nhà thiết kế mới có thể sử dụng những nguyên tắc thiết kế cơ bản này để xây dựng trang đích hiệu quả.
Sẵn sàng? Hãy bắt đầu với những mẹo thiết kế landing page này!
Nguyên tắc thiết kế số 1: Điểm nhấn vào thị giác
Có vẻ như kỹ thuật được biết đến nhiều nhất để thu hút sự chú ý và chuyển đổi là tạo điểm nhấn.
Phần khó khăn là biết chính xác khi nào cần nhấn mạnh và khi nào không.
Xu hướng của nhiều nhà tiếp thị và chủ doanh nghiệp khi xây dựng landing page của họ là muốn nhấn mạnh mọi thứ, bởi vì mọi thứ đều cảm thấy quan trọng.
Xét cho cùng, nếu bạn đặt nó trên trang của mình ngay từ đầu thì nó có lý do để ở đó. Tuy nhiên, khi bạn nhấn mạnh mọi thứ, bạn không nhấn mạnh điều gì cả.
Một số điều đảm bảo việc sử dụng sự nhấn mạnh trên Landing page là:
- Tiêu đề nút
- Bảng giá
- Các biểu mẫu, Form
- Tin nhắn khẩn cấp
- Lời chứng thực
- Thông điệp quan trọng khác
Một số yếu tố thường không cần thiết phải nhấn mạnh:
- Đoạn văn bản mô tả
- Hình ảnh và đồ họa
- Yếu tố thiết kế trang trí
- Yếu tố nền
Cách sử dụng điểm nhấn trong Landing page
Dưới đây là một số cách bạn có thể nhấn mạnh các yếu tố trên landing page của mình.
Hãy nhớ: chỉ nhấn mạnh những gì cần thiết và xem xét cách nhấn mạnh trong mối quan hệ với các yếu tố xung quanh trên trang của bạn.
Tiêu đề
Có nhiều cách khác nhau để nhấn mạnh tiêu đề. Phổ biến nhất là sử dụng phông chữ lớn hơn và đậm hơn. Bạn cũng có thể sử dụng phông chữ màu, các yếu tố trang trí như đường viền và mũi tên cũng như màu nền.
Ví dụ: Trước khi dành quá nhiều thời gian để suy nghĩ về những cách sáng tạo để nhấn mạnh dòng tiêu đề của bạn, hãy quyết định xem liệu một phông chữ đơn giản, lớn hơn và đậm có phù hợp hay không. Bên dưới là một ví dụ hoàn hảo về kiểu nhấn mạnh này, được xây dựng với sự đơn giản và một chút bằng chứng xã hội bổ sung.
Nút bấm – Button
Nút bấm là thứ phổ biến nhất mà mọi người nghĩ đến khi bắt đầu tập trung vào việc nhấn mạnh.
Một cách hay để nghĩ về các nút là việc chúng có màu sắc hay kiểu dáng chính xác như thế nào không quan trọng mà thay vào đó chúng nổi bật so với các thành phần khác trên một trang.
Ví dụ: Trong ví dụ này, chiếc ô tô màu cam sáng có thể làm mất tập trung vào CTA thực tế. Vì vậy, hãy thử đưa chiếc ô tô màu bạc với CTA màu cam:
Bảng giá
Bảng giá là một cách tuyệt vời để nhanh chóng nhấn mạnh vào các tính năng của sản phẩm và thúc đẩy chuyển đổi trên các landing page thậm chí chỉ có một sản phẩm.
Ví dụ: Sean D’Souza thường xuyên sử dụng kỹ thuật này trên các trang bán thông tin sản phẩm của mình.
Với một vài thay đổi nhỏ về tiền thưởng và giá cả để tăng giá trị trong khi giá hầu như không tăng; việc đưa ra quyết định đăng ký sau đó sẽ trở thành điều hiển nhiên.
Các biểu mẫu – Form
Biểu mẫu hay Form là một phần không thể thiếu của landing page tạo khách hàng tiềm năng.
Nếu lời kêu gọi hành động chính trên landing page của bạn là thu hút mọi người đăng ký thứ gì đó hoặc trở thành khách hàng tiềm năng thì việc tạo một biểu mẫu nổi bật sẽ trở nên quan trọng.
Ví dụ: Shopify thực hiện rất tốt việc nhấn mạnh biểu mẫu đăng ký với màu trắng và xanh lá cây tương phản để khách truy cập thấy ngay cách đăng ký.
Thông báo khẩn cấp – Tính cấp bách
Vài năm qua, có khá nhiều phản ứng dữ dội xung quanh thông báo khẩn cấp trên landing page và trang bán hàng.
Nhiều người cần thời gian để suy nghĩ về quyết định của mình và không thích vội vàng, điều này hoàn toàn dễ hiểu.
Mẹo ở đây là chỉ sử dụng thông báo khẩn cấp khi có điều gì đó thực sự khẩn cấp hoặc khan hiếm và mọi người thực sự cần biết điều đó. Ví dụ như trong trường hợp có sự kiện, số lượng chỗ có hạn hoặc đợt giảm giá trong thời gian có hạn.
Lời chứng thực
Lời chứng thực là một cách tuyệt vời để xây dựng độ tin cậy cho các ưu đãi trên landing page của bạn, mặc dù chúng thường có tầm quan trọng thứ yếu so với lời kêu gọi hành động chính của bạn. Hãy coi họ như những người ủng hộ vui vẻ giúp bạn tăng tỷ lệ chuyển đổi.
Nguyên tắc chính ở đây là lời chứng thực của bạn là chân thực và đáng tin cậy. Điều này có nghĩa là chúng phải bao gồm ảnh, tên đầy đủ (nếu có thể) và thậm chí có thể ở định dạng video.
Nếu bạn cố gắng làm giả nó thì mọi người sẽ chú ý và tốt hơn hết là bạn không nên có lời chứng thực nào cả.
Ví dụ: Trang bên dưới nhấn mạnh hơn một chút bằng cách thêm logo của các công ty mà mỗi người đại diện. Rõ ràng là những lời chứng thực này là có thật và đến từ những người thực sự.
Nguyên tắc thiết kế số 2: Đường dẫn
Bạn có bao giờ nhận thấy có bao nhiêu dòng ở khắp mọi nơi?
Hãy nhìn nhanh xung quanh căn phòng bạn đang ở.
Bàn làm việc hoặc bàn làm việc của bạn tạo thành một đường ngang, các góc phòng tạo thành các đường thẳng đứng, cửa sổ có các đường góc cạnh.
Hầu hết mọi thứ do con người tạo ra đều có ít nhất một dòng, tùy theo góc nhìn của bạn.
Chúng ta dựa vào các đường nét để giúp tạo nền tảng và hướng dẫn chúng ta trong cuộc sống thực. Trên các landing page, chúng hoạt động theo cách tương tự.
Các loại Đường dẫn định hướng
Đường thẳng đứng – Vertical lines
Các đường thẳng đứng tạo ấn tượng về sự ổn định và chuyển động hướng lên trên.
Chúng sẽ hướng mắt lên hoặc xuống trang của bạn một cách tự nhiên.
Đường ngang – Horizontal Lines
Các đường ngang mang lại cảm giác vững chắc. Chúng cung cấp sự nghỉ ngơi và tươi mới.
Chúng thường được sử dụng trên các trang web và landing page mặc dù chúng không phải lúc nào cũng là lựa chọn tốt nhất trong bối cảnh chúng được sử dụng.
Đường chéo và đường góc
Những đường này mang lại cảm giác năng động và chuyển động.
Những kiểu dòng này rất phù hợp khi bạn muốn làm rung chuyển mọi thứ hoặc minh họa các khái niệm về tính cấp bách, kịch tính hoặc năng lượng.
Đường cong
Đường cong ít trang trọng hơn đường thẳng.
Chúng được sử dụng tốt nhất khi trang của bạn cần phải vui nhộn và năng động hơn một chút.
Đường mỏng
Những đường nét mỏng nhẹ nhàng, thanh lịch và không phô trương.
Hầu hết các đường nét bạn nhìn thấy trong thiết kế web đều mỏng.
Đường dày
Những đường kẻ dày được sử dụng tốt nhất khi đưa ra tuyên bố táo bạo.
Chúng gợi lên sức mạnh và quyền lực, nhưng có thể dễ dàng trở nên quá đòi hỏi sự chú ý khi sử dụng quá mức.
Mũi tên
Mũi tên giống như những đường quyết đoán.
Chúng đòi hỏi sự chú ý nhưng cần được sử dụng một cách tiết kiệm để không làm mất tập trung và gây khó chịu cho khách truy cập khỏi phần còn lại của trang.
Mũi tên có đủ hình dạng, kích cỡ và có thể được gắn vào tất cả các loại đường khác nhau.
Cách sử dụng đường dẫn định hướng trong thiết kế Landing page
Điều tuyệt vời về đường kẻ là chúng cực kỳ hữu ích trong việc hướng sự chú ý của khách truy cập đến nơi bạn muốn họ đến.
Và một landing page tốt và hiệu quả với tỷ lệ chuyển đổi cao chính là việc hướng sự chú ý và luồng để khách truy cập tìm thấy thông tin họ cần.
Dưới đây là ví dụ về cách bạn có thể sử dụng các loại dòng khác nhau trên trang đích của mình.
Đường thẳng đứng
Các trang đích và bán hàng có xu hướng theo chiều dọc, đơn giản vì tất cả thông tin cần được chứa chỉ trong một trang và bạn thường không muốn gửi mọi người đến nơi khác.
Trong trường hợp này, các đường thẳng đứng tạo ra một dòng chảy tự nhiên hướng xuống dưới. Điều này có thể bằng cách đặt toàn bộ trang trong một “hộp” với các cạnh thẳng đứng hoặc đảm bảo rằng các đối tượng trên trang được xếp chồng lên nhau theo cách tạo ra một đường tự nhiên.
Bạn đã cố gắng giữ mọi thứ trong màn hình đầu tiên chưa? Điều đó là không cần thiết khi sử dụng các đường thẳng đứng và dòng chảy tốt.
Ví dụ: Trang sản phẩm bên dưới sử dụng các đường thẳng đứng một cách sáng tạo nhằm khuyến khích khách truy cập cuộn xuống và xem thêm trên trang.
Đó là một lời mời sáng tạo để xem thêm.
Đường ngang
Đường kẻ ngang cực kỳ phổ biến trên các trang web và landing page vì chúng tạo ra sự phân chia lớn khi tách phần này với phần khác.
Vấn đề với chúng là chúng cũng mang lại cảm giác nghỉ ngơi và sự mệt mỏi nhất định.
Điều bạn muốn tránh là khách truy cập nghĩ rằng trang đích của bạn đã “xong” và ngừng cuộn xuống khi bạn muốn họ xem thêm.
Một cách thực tế để giải quyết vấn đề này và giữ sự tách biệt giữa các phần trên trang đích của bạn là sử dụng màu nền xen kẽ thay vì đường viền.
Ví dụ: Đây là một phần của trang bán hàng. Dòng chảy từ phần này sang phần khác rất tinh tế để tạo ra sự tách biệt mà không có cảm giác cuối cùng.
Đường chéo và đường góc
Xây dựng năng lượng, chuyển động và vui vẻ có thể là một chiến lược tuyệt vời cho thiết kế landing page cần củng cố cảm giác về tốc độ hoặc tính cấp bách.
Ví dụ: Trang web bên dưới thể hiện một cách hoàn hảo khái niệm “chơi” với các hình ảnh động tinh tế và các đường góc cạnh.
Đường cong
Những đường cong rất hiếm trong thế giới kỹ thuật số của thiết kế dạng lưới và hình hộp.
Sử dụng chúng có thể là một cách tuyệt vời để thu hút sự chú ý về các sản phẩm và ưu đãi thú vị và hay thay đổi.
Ví dụ: Ở đây, chúng tôi đã sử dụng các mũi tên cong để hướng dẫn khách truy cập đến từng phần, bổ sung thêm cảm giác thú vị về thương hiệu, hướng dòng chảy xuống và thu hút sự chú ý xuống các tiêu đề trong nội dung tiếp theo.
Đường mỏng
Các dòng mỏng rất hữu ích khi bạn cần chúng để xác định và phân tách các khu vực trong bố cục landing page mà không làm phân tán sự chú ý khỏi lời kêu gọi hành động của bạn.
Hầu hết các dòng bạn nhìn thấy trên web đều rộng 1px vì đó là đơn vị đo lường nhỏ nhất dành cho web. Ngoài việc sử dụng các loại đường này để phân tách trực quan, chúng còn hữu ích cho việc tạo hộp.
Gần đây, chúng được sử dụng rất nhiều với xu hướng thiết kế phẳng như các nút và biểu mẫu kêu gọi hành động “ma”.
Ví dụ: Trang web bên dưới có công dụng tuyệt vời về nút ma. Sự đơn giản của phần còn lại của trang thu hút mọi sự chú ý vào các nút tải xuống.
Đường dày
Các đường đậm có thể rất hữu ích trong việc giúp lời kêu gọi hành động nổi bật, đặc biệt khi chúng tương phản với các đường mỏng.
Ví dụ: Riêng những đường kẻ dày trong những ví dụ này sẽ không thú vị lắm. Tuy nhiên, trái ngược với những dòng kẻ mảnh trên phần còn lại của trang, hành động chọn một sở thích cụ thể trở nên rõ ràng hơn.
Mũi tên
Mũi tên cực kỳ hiệu quả trên landing page khi được sử dụng có chừng mực.
Một nguyên tắc nhỏ là chỉ sử dụng chúng một cách tiết kiệm cho lời kêu gọi hành động chính của bạn hoặc một yếu tố khác cần được nhấn mạnh đặc biệt đã nêu ở trên.
Ví dụ: Đây là cách sử dụng hiệu quả các mũi tên mà chúng tôi đã triển khai trên trang chủ bên dưới
Nguyên tắc thiết kế số 3: Nhịp điệu
Nhịp điệu là yếu tố giúp tạo dòng chảy trên landing page của bạn và cho phép khách truy cập tạo dựng sự tự tin và dễ dàng tìm thấy thông tin họ đang tìm kiếm hơn.
Nếu không có nhịp điệu tốt, mọi thứ sẽ trở thành một mớ tạp âm hỗn loạn.
Một số cách sử dụng nhịp điệu trong thiết kế hiệu quả và landing page hướng đến chuyển đổi là:
- Phong cách nhất quán
- Các phần tử lặp lại
- Chuyển tiếp tốt
Phong cách nhất quán
Đây là lúc việc chuẩn bị sẵn các hướng dẫn về phong cách và thương hiệu thực sự tốt sẽ có ích.
Vì vậy, chúng tôi thường thấy khách hàng gặp khó khăn trong việc đạt được sự nhất quán và dòng chảy trên trang đích của họ chỉ vì họ đang nhìn ra bên ngoài và cố gắng sao chép phong cách của một thương hiệu khác.
Điều này có thể dễ dàng giải quyết bằng cách nỗ lực phối hợp để sử dụng màu sắc một cách nhất quán, sử dụng tính nhất quán về hoa văn và trang trí, đồng thời sử dụng cùng phông chữ và các yếu tố trang trí khác mà bạn sử dụng cho thương hiệu tổng thể chính của mình.
Ví dụ: Trang chủ dưới đây thực hiện rất tốt việc duy trì sự nhất quán và trôi chảy về phong cách bằng cách sử dụng các màu sắc thương hiệu chính là xanh lá cây và xanh lam với màu cam để nhấn mạnh các nút và biểu tượng.
Các phần tử lặp lại
Việc lặp lại các loại yếu tố giống nhau sẽ giúp ích rất nhiều trong việc mang lại sự tin cậy cho khách truy cập trang web của bạn.
Điều này có thể có nghĩa là lặp lại các dòng tiêu đề có cùng kiểu dáng, lặp lại các hộp thông tin có cùng màu nền hoặc trong trường hợp các trang bán hàng có dạng dài hơn, hãy lặp lại các nút ở những nơi có ý nghĩa.
Ví dụ: Trong ví dụ này, chúng tôi đã sử dụng một kiểu kiểu nút khác thường để nhấn mạnh và lặp lại các nút dọc theo trang ở nơi có ý nghĩa trong ngữ cảnh và luồng của trang.
Chuyển tiếp tốt
Chuyển tiếp tốt là tạo ra một luồng tự nhiên để khách truy cập di chuyển từ khu vực này trên landing page của bạn sang khu vực tiếp theo.
Nếu bạn đã từng học viết hoặc viết quảng cáo, bạn có thể đã biết tầm quan trọng của việc có các cụm từ chuyển tiếp ở cuối mỗi đoạn để giới thiệu và giúp người đọc dễ dàng chuyển sang đoạn tiếp theo. Khái niệm tương tự áp dụng cho thiết kế.
Ví dụ: Trang bên dưới thực hiện rất tốt việc áp dụng hiệu ứng chuyển tiếp trên các trang nghiên cứu điển hình của họ. Khách truy cập được khuyến khích cuộn xuống trang thông qua một kiểu kể chuyện bằng hình ảnh và cũng được hướng dẫn bởi bảng nội dung điều hướng tương tác ở bên trái.
Tất cả những điều này đã nói lên rằng, tôi biết việc ghi nhớ tất cả các mẹo tối ưu hóa chuyển đổi này trong khi bạn thiết lập và thiết kế landing page của mình có thể là một thách thức nếu nhà thiết kế không có chức danh công việc của bạn.
Dưới đây là danh sách kiểm tra tiện dụng nhanh chóng mà bạn có thể sử dụng cho dự án trang đích tiếp theo của mình.
Bạn đang nhấn mạnh những yếu tố nào trên trang đích của mình?
- Tiêu đề nút
- Bảng giá
- Các biểu mẫu, Form
- Tin nhắn khẩn cấp
- Lời chứng thực
- Các tin nhắn quan trọng khác mà khách truy cập của bạn có thể xem
Bạn đang sử dụng loại dòng nào trên trang đích của mình để tăng tỷ lệ chuyển đổi?
- Thẳng đứng
- Nằm ngang
- Đường chéo
- Đường mỏng
- Đường Dày
- Đường cong
- Mũi tên
Bạn đang thúc đẩy nhịp điệu và dòng chảy trên trang đích của mình như thế nào?
- Phong cách nhất quán
- Các phần tử lặp lại
- Chuyển tiếp tốt
