Perlu Kamu Tau, Bagaimana Merancang Tombol dan Interaksi UI Sesuai dengan Keadaan

Lewatlah sudah hari-hari di mana situs web adalah kumpulan gambar dan aset statis. Saat ini, pengalaman web dan seluler secara signifikan lebih interaktif daripada sebelumnya, dan sebagai desainer, kita perlu mengakomodasi hal itu.

Memahami cara mendesain interaksi mikro ini dengan elemen UI dapat membantu Anda menambah nilai pada produk Anda, dan meningkatkan pengalaman pengguna akhir. Dalam panduan ini kita akan mengeksplorasi cara menggunakan status tombol untuk membuat elemen interaktif dalam desain Anda.

Pilihan gaya tombol, bentuk dan status interaktif.

Apa itu Keadaan?

Sebelum kita dapat membahas bagaimana mendesain untuk keadaan, kita harus mendefinisikan apa itu keadaan. keadaan merujuk pada berbagai bentuk elemen yang dapat diambil berdasarkan konteks yang digunakan. Misalnya, sakelar lampu non-peredupan; sakelar memiliki dua keadaan, hidup dan mati, dan di setiap keadaan bagian itu terlihat berbeda. Hal yang sama berlaku untuk sesuatu seperti toggle switch di UI, di mana keadaan ‘on’ dapat diwakili oleh isian hijau, dan off dengan abu-abu.

Sebuah tombol memiliki status berbeda saat diaktifkan (hijau mengisi) dan mati (abu-abu diisi).

Namun, keadaan tidak hanya terbatas pada status ‘beralih’ statis, dan di dunia saat ini dengan bahasa ujung depan yang kuat, mereka bersifat interaktif dan berkembang.

Jenis status tombol di antarmuka

Untuk memahami jenis status apa yang digunakan dalam desain antarmuka, mari fokus pada tombol – elemen yang sangat umum digunakan untuk interaktivitas dalam desain UI. Tombol dapat memiliki beberapa status karena mereka adalah salah satu elemen yang paling berinteraksi dengan UI. Status berikut adalah status tombol CSS umum yang digunakan dalam pengembangan web.

  • Default : Tampilan tombol saat tidak berinteraksi, tetapi tersedia untuk berinteraksi. Ini juga bisa disebut keadaan ‘Normal’.
  • Arahkan kursor : Arahkan kursor khusus untuk desain web karena perangkat seluler biasanya tidak mendukung interaksi kursor. Ini adalah keadaan dimana sebuah tombol akan berada saat kursor mouse menggulirkan tombol di layar. Ini adalah kondisi yang membantu dalam mengindikasikan bahwa sesuatu dapat berinteraksi dengan ketika kursor bergerak di sekitar layar.
  • Fokus : Status fokus penting untuk aksesibilitas . Meskipun banyak gaya tidak menarik perhatian ke keadaan ini hari ini, kehadirannya sangat penting untuk menyorot tombol karena seseorang menggunakan ‘tab’ untuk menavigasi situs web. Seringkali Anda akan melihat status ini sebagai garis biru muda di sekitar tombol atau objek yang dapat diklik, tetapi ini bervariasi tergantung pada default browser.
  • Aktif : Keadaan aktif juga sering kurang dimanfaatkan. Keadaan aktif dapat digunakan untuk ‘klik’, atau tekan ke bawah tombol, dan mungkin sering menyerupai tampilan tombol ‘ditekan’.
  • Dinonaktifkan : Status ini menandakan bahwa tombol tidak tersedia untuk interaksi. Ini digunakan jika suatu proses dimuat sebagai cara memblokir tindakan, atau dalam situasi di mana tindakan terkait dengan fitur premium yang memerlukan peningkatan sebelum digunakan. Dalam kedua kasus itu harus dipasangkan dengan tooltip untuk menjelaskan mengapa tindakan tidak tersedia.
  • Memuat / Memproses : Keadaan pemuatan digunakan ketika suatu tindakan telah diambil dan sistem ‘bekerja’ untuk memprosesnya. Misalnya jika halaman menyimpan, atau file sedang diunggah, sering kali tombol akan berubah menjadi status pemuatan tempat teks berubah, dan pemintal kemajuan muncul. Ini sering dapat dipasangkan dengan keadaan dinonaktifkan untuk mencegah tindakan duplikat.

Jenis status dapat bervariasi tergantung pada elemen yang Anda desain. Misalnya, bidang input juga akan memiliki fokus, melayang, dan negara dinonaktifkan, tetapi juga dapat mencakup negara untuk bidang kosong, negara kesalahan, dan lain-lain.

Merancang status tombol

Saat mendesain status untuk tombol Anda, dan elemen UI lainnya, penting untuk diingat tujuan status yang ditayangkan sehingga Anda dapat merancang yang sesuai. Mulai dengan status tombol default Anda, kemungkinan ini adalah versi yang telah Anda petakan dalam desain Anda. Jika Anda belum mendesain tombol, tutorial ini akan membuat Anda lebih cepat dengan tombol dalam desain Anda.

Untuk memulai, akan sangat membantu untuk memetakan semua status tombol Anda berdampingan di papan seni sehingga Anda dapat melihat bagaimana mereka saling berhubungan. Anda juga ingin melakukan ini untuk jenis tombol lainnya (primer, sekunder, dll).

Matriks visual yang menggambarkan berbagai status tombol untuk satu set tombol primer dan sekunder.

Dari sini Anda dapat mulai menata keadaan bagian Anda, mengingat kebiasaan dan pola umum untuk setiap keadaan bagian, ini akan bervariasi tergantung pada gaya situs Anda.

Arahkan kursor

Status hover harus dirancang untuk menunjukkan bahwa status tombol dapat diklik. Gaya hover state yang umum adalah menggelapkan / mencerahkan warna latar belakang mengisi atau mengubah ketinggian atau posisi tombol.

Keadaan melayang diterapkan ke tombol default menggelapkan warna mengisi tombol.

Keadaan fokus

Keadaan fokus tombol secara tradisional mengikuti pola standar garis besar di sekitar tombol. Karena keadaan ini difokuskan pada aksesibilitas, akan sangat membantu untuk mengikuti konvensi agar lebih mudah dipahami. Sebagian besar browser modern memiliki status fokus default, dan jika memungkinkan harus dibiarkan tidak digunakan. Di Chrome ini adalah garis biru yang terlihat seperti ini.

Keadaan fokus diterapkan ke tombol default dengan pengisian hijau menambahkan garis biru.

Keadaan aktif

Keadaan aktif sering kurang digunakan tetapi melayani tujuan bermanfaat dalam desain UI gaya ‘datar’. Dengan beragam perangkat input, mouse, trackpads, tidak selalu jelas ketika Anda melakukan tindakan ‘klik’. Menggunakan status aktif, Anda dapat mendesain petunjuk visual halus bahwa tombol telah diklik.

Coba tambahkan batas yang lebih gelap, dan penggelapan latar belakang sedikit mengisi untuk memberi efek bahwa tombol ditekan ke halaman. Anda juga dapat menggunakan penskalaan untuk mengurangi ukuran tombol sedikit, untuk semakin memperkuat efeknya.

Keadaan aktif yang diterapkan pada tombol default menambahkan batas yang lebih gelap dan mempergelap isian.

Status dinonaktifkan

Status tombol yang dinonaktifkan harus dirancang untuk menyatakan bahwa suatu tindakan tidak tersedia saat ini. Karena itu Anda tidak ingin negara yang dinonaktifkan terlihat aktif. Teknik yang umum adalah mengurangi opacity untuk membuat tombol terlihat kurang menonjol. Anda tidak ingin mengubah warna dan gaya tombol karena Anda mungkin berisiko bingung untuk jenis tombol lain. Tetapi dengan mengurangi opacity Anda dapat mengurangi keunggulan tombol. Juga menghapus bayangan kotak atau ketinggian akan membantu menyampaikan pesan.

Status dinonaktifkan yang diterapkan pada tombol default menurunkan opacity untuk mengurangi keunggulan tombol.

Memuat status

Pendekatan umum untuk tombol pemuatan atau pemrosesan adalah pengenalan ikon, sering dianimasikan, bersamaan dengan label tombol. Menggunakan ikon pemintal atau pemuatan yang berputar saat pemrosesan berlangsung akan menunjukkan bahwa suatu tindakan sedang berlangsung.

Status pemuatan yang diterapkan ke tombol default memperkenalkan ikon pemintal animasi.

Hal-hal yang perlu diingat

Saat bekerja dengan desain tombol, dan merancang status untuk elemen UI interaktif ini, penting untuk mengingat beberapa hal.

  • Ikuti konvensi umum – Tombol adalah elemen UI yang sangat interaktif dan umum. Ada harapan yang dimiliki pengguna tentang bagaimana mereka berperilaku dan berfungsi. Hindari menciptakan kembali roda terlalu banyak untuk menghindari kebingungan.
  • Tetap konsisten dengan gaya Anda – Menyimpang secara drastis dari gaya situs web, produk, atau merek Anda dapat membuat tombol Anda terasa asing dengan pengalaman yang Anda buat. Pertahankan status dalam batasan merek Anda.
  • Uji status Anda – Jangan lupa pentingnya pengujian, bahkan untuk sesuatu yang sekecil status tombol. Memahami bagaimana orang bereaksi, dan berinteraksi dengan negara Anda dapat membuat dampak besar pada bagaimana mereka mengalami produk Anda.
  • Hindari animasi yang rumit – Animasi dan transisi sederhana dapat menambah nilai pada status Anda, membuatnya jelas bahwa Anda berpindah antar negara. Namun, menggunakan animasi CSS yang kompleks, putaran, dan efek mewah dapat mengalihkan perhatian dari maksud tindakan.

Seperti halnya tombol, status dapat diterapkan ke banyak elemen di UI Anda untuk membuatnya terasa dinamis, memberikan umpan balik pengguna yang berharga dalam aplikasi, dan mengarahkan pemirsa ke tujuan dan tindakan yang ingin Anda ambil. Berhati-hatilah, dan rancang interaksi ini dengan sengaja untuk memastikan hasil terbaik.

sumber: xd.adobe.com

Latest articles

12.6k Followers
Follow

Related articles