Tips Design Button | Button merupakan salah satu komponen utama dalam sebuah website maupun aplikasi. Ia berperan sebagai alat untuk percakapan antara pengguna dengan sistem.
Contoh sederhana dari penggunaan button adalah pada kolom komentar di blog ini. Ketika hendak mengirimkan komentar, anda akan diminta untuk memasukan nama, email, komentar, lalu menekan button “kirim komentar”.
Button itulah yang akan berperan sebagai pengirim data yang sudah anda input ke database blog bingungonline. Dengan begitu, ketika sudah terkirim, saya bisa melihat data dari komentar anda.
Dari sini dapat kita pelajari bahwa button juga berperan sebagai alat untuk sebuah tindakan. Ketika user menekan button, artinya terdapat kesepakatan bahwa user telah menyetujui semua syarat dan ketentuan hingga akhirnya ia bermaksud untuk melihat dampak ketika telah menekan button tersebut.
Maka dari itu, sangat penting mendesign button yang sempurna untuk sebuah product. Dan melalui tulisan ini, saya akan membagikan tips design button untuk ux/ui designer
Memahami Cara Pembuatan Button
Untuk bisa mendesign button yang baik, kita perlu memahami dan mengetahui terlebih dahulu bagaimana cara atau proses pembuatan button.
Dalam web design, button biasanya dibuat dengan memberikan tag <a> atau membuat link kemudian pada css diberikan padding dengan ukuran yang diinginkan.
Contoh:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Button</title>
</head>
<body>
<!-- Button -->
<a href="#button" class="button">Button</a>
</body>
</html>CSS
/* Style Button */
.button {
color: #ffffff;
background-color: #FF9C71;
padding: 12px 32px;
border-radius: 100px;
}Bisa kita lihat pada pada kode di atas, padding top dan bottom berukuran 12px, sementara untuk left dan right adalah 32px.
Hal ini bisa kita implementasikan ketika proses UI design, dengan memberikan jarak atas bawah 12px dan kiri kanan 32px antara text dan shape.
- Untuk mengecek jarak seperti gambar di atas menggunakan Figma, anda bisa menselect shape lalu menekan tombol “alt” di keyboard, kemudian arahkan cursor ke text.
Dengan menerapkan metode design button seperti itu, kita bisa mempermudah developer untuk memahami design dan mengimplementasikannya ke pemrograman.
Hierarki Button
Sangat penting untuk mengklasifikasikan button berdasarkan fungsinya. Dengan membuat user tahu fungsi dari setiap button berdasarkan designnya, akan mengurangi interaksi yang tidak diinginkan akibat salah menekan button. Coba lihat gambar di bawah ini
Saya yakin dengan design seperti gambar di atas, user akan kesulitan menscan informasi yang ada. Mereka tidak bisa mengklasifikasikan secara cepat mana button utama untuk mereka tekan sebagai button login, dan mana yang sekadar button reset password.
Oleh sebab itulah, sangat penting untuk membedakan button-button tersebut.
Dalam sebuah website paling sedikit umumnya memiliki 3 jenis button.
Login sebagai primary button, karena dalam kondisinya tujuan utama user adalah login ke dalam sistem website tersebut. Sedangkan untuk secondary button adalah Create new account, hal ini karena membuat akun baru merupakan opsi kedua, apabila user yang datang ke halaman login belum memiliki akun. Sementara itu tertiary button diisi oleh reset password, hal ini dikarenakan reset password merupakan opsi cadangan apabila user lupa dengan password mereka ketika hendak login.
Label Button
Button dengan label yang tidak jelas dapat menyesatkan dan berujung membuat user kecewa. Sangat penting untuk membuat button dengan label yang jelas untuk memperjelas fungsi dari button tersebut.
Contoh sederhana dari maksud label button adalah ketika proses hendak menghapus sesuatu.
Dengan memberikan warna merah pada button tersebut, kita seolah-olah sudah mengingatkan user bahwa tindakan yang dia lakukan akan berdampak pada playlist terhapus.
Memastikan user terhadap tindakan yang mereka lakukan sangatlah penting. Karena itulah, memberikan label yang tepat berdasarkan fungsi dari button juga sangat penting.
Itulah tadi beberapa tips yang bisa teman-teman terapkan dalam mendesign button, baik untuk web design maupun mobile applikasi. Semoga bermanfaat, dan terima kasih.
One Reply to “Tips Design Button Untuk UI/UX Designer”