Tại sao thiết kế lại quan trọng đến thế? Chỉ mất 0,05 giây để mọi người đưa ra ý kiến về trang web của bạn. Đúng, bạn không đọc nhầm đâu- 50 mili giây. Hầu hết các ý kiến đó đều bàn về mặt thiết kế.
Thiết kế cũng tác động đến sự chuyển đổi, uy tín, và cuối cùng sẽ tạo nên hoặc phá vỡ sự thành công của trang web. Không có trang web nào là hoàn hảo, nhưng mục tiêu là hãy làm cho trang web của bạn được tối ưu hóa ở mức tốt nhất có thể.
Đây cũng là một điều cần cân nhắc: 94% phản hồi tiêu cực về các trang web có liên quan đến thiết kế, và 38% người dùng sẽ ngừng xem một trang web có bố cục không hấp dẫn. Sau một trải nghiệm tồi tệ, 88% người tiêu dùng sẽ không muốn quay lại trang web. Hầu như tất cả mọi người đều làm vậy. Vì vậy, nếu trang web của bạn không được tối ưu hóa cho trải nghiệm người dùng (UX - User Experience), thì điều đó sẽ cản trở bạn tiến tới thành công.
Mặt khác, các trang web được thiết kế tốt sẽ phát triển mạnh. Khách truy cập có nhiều khả năng chuyển đổi, tận hưởng trải nghiệm của họ và tiếp tục quay lại các trang web này trong tương lai. Một nghiên cứu gần đây cho thấy, 77% các agency nói rằng: thiết kế trang web kém là điểm yếu đáng kể nhất đối với khách hàng của họ. Đó là những gì đã truyền cảm hứng cho tôi để viết hướng dẫn này.
Có rất nhiều yếu tố cần chú ý trong việc thiết kế một trang web. Đây là 13 yếu tố quan trọng nhất cần ưu tiên trong năm 2019. Nếu bạn làm theo những trường hợp này này, hiệu suất của trang web sẽ cải thiện đáng kể.
1. Giảm thiểu lượng văn bản hiển thị
Đừng để định dạng văn bản tràn ngập trang của bạn.
Thực tế là, nếu bạn đang viết một bài đăng trên blog, sẽ có rất nhiều chữ trên trang - đó không phải là những gì chúng ta nói ở đây. Mà chúng ta đang bàn về số lượng từ trên trang chủ và trang đích của bạn. Do vậy, số lượng chữ trên trang nên được giảm bớt đi. Đây là một vấn đề lớn khi phân tích các trang web.
Chắc chắn rồi, bạn sẽ có rất nhiều điều để nói. Bạn muốn khách truy cập trang web biết tất cả về bạn, công ty, thương hiệu và sản phẩm của bạn. Điều đó là tốt. Bạn chỉ cần học cách kể câu chuyện đó chỉ trong một vài câu - hoặc thậm chí tốt hơn, chỉ trong một vài từ.
2. Chỉ cho xem, đừng nói gì cả
Hình ảnh không chỉ giúp bạn chia nhỏ nội dung bằng văn bản, mà còn có thể giải thích sâu hơn mà không cần sử dụng văn bản. Thay vì giải thích mọi thứ cho khách truy cập trang web, bạn chỉ cần cho chúng hiện lên thôi. Khách truy cập sẽ hiểu dễ dàng hơn trong một khoảng thời gian ngắn.
Trang sản phẩm của Harry thể hiện cả hai nguyên tắc thiết kế đầu tiên này:
Trang sản phẩm của Harry rất thoáng đãng, với số lượng chữ ở mức tối thiểu. Hình ảnh của các sản phẩm cạo râu đã đủ để truyền đạt thông tin.
Ví dụ, giả sử trang web của bạn bán dao cạo râu, lưỡi dao, kem cạo râu và các sản phẩm cạo râu khác dành cho nam giới. Bạn hoạt động theo mô hình kinh doanh thuê bao, và giao các sản phẩm này cho khách hàng hàng tháng. Thiết kế của dao cạo của bạn rất đẹp - chúng được làm bằng gỗ cứng và đủ đẹp để làm quà tặng.
Thay vì đi sâu vào tất cả các chi tiết này trên trang chủ, bạn chỉ cần có một bức ảnh về các sản phẩm này với văn bản có nội dung như, “được vận chuyển đến tận nhà bạn”. Bạn có thể nhận được tin nhắn của mình chỉ trong bốn từ. Chắc chắn rồi, bạn có thể đi sâu vào các chi tiết cụ thể hơn khi khách truy cập đi sâu vào các trang của bạn, nhưng một văn bản mô tả dài dòng vẫn là không cần thiết.
3. Sử dụng câu ngắn gọn
Câu ngắn dễ đọc hơn.
Nếu bạn trấn áp khách truy cập bằng một đống văn bản trên toàn màn hình - và làm cho những câu đó trở nên khó đọc, họ sẽ không biết mình cần đọc từ đâu, và sẽ không thể tiêu hóa nổi nội dung của bạn.
Hãy thử pha trộn chúng với nhau. Nếu bạn cần một câu dài, hãy viết một câu ngắn ngay sau đó. Sự đa dạng sẽ luôn đem lại lợi ích.
4. Thử rút ngắn các đoạn văn
Sử dụng hình thức ngắt đoạn như một lợi thế của bạn.Việc viết các đoạn văn dài thực ra vẫn không sao, nhưng sẽ hữu ích hơn nếu bạn viết các đoạn văn hiển thị trên trang chủ của mình chỉ trong một vài câu.
Hãy bắt đầu mỗi đoạn văn với thông tin mới mẻ, để nếu ai đó đang rối rắm với lượng thông tin quá lớn, họ vẫn có thể nhanh chóng tìm đọc đoạn văn cần thiết.
Loại bỏ phần văn bản không cần thiết trên các trang của bạn sẽ làm giảm sự lộn xộn, và giúp bạn có nhiều khoảng trống hơn cho việc nhấn mạnh vào lời kêu gọi hành động (CTA).
5. Làm cho CTA (Call to action-Lời kêu gọi hành động) của bạn thật rõ ràng
Bạn không nên để CTA bị chìm nghỉm trong trang. Chúng cần phải thu hút, nổi bật, uy lực, và thật rõ ràng, để giúp khách truy cập của bạn hiểu rằng họ nên ấn vào đó để tiếp tục.
Chỉ 47% trang web có nút CTA dễ phát hiện trong vòng chưa đầy 3 giây. Vì vậy, bạn sẽ có thể rơi vào trường hợp khách truy cập mất nhiều thời gian hơn trong việc tìm ra nút CTA. Đó hẳn không phải là thứ mà bạn muốn xảy ra. Bạn không thể tạo nên sự chuyển đổi nếu không có nút CTA hiệu quả.
Đây là một yếu tố khác cần xem xét: 72% doanh nghiệp không có nút CTA trên các trang bên trong của họ. Đây là một lỗ hổng lớn về mặt thiết kế. Bạn có thể yêu cầu khách truy cập điều hướng trở lại trang chủ của bạn để chuyển đổi.
Hãy xem CTA này từ Litmus.
Hãy nhìn cách thiết kế đơn giản này. Họ để số chữ trên màn hình là tối thiểu, vì vậy thông điệp sẽ trở nên dễ hiểu hơn.
Do đó, CTA “Đăng ký miễn phí” trở nên nổi bật. Trên thực tế, Litmus thậm chí còn đặt nó ở nhiều hơn một vị trí trên màn hình.
6. Củng cố hành động theo hình thức quen thuộc
Nếu thông điệp của bạn giống nhau, CTA của bạn sẽ giống nhau. Trên từng trang một.
Hãy suy nghĩ về cách mọi người điều hướng trên trang web của bạn - ngay cả khi bạn thiết lập một hướng đi nhất định, không phải ai cũng sẽ truy cập vào một trang và chuyển đổi trong vài giây. Họ có thể muốn xem xét xung quanh một chút trước.
Ví dụ: giả sử bạn có một trang web thương mại điện tử. Bạn không nên thay đổi nút CTA từ trang này sang trang khác, trông như thế này:
- Trang chủ: Thanh toán ngay
- Trang chuyên mục: Mua ngay hôm nay
- Trang sản phẩm: Nhấn vào đây để mua
Nếu khách truy cập thấy một trong những nút đó trên trang chủ của bạn, nút thứ 2 trên trang danh mục, và nút thứ 3 trên trang sản phẩm, thì bạn sẽ không nhận lại được gì cả. Thay vào đó, hãy làm theo ví dụ của nhà lãnh đạo toàn cầu như Apple. Đây là giao diện trang chủ của Apple:
Ngay lập tức, bạn có thể thấy rằng nó rất đơn giản. Lượng văn bản trên màn hình được giới hạn, và còn có một sản phẩm nổi bật.
Sản phẩm có tiêu đề, mô tả ngắn, theo sau là hai tùy chọn.
Chỉ vậy thôi.
Và giờ, hãy xem điều gì xảy ra khi chúng ta kéo tiếp màn hình xuống.
CTA của Apple
Đây là định dạng chính xác, nhưng là cho một sản phẩm khác.
Sau một số văn bản giới hạn, chúng ta thấy hai nút giống nhau, được đặt ở cùng một vị trí phía trên hình ảnh. Một lần nữa, chúng ta vẫn còn trên trang chủ.
Để tốt hơn, hãy để nút điều hướng từ trang chủ đến trang sản phẩm để xem mẫu này có tiếp tục xuất hiện không.
CTA về Apple Watch
Trang này có cùng khuôn mẫu. Điều này khá đồng bộ trên mỗi trang, với mỗi sản phẩm. Đó là cách bạn củng cố hành động với sự quen thuộc.
Bạn cần phải áp dụng nguyên tắc thiết kế này cho trang web của bạn. Yếu tố này còn quan trọng hơn cả nút CTA. Ý tưởng là bổ sung vào cách củng cố này càng nhiều yếu tố càng tốt.
7. Đơn giản hóa việc điều hướng
Đừng khiến người truy cập trang web cảm thấy khó khăn với những gì họ tìm kiếm.
Hãy dành một chút thời gian để đặt mình vào vị trí của họ. Họ đang vào trang web của bạn vì một lý do. Có thể họ muốn mua một cái gì đó, tìm kiếm thêm thông tin, hoặc xem bạn cung cấp những gì. Dù lý do đó cólà gì đi chăng nữa, nếu họ không thể tìm được thứ họ cần, thì họ sẽ rời đi.
Có quá nhiều sự cạnh tranh ngoài kia. Người dùng không có lý do để chịu đựng sự phức tạp trong cách điều hướng trang web. Tất cả những gì họ cần làm là rời khỏi trang web của bạn và tìm những gì họ cần ở một nơi khác.
Đừng cố gắng phức tạp hóa một thứ vốn đã đơn giản từ trước. Hãy gắn bó với những định dạng tiêu chuẩn.
Ví dụ: 88% trang web có menu điều hướng chính được đặt theo chiều ngang ở đầu mỗi trang. Việc để danh sách mặt hàng của bạn ở một nơi khác sẽ gây hiểu lầm cho khách truy cập.
Hãy tiếp tục nói về menu, vì nó là cổng điều hướng chính. Càng ít lựa chọn trong menu càng tốt. Nếu không, sẽ quá khó để mọi người tìm thấy thứ họ cần. Khái niệm này được gọi là Luật Hick.
Luật Hick
Bạn càng đưa ra nhiều lựa chọn cho ai đó, họ càng mất nhiều thời gian để đưa ra quyết định. Đó là lý do tại sao các thiết kế và điều hướng phức tạp sẽ phá vỡ tỷ lệ chuyển đổi khách hàng.
Có một thí nghiệm nổi tiếng về điều này, được gọi là nghiên cứu về mứt, trong đó, thảo luận về nghịch lý của sự lựa chọn.
Thí nghiệm được tiến hành tại một cửa hàng tạp hóa địa phương. Người tiêu dùng được cho xem 24 mẫu mứt để lấy mẫu vào một ngày và 6 mẫu mứt vào ngày hôm sau. Việc để gian hàng trưng bày lớn hơn vào ngày đầu tiên đã thu hút 60% người mua hàng, nhưng chỉ có 3% những người này thực sự mua. Việc để gian hàng trưng bày nhỏ hơn với 6 mẫu mứt trong ngày thứ hai đã thu hút 40% người mua hàng, nhưng 30% trong số họ đã thực sự mua hàng.
Bằng cách giới hạn các lựa chọn, tỷ lệ chuyển đổi sẽ tăng gấp 10 lần. Khái niệm tương tự này có thể được áp dụng để điều hướng trang web của bạn.
Tìm cách để loại bỏ các tùy chọn menu không cần thiết. Ví dụ: thay vì có nút “Trang Chủ”, chỉ cần sử dụng logo trang web để liên kết trở lại màn hình chính.
Hãy xem qua trang chủ Square.
Thiết kế cực kỳ thoáng đãng. Các tùy chọn menu rất hạn chế. Điều này giúp khách truy cập dễ dàng lựa chọn một lựa chọn phù hợp với nhu cầu của họ.
Chúng ta chọn ví dụ này bởi vì nó cũng tuân theo các trường hợp tốt nhất về thiết kế web mà chúng ta đã thảo luận từ trước. Lượng văn bản trên màn hình ở mức tối thiểu, và nút CTA khá rõ ràng.
Kiểu thiết kế này khiến khách truy cập trang web gần như không thể bị lạc, hoặc nhầm lẫn khi họ điều hướng.
Đối với những người có nhiều tùy chọn trên trang web của mình, chẳng hạn như cửa hàng thương mại điện tử, bạn có thể thêm thanh tìm kiếm để đơn giản hóa quy trình điều hướng mà không cần sử dụng menu phức tạp.
8. Tối ưu hóa thiết kế của bạn cho các thiết bị di động
Theo bảng xếp hạng Alexa, 80% các trang web hàng đầu được tối ưu hóa cho thiết bị di động. Đó là vì trình duyệt di động đang trở nên phổ biến hơn cả.
Hãy nhìn vào những xu hướng từ Statista.
Hơn một nửa số trang web trên toàn thế giới được phục vụ cho điện thoại di động. Lưu lượng truy cập Internet từ di động đã chính thức vượt qua mức sử dụng máy tính để bàn. Và xu hướng đó vẫn đang tiếp tục tăng.
Ở đây, chúng ta cần xem xét một khía cạnh khác. 57% số người sẽ không giới thiệu một doanh nghiệp cho những người khác, nếu công ty đó có một trang web di động được thiết kế kém. Dẫn dắt khách hàng giới thiệu thương hiệu của bạn cho người khác chắc chắn là điều bạn cần ưu tiên.
94% số người sẽ đánh giá một trang web dựa trên một thiết kế mang tính phản hồi. Vì vậy, nếu các yếu tố trong việc thiết kế trang web của bạn không đủ tiêu chuẩn, chúng cần phải được sửa chữa hoặc loại bỏ ngay lập tức.
Một trang web được tối ưu hóa cho thiết bị di động không chỉ cần thiết cho trải nghiệm người dùng, mà còn rất quan trọng cho mục đích SEO.
Các công cụ tìm kiếm nhận ra điều này, và các trang web đang dần trở nên thân thiện với thiết bị di động. Google biết rằng, 87% chủ sở hữu điện thoại thông minh sử dụng thiết bị của họ để chạy tìm kiếm trên Internet ít nhất một lần mỗi ngày. Kết quả: 70% kết quả trang đầu tiên trên Google được tối ưu hóa cho thiết bị di động.
9. Ưu tiên SEO
Chúng ta đã nhanh chóng nói đến chủ đề này trước đó khi nói về các trang web thân thiện với thiết bị di động. Nhưng tất cả mọi thứ bạn làm trên trang web cần phải quay lại với SEO.
93% trải nghiệm trên Internet bắt đầu với một công cụ tìm kiếm. Vì vậy, chiến lược SEO của bạn phải vượt xa việc chỉ thêm từ khóa vào bài đăng trên blog.
Việc không tập trung vào SEO sẽ khiến bạn gặp bất lợi trước đối thủ. Năm ngoái, đây là những ưu tiên SEO hàng đầu cho các doanh nghiệp.
Như bạn có thể thấy, việc tối ưu hóa tại chỗ đứng ở thứ hạng thứ 2 trong danh sách. Điều này có liên quan đến thiết kế web. Vì vậy, hãy xem xét các yếu tố trên trang của bạn.
Tạo sơ đồ trang web XML. Điều này sẽ giúp trình thu thập công cụ tìm kiếm dễ dàng hơn để phân tích nội dung trên trang web. Sơ đồ trang web sẽ hiển thị cho các bot (robot mạng) vị trí của các trang trên trang web, khi trang được cập nhật lần cuối, tần suất cập nhật, và liên kết với các trang khác trên trang web của bạn.
Một sơ đồ trang web phù hợp cho Google thấy rằng, nếu bạn không có nội dung trùng lặp, thì bạn sẽ làm hỏng thứ hạng SEO của mình.
Khi bạn thiết kế trang web, bạn cần đảm bảo rằng kiến trúc cũng cần có hệ thống phân cấp logic.
10. Theo dõi tốc độ tải trang của bạn
Tôi biết những gì các bạn đang nghĩ. Tốc độ tải trang có liên quan gì đến thiết kế web? Có đấy, có liên quan tới mọi thứ đó.
Chắc chắn rồi, thời gian tải có liên quan đến gói lưu trữ trang web, máy chủ, lưu lượng truy cập và những thứ thuộc về bản chất đó. Tuy nhiên, lựa chọn về mặt thiết kế cũng có thể ảnh hưởng đến thời gian tải của bạn.
Mỗi lần bạn thêm một yếu tố vào trang web của mình, đặc biệt là hình ảnh, video và các tệp phương tiện phức tạp khác, thời gian tải của bạn có thể bị ảnh hưởng.
Thời gian tải chậm dẫn đến tỷ lệ rời khỏi trang cao. Bạn không thể bỏ qua điều này. Nếu các trang của bạn mất quá nhiều thời gian để tải, thì đây sẽ là một vấn đề lớn.
Hơn nữa, 40% số người rời khỏi các trang web đều mất hơn 3 giây để tải trang. Đúng, 3 giây đấy. Đó là tất cả những gì bạn có, hoặc cứ 100 khách truy cập thì sẽ có 40 người rời đi.
Và 3 giây không phải lúc nào cũng đủ tốt - 46% mọi người mong đợi các trang sẽ tải trong 2 giây hoặc ít hơn.
Vậy làm thế nào để bạn có thể áp dụng điều này cho thiết kế web của bạn?
- Giảm kích thước tập tin hình ảnh của bạn.
- Tận dụng các công cụ lưu trữ trình duyệt.
- Giảm yêu cầu về HTTP.
- Cải thiện TTFB của bạn (thời gian đến byte đầu tiên).
- Giảm thiểu và kết hợp các tập tin của bạn.
Có rất nhiều công cụ có sẵn trực tuyến để giúp bạn hoàn thành những điều này. Ví dụ: hãy thử plugin WordPress Rocket - nó sẽ giúp thu nhỏ và kết hợp các tệp của bạn. Sử dụng công cụ Thông tin công cụ Page Speed Insights từ Google để giúp bạn theo dõi thời gian tải bất cứ khi nào bạn thực hiện thay đổi thiết kế trên trang web của mình.
11. Chọn một bảng màu phù hợp với chiến lược thương hiệu của bạn
Các lựa chọn màu sắc cho trang web quan trọng hơn bạn nghĩ.
Các nghiên cứu cho thấy, các sản phẩm được đánh giá trong vòng chưa đầy 90 giây. Trang web của bạn có thể được coi là một sản phẩm. 90% đánh giá đó chỉ dựa trên màu sắc.
Cách tốt nhất để chọn bảng màu trang web của bạn là gắn với thương hiệu. Hãy tham khảo logo của bạn. Màu sắc trên trang web của bạn có phù hợp với hình ảnh thương hiệu không?
Nghiên cứu cho thấy màu sắc có thể tăng độ nhận diện thương hiệu lên tới 80%.
Dưới đây là một ví dụ. Hãy nghĩ về Starbucks.
Khi bạn nghe tên thương hiệu này, tôi chắc chắn bạn có một hình ảnh trong đầu. Có thể là logo, biển hiệu, hoặc vị trí cửa hàng.
Bạn có liên hệ gì với màu sắc đó không? Bây giờ hãy nhìn vào trang web của họ.
Không có gì ngạc nhiên khi họ sử dụng bảng màu xanh lá cây.
Sự lựa chọn thiết kế này phù hợp với logo và hình ảnh thương hiệu của họ, điều này củng cố những gì người tiêu dùng đã liên hệ với thương hiệu. Bằng cách giữ mọi thứ nhất quán, mọi thứ sẽ không thể bị nhầm lẫn. Sẽ thật kỳ quặc nếu bạn truy cập trang web này và thấy màu vàng và đỏ. Điều đó chẳng có gì liên quan tới thương hiệu của họ.
Chúng ta sẽ nói nhiều hơn về hệ quả thu về một cách chi tiết hơn về sau.
12. Chạy thử nghiệm A / B liên tục
Khi nói đến thiết kế trang web của bạn, bạn không thể cứ chỉ cần đặt nó ở đấy và rồi quên nó đi.
Như tôi đã nói từ trước, không có trang web nào là hoàn hảo. Luôn có cách để bạn cải thiện thiết kế của mình.
Đó là lý do tại sao bạn cần chạy thử nghiệm A/B.
Gần như mọi yếu tố trong việc thiết kế trang web đều có thể được kiểm tra.
Dưới đây là một số gợi ý nhanh để giúp bạn bắt đầu đi đúng hướng:
- Kiểm tra vị trí nút CTA của bạn
- Kiểm tra màu nút CTA của bạn
- Kiểm tra bản sao của CTA
- Kiểm tra các hình ảnh mà bạn sử dụng trên các trang đích
- Kiểm tra các biến thể từ ngữ của văn bản trên màn hình
- Kiểm tra kích thước thanh điều hướng của bạn
Có rất nhiều lựa chọn, chúng ta có thể dành cả ngày để nói về điều này. Đối với những người không quen với các thử nghiệm A/B hoặc cần một số trợ giúp, hãy xem hướng dẫn của tôi về mọi thứ bạn cần biết trước khi bắt đầu thử nghiệm A/B.
13. Sử dụng gạch đầu dòng
Thay vì thêm các đoạn văn và những câu văn dài dòng, hãy xem xét sử dụng danh sách. Trong các danh sách đó, hãy sử dụng các gạch đầu dòng.
Các nghiên cứu cho thấy rằng, nhiều người sẽ thích nhìn vào danh sách với các gạch đầu dòng hơn các định dạng khác.
Kết luận
Nói rằng thiết kế của một trang web quan trọng sẽ là một sự đánh giá thấp. Lựa chọn trong việc thiết kế web của bạn, sau tất cả, sẽ ảnh hưởng đến sự thành công của trang web ấy.
- Mọi trang web đều có thể được cải thiện. Sử dụng danh sách này làm hướng dẫn, và là nguồn tài nguyên để giúp bạn thực hiện những cải tiến đó.
- Đừng bị choáng ngợp. Tôi không nói rằng bạn cần thực hiện tất cả các đề xuất thiết kế này chỉ sau một đêm, nhưng bạn cần bắt đầu lúc nào đó.
- Tôi không hề tự suy diễn những điều này. Tất cả mọi thứ trong danh sách này được hỗ trợ qua việc nghiên cứu và thống kê liên quan đến các nguyên tắc thiết kế.
Nếu trang web của bạn là hoàn toàn mới, hoặc nếu nó đã tồn tại trong một thập kỷ, thì cũng không thành vấn đề. Đây là những trường hợp mô phỏng tốt nhất về thiết kế web mà bạn cần tuân theo trong năm 2019.