5 Nguyên tắc thiết kế website chuyển đổi cao cần áp dụng

Thiết kế sai có thể khiến người dùng bối rối, không biết phải làm gì tiếp theo và muốn thoát khỏi trang web, làm giảm doanh số và tỷ lệ chuyển đổi.

Thiết kế phù hợp có thể hướng dẫn người dùng thực hiện các hành động mong muốn một cách liền mạch, chẳng hạn như nhấp vào nút, chọn tham gia danh sách của bạn hoặc mua sản phẩm của bạn.

Để khám phá nghệ thuật đen tối của thiết kế trang web có tỷ lệ chuyển đổi cao, mời Oli Gardner, người đồng sáng lập Unbounce  , đến studio và yêu cầu anh ấy trình bày năm nguyên tắc thiết kế trang web có tỷ lệ chuyển đổi cao để áp dụng (và tồn tại).

Sau gần một thập kỷ xây dựng và phân tích chuyên sâu hơn 100.000 trang đích, Oli biết cách thiết kế website để đạt hiệu quả tối đa. Hãy xem video bên dưới để xem anh ấy thực hiện như thế nào và tiếp tục đọc phần tiếp theo để khám phá những điểm nổi bật chính.

Sử dụng Nguyên tắc Định hướng để Làm nổi bật Thông tin Quan trọng

Một trong những cách nhanh nhất để xem thiết kế trang của bạn có giúp ích hay gây hại cho việc chuyển đổi là chạy cái mà Oli gọi là " Kiểm tra 5 giây " .

Bài tập đơn giản này được thực hiện bằng cách cho một người ngồi trước màn hình máy tính trống, đặt hẹn giờ năm giây, rồi cho họ xem trang đích của bạn. Khi hẹn giờ về 0, bạn sẽ lấy trang đích ra và hỏi họ về những gì họ đã thấy. Bạn có thể hỏi những câu như "Trang này nói về cái gì?" hoặc "Bạn được yêu cầu làm gì?"

Oli thích bài kiểm tra này vì nó là một cách hay để xem trang của bạn có làm nổi bật ngay lập tức thông tin quan trọng nhất đối với khách truy cập hay không. Thực tế là, năm giây là tất cả những gì bạn có thể có. Vì vậy, nếu bạn không thể trình bày quan điểm của mình một cách nhanh chóng và rõ ràng, thì dù lời đề nghị của bạn có hấp dẫn đến đâu cũng không quan trọng. Khách truy cập sẽ không thấy nó đâu.

Bài kiểm tra này cũng là một cách tốt để đo lường một trong những nguyên tắc thiết yếu của thiết kế web có khả năng chuyển đổi cao: hướng, hay cách mắt của người truy cập di chuyển trên toàn bộ trang.

Bất cứ khi nào khách truy cập vào một trang web, họ sẽ ngay lập tức tìm kiếm các tín hiệu cho họ biết nên nhìn vào đâu. Hướng dẫn mô tả cách các thành phần thiết kế trang khác nhau phối hợp với nhau để dẫn dắt ánh mắt của khách truy cập từ điểm này sang điểm khác. Điều này có thể tác động sâu sắc đến tỷ lệ chuyển đổi .

Ví dụ, Oli đã làm việc với một khách hàng giáo dục để tăng tỷ lệ chuyển đổi  cho trang đích của họ. Trang đích ban đầu trông như thế này:

Lưu ý người phụ nữ trong ảnh đang nhìn thẳng vào bạn và không có yếu tố nổi bật nào trên trang hướng dẫn bạn đến hành động cốt lõi mà họ muốn bạn thực hiện (chọn một khu vực quan tâm).

Oli đã chạy thử nghiệm 5 giây và xác nhận điều này là đúng. Chỉ 22% người xem trang biết chương trình ở cấp độ nào. Tệ hơn nữa, chỉ 8% người xem có thể nhớ lại khóa học đang được giảng dạy.

Vì vậy, Oli quyết định sử dụng nguyên tắc thiết kế hướng để khắc phục điều này. Đầu tiên, anh ấy thêm ảnh một người đang nhìn về phía tiêu đề . Sau đó, để tạo hiệu ứng ấn tượng hơn, anh ấy thêm một đường màu xanh lá cây, chỉ cho người dùng vị trí cần nhìn trên trang, như thế này:

Ông đã chạy thử nghiệm 5 giây thêm hai lần nữa và ngay lập tức nhận thấy sự cải thiện trong khả năng ghi nhớ của khách tham quan. Trên thực tế, với tín hiệu chỉ dẫn, số người biết chương trình đang ở cấp độ nào đã tăng gấp đôi. Và số người có thể nhớ lại khóa học đã tăng 275%!

"Đó chính là tầm quan trọng của việc định hướng và dẫn dắt người xem qua trang web", Oli nói. Hãy tưởng tượng hiệu suất của một trang web có thể tăng gần gấp đôi chỉ bằng một thao tác hoán đổi ảnh đơn giản.

Vì vậy, nếu bạn muốn tăng tỷ lệ chuyển đổi trên trang của mình, hãy cân nhắc những mẹo thiết kế dựa trên hướng sau:

• Tận dụng lợi thế của ánh mắt.  Nếu bạn có ảnh của một người trên trang, hãy đảm bảo họ hướng về phía hành động bạn muốn thực hiện. Khoa học đã chứng minh điều này . Thậm chí đã có những nghiên cứu theo dõi chuyển động mắt cho thấy mọi người có xu hướng dõi theo ánh mắt của chủ thể trong tầm nhìn và nhìn theo cùng một hướng. Hãy xem ví dụ bản đồ nhiệt này  cho thấy điều gì xảy ra khi mắt hướng về phía người xem so với hướng về tiêu đề:

• Bài học rút ra cho trang đích của bạn:  Hướng mắt về phía lời kêu gọi hành động. Người xem sẽ tự nhiên hướng mắt đến đó.
• Thay đổi kích thước các thành phần trên trang.  Mắt người thường hướng về thành phần lớn nhất trên trang trước tiên. Vì vậy, hãy cân nhắc việc thay đổi kích thước ảnh và tiêu đề. Cố gắng sử dụng hệ thống phân cấp để hướng dẫn người đọc một cách tự nhiên đến vị trí cần nhìn. Trong ví dụ về ngôi trường ở trên, người xem được hướng dẫn nhìn vào người đàn ông trong ảnh trước, rồi ánh mắt của người đàn ông này sẽ hướng họ đến tiêu đề (thành phần quan trọng tiếp theo). Hãy xem xét những đường dẫn này được tạo ra bởi các thành phần trên trang của bạn.
• Sử dụng màu sắc và đồ họa để chỉ dẫn người xem nên nhìn vào đâu.  Màu sắc tươi sáng thu hút mắt nhanh hơn màu trung tính. Ví dụ, đường kẻ màu xanh neon trong ảnh rất thu hút sự chú ý và định hướng. Bạn cũng có thể kết hợp các yếu tố như ngón tay trỏ hoặc mũi tên để tạo chuyển động trên trang và hướng dẫn người xem nên nhìn vào đâu.

Màu sắc và các yếu tố tương phản để có độ rõ nét tức thì

Oli chia sẻ một câu chuyện đáng xấu hổ về lần anh vô tình đi theo một người phụ nữ đến tận phòng khách sạn của cô ấy vì thiết kế tệ. Một tấm biển đáng lẽ phải chỉ đường nhanh chóng cho anh, nhưng lại khiến anh bối rối.

Độ tương phản rất quan trọng trong thiết kế vì nó giúp mắt bạn phân biệt giữa hai yếu tố bất kỳ trên một trang. Khi độ tương phản thấp, sẽ khó để nhận ra sự phân chia các yếu tố, và thậm chí còn khó hơn để biết nên nhìn vào đâu.

Ví dụ, biển hiệu khách sạn không có độ tương phản nào ở phần chữ, mũi tên và số. Tất cả trông đều giống nhau.

Tất cả các yếu tố đều có trọng số bằng nhau, nên rất dễ nhìn vào con số, nghĩ rằng tầng ba ở bên trái và các phòng ở bên phải. Thực tế, khi Oli thử nghiệm điều này, ông phát hiện ra rằng 33% số người đã đi sai hướng khi họ liếc nhìn biển báo này trong năm giây.

Lý do là vì yếu tố "tầng 3" cần được phân tách bằng độ tương phản. Nó cần phải khác biệt về mặt thị giác so với mọi thứ khác trên trang vì nó truyền tải thông tin khác biệt.

Vì vậy, Oli đã tạo ra một thiết kế mới, trong đó anh ấy làm cho phần chữ ở trên cùng có màu trắng đậm và thử nghiệm lại.

Với sự tương phản trong tiêu đề, rõ ràng “Tầng 3” là một yếu tố độc đáo, khiến nó ít gây nhầm lẫn hơn nhiều.

Oli cho biết: “Những yếu tố này khác nhau về mặt ngữ nghĩa, vì vậy bạn phải chia nhỏ chúng để làm rõ nghĩa”.

Nếu bạn không thấy kết quả mong muốn với trang web của mình, bạn có thể cần cân nhắc thêm các yếu tố tương phản vào thiết kế. Điều này sẽ cho phép bạn giao tiếp rõ ràng hơn với khách truy cập.

Hãy cân nhắc việc chia nhỏ các yếu tố trên trang truyền tải những thông điệp khác nhau và bù trừ chúng bằng độ tương phản. Đây là một chiến thuật chuyển đổi hiệu quả.

"Khi bạn hiểu được nguyên tắc tương phản, bạn sẽ thấy rằng việc tăng tỷ lệ chuyển đổi không chỉ đơn giản là chọn một màu nhất định cho tất cả các nút bấm", Oli nói. "Màu sắc không quan trọng, dù CTA của bạn là #89B941 hay đỏ. Chỉ cần đảm bảo nó tương phản với phần còn lại của trang. Đó là cách bạn tạo nên sự khác biệt."

Nói cách khác, việc tăng tỷ lệ chuyển đổi và kết quả thử nghiệm phân tách nên bắt đầu bằng các câu hỏi về độ tương phản, không chỉ màu sắc.

Khi bạn hiểu được tác dụng của độ tương phản, bạn có thể xác định được hai hoặc ba khu vực trên bất kỳ trang nào mà độ tương phản có thể mạnh hơn. Hãy tìm và thử nghiệm chúng để tăng tỷ lệ chuyển đổi ngay lập tức.

Sử dụng Nhóm và Khoảng trắng để Biến Sự vắng mặt thành Sức mạnh

Một trong những lỗi lớn khác trong thiết kế ban đầu của biển hiệu khách sạn là tất cả các yếu tố đều bị dồn lại với nhau và tập trung vào một chỗ. Điều này dẫn đến sự thiếu rõ ràng hoàn toàn.

Điều cần thiết là một liều lượng vừa đủ về nhóm và khoảng trắng.

Oli cho biết: "Bạn cần đưa các con số đến gần mũi tên có liên quan hơn và đặt khoảng trắng ở giữa để phân tách chúng một cách rõ ràng".

Với sự điều chỉnh đơn giản này, biển báo sẽ chỉ dẫn người dùng đến đúng nơi cần đến rõ ràng hơn rất nhiều. Và kết quả đã phản ánh điều đó. Oli đã tiến hành lại thí nghiệm sau khi kết hợp các yếu tố này vào thiết kế. Lần này chỉ có 8% người đi sai đường.

Giảm 75% sự nhầm lẫn!

Bản dịch:  Chỉ cần một vài thay đổi về thiết kế, bạn sẽ khiến nhiều người làm những gì bạn thực sự muốn làm.

Điều đó có nghĩa là nếu bạn có trang đích mà không cân nhắc những nguyên tắc thiết kế này, bạn có thể bỏ lỡ doanh số và tỷ lệ chuyển đổi. Để kết hợp tốt hơn việc nhóm và khoảng trắng vào trang đích, hãy cân nhắc hai quy tắc sau:

• Nếu bạn có các yếu tố truyền tải cùng một thông điệp, hãy ghép chúng lại với nhau. Nếu bạn có các yếu tố truyền tải các thông điệp khác nhau, hãy tách chúng ra. Mắt bạn chỉ có thể tiếp nhận một lượng thông tin nhất định cùng một lúc. Và nếu thiết kế của bạn gửi đến mắt người xem những thông điệp mâu thuẫn cùng một lúc, bạn sẽ gây nhầm lẫn, giống như việc trộn lẫn tất cả các con số và mũi tên và căn giữa chúng vậy.

• Tận dụng khoảng trắng . Một trong những điều tệ nhất bạn có thể làm với thiết kế là đặt quá nhiều thứ trên một trang. Bạn có thể nghĩ rằng mình đang bổ sung thêm thông tin cho thiết kế bằng cách đặt ngày càng nhiều thứ trên trang đích. Nhưng khi cho người dùng hàng tá thứ để xem, họ lại chẳng thấy gì cả. Hãy xem những thay đổi mà Oli đã thực hiện với biển hiệu trong bản mockup của anh ấy. Một trong những điều quan trọng nhất anh ấy đã làm là loại bỏ các yếu tố thừa và chồng chéo. Bằng cách tạo khoảng trắng, trang web truyền tải được nhiều thông tin hơn và rõ ràng hơn.

Cố ý ngắt trang và loại bỏ mọi khả năng gây nhầm lẫn

Nguyên tắc thiết kế cuối cùng mà Oli chia sẻ là sự ngắt quãng. Đây là lúc bạn sử dụng các dấu ngắt và phân cách để tăng đáng kể tính rõ ràng cho trang đích hoặc thiết kế của mình.

Ví dụ, với biển hiệu khách sạn, anh ấy đã vẽ một đường thẳng ở giữa thiết kế và đặt các mũi tên ở hai bên đối diện. Điều này giúp người xem hiểu rõ hơn những gì cần làm. Và kết quả thể hiện rõ điều đó.

Không ai—0% số người—đi sai hướng khi được giới thiệu thiết kế này. Sức mạnh của sự gián đoạn chính là như vậy.

“Chìa khóa,” Oli nói, “là nhóm các sự việc thành những gì chúng cần truyền đạt và biến chúng thành một thông điệp riêng biệt. Điều đó giúp việc hiểu dễ dàng và nhanh chóng hơn.”

Nguyên tắc tương tự có thể được áp dụng cho bất kỳ trang web nào bạn đang thiết kế để tăng tỷ lệ chuyển đổi và doanh số. Hãy phân chia các thành phần thành các ô riêng biệt và tận dụng các ngắt trang để chia sẻ các ý tưởng khác nhau.

Và nếu bạn nhận thấy một trang không chuyển đổi, hãy cân nhắc xem lại nguyên tắc thiết kế này như một cách để xác định các khu vực có vấn đề.

Tăng tỷ lệ chuyển đổi của bạn với những thủ thuật thiết kế này ngay hôm nay!

Bạn không cần phải là một nhà thiết kế chuyên nghiệp để có thể áp dụng các nguyên tắc thiết kế một cách hiệu quả.

Như Oli đã chứng minh, bạn có thể sử dụng các nguyên tắc thiết kế này để phát hiện ngay lập tức các lỗi trên bất kỳ trang nào. Và hơn thế nữa, bạn có thể sử dụng chúng để tăng tỷ lệ chuyển đổi cho các trang đích của mình, bắt đầu từ hôm nay.

Bạn đã áp dụng bất kỳ nguyên tắc thiết kế nào trong số này chưa? Bạn thấy nguyên tắc nào hiệu quả nhất trong việc tăng tỷ lệ chuyển đổi? Và bạn có thiết kế trang web tuyệt vời nào để chúng tôi tham khảo không?