Pada artikel ini, saya ingin berbicara tentang salah satu elemen yang paling umum digunakan pada desain input UI. Bidang input memungkinkan pengguna untuk memasukkan teks ke UI. Mereka biasanya muncul dalam bentuk dan dialog.
Di bawah ini Anda akan menemukan elemen-elemen bidang input bersama dengan aturan praktis tentang cara mendesainnya.
Bagian input bidang
Bidang input terdiri dari bagian-bagian berikut:
Wadah
Ikon terkemuka (elemen opsional)
Label
Placeholder / Input teks
Ikon tertinggal (elemen opsional)
Teks pembantu / Teks kesalahan (elemen opsional)
1. Wadah
Ukuran wadah harus proporsional dengan input pengguna yang diharapkan
Dalam bidang baris tunggal, saat kursor mencapai tepi bidang kanan, teks yang lebih panjang dari garis input akan bergeser ke kiri. Semakin banyak teks yang disembunyikan dari mata pengguna, semakin sulit bagi mereka untuk memvalidasi input. Idealnya, pengguna harus melihat semua inputnya tanpa perlu menggulir bidang input.
Lebar bidang juga menetapkan harapan pengguna – ini mengomunikasikan berapa banyak input yang diperlukan. Misalnya, jika Anda memiliki bidang input untuk ZIP di formulir Anda dan Anda tahu bahwa ZIP harus memiliki 5 digit, lebih baik untuk tidak membuat bidang terlalu lebar.
Wadah harus mudah ditemukan
Bidang input harus menonjol dan menunjukkan bahwa pengguna dapat memasukkan informasi. Harus ada kontras yang cukup antara wadah dan area sekitarnya.
Pengguna harus memahami keadaan bidang dalam sekejap
Bidang teks input dapat memiliki salah satu dari status berikut: default, fokus, kesalahan, dan dinonaktifkan. Semua negara harus dibedakan secara jelas satu sama lain.
Jangan mendesain bidang teks agar terlihat mirip dengan tombol
Tampilan visual elemen UI memainkan peran kunci dalam proses mendekode maknanya. Cara objek terlihat memberi pengguna gagasan tentang bagaimana mereka seharusnya berinteraksi dengannya. Itulah mengapa sangat penting untuk membuat bidang input terlihat seperti bidang input, bukan tombol atau elemen UI lainnya.
Pilih gaya visual untuk wadah Anda berdasarkan estetika aplikasi Anda
Haruskah saya menggunakan sudut bulat atau sudut persegi untuk wadah? Tidak ada jawaban yang cocok untuk semua pertanyaan ini. Selalu gunakan yang paling sesuai dengan gaya visual aplikasi Anda.
2. Ikon pemimpin
Sementara ikon terkemuka adalah elemen opsional dalam beberapa kasus, dimungkinkan untuk menciptakan pengalaman pengguna yang lebih baik dengan memperkenalkan ikon yang relevan di sebelah kotak input. Ikon yang dipilih dengan tepat membantu pengguna memahami arti bidang dalam sekilas (pengguna tidak perlu membaca label).
3. Teks label
Teks label digunakan untuk memberi tahu pengguna tentang informasi apa yang diminta untuk bidang teks. Setiap bidang teks harus memiliki label.
Hapus label
Tujuan utama label adalah untuk membantu pengguna memahami informasi apa yang diperlukan dalam satu pandangan. Karena itu, selalu mencoba untuk menulis label yang jelas dan jelas.
Jumlah kata
Label bukan teks bantuan. Hindari label yang panjang; gunakan label ringkas, pendek dan deskriptif (satu atau dua kata) sehingga pengguna dapat dengan cepat memindai formulir Anda.
Teks label harus selalu terlihat
Ada dua pendekatan yang biasa digunakan untuk teks label:
Label berjajar atas – label yang terletak di dekat bagian atas wadah.
Label mengambang. Label berjalan di atas wadah saat pengguna berinteraksi dengan bidang.
Kedua pendekatan itu bagus dalam hal UX, dan Anda harus memilih salah satu yang paling sesuai dengan gaya Anda.
Teks label tidak boleh terpotong
Pengguna perlu meluangkan waktu ekstra untuk mendekode makna label yang terpotong.
Teks label tidak boleh mengambil banyak baris
Jika Anda perlu memberikan informasi tambahan dalam konteks bidang, pertimbangkan untuk menggunakan teks Helper (lihat bagian 7).
4. Placeholder / Input teks
Placeholder adalah teks yang dilihat pengguna sebelum mereka berinteraksi dengan bidang. Teks input adalah teks yang dimasukkan pengguna ke dalam bidang teks.
Hati-hati dengan teks placeholder dan kontrasnya
Penting untuk memilih teks yang tepat untuk placeholder. Misalnya, jika Anda meminta pengguna untuk memberikan kota, jangan gunakan nama kota sebagai pengganti. Ini akan menyesatkan pengguna untuk berpikir teks pengganti adalah entri.
Berikan format input bila perlu
Jangan membuat pengguna menebak format apa yang harus mereka gunakan untuk bidang. Beri tahu informasi ini di muka.
Dalam beberapa kasus, lebih baik menggunakan pemformatan otomatis – bidang menyesuaikan informasi yang diberikan pengguna secara otomatis (sesuai dengan format). Itu membuatnya lebih mudah untuk memvalidasi informasi dalam suatu formulir.
Keadaan fokus
Anda perlu menyorot bidang aktif menggunakan visual.
Selalu perlihatkan kursor saat bidang aktif. Kursor harus menunjukkan posisi pengguna saat ini di bidang. Ini mencegah pengguna dari operasi yang tidak perlu.
Berikan awalan / akhiran
Awalan dan akhiran berfungsi dengan baik saat bidang memiliki ukuran tertentu. Misalnya, bidang input untuk jumlah uang (awalan atau akhiran dapat menunjukkan mata uang) atau berat (akhiran dapat menunjukkan satuan massa).
Menetapkan nilai default
Lebih baik untuk menghindari default statis kecuali Anda benar-benar yakin bahwa sebagian besar pengguna Anda (katakanlah, 95%) akan memilih nilai tertentu. Apalagi jika informasi dari bidang ini penting bagi Anda. Mengapa? Karena orang memindai formulir dengan cepat dan banyak yang akan mengabaikan bidang yang sudah memiliki nilai.
Satu-satunya pengecualian untuk aturan ini adalah default pintar. Default pintar dapat membuat penyelesaian formulir pengguna lebih cepat dan lebih akurat. Misalnya, pra-pilih negara pengguna berdasarkan data geolokasi mereka. Tapi tetap saja, Anda harus menggunakan ini dengan hati-hati, karena pengguna cenderung meninggalkan bidang yang sudah dipilih sebelumnya.
5. Ikon trailing
Ikon Trailing adalah ikon kecil yang memiliki kekuatan besar – dapat membantu mengurangi biaya interaksi.
Ikon trailing ‘Clear’
Tampilkan ikon ini untuk membantu pengguna menghapus teks di bidang dalam satu ketukan.
Ikon ‘Salib’ atau ‘Periksa’
Jika formulir Anda menggunakan validasi sebaris, Anda dapat menggunakan ikon tambahan untuk memberi tahu pengguna tentang input yang valid / tidak valid.
Ketika pengguna memberikan informasi yang salah, Anda juga dapat menampilkan pesan kesalahan. Pesan kesalahan harus ditampilkan di bawah wadah. Pesan kesalahan harus terlihat sampai kesalahan diperbaiki.
Catatan sisi: Pesan kesalahan yang baik seharusnya tidak hanya menyatakan fakta bahwa input pengguna tidak valid; itu harus memberikan instruksi kontekstual tentang cara memperbaiki masalah.
Ikon mata
Untuk bidang input yang mengumpulkan kata sandi, Anda dapat menunjukkan ikon ‘mata’ untuk memungkinkan pengguna melihat apa yang mereka ketikkan.
Ikon input suara
Ikon mikrofon menandakan bahwa pengguna dapat input suara tersedia untuk pengguna.
6. Teks pembantu / Teks kesalahan
Teks pembantu bertindak sebagai elemen bantu – menyediakan informasi tambahan tentang bidang input seperti:
Bagaimana informasi yang diberikan pengguna akan digunakan.
Persyaratan untuk informasi (yaitu pedoman pengaturan kata sandi)
Dalam beberapa kasus, teks pembantu dapat ditukar dengan teks kesalahan yang akan memandu pengguna (mis. Pesan kesalahan yang dilihat pengguna saat mereka memberikan input yang salah).
Teks pembantu bisa multiline
Pesan panjang dapat terbungkus menjadi beberapa baris jika tidak ada cukup ruang untuk menjelaskan konteksnya dengan jelas.
Pelajari cara mendesain antarmuka pengguna
Interaksi antara komputer dan manusia harus sama intuitifnya dengan percakapan antara dua manusia. Yayasan Desain Interaksi akan membantu Anda mempelajari cara mendesain untuk efisiensi dan persuasi.
sumber:uxplanet.org
Originally published at uxpro.cc
