Praktik Terbaik Desain Web SaaS: Standar & Tren Desain yang Patut Diketahui

Apa praktik terbaik untuk desain web SaaS?

Itulah pertanyaan yang ingin saya jawab setelah tersandung di satu situs SaaS, setelah situs SaaS, setelah situs SaaS… Mereka terlihat hampir sama:

Memahami praktik terbaik bisa menjadi cara yang bagus bagi desainer web (dan pendiri SaaS) untuk memikirkan keberadaan merek mereka sendiri. Ini adalah pendekatan yang dilakukan Andy Crestodina beberapa tahun yang lalu ketika menganalisis standar web untuk 50 situs pemasaran teratas . Ini juga dapat membantu desainer, ahli strategi, dan pendiri merencanakan inisiatif desain mereka dengan menggunakan gambar rangka dan mengidentifikasi elemen desain utama apa yang perlu ada di beranda mereka.

Nielsen / Norman Group menerbitkan salah satu bagian pertama dokumentasi seputar Standar Desain Web dan menetapkan tiga tingkat standarisasi:

• 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

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

• Rasa aman & percaya saat melihat elemen desain umum
• Mengetahui dengan tepat ke mana harus pergi ketika Anda membutuhkan sesuatu (yaitu, Beranda melalui. klik logo)
• Tidak ada ketidakpastian seputar ikon, tombol, dan elemen desain baru. Tidak ada elemen kunci (yaitu, Dapatkan demo) yang terlewat

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

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

Jadi untuk lebih memahami Standar Desain Web SaaS, kami mengambil 250 situs teratas dari SaaS 1000 untuk membuat kumpulan data yang menunjukkan kepada kami hal-hal apa yang telah menjadi standar, apa yang konvensional, dan apa itu koin.

Berikut adalah melihat lebih dekat praktik terbaik desain SaaS yang terjadi pada tahun 2022:

Logo Merek Selalu Di Sisi Kiri

Jadi, Anda telah memutuskan untuk membuat logo (atau memperbarui yang sudah ada) dan bertanya-tanya di mana di situs web Anda untuk menempatkannya. Penempatan logo Anda di kiri atas situs web adalah praktik terbaik desain yang umum. Kami bahkan telah melihat peningkatan 1% pada logo di sebelah kiri navigasi sejak 2019! Ini adalah pendekatan yang dimanfaatkan sebagian besar desainer di dalam dan di luar SaaS. Ini adalah pilihan yang logis untuk mengetahui bahwa kebanyakan orang di Amerika Utara melihat situs dari kiri ke kanan.

Namun terkadang (dalam penelitian kami; sekali), seorang desainer memutuskan untuk menempatkan logo di tempat lain. Meskipun kami tidak melihat situs mana pun yang menempatkan logo mereka di sebelah kanan; kami menemukan DataDog yang menempatkan logo mereka langsung di tengah situs mereka:

Dalam sebuah studi penelitian logo , orang-orang di Venngage menemukan bahwa 35% orang lebih menyukai logo yang didominasi teks dan gaya horizontal untuk perusahaan teknologi.

Sebagian Besar Situs Web SaaS Responsif Seluler

Kita hidup di dunia seluler.

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

Pada tahun 2018, 52,2% dari semua lalu lintas online di seluruh dunia dihasilkan melalui ponsel. Itulah mengapa sangat bagus untuk melihat bahwa hampir semua perusahaan SaaS berinvestasi dalam desain responsif & praktik terbaik halaman arahan seluler daripada hanya membangun untuk desktop.

Video Dapat Ditemukan Di Sepertiga Situs

Meskipun video telah mengambil alih saluran media sosial, itu tidak sepopuler di situs web SaaS. Dari situs web yang menampilkan video di beranda mereka, sebagian besar video mengharuskan pengguna mengeklik untuk memulai video. Video-video ini biasanya berupa klip pendek, paling banyak di bawah 5 menit, yang memberikan konteks tentang sejarah perusahaan, proposisi nilai, atau demonstrasi produk.

Kami sangat terkejut menemukan bahwa sebagian besar situs web tidak memiliki video di beranda mereka dan bahkan lebih terkejut lagi melihat penurunan 13% sejak penelitian kami sebelumnya pada tahun 2019.

Ekspektasi biaya lama yang datang dengan memproduksi video berkualitas tinggi mungkin masih menahan merek dari investasi ini. Penjelas produk bergambar melonjak popularitasnya 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 explainer per bulan), namun hanya sedikit lebih dari setengah perusahaan SaaS yang menggunakannya.

Selalu Ada Panggilan Utama Untuk Bertindak Di Paro Atas

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

Penempatan CTA Biasanya Dapat Ditemukan Di Atas Fold

Sebagian besar situs web SaaS memotong ke pengejaran ketika datang ke tempat CTA ditempatkan. Sebagian besar situs web menempatkan CTA mereka di paro atas. Ini adalah praktik yang baik untuk diikuti karena memastikan bahwa pengguna melihat CTA Anda meskipun mereka tidak menggulir ke bawah halaman..

Biru Melewati Hijau Sebagai Pilihan Baru Untuk Tombol SaaS

Saat menganalisis berbagai warna ajakan bertindak, ada tren yang jelas ke arah biru, dengan CTA hijau berada di urutan kedua dan oranye di urutan ketiga.

Popularitas tombol CTA biru telah tumbuh secara signifikan sejak 2019, melampaui hijau sekitar 3% (yang merupakan warna CTA paling populer di 2019). Ada alasan bagus untuk ini: warna biru paling sering digunakan untuk hyperlink, dan ini adalah warna yang menarik perhatian.

Uji Coba Gratis Melampaui Memulai Sebagai CTA Paling Populer Di SaaS

Mayoritas merek SaaS menggunakan istilah ajakan bertindak yang merupakan musik untuk dompet mereka: gratis .

Sebagian besar situs yang kami ulas memilih frasa "Uji Coba Gratis" untuk ajakan bertindak mereka. CTA runner-up lainnya adalah bahasa berorientasi aksi yang memikat pengunjung untuk melakukan sesuatu yang mendorong mereka lebih jauh ke dalam corong. Beberapa variasi antara lain:

• Memulai

• Minta Demo

• Jadwalkan Demo

• Daftar

• Dapatkan Demo Gratis

• Dapatkan X Gratis

Kata-kata + frasa yang paling umum dalam ajakan bertindak cenderung: Gratis, Demo, Mulai, Coba X, dan Permintaan… Beberapa dari kata-kata ini muncul bersamaan (yaitu, 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

Itu tidak umum untuk 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 Nyata Digunakan oleh 80% SaaS

Penempatan orang sungguhan di beranda adalah pilihan yang menguntungkan bagi sebagian besar merek SaaS. Penempatan orang sungguhan di beranda biasanya ditemukan di bagian yang dipasangkan dengan testimonial dan aset konten. Kadang-kadang mereka muncul langsung di paro atas di tajuk, seperti contoh di bawah, tetapi seringkali, citra orang sungguhan ditampilkan lebih jauh di bawah halaman.

Ini adalah lompatan BESAR dari penelitian yang sama yang kami lakukan pada tahun 2019 . Hanya 3 tahun yang lalu, hanya 56% situs web yang menggunakan orang sungguhan di beranda mereka, menunjukkan peningkatan sebesar 24%.

Itu juga bagus untuk melihat sedikit keragaman dalam pemilihan gambar. Satu-satunya hal yang hilang adalah melihat tingkat keragaman yang sama di halaman “Tim Kami” itu, tetapi itu adalah topik untuk lain waktu.

Ilustrasi Kustom Sangat Umum (70%)

Munculnya ilustrasi khusus telah menyapu komunitas SaaS dengan badai. Selama 3 tahun terakhir, itu adalah sesuatu yang bermunculan di situs demi situs. Pendapat profesional kami adalah bahwa ini adalah tren, tetapi hanya beberapa persentase poin dari menjadi praktik terbaik.

Berikut cuplikan beberapa situs dan ilustrasinya:

Ini adalah tren yang menarik.

Bagaimana menurut Anda: Apakah pendekatan desain ini membantu perusahaan rintisan menonjol, atau justru membuat mereka berbaur? Apakah itu penting? Apakah itu memberikan rasa percaya?

Setengah Dari Merek SaaS Menggunakan Alat Obrolan Langsung

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

Penelitian kami menemukan bahwa sedikit di atas 5% situs SaaS memiliki kotak obrolan di pojok yang siap untuk diajak berinteraksi. Di sebagian besar situs ini, layanan yang digunakan adalah Intercom atau Drift.

Jadi Haruskah Anda Mengikuti Standar?

Tergantung.

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

Berikut daftar tip desain situs web jika Anda menginginkan situs yang tidak seperti orang lain:

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

Apakah situs Anda saat ini memenuhi standar ini? Apakah ada sesuatu di sini yang mengejutkan Anda?