11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn
Như đề cập trong bài chia sẻ trước của mình, chúng tôi đã từng khẳng định tầm quan trọng của tỷ lệ chuyển đổi trang Web trong việc đánh giá hiệu quả của một Website. Có rất nhiều cách giúp tăng chuyển đổi trên trang web của mình. Tuy nhiên, thiết kế của Website chính là nền tảng quan trọng nhất để tạo ra sự khác biệt cho Website của bạn. Trong bài viết này, chúng tôi xin chia sẻ 11 nguyên tắc thiết kế Web sẽ tăng tỷ lệ chuyển đổi của bạn
Hầu hết các Marketer đều hiểu về tầm quan trọng của SEO, Social Media, tạo ra những nam châm chuyển đổi nhưng lại thường bỏ qua một yếu tố vô cùng quan trọng là thiết kế web. Thiết kế web không chỉ là một khuôn mặt đẹp mà nó còn có vai trò vô cùng quan trọng, có thể tạo ra hoặc phá hủy tỷ lệ chuyển đổi trang Web của bạn.
Theo nghiên cứu của đại học Stanford, 46,1% người được phỏng vấn cho rằng thiết kế của một trang web là tiêu chí hàng đầu để quyết định xem một công ty có đáng tin cậy hay không. Vì vậy, điều cực kỳ quan trọng là thiết kế của bạn phải trông thật hấp dẫn và chuyên nghiệp.
Cho dù trang Web của bạn có mang tính thẩm mỹ hay không thì nó cũng đóng một vai trò lớn trong việc tối ưu hóa tỷ lệ chuyển đổi. Với 15 phút để tiếp nhận nội dung, 2/3 người đọc thích đọc những thứ gì đó có thiết kế đẹp mắt hơn một thứ nhạt nhẽo (theo nghiên cứu của Adobe). Vì vậy, nếu bạn muốn mọi người đọc các bài đăng blog của bạn, bạn cần phải trông thật hấp dẫn. Theo thống kê, 38% người dùng sẽ rời khỏi trang web của bạn khi thiết kế của nó xấu, nó là một thiệt hại đáng tiếc!
Việc có một website chuyên nghiệp, đẹp mắt là điều thiết yếu. Và để website ấy được thành hình, không thể không áp dụng những nguyên tắc về thị giác và thiết kế, đặc biệt là những nguyên tắc cho UX UI.
Để đi vào chi tiết, chúng tôi xin trình bày một số nguyên tắc thiết kế quan trọng giúp tăng tỷ lệ chuyển đổi bền vững cho website của bạn:
Nguyên tắc thiết kế web 1: Tuân theo luật Hick
Luật Hick là một lý thuyết phổ biến được trích dẫn bởi nhiều cá nhân cho các mục đích khác nhau, nhưng thường được tham chiếu về thiết kế website. Được đặt tên theo nhà tâm lý học người Anh William Edmund Hick, luật quy định rằng thời gian cần thiết để một cá nhân đưa ra quyết định tỷ lệ thuận với số lượng lựa chọn họ. Nói cách khác, khi tăng số lượng lựa chọn, thời gian quyết định cũng tăng lên.
Bạn có thể đã nghe nói về nghiên cứu nổi tiếng của nhà tâm lý học Sheena Lyengar và Mark Lepper, nơi họ thấy rằng một bảng trưng bày 24 loại mứt có được ít sự quan tâm hơn một bảng trưng bày 6 loại. Trên thực tế, những người nhìn thấy màn hình lớn hơn chỉ có một phần mười khả năng mua như những người xem màn hình nhỏ.
Đó là một ví dụ về luật Hick đang hoạt động: Hành động bị mất tương ứng với số lượng các lựa chọn được trình bày.
Về thiết kế web, bạn có thể tăng chuyển đổi bằng cách giới hạn số lượng tuỳ chọn mà người dùng có. Nơi đầu tiên có thể sẽ cần giảm bớt số lượng tuỳ trên trang web của bạn là thanh điều hướng. Rõ ràng, bạn không muốn có quá nhiều liên kết để lựa chọn, nếu không người dùng cũng sẽ phân vân và mất dần hứng thú.
Tuy nhiên, Luật Hick không dừng lại ở đó. Còn nhiều những quyết định khác mà người dùng có thể phải thực hiện trên trang web của bạn, ngoài liên kết điều hướng nào cần nhấn. Ví dụ:
- Quyết định có sử dụng thanh điều hướng hay cuộn xuống trang nhiều hơn
- Bỏ qua các tiêu đề để xem bài đăng trên blog muốn đọc
- Quyết định có tải xuống nam châm dẫn của bạn hay không, chia sẻ bài đăng của bạn trên phương tiện truyền thông xã hội hoặc để lại nhận xét
- Lựa chọn giữa việc mua hàng, đọc đánh giá sản phẩm hoặc xem qua các sản phẩm khác
Những điều này chỉ khiến người dùng phải đưa ra quá nhiều lựa chọn không cần thiết và khiến họ cảm thấy choáng ngợp, không biết nên bắt đầu từ đâu. Khi ấy việc giảm bớt tính năng tuỳ chọn là điều cần thiết, tuy nhiên, đơn giản hơn là hãy áp dụng Luật Hick ngay từ khi thiết kế website.
Tất cả những gì bạn phải làm là tạo một cổng chào toàn màn hình trên trang chủ của bạn. Cổng chào tràn toàn màn hình, kèm theo một lời kêu gọi hành động (CTA - Call to Action) và người dùng sẽ chỉ thấy một tuỳ chọn duy nhất nên không bị phân vân, trong trường hợp họ muốn có nhiều tuỳ chọn hơn, họ chị cần cuộn chuột. Điều này cho phép bạn giảm thiểu xao lãng trên trang chủ, trong khi vẫn giữ nguyên chức năng của nó.
Nhìn chung, khi áp dụng Luật Hick vào trang web của bạn, điều quan trọng là bạn phải biết tuỳ chọn nào là quan trọng nhất đối với việc kinh doanh của bạn. Bạn càng giới hạn chính xác lựa chọn của người dùng, trang web của bạn càng dễ sử dụng và tỷ lệ chuyển đổi nhờ đó cũng tăng lên.
Nguyên tắc thiết kế web 2: Vận dụng quy tắc hai phần ba:
Quy tắc của phần ba là một nguyên tắc nhiếp ảnh phổ biến mà cũng có thể được áp dụng cho thiết kế web. Với Rule of Thirds, bạn phải phân chia trực quan một hình ảnh (hoặc trang web) thành một phần ba (cả theo chiều dọc và chiều ngang).
Khi chia như vậy bạn sẽ bốn điểm giao, bốn điểm này là những điểm hút mắt, khi các đối tượng được đặt tại các điểm này, nó tạo ra hình ảnh/thiết kế cảm giác thuận mắt, cũng như tăng khả năng tiếp nhận thông tin. Về mặt thiết kế web, bạn có thể đặt các yếu tố quan trọng nhất của trang tại các nút giao này để thu hút sự chú ý, tăng tỷ lệ chuyển đổi của trang web.
Lưu ý, không nên đặt thanh điều hướng ở gần bất cứ điểm giao nào. Điều này giúp giữ khách truy cập tập trung vào lời kêu gọi hành động trên trang, thay vì hướng mắt họ đến một nơi khác.
Và bạn không cần phải thiết kế toàn bộ trang web của mình một cách nghiêm ngặt theo quy tắc của phần ba, thay vào đó bạn có thể sử dụng nó như một tips giúp bạn điều hướng khách truy cập đi tới những phần quan trọng nhất.
Nguyên tắc thiết kế web 3: Tôn trọng sự kiên nhẫn của người dùng:
Theo một nghiên cứu của Aberdeen Group, mỗi giây chậm trong khi tải trang sẽ giảm 7% tỷ lệ chuyển đổi!
Vì vậy, nói đến tốc độ tải trang, mỗi tíc tắc đều được tính. Để kiểm tra tốc độ và xem liệu có bất cứ lỗi gì ảnh hưởng tới việc tải trang, hãy chạy trang web của bạn thông qua một số công cụ miễn phí sau:
Nguyên tắc thiết kế web 4: Sử dụng không gian âm
Trong thiết kế web, chúng ta có một thuật ngữ được gọi là không gian âm. Với khoảng không gian chứa các yếu tố được gọi là không gian dương và những không gian trống còn lại được gọi là không gian âm. Không gian âm là yếu tố quan trọng trong thiết kế web, bởi không có nó trang web của bạn sẽ trở nên khó đọc, gây khó khăn cho việc sử dụng.
Không gian âm không chỉ là những khoảng trống giữa các yếu tố đồ hoạ lớn, mà còn là những khoảng trống khác như khoảng cách giữa tiêu đề và nội dung, hay khoảng cách giữa thanh bên và nội dung chính. Nó cũng đề cập đến không gian giữa tất cả các phần tử nhỏ hơn của trang web, như khoảng cách giữa các đoạn văn, khoảng cách giữa các dòng văn bản, thậm chí là khoảng cách giữa các chữ cái. Không gian âm sẽ giúp mọi thứ dễ đọc, dễ nhìn và tất nhiên, tất cả điều này dẫn đến tăng tỷ lệ chuyển đổi.
Ví dụ như Flat.io, đã giữ một khoảng không gian âm rất lớn trên trang chủ để khách truy cập có thể tập trung vào lời kêu gọi đăng ký bằng Google hoặc Facebook.
Dưới đây là một số mẹo để đảm bảo bạn đang sử dụng đủ không gian âm:
- Phông chữ của bạn càng nhỏ, bạn càng cần chú ý nới lỏng khoảng cách chữ giữa chúng (tăng tỷ lệ của không gian âm so với tỷ lệ chữ).
- Khoảng cách giãn dòng cho văn bản nội dung chính phải xấp xỉ 150% kích thước phông chữ (trong CSS, điều này sẽ đọc line-height: 1.5;:).
- Tuy nhiên, các phông chữ nhỏ hơn cần giãn dòng rộng hơn.
- Chia nhỏ các đoạn văn bản dài thành các đoạn văn nhỏ hơn để tăng không gian âm ở giữa chúng, giữ cho các bài đăng trên blog của bạn dễ đọc hơn.
- Thêm khoảng cách giữa các yếu tố quan trọng của trang web (thanh bên, tiêu đề, phần thân, chân trang, v.v.) bằng cách sử dụng padding rộng.
Nguyên tắc thiết kế web 5: Xem xét F-Layout
Các nhà nghiên cứu đã phát hiện ra rằng hành vi tự nhiên của người dùng trình duyệt web khi đọc màn hình đi theo model chữ “F”.
Dưới đây là bản đồ nhiệt cho biết mắt người dùng thường dừng ở đâu trên trang web:
Như bạn có thể thấy, mọi người nhìn từ trái sang phải, bắt đầu từ đầu màn hình sau đó họ quét xuống dưới đọc nội dung phụ. Vùng có mức độ chú ý ít nhất của trang web là phần dưới cùng bên phải. Và những vùng được mắt dừng lại lâu nhất tạo thành một vùng có hình dạng giống như chữ F.
Vậy điều này có ý nghĩa gì đối với việc thúc đẩy chuyển đổi của bạn? Vâng, bạn có thể tận dụng lợi thế của hành vi này bằng cách đặt các đối tượng quan trọng, những lời kêu gọi hành động dọc theo các đường hình chữ F, và đặt các đối tượng ít quan trọng trong các khu vực tầm nhìn thấp hơn.
Sau đó, nếu bạn muốn giữ chân người truy cập và điều hướng họ đọc các bài đăng trên blog mới nhất, bạn có thể đặt các dòng tiêu đề đó xuống phía bên tay trái của trang. Thông tin ít quan trọng hơn (chẳng hạn như quảng cáo được tài trợ) có thể nằm trong thanh bên bên phải và với những thông tin ít quan trọng nhất (chẳng hạn như chính sách cookie) nên được đặt ở góc dưới bên phải - góc tay của trang.
Nguyên tắc thiết kế web 6: Vấn đề về màu sắc
“Màu sắc là khía cạnh thường bị đánh giá thấp khi thiết kế web nhưng nó có thể đóng một vai trò rất quan trọng với trải nghiệm người dùng, mood chung của trang web, cũng như ấn tượng của khách hàng với thương hiệu của bạn. Như nhà thiết kế Tom Kenny nói: “Kiểu kết hợp màu sắc khác nhau có khả năng gợi lên những cảm xúc và phản ứng khác nhau.”
Khi chọn bảng màu cho trang web của bạn, hãy đảm bảo các màu ấy khi phối hợp với nhau gợi lên cảm xúc mà bạn muốn có cho thương hiệu của mình. Một cách dễ dàng mà bạn có thể thử đó là tạo một bảng ghim trên Pinterest với những hình ảnh tương đồng với tính cánh và cảm xúc thương hiệu của bạn. Sau đó bạn hãy tải chúng lên Adobe Color, hệ thống đó sẽ tự động tạo một bảng màu dựa trên màu của hình ảnh đó. Bạn cũng có thể di chuyển các thanh công cụ để tuỳ chỉnh màu theo ý thích.
Ngoài ra bạn cũng cần chú ý tới độ tương phản của màu. Màu sắc của các yếu tố và nền cần phải có độ tương phản để đảm bảo tính dễ nhìn, dễ đọc. Và đặc biệt là những phần bạn muốn người dùng chú ý tới (ví dụ như nút đăng ký) sẽ càng cần có màu sắc nổi bật và tương phản cao.
7. Nhớ KISS
Albert Einstein có một câu nói nổi tiếng, đó là: “Keep it simple, stupid” (Giữ nó đơn giản thôi, đồ ngốc), câu nói nhằm nhấn mạnh sự quan trọng của tính mạch lạc, rõ ràng khi trình bày một điều gì đó. Nó đúng với ngôn ngữ và đúng với cả thiết kế, đặc biệt là thiết kế website.
Tính đơn giản là tối quan trọng khi nói đến tăng tỷ lệ chuyển đổi. Bất cứ khi nào bạn tạo một trang, hãy tự hỏi liệu có cách nào để làm cho nó đơn giản hơn không? Kết quả nhận được thường có thẩm mỹ hơn, và hầu như luôn chuyển đổi tốt hơn.
Nhớ luật của Hick? Điều đó xuất hiện ở đây, nhưng sự đơn giản không chỉ là giới hạn các tùy chọn, nó còn tạo ra một thiết kế sạch sẽ gọn gàng, giảm xao lãng. Một thực tế là con người không thể xử lý quá nhiều thông tin cùng một lúc. Nói cách khác, nếu chúng ta nhìn thấy quá nhiều thứ nhồi nhét trên một trang, chúng ta sẽ cảm thấy choáng ngợp và phiền toái. Tạo một trải nghiệm người dùng mượt mà trên trang web có nghĩa là loại bỏ mọi thứ không cần thiết trong thiết kế. Ví dụ như Apple là một trong những hình mẫu điển hình về tính đơn giản trong thiết kế web, và nó hiệu quả đến mức vô số các thương hiệu khác đã phải nối gót.
Nguyên tắc thiết kế web 8: Sử dụng quy tắc 8 giây
Nguyên tắc chung là bạn chỉ có 8 giây để thu hút sự chú ý của khách truy cập, vì đó là khoảng thời gian giới hạn để sự chú ý được kích thích. Bạn chỉ có một cơ hội rất nhỏ để thu hút người dùng khi họ lần đầu tiên truy cập trang web của bạn, vậy nên hãy tính đến những tích tắc đó!
Dưới đây là một số mẹo để thu hút sự chú ý và thúc đẩy chuyển đổi trong vòng 8 giây đầu tiên:
- Sử dụng một tiêu đề lớn, ngắn gọn về lợi ích bạn có thể mang lại cho khác hàng.
- Sử dụng hình ảnh bắt mắt chuyển tải ý chính hoặc mục đích của trang web. Thu hút ánh mắt hướng đến lời kêu gọi hành động chính của bạn.
- Tạo các nút đăng ký lớn, đơn giản và rõ ràng.
- Sử dụng các từ mang năng lượng tích cực.
- Kết hợp đa phương tiện như video, âm thanh hoặc nội dung tương tác khác.
- Sử dụng hiệu ứng di chuột cho các nút của bạn (ví dụ: làm cho chúng thay đổi màu khi di chuột qua) để làm cho chúng thú vị hơn khi nhấp.
- Sử dụng các cửa sổ hoạt ảnh để thu hút lại khách truy cập đã bị mất hứng thú.
Nguyên tắc thiết kế web 9: Hãy nhớ nguyên tắc tương đồng Gestalt
Các nguyên tắc thiết kế Gestalt có thể được tóm tắt bởi một tuyên bố từ nhà tâm lý học Gestalt Kurt Koffka: “Tổng thế của một nhóm khác với tổng hợp của chính nhóm ấy”. Về cơ bản, mắt người và não cảm nhận một thiết kế thống nhất theo một cách khác với họ nhận thức cá nhân các thành phần của thiết kế đó.
Nguyên tắc đầu tiên của Gestalt là nguyên tắc tương đồng. Cụ thể là mắt hay não người có xu hướng gộp nhóm các vật có nét tương đồng với nhau. Đó là một cơ chế cho phép chúng ta tạo ra sự liên kết giữa các đối tượng khác nhau, cho chúng được gộp lại thành một tổ hợp. Về thiết kế web, bạn có thể tận dụng luật này bằng cách đồng nhất hình dạng, màu sắc hoặc vị trí một nhóm đối tượng để chúng có sự liên kết.
Ví dụ: Nếu bạn có những lời phản hồi tốt từ khác hàng và bạn muốn sử dụng nó để tăng chuyển đổi trên biểu mẫu đăng ký tham gia của mình, bạn có thể đặt nó ngay dưới biểu mẫu. Và dù lời phản hồi ấy không có nội dung liên quan trực tiếp đến lead magnet của bạn, người dùng sẽ liên kết cả hai lại vì chúng được đặt ở gần nhau.
Luật tương đồng cũng quan trọng đối với trải nghiệm người dùng. Bằng cách nhóm tất cả các thành phần chính của biểu mẫu đăng ký lại với nhau (tiêu đề, mô tả và nút chọn tham gia) và giữ chúng đủ xa các phần tử khác trên trang của bạn (sử dụng không gian âm), bộ não của người dùng sẽ có thể để xử lý thông tin nhanh hơn và hiệu quả hơn. Điều này tất nhiên sẽ rất tốt cho chuyển đổi đặc biệt là bởi vì, như chúng tôi đã nói trước đó, con người có khoảng kích thích chú ý rất ngắn!
Nguyên tắc thiết kế web 10: Sử dụng các khuôn mặt để tăng sự quen thuộc
Con người có xu hướng nhìn vào khuôn mặt. “Khi chúng ta nhìn thấy một khuôn mặt, chúng tôi sẽ tự động kích hoạt để cảm nhận một cái gì đó hoặc để cảm thông với người đó”, nhà thiết kế Sabina Idler nói . “Khi chúng ta tiếp nhận nội dung thông qua một khuôn mặt – chẳng hạn như trặng thái đang gặp vấn đề, tiến thoái lưỡng nan, thói quen hoặc bất kỳ điều gì khác – chúng ta cảm thấy được kết nối và thấu hiểu.” Hãy chắc rằng bạn thêm ảnh chân dung vào những bài viết, những phản hồi, các phần đăng ký và trang đích để tăng chuyển đổi.
Nếu bạn có đại sứ cho thương hiệu thì lại càng đơn giản. Khi chụp hình hãy trao đổi với nhiếp ảnh gia để chụp thật nhiều ảnh ngang với nhiều không gian trống ở một bên (phải/trái) của ảnh. Bằng cách ấy, bạn sẽ có thể đặt lời kêu gọi hành động hoặc một số văn bản quan trọng ở đó.
Tuy nhiên, nếu bạn không có đại sứ thương hiệu, bạn vẫn có thể sử dụng ảnh người trên trang web của mình bằng cách thuê người mẫu hoặc mua ảnh stock. Chỉ cần đảm bảo khuôn mặt trong ảnh thể hiện đúng tinh thần và trạng thái mà bạn muốn, để khách truy cập cảm thấy có sự liên hệ.
Nguyên tắc thiết kế web 11: Nguồn hình ảnh chất lượng cao
Có một thứ có thể khiến khách hàng đánh giá một website tệ ngay từ những ấn tượng đầu tiên, đó là hình ảnh chất lượng thấp.
Trong thực tế, hình ảnh có thể tạo ra hoặc đánh mất một đơn hàng. Bright Local nhận thấy rằng 60% người tiêu dùng sẵn sàng truy cập một kết quả tìm kiếm có bao gồm hình ảnh và 23% khác có nhiều khả năng liên hệ với doanh nghiệp có nhều hình ảnh trên trang web.
Hình ảnh rất quan trọng, nó liên quan tới rất nhiều quyết định, đánh giá của khách hàng. Vậy nên, khi thiết kế web bạn không nên sử dụng các bức ảnh chất lượng kém, không liên quan tới nội dung hay nhạt nhẽo. Nghiên cứu từ Skyword cho thấy rằng nếu nội dung của bạn bao gồm hình ảnh đẹp và chuyên nghiệp, bạn sẽ nhận được thêm 94% lượt xem trung bình!
Vì vậy, thay vì sử dụng hình ảnh nhạt nhẽo cho thiết kế web, hãy tạo ra những bức ảnh chất lượng cao, có liên quan tới nội dung và có tính cá nhân. Hãy nhớ rằng: Mọi người chọn thương hiệu có những cảm xúc, giá trị tương đồng với bản thân họ. Nếu hình ảnh thương hiệu của bạn quá “máy móc” hoặc “nghiêm nghị”, có khả năng khách hàng của bạn sẽ sớm thoát khỏi trang web.
Dưới đây là một số trang web để tìm kiếm ảnh miễn phí có chất lượng cao mà bạn có thể tham khảo:
- Pexels
- StockSnap
- Unsplash
- Superfamous Studio
- Gratisography
- Little Visuals
- Picjumbo
- Kaboompics
Bây giờ bạn đã có được 11 nguyên tắc thiết kế website này, hãy đưa chúng vào sử dụng tốt bằng cách xem xét thiết kế web hiện tại của bạn để biết vấn đề của mình là gì. Bạn có quá nhiều liên kết điều hướng không? Không đủ không gian âm? Hoặc có lẽ không có hình ảnh người?
Theo Mary Fernandez
