This page is enhanced for Mobile user. Visit our full website here.

Button Design For Website & Mobile Apps


10 Feb 2021 by Billy Gani

Button Design For Website & Mobile Apps
 
Tombol merupakan komponen fundamental dari setiap desain UX dan perlu dipikirkan secara matang. Kehadirannya menjadi sebuah elemen UI penting yang mempengaruhi keseluruhan interaksi desain Anda. Tombol memiliki kekuatan untuk membuat pengguna menghasilkan konversi atau melaksanakan tindakan tertentu. Tombol merupakan penengah di antara produk dan pengguna dan bertugas untuk membuat percakapan di sekitar pengguna dan website atau aplikasi Anda senantiasa berjalan.
 
Tetapi bagaimana Anda dapat memastikan desain tombol Anda memungkinkan kegunaan yang besar sambil tetap membuat gelombang kreatif di layar pengguna? Hal ini berbicara tentang mengurus detail dan juga menggunakan alat pembuatan prototipe favorit Anda.
 
Aturan Dasar Dalam Merancang Desain Tombol
 
Setiap hal tentunya memiliki beberapa aturan dasar yang harus dipertimbangkan. Desain tombol memang  terlihat cukup mudah untuk dirancang tetapi hadir dengan banyak faktor yang tampaknya kecil dan harus dipertimbangkan oleh desainer. Berikut ini adalah beberapa panduan untuk diikuti dalam desain UX Anda berikutnya.
 
Buat Kehadirannya Mudah Di Klik 
 
Setiap kali pengguna menggunakan produk apapun, mereka harus memecahkan kode dari makna dan fungsi di balik setiap elemen dalam antarmuka yang mereka temukan. Sama seperti semua elemen lainnya, Anda tidak ingin menghabiskan waktu lama untuk memahami dan memecahkan kode dari elemen apapun yang mereka lihat pada website Anda - semakin lama prosesnya, semakin buruk fungsi penggunaan dari website atau aplikasi Anda.
 
Inilah mengapa Anda perlu berhenti dan bertanya-tanya apakah tombol yang Anda miliki benar-benar terlihat dapat diklik. Sebagai desainer, Anda tentunya sangat familiar dengan kreasi Anda. Anda mengetahui setiap interaksi kecil, setiap tautan. Pengguna, di sisi lain, belum pernah melihat produk Anda dan tidak tahu apa fungsi atau cara kerjanya. Anda tidak dapat memastikan bahwa pengguna akan dengan mudah mengenali tombol untuk tautan yang Anda sertakan, dan lebih baik jika Anda tidak memberikan ruang keraguan dalam benak mereka.
 

 
Jadi, coba gunakan bentuk dan gaya tombol yang familiar baik untuk Anda maupun untuk pengguna. Hal tersebut termasuk tombol persegi, kotak bulat, atau bentuk tombol lain yang dapat ditemukan orang pada antarmuka secara umum. Kami memahami bahwa setiap desainer ingin menjadi orisinal dalam karyanya, tetapi tidak ada gunanya memberikan sesuatu yang benar-benar unik jika orang tidak dapat menggunakannya.
 
Kami merekomendasikan kotak bulat dengan shadow di belakangnya. Anda dapat menambahkannya, karena hal tersebut menambahkan kesan kedalaman yang menunjukkan kepada pengguna bahwa tombol dapat diklik. Anda juga dapat menambahkan interaksi mikro di dalamnya sehingga ketika kursor berada di atas tombol, ada reaksi yang terjadi. Hal tersebut dapat berupa sedikit perubahan warna atau gerakan kecil ke atas - bagian yang penting adalah pengguna mengetahui bahwa elemen tersebut dapat diklik.
 
Buat Kehadiran Mudah Ditemukan & Diprediksi
 
Sama seperti kita semua yang terbiasa dengan jenis desain tombol tertentu dalam hal bentuk, pengguna juga memiliki gagasan tentang di mana tombol harus diletakkan pada layar tertentu. Mereka membuka halaman website dan berharap menemukan tombol itu dengan segera - tidak ada pengguna yang senang mencari-cari tombol untuk ditekan.
 
Hal ini menjadi harapan yang telah terbentuk sebelumnya dari website manapun dan yang terbaik adalah jika Anda tidak melawannya. Dibandingkan hal tersebut, cobalah untuk menerapkannya pada desain Anda sebagai titik awal, dan lihat bagaimana Anda dapat meningkatkannya menjadi sesuatu yang sesuai dengan gaya Anda.
 
Alasan mengapa Anda tidak ingin melawan pendapat pengguna tentang ke mana tombol harus diarahkan adalah karena setiap fungsi memerlukan desain yang dapat diprediksi - termasuk desain tombol. Anda ingin produk Anda masuk akal bagi pengguna, dan memastikan kemampuan tersebut untuk dapat ditemukan dan dipelajari dengan baik. Hal ini berarti bahwa dengan mencerminkan ekspektasi orang-orang pada desain Anda, Anda mempermudah mereka untuk menavigasi produk untuk pertama kalinya dan mempelajari cara kerjanya atau apa manfaatnya bagi mereka.
 
Berikan warna yang kontras untuk mengarahkan perhatian pengguna ke tombol, dan untuk menyampaikan bahwa tombol tersebut penting. Manfaatkan sepenuhnya ruang negatif untuk mengarahkan pandangan pengguna melalui layar dan langsung ke tombol, bukan malah dengan membiarkan pengguna mengkonsumsi berbagai konten sebelum mereka dapat melihat tombol Anda dengan jelas.
 
Saat memikirkan tentang bagaimana desain tombol Anda mempengaruhi kegunaan produk Anda, penting bagi Anda untuk memperhitungkan kebutuhan konsistensi dalam produk Anda. Bahkan jika Anda membuat tombol Anda terlihat seperti produk yang diharapkan banyak pengguna dan meletakkannya di tempat yang sama pada layar - jika setiap tombol terlihat berbeda, pengguna akan bingung akan tombol tersebut yang entah memiliki fungsi yang sama atau akan berperilaku dengan cara yang sama seperti tombol lainnya. 
 
Anda harus memiliki desain tombol yang koheren yang menonjol pada setiap layar website Anda, apapun fitur yang terkait dengannya. Setelah Anda memiliki gaya yang dapat Anda aplikasikan pada semua tombol Anda, tetapkan tempat standar untuk tombol dalam website Anda. Ikuti logika dan ekspektasi umum pengguna - misalnya, saat dihadapkan dengan tombol "sebelumnya" atau "berikutnya", sebagian besar pengguna mengharapkan "sebelumnya" berada di sebelah kiri sementara "berikutnya" ada di kanan.
 
Beri Tahu Pengguna Apa Fungsi Setiap Tombol - Jangan Membuat Mereka Menebak
 
Jangan pernah percaya jika ada yang memberitahu Anda bahwa microcopy tidaklah penting. Memang, seorang penulis akan membela bahwa setiap kata penting dalam menyampaikan pesan, tetapi hal tersebut tidak membuatnya menjadi kurang benar. Desain tombol Anda tidak akan lengkap tanpa microcopy yang tepat.
 
Teks yang masuk ke dalam tombol Anda tidak perlu dibatasi menjadi sebatas "Oke" dan "Batal". Faktanya, fungsi kegunaan dari website Anda akan meningkat dengan mengesampingkan istilah umum tersebut dan berfokus pada tindakan yang dilakukan setiap tombol. Memiliki tombol yang bertuliskan "Hapus secara permanen" atau "Batalkan pemesanan" dapat menjamin bahwa pengguna Anda memahami setiap tombol, dan bahkan meningkatkan kegunaan dengan mengurangi kemungkinan pengguna melakukan kesalahan.
 
Tip lain yang berguna adalah dengan tidak menuliskan popup dialog yang hanya memiliki tombol klasik dengan kata "Lanjutkan" atau "Batal". Sebaliknya, Anda dapat mencoba untuk membuat kotak yang memiliki setidaknya satu baris teks yang menjelaskan tindakan apa yang diambil dan apa artinya bagi pengguna.
 
Ukuran Penting Diperhatikan - Buatlah Tombol Yang Dapat  Diklik Pengguna
 
Merancang Desain juga berarti memutuskan seberapa besar yang Anda inginkan untuk setiap tombol. Hal ini mungkin terlihat  seperti detail kecil, padahal sebenarnya tidak.
Ukuran tombol Anda sangat penting untuk desain dari perangkat seluler. Membuat tombol yang terlalu besar akan menghasilkan layar yang terisi penuh secara visual, sedangkan tombol yang terlalu kecil tidak dapat diklik dengan jari biasa. Penelitian dari Touch Lab MIT menerbitkan sebuah penelitian pada tahun 2003 yang menemukan bahwa sebagian besar ujung jari memiliki lebar 8-10mm.
 
Implikasi yang jelas dari hal ini adalah Anda tidak ingin tombol Anda menjadi lebih kecil dari 10mm - kecuali Anda bersedia mengambil risiko dari fungsi kegunaan desain Anda yang kemungkinan bahwa pengguna Anda memiliki jari yang sangat kecil. Konversi utama dari layar manapun, harus menjadi tombol terbesar yang terlihat. Hal tersebut juga berlaku jika Anda memiliki dua tombol yang berlawanan - buat tombol hasil positif tampak lebih penting dengan membuatnya sedikit lebih besar daripada tombol negatif.
 
Tidak ada desainer yang mampu menjalani hidup mereka tanpa mengkhawatirkan daya tanggap saat ini, bahkan dalam hal desain tombol. Anda perlu memperhitungkan kemungkinan penggunaan beberapa perangkat saat melihat dan berinteraksi dengan desain Anda. Hal ini dapat dilakukan dengan memperhitungkan perubahan yang ditentukan dalam ukuran tombol tergantung pada ukuran layar yang disukai pengguna.
 
 
Berikut adalah beberapa tips dalam merancang desain tombol untuk website atau aplikasi perangkat yang lebih baik yang dapat mulai Anda terapkan. Jika Anda masih membutuhkan bantuan, kami dapat membantu.
 
Eannovate sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik dapat membantu anda dalam bidang UI UX Design di Jakarta. Atau juga jika sebenarnya anda hanya memerlukan aplikasi perangkat dan website sederhana yang berkualitas dengan harga yang terjangkau, ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta dengan memberikan website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
 
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk melengkapi bisnis anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
 
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru dan terkini? Anda dapat mengunjungi blog kami, AlterSpace.
 
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta,  jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
 
Email : hello@eannovate.com atau menggunakan contact form.
 
 
 
 
 
Reference : JustInMind