[Mẹo] Hướng Dẫn Thiết Kế Landing Page Đẹp

Chia sẻ bài viết này lên:

Thiết kế landing page đẹp là phải thành công về chuyển đổi, khiến những người xem tò mò trở thành khách hàng. Làm một trang landing page (hay còn gọi là trang đích) chuyển đổi tốt không có gì cao siêu như mọi người từng nghĩ: chiến lược với thiết kế giao diện kết hợp với nhau tạo nên một bài thuyết trình sản phẩm hoàn chỉnh.

Khi làm được điều đó, khách hàng đã mua sản phẩm có thể được chuyển đổi để sử dụng sản phẩm thương nghiệp một lần nữa, biến họ trở thành khách hàng trung thành.

Thiết kế landing page đẹp

Nguồn: OrangeCrush

Mặc dù những landing page có thiết kế tốt đem lại các đơn hàng tiềm năng, chúng vẫn còn bị đánh giá thấp.

Khoảng 44% các doanh nghiệp đưa lượng truy cập về trang chủ thay vì một trang landing page hướng đối tượng. Mất rất nhiều công sức để quảng cáo, SEO và sử dụng nhiều chiến dịch marketing để tạo được sự chú ý cho sản phẩm để chỉ rồi thất bại ở bước cuối.

Nhưng một landing page có tiềm năng về doanh thu chỉ khi có một thiết kế hiệu quả.

Để có thể thiết kế được một landing page thu hút, Linhkio sẽ sơ lược về cách hoạt động, các thành phần và các mẹo trong quá trình tạo landing page.

Cách Thiết Kế Và Tầm Quan Trọng Của Landing Page

Đôi lúc landing page còn được gọi là trang sản phẩm vì nó được thiết kế để marketing một sản phẩm/dịch vụ cụ thể hoặc lôi kéo người xem cho một hành động nào đó. Landing page là nơi người dùng sẽ được đưa đến khi họ bấm vào các đường dẫn hay khi tìm kiếm các sản phẩm trên Google.

Thiết kế landing page đẹp

Nguồn: 2ché

Một website của doanh nghiệp hoạt động như một trung tâm trưng bày toàn bộ sản phẩm và dịch vụ thêm vào đó là thông tin chung của doanh nghiệp. Là một phần của website doanh nghiệp, landing page có nhiệm vụ thuyết phục và tạo ra các đơn hàng thông qua các đặc tính của nó.

Một landing page thường tập trung vào một sản phẩm. Nội dung chủ yếu của trang là về mô tả đặc trưng sản phẩm để bán. Cho nên thiết kế của landing page phải dễ đọc, sản phẩm phải dễ nhìn để gây ấn tượng người xem.

Vì landing page là công cụ marketing, cho nên thành công của nó dựa vào các con số: chuyển đổi và lưu lượng truy cập. Chuyển đổi ở đây là số mà người xem trang mua sản phẩm (từ người xem trở thành người mua hàng).

Nếu tỉ lệ chuyển đổi thấp (trung bình khoảng 2%) thì thiết kế của bạn thất bại trong việc đạt mục tiêu đề ra.

Thiết kế landing page đẹp

Nguồn: FaTiH™

Lưu lượng truy cập bao gồm thông tin về ai đang truy cập, tổng số truy cập và thời gian ở lại trang. Khi người xem rời trang mà không tiến hành mua bất kỳ sản phẩm nào thì được coi là truy cập “hỏng”.

Dù lưu lượng truy cập không quan trọng bằng chuyển đổi (nếu lượng truy cập lớn với tỉ lệ thoát nhỏ nhưng không tạo ra đơn hàng thì chúng không được trưng dụng nhiều), số người xem hết landing page có thể cho bạn cái nhìn về thiết kế của trang.

Nếu người xem một trang lâu hơn 10 giây thì có khả năng lớn họ sẽ đọc được toàn bộ trang, đó là dấu hiệu tốt. Thiết kế tuyệt vời kết hợp với thông tin rõ ràng và hấp dẫn là cách tốt nhất để thu hút sự chú ý của họ.

Thành Phần Của Landing Page

Không có một khuôn mẫu cụ thể nào để thiết kế landing page đẹp. Vì yếu tố quan trọng nhất chính là cung cấp thông tin và thuyết phục người xem một cách hiệu quả.

Sau nhiều năm thiết kế landing page, cộng đồng đã tạo ra các quy ước mà người dùng đã quen thuộc và những quy ước này có thể đóng vai trò là nền tảng để xây dựng. Sau đây là các yếu tố phổ biến nhất của thiết kế trang đích.

Header (phần trên cùng)

Header là phần đầu tiên của landing page – một thanh ngang hình chữ nhật gần như chiếm hết tầm nhìn của màn hình. Tuỳ theo kích cỡ, header thường chứa các mục sau:

Thiết kế landing page đẹp

Nguồn: thecreatv

  • Branding: logo của thương hiệu hoặc của sản phẩm.
  • Ảnh hero: ảnh to, loại ảnh gây chú ý người. Có thể là ảnh sản phẩm hay ảnh vẽ, chụp lại trải nghiệm sử dụng sản phẩm.
  • Tiêu đề chính: song song với ảnh hero, tạo điểm nhấn lớn.
  • Tiêu đề phụ: giới thiệu ngắn về sẩn phẩm và lợi ích của nó.
  • Call-to-action (CTA): nút kêu gọi hành động. Đây là nút người dùng bấm vào để được đưa vào luồng chuyển đổi. CTA không thể thiếu trong landing page, nhưng hãy cẩn thận việc lạm dụng quá nhiều sẽ gây lộn xộn và khó bán sản phẩm. Hãy thử để một nút CTA cố định phía trên màn hình khi người dùng lướt trang để tăng hiệu quả. (CTA có thể dùng vào mục đích khác như tăng lượng đăng ký hoặc tải về, để đơn giản thì mua hàng sẽ là mục đích của CTA trong bài viết này).
Thiết kế landing page đẹp

Nguồn: Janki14

Navigation (điều hướng) là yếu tố cần được tối giản trong một thiết kế header thông thường. Hầu hết mọi trang web đều có một thanh navigaiton, landing page khác với trang thường. Landing page được thiết kể để giữ người xem trên page cho tới khi họ sẵn sàng mua sẩn phẩm, thì thanh navigation với nhiều lựa chọn để tác động họ đến xem các nơi khác trên website.

Nội dung

Mục nội dung là phần thân chính của landing page. Trong khi header có nhiệm vụ giới thiệu sản phẩm và gây chú ý cho người xem, phần thân trang nên tập trung vào việc chi tiết hóa giá trị và đưa ra các nội dung thuyết phục để tạo chuyển đổi. Nội dung của trang đích thường bao gồm:

Thiết kế landing page đẹp
  • Hình ảnh minh hoạ: các ảnh sản phẩm phụ (với góc chụp khác hoặc hình ảnh khách hàng sử dụng sản phẩm), các biểu tượng đầu dòng kết hợp với màu sắc hoặc các hình thể khác dẫn người xem lướt trang.
  • Thông số sản phẩm: nêu cách hoạt động của sản phẩm qua các mục rõ ràng. Bổ sung các liên kết ở mỗi mục (ví dụ “Đọc thêm”) đến các thông tin có ích để làm rõ các thắc mắc của người đọc. Phải lựa chọn nội dung cẩn thận tránh việc người xem thoát trang.
  • So sánh lợi ích: mục này phải nêu được sản phẩm sẽ thay đổi, cải thiện, có tác động tốt tới người dùng như thế nào theo. Có thể so sánh với các đối thủ hoặc nêu lên vấn đề, đánh vào “nỗi đau” của người xem.
  • Xác thực sản phẩm: đăng các xếp hạng, đánh giá, feedback của khách hàng cũ để tăng lòng tin người xem theo hướng tích cực.

Footer (phần dưới cùng)

Phần kết thúc cho landing page, nơi người xem đưa ra quyết định cuối cùng. Gồm các phần sau:

Thiết kế landing page đẹp

Nguồn: Adam Muflihun

  • Liên kết đến các trang khác trên web: bạn sẽ dẫn tới các trang liên quan của web, ví dụ như các câu hỏi thường gặp.
  • Liên kết đến các mạng xã hội: mục này có thể tạo một chút ý kiến trái chiều (như đã đề cập trước đây, bạn không nên khuyến khích người dùng thực hiện các hành động khác không liên quan đến CTA), nhưng nó có thể cải thiện lưu lượng truy cập để cung cấp liên kết cho người dùng chia sẻ landing page với những người theo dõi họ trên mạng xã hội.
  • Thông tin liên hệ: số điện thoại, địa chỉ email để khách hàng có thể kết nối khi họ có thắc mắc.
  • Thông tin pháp lý: thông báo bản quyền cùng với các thông tin khác như chính sách bảo hành, đổi trả. Thông thường các thông tin này sẽ được đặt vào một thanh có màu tối ở dưới cùng của trang.

6 Mẹo Để Có Thiết Kế Landing Page Đẹp

Giao diện của landing page sẽ được thiết kế tuỳ thuộc vào người thiết kế và thương hiệu, dưới đây là một số hướng dẫn và mẹo để thiết kế landing page hiệu quả.

Sự tối giản

Tối giản hoá ở đây đề cập đến việc hạn chế các chất liệu, vật liệu thiết kế cần thiết (màu sắc, kiểu chữ, hình ảnh, …). Khi thiết kế, hãy cân nhắc vấn đề trên. Nếu có một yếu tố nào đó không làm tăng thêm hiểu biết của người xem về sản phẩm hoặc thúc đẩy mua hàng, hãy loại bỏ nó.

Thiết kế landing page đẹp

Nguồn: Skalak

Có hai lý do chính giải thích tại sao điều trên quan trọng đến như vậy. Đầu tiên, bạn nên biết rằng khi người xem truy cập trang, họ đang tò mò một chút về sản phẩm và bất kỳ sự phân tâm nào sẽ làm họ mất chú ý. Ngoài ra, nên tạo thêm không gian giữa các thông tin như tăng khoảng cách sẽ nhấn mạnh chúng hơn và bớt nặng nề hơn.

Thiết kế landing page đẹp

Nguồn: RAZS

Thứ hai, càng nhiều chi tiết về đồ hoạ thì thời gian tải trang sẽ càng lâu. Điều đó sẽ làm tăng tỉ lệ thoát trang, đồng thời trang sẽ bị đánh giá thấp bởi các công cụ tìm kiếm. Vậy nên landing page cần được ưu tiên tốc độ tải hơn là thiết kế đẹp.

Tận dụng “nếp gấp”

Nếp gấp (“the fold”) là đoạn ngăn cách giữa phần thấy được khi vào trang web và phần còn lại phía dưới. Landing page có phần thân dài được cho là hiệu quả hơn trong việc giữ người xem.

Phần thân landing page càng dài sẽ tạo ra nhiều khoảng trống giữa các mụn trong khi nếu sử dụng một thiết kế thân trang ngắn sẽ gây cảm giác chật chội, lộn xộn. Ngoài ra, cuộn trang là một thao tác nhỏ nhưng đem lại tương tác tốt hơn.

Thiết kế landing page đẹp

Nguồn: set4net

Để tận dụng tốt chức năng cuộn trang ta phải thiết kế thật ấn tượng cho nội dung phía trên “nếp gấp”. Đây là phần trang web bị cắt do độ phân giải màn hình, buộc người xem phải cuộn xuống trang để xem tiếp các thông tin.

Mặc dù kích thước các màn hình thường khác nhau, độ phân giải phần phía trên này thường là 1000×600 px. Thiết kế hấp dẫn, nửa ẩn nửa hiện gây tò mò cho người xem để họ có thể tiếp tục cuộn trang và tương tác.

Tối ưu hành vi đọc

Cái mẩu bài đọc sẽ quyết định cách người xem quét trang (dựa vào nghiên cứu mắt) và người thiết kế trang sẽ căn chỉnh, giãn cách các nội dung văn bản để thuận lợi cho việc này. Hầu hết người xem sẽ quét trang web trước khi quyết định có đọc trang hay không nên bạn cần phải tối ưu thiết kế cho việc này.

Tách hình ảnh và chữ sao cho các dòng văn bản dễ đọc ở một khoảng cách nào đó để hướng người xem cuộn xuống trang và đến các nút CTA.

Thiết kế landing page đẹp

Nguồn: iva

Có hai cách đọc theo mắt phổ biến:
  • Theo chữ Z: người xem sẽ lướt mắt theo hình chữ Z từ trái sang phải. Cách này hợp với thiết kế chú trọng về hình ảnh và làm cho bố cục trang năng động hơn. Để thiết kế ta cần phân bố các cụm nội dung theo hình zic zắc và khiến người dùng đảo mắt nhanh chóng từ bên này sang bên kia.
  • Theo chữ F: người xem sẽ lướt mắt theo hình chữ F từ trái sang phải. Phù hợp với thiết kế trang nặng về chữ vì thuận tiện hơn cho việc đọc từng dòng.

Thiết kế tương tác

Các yếu tố mang tính tương tác là một trong những nguyên liệu tốt nhất cho web. Thiết kết landing page có thể sử dụng sự tương tác để mời người xem sử dụng sản phẩm, dịch vụ thay vì để họ đọc một cách thụ động. Điều này có thể đem lại cho người xem một trải nghiệm như đang tham giam vào một trò chơi hơn là thấy một quảng cáo.
Thiết kế landing page đẹp

Nguồn: Adam Muflihun

Cuộc trang là một hành động tương tác rõ nhất, người thiết kế có thể sử dụng các hoạt hình như chuyển động ngang hoặc dọc. Hiệu ứng hover có thể làm cho trang cảm giác thật hơn phía dưới con trỏ như ảnh động, hiệu ứng mờ hay đổi màu.

Nếu bạn đang bán một sản phẩm vật lý, hãy thử đem một bản mô phỏng 3D lên trang web để người xem tương tác.

Nút CTA là nút cực kỳ quan trọng trong khâu tương tác, nó phải đem lại cảm giác tích cực và hào hứng khi được bấm vào. Bạn có thể đặt một số hiệu ứng chuyển động cho nút khi được bấm.

Mặc dù mục tiêu vẫn là tránh gây mất sự chú ý của người xem cũng như tăng tốc độ tải trang, nhưng điều trên sẽ giúp người xem giải trí hơn và tăng tích tương tác cao.

Sơ đồ thiết kế landing page

Nếu doanh nghiệp bạn cung cấp nhiều sản phẩm hay dịch vụ khác nhau, hãy tạo từng landing page cho chúng để tăng tối đa chuyển đổi.

Nhưng càng nhiều landing page, càng khó để bạn thúc đẩy quá trình thiết kế. Có cách nào để giải quyết vấn đề này? Hãy cho chúng sử dụng chung bố cục.

Thiết kế landing page đẹp

Nguồn: eeeh_aarrh

Thiết kế landing page đẹp

Nguồn: Adam Muflihun

Mặc dù mỗi sản phẩm nên có một landing page riêng phù hợp, nhưng chúng đều là một phần của thương hiệu bạn.

Duy trì sự đồng bộ trong thiết kế giữa các landing page rất quan trọng cho nhận diện thương hiệu (giúp người dùng tin tưởng hơn), ngoài ra việc thiết kế và ngân sách chi sẽ hợp lý và khả thi hơn.

Bắt đầu với một landing page và kiểm tra thật cẩn thận hiệu suất mà nó đem lại. Khi đã có một thiết kế hoạt động tốt, hãy dùng sơ đồ bố cục đó như một công thức chung cho những landing page còn lại.

Sản phẩm khác nhau có thể có các đối tượng khách hàng khác nhau cho nên bạn vẫn phải làm phép thử và thiết kế khác chúng nếu cần thiết.

Phép thử cho từng yếu tố trong thiết kế

Có một sự thật là mặc dù bạn làm theo những gì Linhkio chia sẻ trong bài viết này, landing page của bạn có thể sẽ không chuyển đổi theo cách bạn mong đợi.

Thiết kế landing page thiên về khoa học hơn, ưu tiên về dữ liệu và số liệu hơn cho với tính thẩm mỹ. Mấu chốt quyết định trong phương pháp thiết kế chính là hướng đối tượng.

Các tệp đối tượng có các điểm khác nhau, cho nên để biết thiết kế landing page của bạn có phù hợp với họ hay không thì phải thử nghiệm và điều chỉnh các thiết kế sao cho phù hợp.

Thiết kế landing page đẹp

Nguồn: Ian Douglas

Phép thử A/B (hay còn gọi là “A/B test”, “split test”) là phương pháp so sánh hai phiên bản khác nhau của một thiết kế. Người thiết kế và người làm marketing thường sử dụng phương pháp này để đưa ra quyết định dựa trên kết quả tốt nhất.

Dùng phép thử A/B thể kiểm tra tất cả các yếu tố trên trang web, từ phần đầu trang cho đến bản quảng cáo, hình ảnh, hình dạng của các nút bấm. Thực hiện xong phương pháp này bạn có thể tự tin khi có được một thiết kế landing page đẹp và được người dùng tương tác tốt.

Kết Luận

Khi bắt đầu thiết kế landing page, bạn hãy giả định người xem đang tìm lý do nào đó để rời khỏi trang và hãy giải quyết các vấn đề đó.

Mặc dù tỷ lệ thoát cao tuỳ thuộc vào nhiều yếu tố như mô tả sản phẩm không rõ ràng, giá thành cao hay chất lượng thấp, một thiết kế landing page tốt chính là thứ quyết định để giảm bớt những điều trên.

Bài viết này được dự định là nơi để bạn bắt đầu thiết kế landing page. Nhưng cách tốt nhất là bạn nên làm việc với một người thiết kế chuyên nghiệp. Hãy liên hệ Linhkio để được tư vấn về thiết kế landing page đẹp nhé.

Nguồn dịch: 99design

Chia sẻ bài viết này lên:

Leave a comment

Your email address will not be published. Required fields are marked *