,

4 Alasan Yang Bikin Pengunjung Betah di Halaman Web Kamu dengan Icon yang Bagus

Antarmuka (interface) adalah segalanya mengenai komunikasi dalam menyelesaikan sesuatu. Sebuah UI dalam website adalah alat untuk mencapai tujuan; dan pekerjaan seorang designer adalah untuk membuat antarmuka yang membantu pengguna untuk mencapai tujuan tersebut dengan cepat.

Icon memang sempurna jika digunakan untuk antarmuka karena mereka dapat menyampaikan makna tanpa kata.

Dalam tulisan ini terdapat beberapa cara dalam menggunakan icon untuk meningkatkan kualitas UX pada sebuah website.

Meningkatkan Navigasi

Icon secara alami membantu pengguna untuk menavigasi ke dalam website hanya berdasarkan visual saja. Icon terbaik adalah yang paling mudah dikenal orang lain.

Tetapi kamu dapat mendesain icon untuk link dengan label berupa teks untuk penggunaan yang lebih jelas.

Mari coba kita lihat situs portofolio dari Tim Roussilhe yang menggunakan menu navigasi vertikal.

 

 

 

 
Tim menambahkan icon-icon di atas setiap label link untuk membedakan antara tujuan dan perlakuan. Ini adalah salah satu metode penggunaan icon yang terbaik dalam hal kejelasan karena mudah dilihat dan mudah dipahami.

Maka, ingatlah agar selalu menggunakan label teks pada link juga. Penggunaan icon saja (tanpa ada label) dalam navigasi website jarang berfungsi dengan baik atau setidaknya itu bukan yang terbaik dalam hal kemudahan pengunaan.

Akan tetapi dengan situs seperti My Own Bike, kamu setidaknya dapat menduga kemana link akan pergi. Situs ini sepenuhnya berbahasa Jerman, tapi masih memberikan petunjuk dengan icon-icon yang ada.

 

 

 

 

 

 

 

 

 

 

 

 

Icon penting lainnya adalah icon menu three-bar. Icon ini juga bisa disebut hamburger menu. Sementara banyak designer membencinya, semakin banyak orang yang lambat menyadari arti dari simbol ini.

Sebuah menu pada Inc adalah contoh yang bagus dalam menampilkan bagaimana icon mengikat kepada navigasi.

Tren populer lainnya adalah mega navigation dropdown menu. Menu ini dapat ditemukan di situs seperti Mashable dimana di setiap linknya terdapat arah panah kecil ke bawah yang mengindikasikan bahwa itu adalah sebuah menu dropdown.

 

 

 

 

 

 

 

 

Sebenarnya icon ini tidak terlalu dibutuhkan, namun itu justru dapat meningkatkan user experience. Sebagian besar pengguna mengenali simbol panah tersebut dan mereka juga tau apa artinya.

Tentu saja navigasi ini dapat berfungsi tanpa menggunakan simbol panah, namun tidak bisa dipungkiri bahwa icon dapat membantu memperjelas tujuan dan membuat browsing situs menjadi lebih sederhana.

Visual untuk Mendukung  Tingkah Laku

Navigasi dapat melangkah jauh, tidak hanya berkutat tentang menu atas saja. Navigasi juga termasuk pada link yang ada pada halaman utama atau pada sidebar yang membantu pengguna dalam menavigasi sebuah website.

Icon juga bagus digunakan pada link di halaman utama atau body jika menonjol. Sebagai contoh pada halaman utama Media Temple kamu akan menemukan beberapa tabel dengan link “read more” dengan warna yang berbeda.

 

 

 

 

 

 

 

 

Semua icon link ini menggunakan arah panah ke samping kanan. Pada website, hal ini pada umumnya dikenali sebagai simbol untuk berpindah ke halaman selanjutnya.

Kebanyakan web browser mempunyai tombol forward dan back. Tombol forward mengarah ke kanan dan tombol back mengarah ke kiri, dan tombol ini membuat pengguna menavigasi pada riwayat browsernya. Jadi simbol arah panah kanan manapun, biasanya memang menyiratkan untuk terus menuju ke halaman selanjutnya.

Media Temple menggunakan hal ini sebagai kelebihan mereka dengan cara yang halus namun menonjol.

Salah satu item navigasi pada halaman sebuah website yang paling menonjol adalah Call in Action atau CAT. Icon dapat berfungsi dengan baik untu CTA yang berguna untuk tujaun tertentu.

Sebagai contoh JQuery mempunyai tombol download yang menonjol di pojok kanan atas pada halaman utamanya. Tombol CTA ini meliputi sebuah icon download di sebelah kiri teks.

 

 

Hal ini agar kamu tahu bahwa tombol tersebut berhubungan dengan mendownload sebuah file.

Akan tetapi sebuah tombol tidak harus selalu menimbulkan sebuah aksi pada browser. Sebuah CTA dapat mengarah ke halaman lain yang berhubungan dengan produk atau layananmu.

Icon dapat digunakan untuk menjual sebuah tombol dan mengarahkan pengunjung untuk menekannya. ResumeBaking merupakan sebuah contoh yang tepat dimana CTA mereka dikelilingi oleh icon-icon dengan arah panah melengkung.

 

 

 

 

 

 

 

 

 

Icon ini membantu dalam penjualan tombol dan produk dengan cara meminta pengguna untuk menekannya. Tetapi mereka menjual berdasarkan fitur seperti membuat sebuah resume gratis, membagikannya secara online, dan mendapatkan lowongan pekerjaan.

Ya, mungkin hal ini terlihat samar namun berfungsi. Banyak pengguna hanya melihat icon + arah panah dan menekan tombol berdasarkan perhatian mereka.

Mendeskripsikan Form

Setiap website mempunyai beberapa tipe form apakah itu form untuk mendaftar email, form login akun, atau bahkan hanya sekedar form kontak.

Icon dapat dipasangkan dengan form untuk membangun kepercayaan dan mendukung tingkah laku pengguna.

Intip situs Life Could Be Better dimana situs ini mempunyai form pendaftaran email yang tetap pada bagian bawah halaman. Form ini meliputi sebuah icon amplop kecil untuk menunjukkan kegunaan dan menarik daya perhatian.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hal ini juga berlaku untuk info kontak perusahaan dan link media sosial.

Icon digunakan mendeskripsikan konten disekitarnya. Dan karena visual lebih mudah untuk dipahami daripada kata-kata, maka hal ini akan menjadi masuk akal untuk membuat icon menjadi jelas dan mudah jika dilihat sekilas.

Teknik lain yang bagus adalah ketika desainer menambah icon pada isian di form pendaftaran. Hal ini berfungsi sangat baik ketika form mempunyai lebih dari 3-4 input dan pengguna harus mengisi semua isian.

Salah satu contohnya adalah pada WebDAM trial page yang menggunakan icon-icon yang berbeda pada tiap isian.

 

 

 

 

 

 

 

 

 

 

 

 

Icon di sini terlihat fantastis dan begitu menyatu dengan antarmuka.

Ditambah itu membantu pengguna dengan cepat mengenali apa yang tiap isian tersebut butuhkan. Karena label isian terletak di dalam form, maka label akan menghilang ketika kamu mulai mengisikan suatu informasi. Namun ini akan menjadi membingungkan ketika setelah kamu mengisi data dan kemudian lupa isian apa saja yang harus diisi.

Rekomendasi dari kami adalah menambahkan icon hanya dilakukan seperti ini ketika situsmu mempunyai lebih dari 3-4 isian di dalam form. Jika tidak, nanti akan terlihat bertele-tele.

Fitur & Penunjuk

Setiap startup baru, bisnis kecil, atau aplikasi berbasis web mempuyai serangkaian fitur dan alasan untuk mendatangkan orang ke situs mereka. Mungkin kamu dapat membuat daftar dari fiturnya, tetapi itu hanya akan membuat pengunjung bosan.

Sebagai gantinya cobalah menambahkan icon untuk membantu menjelaskan fitur dan tingkah laku umum. Visual harus mudah dipahami sehingga orang-orang tetap membaca lebih jauh ke bawah pada halaman situs.

 

 

 

 

 

 

 

 

 

 

 

Ambil contoh icon pada LightCMS. Icon tersebut sangat ramping dan terang sehingga dapat menyatu dengan halaman dengan mudah.

Tetapi icon tersebut juga menjelaskan fitur dan membantu pembaca meluncur di halaman utama dengan cepat. Icon-icon ini sendiri mungkin tidak menjual apapun pada LightCMS, namun mereka dapat membantu menjelaskan apa yang fitur tersebut lakukan dan mengapa itu berguna.

Terdapat kemiripan desain pada halaman fitur Disqus dengan icon terjajar disamping fitur yang berbeda-beda.

 

 

 

 

 

 

 

 

 

 

Kami menyukai desain ini karena icon menyatu dengan bagus dengan brand Disqus.

Dan meskipun Disqus membuat icon ini dari nol, kamu tidak perlu melakukannya. Masih banyak icon gratis yang dapat kamu download dan gunakan sesukamu.

Ringkasan

Icon adalah bagian alami dari keseluruhan antarmuka baik itu software desktop hingga website maupun aplikasi mobile. Tapi desain dan style secara konstan berubah sehingga menjadi sangat penting untuk selalu up-to-date dengan trend terakhir.

Kami harap panduan ini dapat membantumu mengukir pengalaman yang bagus dengan icon dalam berbagai kesempatan.

 

Sumber : designmodo

 

Ahmad Fauzi
Sesungguhnya hati ini. Terus hidup dengan memberikan arti. Karena sesungguhnya hikmah terbaik adalah berasal dari dalam diri. Diasah dengan hal yang memberati, bermanfaat dalam hal yang terpuji.
Loading Facebook Comments ...
Loading Disqus Comments ...
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *