Jika Anda mempertimbangkan elemen-elemen individu dari sebuah situs web yang juga memberikan kontribusi positif terhadap pengalaman pengguna, logo adalah identitas merek dan pantas untuk mendapat perhatian khusus. Dalam artikel ini, saya ingin memberikan beberapa tips dari praktik agensi kami tentang bagaimana Anda dapat memastikan pengalaman pengguna yang tinggi bagi pengguna situs web Anda saat berurusan dengan logo situs web Anda.

Logo Situs Web Menggantikan Poin Menu Halaman Awal

Logo biasanya ditempatkan di bilah navigasi dan HARUS SELALU dihubungkan dengan halaman beranda. Pengguna saat ini juga mengharapkan bahwa mengklik logo akan membawa mereka kembali ke halaman beranda. Dengan demikian, logo juga menggantikan tautan menu "Beranda", yang kadang-kadang masih terlihat di situs web hari ini untuk menghubungkan ke halaman beranda. Tautan Beranda sebagai poin menu sendiri dalam navigasi adalah tidak diperlukan. Dengan demikian, ruang yang berharga juga tersimpan.

Kota Waren (Müritz) di Jerman Utara, tempat perusahaan kami berpusat, memutuskan untuk memberikan bantuan kepada pengguna dengan ikon rumah sebagai cara interaksi kembali ke halaman beranda. Ada dua alasan yang mungkin ikon ini digunakan di sini: Pertama, di samping logo, ada juga logo lain yang ditempatkan, sehingga kemungkinan klik ke logo bisa berkurang. Kedua, mungkin diasumsikan bahwa pengguna situs web ini kurang terbiasa dengan internet. Jujur saja, ikon rumah ini hanya sedikit meningkatkan pengalaman pengguna, karena situs web ini memiliki banyak kekurangan mencolok dalam hal arsitektur informasi, antarmuka pengguna, dan juga keterjangkauan (terutama kontras untuk membaca tautan dan teks). Oleh karena itu, situs web Kota Waren (Müritz) tetap menjadi contoh negatif.

Logo Responsif: Penyesuaian Logo sesuai Resolusi Perangkat

Sementara tampilan desktop memiliki banyak ruang yang tersedia dan karena itu nama perusahaan atau klaim dalam logo dapat disertakan, dalam tampilan mobile demi ruang dan perhatian, logo harus ditempatkan dalam bentuk yang lebih sederhana.

Pada logo, seperti halnya pada situs web, tren penyesuaian berdasarkan ukuran, media, dan lingkungan sudah menjadi kebiasaan selama bertahun-tahun. Ini dikenal sebagai Logo Responsif, yang berarti bahwa logo harus memperhatikan lingkungan di sekelilingnya dan tampil sempurna bahkan di media yang lebih kecil, sehingga mungkin juga harus ditampilkan dengan beberapa pendekatan yang berbeda. Berbeda dengan logo yang kaku, yang terlihat sama di semua perangkat dan ukuran layar, logo responsif menyesuaikan diri dengan kebutuhan masing-masing dan memberikan pengalaman pengguna yang konsisten dan dioptimalkan di berbagai perangkat. Dengan demikian, logo hanya berkurang dalam bentuknya, bukan dalam pesan mereknya.

Sebagai contoh positif, perusahaan Swiss Victorinox menawarkan. Sebagai tampilan pertama, pengguna melihat icon besar. Satu-satunya poin negatif: Logo diintegrasi sebagai file PNG bukan SVG.

Pada saat digulir hanya elemen gambar yang ditampilkan. Di belakang layar, ada gunung yang menunjukkan asal usul Swiss. Jadi, pencitraan merek penting dalam viewport pertama. Pengguna harus memahami. Anda berada di tempat yang benar di Victorinox. Jika pengguna men-scroll, konten menjadi penting. Logo berkurang dalam representasinya dan memberikan lebih banyak ruang kepada konten utama. Navigasi tetap tersemat di atas, yang juga sangat masuk akal dari segi kegunaan.

Pendekatan lain digunakan oleh situs web Guinness: Logo ditempatkan bersama nama perusahaan. Saat digulir, logo menjadi sedikit lebih kecil dengan navigasi tetap terlihat. Begitu pengguna mulai menggulir ke atas, logo dan navigasi kembali membesar, karena diharapkan pengguna ingin mengunjungi halaman lain.

Commerzbank tidak menyelesaikannya dengan sempurna dalam situs web mereka. Logo ditempatkan bersama nama perusahaan sebagai SVG, yang merupakan solusi yang baik. Namun, logo ini bersaing kuat dengan poin navigasi di sebelahnya. Saat digulir, navigasi menghilang sepenuhnya dan pengguna harus menggulir kembali ke atas untuk melihat navigasi lagi. Lebih baik jika navigasi langsung muncul begitu pengguna mulai menggulir ke atas, seperti yang dilakukan oleh zeit.de.

Dalam hal optimisasi konversi, Commerzbank telah menyelesaikan dengan baik dengan gambar besar yang menyoroti kedua orang. Mereka mengarahkan pandangan ke tombol, yang secara otomatis juga mengarahkan perhatian pengunjung ke tombol. Panduan pandangan semacam itu ke Call-to-Action sangat efektif. Bagus sekali, Commerzbank!

Menarik saat kita melihat contoh-contoh dalam versi mobile.

Pada versi mobile, logo Victorinox ditampilkan lebih kecil dan ditempatkan di tengah untuk lebih memperjelas kemungkinan interaksi pengguna. Guiness telah menempatkan teks di sebelah kanan logo alih-alih di bawahnya. Sehingga, harfa memiliki lebih banyak ruang dan garis navigasi teratas tidak terlalu besar. Sebaliknya, Commerzbank hanya memudar teks dalam resolusi smartphone.

Peran logo responsif dalam pengalaman pengguna sangat penting karena membantu menjaga konsistensi visual dan identitas merek, terlepas dari bagaimana pengguna mengakses situs web.

Jika sebuah logo tidak merespons dengan baik terhadap perubahan resolusi, logo dapat menarik terlalu banyak perhatian pengguna. Dalam contoh Hypovereinsbank berikut ini, logo yang sangat dominan bersaing dengan Call-to-Action yang ditempatkan di sebelah kanan, terutama dalam tampilan smartphone. Titik navigasi yang berwarna abu-abu di tengah sering terlewatkan dalam tampilan desktop. Secara umum, situs web ini juga memiliki beberapa kesalahan UX lainnya.

Desainer harus menyediakan beberapa adaptasi logo untuk memastikan logo responsif. Logo juga harus berfungsi dengan baik di berbagai latar belakang, dan dalam berbagai ukuran. Oleh karena itu, semakin kecil resolusinya, semakin berkurang detailnya logo. Namun, logo tidak boleh kehilangan inti merek. Inilah seni tinggi dalam penggunaan Logo Responsif. Jika Anda akan meluncurkan ulang merek, maka pertimbangkanlah persyaratan ini saat menggunakan logo mendatang Anda.

Format File Logo Situs Web

Penggunaan Logo Responsif masuk akal, karena berdasarkan resolusi maka ukuran yang tepat akan dimuat. Pada resolusi yang lebih kecil, misalnya pada smartphone, hanya grafik yang lebih kecil yang dimuat. Hal ini menghemat waktu muat. Namun, efek terbesar pada waktu muat Anda akan dicapai ketika Anda:

1. Menyertakan logo dalam resolusi yang tepat (juga dengan keterangan tinggi dan lebar). Seringkali logo dimuat dalam resolusi terlalu tinggi dan kemudian diturunkan untuk ditampilkan.
2. Menyertakan Logo dalam format Vektor SVG daripada PNG atau JPG.

Menggunakan Logo Situs Web sebagai Favicon

Gunakan juga bentuk yang disederhanakan dari logo Anda sebagai Favicon. Hindari juga teks atau elemen kecil lain yang tidak terlihat dalam resolusi kecil Favicon.

Meskipun situs web Guinness dari contoh di atas menggunakan logo secara responsif dengan baik, namun sebagai Favicon tidak optimal. Teks Guinness putih kecil tersebut tidak terlihat dan menyusutkan keseluruhan penampilannya dalam Favicon. Kontrasnya rendah. Kesannya akan lebih jelas tanpa teks dan hanya fokus pada harfa dalam logo. Hal ini telah diatasi lebih baik oleh contoh-contoh lain dalam artikel ini daripada Guinness.

Apabila Anda mencari agensi yang fokus pada logo responsif, jangan ragu untuk menghubungi kami. Kami dari 4eck Media adalah Profesional Pengalaman Pengguna.

Jika posisi profesional Anda penting, mungkin juga berbagai Paket Ikon dan Template Desain Perusahaan berikut ini menarik bagi Anda: