Chúng tôi đã nghiên cứu 100 trang web SaaS để khám phá xu hướng thiết kế + Thực tiễn tốt nhất (Tại đây, những gì chúng tôi tìm thấy)

Các thực tiễn tốt nhất cho thiết kế web SaaS là ​​gì?

Đó là câu hỏi mà tôi đặt ra để trả lời sau khi tình cờ tìm thấy trên trang SaaS, sau trang SaaS, sau trang SaaS, điều đó có vẻ khá giống nhau:

Hiểu các thực tiễn tốt nhất có thể là một cách tuyệt vời để các nhà thiết kế web (và người sáng lập SaaS) nghĩ về sự hiện diện thương hiệu của chính họ. Đó là một cách tiếp cận Andy Crestodina mất vài năm trở lại đây khi phân tích các tiêu chuẩn web cho 50 trang web tiếp thị hàng đầu. Nó cũng có thể giúp các nhà thiết kế, chiến lược gia và nhà sáng lập lên kế hoạch cho các sáng kiến ​​thiết kế của họ theo nghĩa của khung lưới và xác định các yếu tố thiết kế chính nào cần có trên trang chủ của họ.

Nhóm Nielsen / Norman đã xuất bản một trong những tài liệu đầu tiên về Tiêu chuẩn thiết kế web và xác định ba cấp độ tiêu chuẩn hóa:

  • Tiêu chuẩn: 80% + trang web sử dụng cùng một phương pháp
  • Công ước: 50 Lỗi79% các trang web sử dụng cùng một cách tiếp cận
  • Nhầm lẫn: 49% hoặc ít hơn các trang web sử dụng một cách tiếp cận

Trong khi ban đầu tôi có rất nhiều thất vọng với các thương hiệu SaaS giống nhau; Tôi càng nhìn vào lý do tuân theo các tiêu chuẩn thiết kế và thực hành tốt nhất, tôi càng hiểu lợi ích của tính nhất quán. Một số lợi ích đi kèm với các tiêu chuẩn web thiết kế sau bao gồm:

  • Một cảm giác an toàn và tin tưởng khi nhìn thấy các yếu tố thiết kế phổ biến
  • Biết chính xác nơi sẽ đi khi bạn cần một cái gì đó (ví dụ: Trang chủ thông qua. Nhấp vào biểu tượng)
  • Không có sự không chắc chắn xung quanh các biểu tượng, nút và các yếu tố thiết kế mới
  • Không có yếu tố chính (ví dụ: Nhận bản demo) bị bỏ lỡ

Tất cả những điều này có thể làm cho trải nghiệm người dùng mượt mà và trực quan hơn.

Nhưng có rất nhiều thứ trong không gian SaaS dường như được nhân rộng mà không có lý do chính đáng.

Vì vậy, để hiểu rõ hơn về Tiêu chuẩn thiết kế web SaaS, chúng tôi đã lấy 100 trang web hàng đầu từ SaaS1000.com vào tháng 1 năm 2019, để tạo ra một bộ dữ liệu cho chúng ta thấy những gì đã trở thành tiêu chuẩn, thông thường và thế nào là lật đồng xu. Dưới đây, một cái nhìn sâu hơn về các thực tiễn tốt nhất về thiết kế SaaS xảy ra vào năm 2019:

Logo thương hiệu luôn ở phía bên tay trái

Vị trí của logo ở phía trên bên trái của trang web là một thực tiễn tốt nhất về thiết kế. Đó là một cách tiếp cận mà hầu hết các nhà thiết kế tận dụng bên trong SaaS và bên ngoài SaaS. Nó có một lựa chọn hợp lý khi nhận ra rằng hầu hết mọi người ở Bắc Mỹ xem một trang web từ trái sang phải.

Nhưng đôi khi (trong nghiên cứu của chúng tôi; một lần) một nhà thiết kế quyết định đặt logo ở một nơi khác. Trong khi chúng tôi không thấy bất kỳ trang web nào đặt logo của họ ở bên phải; chúng tôi đã tìm thấy DataDog, người đã đặt logo của họ trực tiếp ở giữa trang web của họ:

Trong một nghiên cứu về logo, những người ở Venngage đã phát hiện ra rằng 35% mọi người thích văn bản logo theo phong cách chủ đạo và ngang cho các công ty công nghệ.

Hầu hết các trang web SaaS đều đáp ứng di động

Chúng ta sống trong một thế giới di động.

Các trang web đáp ứng là một cách tuyệt vời để đảm bảo bạn không mang lại trải nghiệm bị hỏng cho mọi người trên máy tính để bàn hoặc truy cập trên thiết bị di động.

Năm 2018, 52,2% tổng lưu lượng truy cập trực tuyến trên toàn thế giới được tạo thông qua điện thoại di động. Đó là lý do tại sao nó rất tuyệt vời khi thấy rằng hầu hết các công ty SaaS đang đầu tư vào một thiết kế đáp ứng thay vì chỉ xây dựng cho máy tính để bàn.

Video có thể được tìm thấy trên một chút dưới 55% trang web

Cho dù đó là bản demo hay nghiên cứu trường hợp dưới dạng video trên trang chủ cho các trang web này, hơn một nửa các trang web này đã sử dụng phương pháp này. Phần lớn các công ty SaaS tận dụng video nhưng không phải là một tỷ lệ đáng kể để làm cho nó được coi là một thực tiễn tốt nhất.

Các kỳ vọng chi phí kế thừa đi kèm với việc sản xuất một video chất lượng cao có thể vẫn đang giữ các thương hiệu trở lại từ khoản đầu tư này. Các nhà giải thích sản phẩm minh họa đã nổi tiếng một vài năm trước và trở thành một dịch vụ phổ biến được mua thông qua các trang web như Fiverr và Upwork. Ngày nay, nhu cầu về các loại video này vẫn còn khá cao (hơn 14.800 lượt tìm kiếm video giải thích mỗi tháng) nhưng chỉ hơn một nửa các công ty SaaS sử dụng chúng.

Có luôn luôn kêu gọi hành động chính trên màn hình đầu tiên

Có một cách thực hành tốt nhất trong cộng đồng SaaS rằng lời kêu gọi hành động của bạn thúc đẩy mọi người làm điều gì đó cần phải vượt lên. Hơn 90% tất cả các trang web được bao gồm trong nghiên cứu Thiết kế SaaS này có một nút hoặc kêu gọi hành động trên màn hình đầu tiên.

Vị trí của lời kêu gọi hành động khác nhau

Trên tất cả các trang web này có rất ít sự nhất quán trong đó lời kêu gọi hành động được đặt. Một số trong số chúng được đặt ở phía bên trái của trang web, một số bị chết ở giữa và một số khác ở bên phải. Thực tiễn tốt nhất khi nói đến việc đặt CTA dường như là một sự thay đổi hoàn toàn về đồng xu giữa các công ty SaaS.

Các công ty SaaS sử dụng màu gì cho các nút?

Khi phân tích các lời kêu gọi hành động khác nhau, có một xu hướng rõ ràng đối với các nút màu xanh lá cây và màu cam.

Demo miễn phí là lời kêu gọi hành động phổ biến nhất

Các trang web chúng tôi đã xem xét có lời kêu gọi hành động thường có một điều rõ ràng mà họ muốn mọi người thực hiện. Phần lớn trong số họ sử dụng ngôn ngữ hướng hành động (%%) và thúc đẩy khách truy cập làm điều gì đó đẩy họ đi xa hơn trong kênh. Một số biến thể bao gồm:

  • Lên lịch trình Demo
  • Yêu cầu bản demo
  • Nhận bản demo miễn phí
  • Nhận X miễn phí
  • Bắt đầu
  • Hãy thử X

Các từ + cụm từ phổ biến nhất trong lời kêu gọi hành động có xu hướng là: Miễn phí, Demo, Bắt đầu, Bắt đầu, Thử X và Yêu cầu Một số từ này xuất hiện cùng nhau (ví dụ: Demo miễn phí hoặc Dùng thử miễn phí X) nhưng sử dụng kết hợp những từ này có xu hướng hiển thị nhiều nhất trong CTA chính của SaaS.

Sử dụng nền sáng là cách tốt nhất

Nó không phổ biến để xem một trang web có nền đen trong SaaS:

Hầu hết các trang web (92% trong số họ) đã sử dụng màu trắng hoặc màu sáng làm nền chính cho trang web của họ.

Sử dụng người thật chỉ được sử dụng bởi 56% SaaS

Vị trí của những người thực sự trên trang chủ là hơn một nửa. So với các minh họa, vị trí của người thật trên trang chủ thường KHÔNG được tìm thấy trong phần chính của trang web. Đôi khi chúng xuất hiện trực tiếp trên nếp gấp như hình ảnh ở trên nhưng hầu hết thời gian nó ở dưới trang dưới dạng lời chứng thực, nghiên cứu trường hợp hoặc tham chiếu đến một tính năng.

Thật tuyệt vời khi thấy khá nhiều sự đa dạng trong lựa chọn hình ảnh. Điều duy nhất còn thiếu là nhìn thấy mức độ đa dạng tương tự trên các trang của Nhóm của chúng tôi nhưng đó là một chủ đề cho một thời điểm khác.

Minh họa tùy chỉnh rất phổ biến (70%)

Sự nổi lên của các minh họa tùy chỉnh đã càn quét cộng đồng SaaS bởi cơn bão. Nó có một cái gì đó trong 3 năm qua đã xuất hiện trên trang này sau trang này đến trang khác. Ý kiến ​​chuyên môn của chúng tôi là đây là một xu hướng nhưng nó chỉ có một vài điểm phần trăm từ việc trở thành một thực tiễn tốt nhất.

Dưới đây, một bức ảnh chụp một số trang web và hình minh họa của chúng:

Đây là một xu hướng thú vị.

Bạn nghĩ gì: Cách tiếp cận thiết kế này có giúp các công ty khởi nghiệp nổi bật hay nó dẫn đến việc họ hòa nhập? Có vấn đề gì không? Liệu nó cho ra một cảm giác tin tưởng?

Một nửa thương hiệu SaaS sử dụng công cụ trò chuyện trực tiếp

Sự gia tăng của trò chuyện trực tiếp và tiếp thị trò chuyện đã là một xu hướng hấp dẫn để xem. Khi ý tưởng nắm lấy các cuộc trò chuyện thời gian thực với khách hàng tiềm năng (hoặc sử dụng bot) tiếp tục bắt được lực kéo, nó rõ ràng trở nên phổ biến trong các công ty B2B SaaS.

Nghiên cứu của chúng tôi cho thấy gần 50% các trang web SaaS có một hộp trò chuyện ở góc sẵn sàng để được tham gia. Trên hầu hết các trang web này, các dịch vụ đang được sử dụng là Liên lạc hoặc Trôi.

Vậy bạn có nên tuân theo các tiêu chuẩn?

Nó phụ thuộc.

Thử nghiệm với thiết kế là một cách tuyệt vời để khám phá điều gì đó trước phần còn lại của ngành công nghiệp. Điều đó nói rằng, rủi ro của thử nghiệm thiết kế là người dùng có thể tìm thấy toàn bộ trải nghiệm bị hỏng và được tạo ra kém. Trên flipside, làm mọi thứ theo các tiêu chuẩn đã được sử dụng trên các trang web SaaS trên toàn thế giới, bạn có thể rất dễ dàng hòa nhập.

Đây là một danh sách những việc cần làm nếu bạn muốn một trang web giống như những người khác:

  • Donith sử dụng minh họa phẳng như một đại diện trừu tượng cho thương hiệu của bạn
  • Donith sử dụng các nút màu cam hoặc vàng đậm trên trang chủ của bạn
  • Don mệnh trái căn chỉnh đề xuất giá trị của bạn trên trang web
  • Đặt logo của bạn ở giữa hoặc bên phải
  • Sử dụng nền tối cho trang web của bạn

Trang web của bạn hiện đang đáp ứng các tiêu chuẩn này?

Có điều gì ở đây làm bạn ngạc nhiên không?

Ban đầu được xuất bản dưới dạng Thực tiễn tốt nhất về Thiết kế Web SaaS: Phòng thí nghiệm Foundation

Câu chuyện này được xuất bản trong The Startup, ấn phẩm doanh nhân lớn nhất Medium Medium theo sau là +430,678 người.

Đăng ký để nhận những câu chuyện hàng đầu của chúng tôi ở đây.