Kami Mempelajari 100 Situs SaaS Untuk Mengungkap Tren Desain + Praktik Terbaik (Inilah Yang Kami Temukan)

Apa praktik terbaik untuk desain web SaaS?

Itulah pertanyaan yang ingin saya jawab setelah tersandung pada situs SaaS, setelah situs SaaS, setelah situs SaaS ... Itu terlihat hampir sama:

Memahami praktik terbaik dapat menjadi cara yang bagus untuk perancang web (dan pendiri SaaS) untuk memikirkan kehadiran merek mereka sendiri. Itu adalah pendekatan yang diambil Andy Crestodina beberapa tahun lalu ketika menganalisis standar web untuk 50 situs pemasaran teratas. Ini juga dapat membantu para desainer, ahli strategi dan pendiri merencanakan inisiatif desain mereka dalam arti gambar rangka dan mengidentifikasi elemen-elemen desain utama apa yang perlu ada di beranda mereka.

Nielsen / Norman Group menerbitkan salah satu bagian pertama dari dokumentasi seputar Standar Desain Web dan mendefinisikan tiga tingkat standardisasi:

  • Standar: 80% + situs menggunakan pendekatan yang sama
  • Konvensi: 50–79% situs web menggunakan pendekatan yang sama
  • Kebingungan: 49% atau lebih sedikit situs web menggunakan pendekatan

Sementara saya awalnya memiliki banyak frustrasi dengan merek SaaS yang mirip; semakin jauh saya melihat alasan mengikuti standar desain dan praktik terbaik, semakin saya memahami manfaat konsistensi. Beberapa manfaat yang datang dengan desain web standar berikut meliputi:

  • Rasa aman & percaya ketika melihat elemen desain umum
  • Tahu persis ke mana harus pergi ketika Anda membutuhkan sesuatu (mis. Beranda via. Klik logo)
  • Tidak ada ketidakpastian di sekitar ikon, tombol, dan elemen desain baru
  • Tidak ada elemen kunci (mis. Dapatkan demo) yang terlewatkan

Semua hal ini dapat membuat pengalaman pengguna lebih halus dan lebih intuitif.

Tetapi ada banyak hal di ruang SaaS yang tampaknya direplikasi tanpa alasan yang jelas.

Jadi untuk lebih memahami Standar Desain Web SaaS, kami mengambil 100 situs teratas dari SaaS1000.com pada Januari 2019, untuk membuat kumpulan data yang menunjukkan kepada kami hal-hal apa yang telah menjadi standar, apa yang konvensional, dan apa itu flip koin. Berikut ini adalah praktik terbaik desain SaaS yang terjadi pada 2019:

Logo Merek Selalu Di Sisi Kiri

Penempatan logo di kiri atas situs web adalah praktik terbaik desain umum. Ini adalah pendekatan yang sebagian besar desainer memanfaatkan di dalam SaaS dan di luar SaaS. Ini adalah pilihan logis yang mengakui bahwa sebagian besar orang di Amerika Utara melihat situs dari kiri ke kanan.

Tetapi kadang-kadang (dalam penelitian kami; satu kali) seorang desainer memutuskan untuk menempatkan logo di tempat lain. Meskipun kami tidak melihat situs mana pun menempatkan logo mereka di sebelah kanan; kami menemukan DataDog yang menempatkan logo mereka langsung di tengah-tengah situs mereka:

Dalam studi penelitian logo, orang-orang di Venngage menemukan bahwa 35% orang lebih suka logo gaya dominan dan horisontal untuk perusahaan teknologi.

Sebagian besar Situs Web SaaS Mobile Responsif

Kita hidup di dunia seluler.

Situs responsif adalah cara yang bagus untuk memastikan Anda tidak memberikan pengalaman yang rusak bagi orang-orang di desktop atau mengunjungi di ponsel.

Pada tahun 2018, 52,2% dari semua lalu lintas online di seluruh dunia dihasilkan melalui ponsel. Itulah mengapa sangat bagus untuk melihat bahwa sebagian besar perusahaan SaaS berinvestasi dalam desain yang responsif daripada hanya membangun untuk desktop.

Video Dapat Ditemukan Pada Sedikit Di Bawah 55% Dari Situs

Apakah itu demo atau studi kasus dalam bentuk video di beranda untuk situs-situs ini, lebih dari setengah dari situs-situs ini mengambil pendekatan. Mayoritas perusahaan SaaS memanfaatkan video tetapi tidak dengan margin yang signifikan untuk membuatnya dianggap sebagai praktik terbaik.

Ekspektasi biaya warisan yang datang dengan produksi video berkualitas tinggi mungkin masih menahan merek dari investasi ini. Penjelasan produk bergambar melonjak dalam popularitas beberapa tahun yang lalu dan menjadi layanan populer yang dibeli melalui situs-situs seperti Fiverr dan Upwork. Saat ini, permintaan untuk jenis video ini masih cukup tinggi (lebih dari 14.800 pencarian untuk video penjelas per bulan) namun hanya sedikit lebih dari setengah perusahaan SaaS yang menggunakannya.

Selalu Ada Panggilan Utama Untuk Beraksi Di Atas flip

Ada praktik terbaik yang jelas di komunitas SaaS bahwa ajakan Anda untuk bertindak mendorong orang untuk melakukan sesuatu harus di atas flip. Lebih dari 90% dari semua situs yang termasuk dalam penelitian Desain SaaS ini memiliki tombol atau ajakan untuk bertindak di atas flip.

Penempatan Panggilan Untuk Aksi Bervariasi

Di semua situs ini ada sedikit konsistensi di mana panggilan untuk bertindak ditempatkan. Beberapa dari mereka ditempatkan di paling kiri halaman web, beberapa mati di tengah dan yang lain jauh di kanan. Praktik terbaik dalam hal penempatan CTA tampaknya merupakan pertukaran koin yang lengkap di antara perusahaan SaaS.

Apa Warna yang Digunakan Perusahaan SaaS Untuk Tombol?

Saat menganalisis berbagai ajakan untuk bertindak, ada tren yang jelas ke arah tombol hijau dan oranye.

Demo Gratis Adalah Panggilan Aksi Paling Populer

Situs yang kami ulas yang memiliki ajakan untuk bertindak biasanya memiliki hal yang jelas yang mereka ingin orang lakukan. Mayoritas dari mereka menggunakan bahasa berorientasi aksi (%%) dan mendorong pengunjung untuk melakukan sesuatu yang mendorong mereka lebih jauh dalam corong. Beberapa variasi termasuk:

  • Jadwalkan Demo A
  • Minta Demo
  • Dapatkan Demo Gratis
  • Dapatkan X Gratis
  • Memulai
  • Coba X

Kata + frasa paling umum dalam ajakan bertindak cenderung: Gratis, Demo, Dapatkan, Mulai, Coba X, dan Minta ... Beberapa dari kata-kata ini muncul bersamaan (mis. Demo Gratis atau Coba X Gratis) tetapi menggunakan kombinasi kata-kata ini cenderung muncul paling banyak di CTA primer SaaS.

Menggunakan Latar Belakang Terang Adalah Praktik Terbaik

Tidak umum melihat situs yang memiliki latar belakang hitam di SaaS:

Sebagian besar situs (92% dari mereka) menggunakan warna putih atau terang sebagai latar belakang utama untuk situs mereka.

Menggunakan Orang Sungguhan Hanya Digunakan oleh 56% SaaS

Penempatan orang sungguhan di beranda lebih dari setengah. Dibandingkan dengan ilustrasi, penempatan orang sungguhan di beranda biasanya TIDAK ditemukan di bagian utama situs. Kadang-kadang mereka muncul langsung di atas flip seperti gambar di atas tetapi kebanyakan kali itu lebih jauh ke bawah halaman dalam bentuk kesaksian, studi kasus atau referensi ke fitur.

Sangat menyenangkan melihat sedikit perbedaan dalam pemilihan gambar. Satu-satunya hal yang hilang adalah melihat tingkat keanekaragaman yang serupa di halaman "Tim Kami" tapi itu topik untuk lain waktu.

Ilustrasi Khusus Sangat Umum (70%)

Munculnya ilustrasi khusus telah menyapu komunitas SaaS. Itu adalah sesuatu yang selama 3 tahun terakhir telah muncul di situs demi situs. Pendapat profesional kami adalah bahwa ini adalah tren tetapi hanya beberapa persentase poin dari menjadi praktik terbaik.

Berikut cuplikan dari beberapa situs dan ilustrasinya:

Ini tren yang menarik.

Apa yang Anda pikirkan: Apakah pendekatan ini untuk merancang membantu startup yang menonjol atau menghasilkan campuran? Apakah itu penting? Apakah itu memunculkan rasa percaya?

Setengah Dari Merek SaaS Menggunakan Alat Obrolan Langsung

Munculnya obrolan langsung dan pemasaran percakapan telah menjadi tren yang menarik untuk ditonton. Karena gagasan merangkul percakapan waktu nyata dengan prospek (atau menggunakan bot) terus menarik perhatian, ini jelas menjadi populer di kalangan perusahaan SaaS B2B.

Penelitian kami menemukan bahwa hampir 50% situs SaaS memiliki kotak obrolan di sudut yang siap untuk digunakan. Di sebagian besar situs ini layanan yang digunakan adalah Interkom atau Drift.

Jadi, Haruskah Anda Mengikuti Standar?

Tergantung.

Bereksperimen dengan desain adalah cara yang bagus untuk mengungkap sesuatu sebelum sisa industri. Yang mengatakan, risiko eksperimen desain adalah bahwa pengguna dapat menemukan seluruh pengalaman rusak dan dibuat dengan buruk. Di sisi lain, melakukan segalanya dengan standar yang sudah digunakan di situs web SaaS di seluruh dunia yang mungkin mudah Anda gabungkan.

Berikut daftar hal yang harus dilakukan jika Anda menginginkan situs yang tidak seperti orang lain:

  • Jangan gunakan ilustrasi datar sebagai representasi abstrak dari merek Anda
  • Jangan gunakan tombol oranye gelap atau kuning di beranda Anda
  • Jangan menyejajarkan proposisi nilai Anda di situs
  • Tempatkan logo Anda di tengah atau di sebelah kanan
  • Gunakan latar belakang gelap untuk situs Anda

Apakah situs Anda saat ini memenuhi standar ini?

Apa ada yang mengejutkanmu di sini?

Awalnya diterbitkan sebagai SaaS Web Design Best Practices: Foundation Labs

Kisah ini diterbitkan dalam The Startup, publikasi kewirausahaan terbesar Menengah diikuti oleh +430.678 orang.

Berlangganan untuk menerima berita utama kami di sini.